@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/breadcrumb/_tailwind-dark-definition.scss

@@ -1 +1,71 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+// Size variables
+$breadcrumb-skin: 'tailwind' !default;
+$breadcrumb-last-item-font-weight: $font-weight-medium !default;
+$breadcrumb-font-size: $text-sm !default;
+$breadcrumb-bigger-font-size: $text-base !default;
+$breadcrumb-icon-font-size: $text-sm !default;
+$breadcrumb-icon-bigger-font-size: $text-base !default;
+$breadcrumb-padding: 3px 12px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 2px 16px !default;
+$breadcrumb-separator-padding: 3px 4px !default;
+$breadcrumb-separator-bigger-padding: 2px 4px !default;
+$breadcrumb-icon-color: $cool-gray-500 !default;
+$breadcrumb-icon-right-padding: 8px !default;
+$breadcrumb-icon-bigger-right-padding: 12px !default;
+$breadcrumb-collapsed-icon-padding: 4px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 3px 8px !default;
+$breadcrumb-collapsed-icon-font-size: $text-base !default;
+$breadcrumb-collapsed-icon-bigger-font-size: $text-lg !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -4px !default;
+$breadcrumb-icon-item-padding: 2px 0 !default;
+$breadcrumb-item-focus-padding: 2px 11px !default;
+$breadcrumb-item-focus-bigger-padding: 1px 15px !default;
+$breadcrumb-icon-only-item-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-bigger-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
+$breadcrumb-scroll-mode-lineheight: 26px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$breadcrumb-popup-item-line-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
+$breadcrumb-popup-item-bigger-line-height: 36px !default;
+$breadcrumb-normal-line-height: normal !default;
+$breadcrumb-menuitem-height: 1px !default;
+$breadcrumb-border-none: 0 !default;
+$breadcrumb-padding-none: 0 !default;
+$breadcrumb-margin-none: 0 !default;
+$breadcrumb-menu-item-margin: -1px !default;
+
+// Color variables
+$breadcrumb-item-color: $content-text-color-alt2 !default;
+$breadcrumb-separator-color: $content-text-color-alt2 !default;
+$breadcrumb-item-hover-color: $content-text-color-alt1 !default;
+$breadcrumb-item-focus-color: $content-text-color-alt1 !default;
+$breadcrumb-item-active-color: $content-text-color !default;
+$breadcrumb-item-hover-bgcolor: $transparent !default;
+$breadcrumb-item-active-bgcolor: $transparent !default;
+$breadcrumb-item-focus-bgcolor: $transparent !default;
+$breadcrumb-last-item-font-color: $content-text-color-alt2 !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-alt2 !default;
+$breadcrumb-collapsed-icon-color: $icon-color !default;
+$breadcrumb-collapsed-icon-hover-color: $icon-color-hover !default;
+$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
+$breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
+$breadcrumb-popup-item-color: $content-text-color !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $content-bg-color-focus !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

package/styles/breadcrumb/_tailwind-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 // Size variables
 $breadcrumb-skin: 'tailwind' !default;
 $breadcrumb-last-item-font-weight: $font-weight-medium !default;
@@ -31,8 +34,16 @@ $breadcrumb-scroll-mode-lineheight: 26px !default;
 $breadcrumb-popup-item-padding: 0 12px !default;
 $breadcrumb-popup-border-radius: 4px !default;
 $breadcrumb-popup-item-height: 32px !default;
+$breadcrumb-popup-item-line-height: 32px !default;
 $cmenu-li-hover-outline-offset: 0 !default;
 $breadcrumb-popup-item-bigger-height: 36px !default;
+$breadcrumb-popup-item-bigger-line-height: 36px !default;
+$breadcrumb-normal-line-height: normal !default;
+$breadcrumb-menuitem-height: 1px !default;
+$breadcrumb-border-none: 0 !default;
+$breadcrumb-padding-none: 0 !default;
+$breadcrumb-margin-none: 0 !default;
+$breadcrumb-menu-item-margin: -1px !default;
 
 // Color variables
 $breadcrumb-item-color: $content-text-color-alt2 !default;

package/styles/breadcrumb/_tailwind3-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 // Size variables
 $breadcrumb-skin: 'tailwind3' !default;
 $breadcrumb-last-item-font-weight: $font-weight-medium !default;
@@ -30,10 +33,23 @@ $breadcrumb-icon-only-item-bigger-padding: 2px 4px !default;
 $breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
 $breadcrumb-scroll-mode-lineheight: 30px !default;
 $breadcrumb-popup-item-padding: 0 12px !default;
-$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-border-radius: $radius-4 !default;
 $breadcrumb-popup-item-height: 32px !default;
+$breadcrumb-popup-item-line-height: 32px !default;
 $cmenu-li-hover-outline-offset: 0 !default;
 $breadcrumb-popup-item-bigger-height: 40px !default;
+$breadcrumb-popup-item-bigger-line-height: 40px !default;
+$breadcrumb-separator-font-size: $text-xs !default;
+$breadcrumb-menuitem-height: 1px !default;
+$breadcrumb-border-none: 0 !default;
+$breadcrumb-normal-line-height: normal !default;
+$breadcrumb-ol-font-weight: $font-weight-medium !default;
+$breadcrumb-text-padding: 5px !default;
+$breadcrumb-item-text-padding: 3px !default;
+$breadcrumb-padding-none: 0 !default;
+$breadcrumb-margin-none: 0 !default;
+$breadcrumb-home-icon-height: 16px !default;
+$breadcrumb-menu-item-margin: -1px !default;
 
 // Color variables
 $breadcrumb-separator-color: $content-text-color-alt4 !default;

package/styles/breadcrumb/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/breadcrumb/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('breadcrumb-theme') {
   .e-breadcrumb {
     .e-breadcrumb-item {
@@ -8,7 +10,7 @@
         &:focus {
           @if $skin-name == 'Material3' {
             background: $breadcrumb-item-hover-color;
-            border-radius: 4px;
+            border-radius: $breadcrumb-item-text-hover-border-radius;
           }
           @else if $skin-name != 'bootstrap5.3' {
             color: $breadcrumb-item-hover-color;
@@ -16,7 +18,7 @@
           @if $skin-name == 'fluent2' {
             background-color: $content-bg-color-hover;
             color: $breadcrumb-item-hover-color !important; /* stylelint-disable-line declaration-no-important */
-            border-radius: 4px;
+            border-radius: $breadcrumb-item-text-hover-border-radius;
 
             & .e-breadcrumb-icon {
               color: $toolbar-icon-color;
@@ -33,7 +35,7 @@
         &:active {
           @if $skin-name == 'Material3' {
             background: $breadcrumb-item-active-color;
-            border-radius: 4px;
+            border-radius: $breadcrumb-item-text-active-border-radius;
           }
           @else if $skin-name != 'bootstrap5.3' {
             color: $breadcrumb-item-active-color;
@@ -86,7 +88,7 @@
       @if $breadcrumb-skin == 'bootstrap5.3' {
         .e-breadcrumb-text:focus {
           box-shadow: $keyboard-focus-shadow;
-          border-radius: 4px;
+          border-radius: $breadcrumb-item-text-focus-border-radius;
         }
       }
 

package/styles/breadcrumb/bds.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/bootstrap-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/bootstrap.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/bootstrap4.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'bootstrap4-definition' as *;
+@use 'icons/bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/bootstrap5-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'icons/bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/bootstrap5.3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {
   content: "\e71c";
@@ -168,7 +248,7 @@
   padding: 4px 4px;
   vertical-align: bottom;
   margin-top: 2px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-breadcrumb .e-breadcrumb-menu {
   display: inline-block;
@@ -199,7 +279,7 @@
 
 .e-breadcrumb-popup {
   border: 1px solid var(--color-sf-border-light);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 16px 48px rgba(var(--color-sf-black), 0.175);
           box-shadow: 0 16px 48px rgba(var(--color-sf-black), 0.175);
   position: absolute;
@@ -293,7 +373,7 @@
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
   color: var(--color-sf-content-text-color-alt1);

package/styles/breadcrumb/bootstrap5.3.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'icons/bootstrap5.3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'icons/bootstrap5.3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/bootstrap5.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'bootstrap5-definition' as *;
+@use 'icons/bootstrap5' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/fabric-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'fabric-dark-definition' as *;
+@use 'icons/fabric-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/fabric.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'fabric-definition' as *;
+@use 'icons/fabric' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/fluent-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'fluent-dark-definition' as *;
+@use 'icons/fluent-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/fluent.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'fluent-definition' as *;
+@use 'icons/fluent' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {
   content: "\e71c";
@@ -204,7 +284,7 @@
 
 .e-breadcrumb-popup {
   border: 1px solid var(--color-sf-border-light);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
           box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
   position: absolute;
@@ -272,7 +352,7 @@
 }
 
 .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item a.e-breadcrumb-text:active .e-breadcrumb-icon {
@@ -301,7 +381,7 @@
   color: var(--color-sf-content-text-color-hover);
   background-color: var(--color-sf-content-bg-color-hover);
   color: var(--color-sf-content-text-color-hover) !important; /* stylelint-disable-line declaration-no-important */
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:hover .e-breadcrumb-icon, .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus .e-breadcrumb-icon {
   color: var(--color-sf-toolbar-icon-color);
@@ -311,7 +391,7 @@
 }
 .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
   color: var(--color-sf-content-text-color-alt1);
-  font-weight: 600;
+  font-weight: 500;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-icon {
   color: var(--color-sf-icon-color);

package/styles/breadcrumb/fluent2.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'icons/fluent2.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'icons/fluent2' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/highcontrast-light.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'icons/highcontrast-light' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/highcontrast.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'icons/highcontrast' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/breadcrumb/icons/_bds.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('breadcrumb-bds-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,

package/styles/breadcrumb/icons/_bootstrap-dark.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('breadcrumb-bootstrap-dark-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,

package/styles/breadcrumb/icons/_bootstrap.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('breadcrumb-bootstrap-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,

package/styles/breadcrumb/icons/_bootstrap4.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('breadcrumb-bootstrap4-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,

package/styles/breadcrumb/icons/_bootstrap5-dark.scss

@@ -1 +1 @@
-@import './bootstrap5.scss';
+@use './bootstrap5' as *;

package/styles/breadcrumb/icons/_bootstrap5.3.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap5.3-definition' as *;
 @include export-module('breadcrumb-bootstrap5-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,
@@ -10,14 +12,14 @@
     }
 
     .e-home {
-      height: 18px;
+      height: $breadcrumb-home-icon-height;
     }
   }
 
   .e-bigger .e-breadcrumb,
   .e-bigger.e-breadcrumb {
     .e-home {
-      height: 21px;
+      height: $breadcrumb-bigger-home-icon-height;
     }
   }
 }

package/styles/breadcrumb/icons/_bootstrap5.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('breadcrumb-bootstrap5-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,

package/styles/breadcrumb/icons/_fabric-dark.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('breadcrumb-fabric-dark-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,

package/styles/breadcrumb/icons/_fabric.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('breadcrumb-fabric-icons') {
   .e-breadcrumb {
     .e-breadcrumb-collapsed::before,

package/styles/breadcrumb/icons/_fluent-dark.scss

@@ -1 +1 @@
-@import './fluent.scss';
+@use './fluent' as *;