fix(breadcrumb): update breadcrumb styling to match in material and b…

…ootstrap design
telerik · Feb 25, 2021 · 5965c1d · 5965c1d
1 parent f76f2fd
commit 5965c1d
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 154 deletions.
diff --git a/packages/bootstrap/scss/breadcrumb/_layout.scss b/packages/bootstrap/scss/breadcrumb/_layout.scss
@@ -1 +1,16 @@
 @import "~@progress/kendo-theme-default/scss/breadcrumb/_layout.scss";
+
+@include exports( "breadcrumb/layout/bootstrap" ) {
+
+
+    // Breadcrumb links
+    .k-breadcrumb-link,
+    .k-breadcrumb-root-link {
+        text-decoration: $link-decoration;
+
+        &:hover,
+        &.k-state-hover {
+            text-decoration: $link-hover-decoration;
+        }
+    }
+}
diff --git a/packages/bootstrap/scss/breadcrumb/_theme.scss b/packages/bootstrap/scss/breadcrumb/_theme.scss
@@ -1 +1,18 @@
 @import "~@progress/kendo-theme-default/scss/breadcrumb/_theme.scss";
+
+@include exports( "breadcrumb/theme/bootstrap" ) {
+
+    // Current page (last item)
+    .k-breadcrumb-last-item {
+
+        .k-breadcrumb-link {
+            color: $breadcrumb-active-color;
+        }
+
+        .k-state-disabled {
+            opacity: 1;
+            filter: none;
+        }
+    }
+
+}
diff --git a/packages/bootstrap/scss/breadcrumb/_variables.scss b/packages/bootstrap/scss/breadcrumb/_variables.scss
@@ -27,29 +27,31 @@ $breadcrumb-icon-link-padding-y: $breadcrumb-icon-link-padding-x !default;
 $breadcrumb-root-link-spacing: $breadcrumb-link-padding-x !default;
 $breadcrumb-link-icon-spacing: $icon-spacing !default;
 
-$breadcrumb-link-text: $link-text !default;
+$breadcrumb-link-initial-text: inherit !default;
+
 $breadcrumb-link-bg: null !default;
+$breadcrumb-link-text: $link-text !default;
 $breadcrumb-link-border: null !default;
 
+$breadcrumb-link-hovered-bg: null !default;
 $breadcrumb-link-hovered-text: $link-hover-text !default;
-$breadcrumb-link-hovered-bg: try-darken( $hovered-bg, 1% ) !default;
 $breadcrumb-link-hovered-border: null !default;
 
-$breadcrumb-link-focused-text: $link-text !default;
 $breadcrumb-link-focused-bg: null !default;
+$breadcrumb-link-focused-text: null !default;
 $breadcrumb-link-focused-border: null !default;
-$breadcrumb-link-focused-shadow: inset 0 0 0 3px rgba($component-text, .25) !default;
+$breadcrumb-link-focused-shadow: inset 0 0 0 3px rgba( $breadcrumb-text, .25 ) !default;
 
-$breadcrumb-root-link-text: inherit !default;
 $breadcrumb-root-link-bg: null !default;
+$breadcrumb-root-link-text: $link-text !default;
 $breadcrumb-root-link-border: null !default;
 
-$breadcrumb-root-link-hovered-text: null !default;
-$breadcrumb-root-link-hovered-bg: try-darken( $hovered-bg, 1% ) !default;
+$breadcrumb-root-link-hovered-bg: null !default;
+$breadcrumb-root-link-hovered-text: $link-hover-text !default;
 $breadcrumb-root-link-hovered-border: null !default;
 
-$breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-bg: null !default;
+$breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-border: null !default;
 $breadcrumb-root-link-focused-shadow: $breadcrumb-link-focused-shadow !default;
 

diff --git a/packages/classic/scss/breadcrumb/_variables.scss b/packages/classic/scss/breadcrumb/_variables.scss
@@ -27,29 +27,31 @@ $breadcrumb-icon-link-padding-y: $breadcrumb-icon-link-padding-x !default;
 $breadcrumb-root-link-spacing: $breadcrumb-link-padding-x !default;
 $breadcrumb-link-icon-spacing: $icon-spacing !default;
 
-$breadcrumb-link-text: $link-text !default;
+$breadcrumb-link-initial-text: inherit !default;
+
 $breadcrumb-link-bg: null !default;
+$breadcrumb-link-text: $link-text !default;
 $breadcrumb-link-border: null !default;
 
-$breadcrumb-link-hovered-text: $link-hover-text !default;
 $breadcrumb-link-hovered-bg: $base-bg !default;
+$breadcrumb-link-hovered-text: $link-hover-text !default;
 $breadcrumb-link-hovered-border: null !default;
 
-$breadcrumb-link-focused-text: $link-text !default;
 $breadcrumb-link-focused-bg: null !default;
+$breadcrumb-link-focused-text: $link-text !default;
 $breadcrumb-link-focused-border: null !default;
 $breadcrumb-link-focused-shadow: $focused-shadow !default;
 
-$breadcrumb-root-link-text: inherit !default;
 $breadcrumb-root-link-bg: null !default;
+$breadcrumb-root-link-text: null !default;
 $breadcrumb-root-link-border: null !default;
 
-$breadcrumb-root-link-hovered-text: null !default;
 $breadcrumb-root-link-hovered-bg: $base-bg !default;
+$breadcrumb-root-link-hovered-text: null !default;
 $breadcrumb-root-link-hovered-border: null !default;
 
-$breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-bg: null !default;
+$breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-border: null !default;
 $breadcrumb-root-link-focused-shadow: $breadcrumb-link-focused-shadow !default;
 

diff --git a/packages/default/scss/breadcrumb/_layout.scss b/packages/default/scss/breadcrumb/_layout.scss
@@ -15,94 +15,105 @@
         flex-direction: row;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+    }
 
-        // Items
-        .k-breadcrumb-container {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            overflow: hidden;
-
-            &.k-flex-wrap {
-                flex-wrap: wrap;
-            }
-        }
 
-        .k-breadcrumb-item {
-            vertical-align: middle;
-            display: inline-flex;
-            flex-direction: row;
-            align-items: center;
-            overflow: hidden;
-        }
+    // Breadcrumb container
+    .k-breadcrumb-container,
+    .k-breadcrumb-root-item-container {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: hidden;
+    }
 
-        .k-breadcrumb-root-item {
-            flex: 1 0 auto;
+    .k-breadcrumb-container {
 
-            &.k-flex-none {
-                flex: none;
-            }
+        &.k-flex-wrap {
+            flex-wrap: wrap;
         }
+    }
+    .k-breadcrumb-root-item-container {
+        align-items: flex-start;
+        flex-shrink: 0;
+    }
 
-        .k-breadcrumb-link,
-        .k-breadcrumb-root-link {
-            @include border-radius( $breadcrumb-link-border-radius );
-            padding: $breadcrumb-link-padding-y $breadcrumb-link-padding-x;
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            align-self: stretch;
-            overflow: hidden;
-            white-space: nowrap;
-            text-decoration: none;
-            outline: none;
-        }
 
-        .k-breadcrumb-root-link {
-            margin-right: $breadcrumb-root-link-spacing;
-        }
+    // Breadcrumb item
+    .k-breadcrumb-item {
+        vertical-align: middle;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        overflow: hidden;
+    }
 
-        .k-breadcrumb-link > .k-image,
-        .k-breadcrumb-icontext-link .k-icon {
-            margin-right: $breadcrumb-link-icon-spacing;
-        }
 
-        .k-breadcrumb-icon-link {
-            padding: $breadcrumb-icon-link-padding-y $breadcrumb-icon-link-padding-x;
-        }
+    // Breadcrumb root item
+    .k-breadcrumb-root-item {
+        flex-shrink: 0;
+    }
 
-        .k-breadcrumb-delimiter-icon {
-            font-size: $breadcrumb-delimiter-icon-font-size;
-            opacity: $disabled-opacity;
-        }
 
-        // Editing
+    // Breadcrumb links
+    .k-breadcrumb-link,
+    .k-breadcrumb-root-link {
+        @include border-radius( $breadcrumb-link-border-radius );
+        padding: $breadcrumb-link-padding-y $breadcrumb-link-padding-x;
+        color: $breadcrumb-link-initial-text;
+        text-decoration: none;
+        white-space: nowrap;
+        outline: none;
+        cursor: pointer;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        align-self: stretch;
+        overflow: hidden;
+        transition: $transition;
+    }
+
+    .k-breadcrumb-root-link {
+        margin-right: $breadcrumb-root-link-spacing;
+    }
+
+    .k-breadcrumb-link > .k-image,
+    .k-breadcrumb-icontext-link .k-icon {
+        margin-right: $breadcrumb-link-icon-spacing;
+    }
+
+    .k-breadcrumb-icon-link {
+        padding: $breadcrumb-icon-link-padding-y $breadcrumb-icon-link-padding-x;
+    }
+
+
+    // Breadcrumb delimiter
+    .k-breadcrumb-delimiter,
+    .k-breadcrumb-delimiter-icon {
+        color: inherit;
+        font-size: $breadcrumb-delimiter-icon-font-size;
+        opacity: $disabled-opacity;
+    }
+
+
+    // Editing
+    .k-breadcrumb-input-container {
+        width: 100%;
+
         .k-breadcrumb-input-container {
-            width: 100%;
+            border-color: transparent;
         }
 
         .k-textbox {
             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;
-            }
-        }
     }
 
+
+    // Legacy
     .k-ie9 {
         .k-breadcrumb,
         .k-breadcrumb-container {