Skip to content

Commit

Permalink
fix(breadcrumb): update styling for collapse mode wrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@inikolova @joneff
inikolova authored and joneff committed Sep 3, 2020
1 parent e8b37d2 commit a26d603
Show file tree
Hide file tree
Showing 3 changed files with 283 additions and 0 deletions.
20 changes: 20 additions & 0 deletions packages/default/scss/breadcrumb/_layout.scss
View file
Expand Up @@ -65,6 +65,7 @@
margin-right: $breadcrumb-root-link-spacing;
}

.k-breadcrumb-link > .k-image,
.k-breadcrumb-icontext-link .k-icon {
margin-right: $breadcrumb-link-icon-spacing;
}
Expand All @@ -87,6 +88,19 @@
width: 100%;
height: 100%;
}

&.k-breadcrumb-wrap {
.k-breadcrumb-root-item-container {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;

display: flex;
align-items: flex-start;
flex: 0 0 auto;
}
}
}

.k-ie9 {
Expand All @@ -105,6 +119,12 @@
.k-breadcrumb {
&[dir="rtl"],
.k-rtl & {
.k-breadcrumb-root-link {
margin-right: 0;
margin-left: $breadcrumb-root-link-spacing;
}

.k-breadcrumb-link > .k-image,
.k-breadcrumb-icontext-link .k-icon {
margin-right: 0;
margin-left: $breadcrumb-link-icon-spacing;
Expand Down
132 changes: 132 additions & 0 deletions tests/visual/breadcrumb-rtl.html
View file
Expand Up @@ -15,6 +15,138 @@
</head>
<body dir="rtl" class="k-rtl">
<div id="test-area">
<!-- Wrapping -> collapseMode=wrap -->
<h4>Wrapping -> collapseMode=wrap</h4>
<kendo-breadcrumb style="width: 400px;" class="k-widget k-breadcrumb k-breadcrumb-wrap" dir="rtl">
<ol class="k-breadcrumb-root-item-container">
<li class="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
<span class="k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icontext-link">
<span class="k-icon k-i-home"></span>
Start item
</span>
</li>
</ol>

<ol class="k-breadcrumb-container k-flex-wrap">
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
<span class="k-icon k-i-clock"></span>
First item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link">
<img class="k-image" src="https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg" width="20" height="20" />
Second item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span class="test"></span> Third item </span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
<span class="k-icon k-i-clock"></span>
</span>
</li>
<li class="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
Fifth item
</span>
</li>
</ol>
</kendo-breadcrumb>

<kendo-breadcrumb style="width: 400px;" class="k-widget k-breadcrumb k-breadcrumb-wrap" dir="rtl">
<ol class="k-breadcrumb-root-item-container">
<li class="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
<span class="k-cursor-pointer k-flex-none k-breadcrumb-root-link">
Start item
</span>
</li>
</ol>

<ol class="k-breadcrumb-container k-flex-wrap">
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
<span class="k-icon k-i-clock"></span>
First item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link">
<img class="k-image" src="https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg" width="20" height="20" />
Second item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span class="test"></span> Third item </span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
<span class="k-icon k-i-clock"></span>
</span>
</li>
<li class="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
Fifth item
</span>
</li>
</ol>
</kendo-breadcrumb>

<kendo-breadcrumb style="width: 400px;" class="k-widget k-breadcrumb k-breadcrumb-wrap" dir="rtl">
<ol class="k-breadcrumb-root-item-container">
<li class="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
<span class="k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icon-link">
<span class="k-icon k-i-home"></span>
</span>
</li>
</ol>
<ol class="k-breadcrumb-container k-flex-wrap">
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
<span class="k-icon k-i-clock"></span>
First item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link">
<img class="k-image" src="https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg" width="20" height="20" />
Second item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span class="test"></span> Third item </span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
<span class="k-icon k-i-clock"></span>
</span>
</li>
<li class="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
<span class="k-i-arrow-chevron-left k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
Fifth item
</span>
</li>
</ol>
</kendo-breadcrumb>


<!-- Navigation Mode -->
<h4>Navigation Mode</h4>
<nav id="breadcrumbs" class="k-widget k-breadcrumb" style="width: 660px;">
Expand Down
131 changes: 131 additions & 0 deletions tests/visual/breadcrumb.html
View file
Expand Up @@ -15,6 +15,137 @@
</head>
<body>
<div id="test-area">
<!-- Wrapping -> collapseMode=wrap -->
<h4>Wrapping -> collapseMode=wrap</h4>
<kendo-breadcrumb style="width: 400px;" class="k-widget k-breadcrumb k-breadcrumb-wrap" dir="ltr">
<ol class="k-breadcrumb-root-item-container">
<li class="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
<span class="k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icontext-link">
<span class="k-icon k-i-home"></span>
Start item
</span>
</li>
</ol>
<ol class="k-breadcrumb-container k-flex-wrap">
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
<span class="k-icon k-i-clock"></span>
First item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link">
<img class="k-image" role="presentation" src="https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg" width="20" height="20" />
Second item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span class="test"></span> Third item </span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
<span class="k-icon k-i-clock"></span>
</span>
</li>
<li class="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
Fifth item
</span>
</li>
</ol>
</kendo-breadcrumb>


<kendo-breadcrumb style="width: 400px;" class="k-widget k-breadcrumb k-breadcrumb-wrap" dir="ltr">
<ol class="k-breadcrumb-root-item-container">
<li class="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
<span class="k-cursor-pointer k-flex-none k-breadcrumb-root-link">
Start item
</span>
</li>
</ol>
<ol class="k-breadcrumb-container k-flex-wrap">
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
<span class="k-icon k-i-clock"></span>
First item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link">
<img class="k-image" role="presentation" src="https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg" width="20" height="20" />
Second item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span class="test"></span> Third item </span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
<span class="k-icon k-i-clock"></span>
</span>
</li>
<li class="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
Fifth item
</span>
</li>
</ol>
</kendo-breadcrumb>

<kendo-breadcrumb style="width: 400px;" class="k-widget k-breadcrumb k-breadcrumb-wrap" dir="ltr">
<ol class="k-breadcrumb-root-item-container">
<li class="k-flex-none k-breadcrumb-root-item k-breadcrumb-item">
<span class="k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icon-link">
<span class="k-icon k-i-home"></span>
</span>
</li>
</ol>

<ol class="k-breadcrumb-container k-flex-wrap">
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
<span class="k-icon k-i-clock"></span>
First item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link">
<img class="k-image" role="presentation" src="https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg" width="20" height="20"/>
Second item
</span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link"> <span class="test"></span> Third item </span>
</li>
<li class="k-flex-none k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link">
<span class="k-icon k-i-clock"></span>
</span>
</li>
<li class="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
<span class="k-i-arrow-chevron-right k-breadcrumb-delimiter-icon k-icon"></span>
<span class="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
Fifth item
</span>
</li>
</ol>
</kendo-breadcrumb>

<!-- Navigation Mode -->
<h4>Navigation Mode</h4>
<nav id="breadcrumbs" class="k-widget k-breadcrumb" style="width: 660px;">
Expand Down

0 comments on commit a26d603

Please sign in to comment.