@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/styles/bootstrap5.scss

@@ -2,6 +2,7 @@
 @import 'v-scroll/bootstrap5.scss';
 @import 'toolbar/bootstrap5.scss';
 @import 'accordion/bootstrap5.scss';
+@import 'carousel/bootstrap5.scss';
 @import 'context-menu/bootstrap5.scss';
 @import 'tab/bootstrap5.scss';
 @import 'treeview/bootstrap5.scss';

package/styles/breadcrumb/_bootstrap5-definition.scss

@@ -5,10 +5,10 @@ $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: 4px 2px !default;
+$breadcrumb-padding: 0 !default;
 $breadcrumb-padding-left: 0 !default;
 $breadcrumb-padding-right: 0 !default;
-$breadcrumb-bigger-padding: 4px 2px !default;
+$breadcrumb-bigger-padding: 0 !default;
 $breadcrumb-separator-padding: 0 8px !default;
 $breadcrumb-separator-bigger-padding: 0 8px !default;
 $breadcrumb-icon-color: $icon-color !default;

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

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/breadcrumb/_fluent-definition.scss

@@ -43,10 +43,13 @@ $breadcrumb-item-focus-color: $content-text-color-alt1 !default;
 $breadcrumb-item-active-color: $content-text-color-alt1 !default;
 $breadcrumb-last-item-font-color: $content-text-color-alt1 !default;
 $breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
-$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt4 !default;
 $breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-focus !default;
+$breadcrumb-collapsed-icon-focus-color: $icon-color !default;
+$breadcrumb-collapsed-icon-focus-border: 1px solid $border-alt !default;
 $breadcrumb-collapsed-icon-color: $icon-color !default;
 $breadcrumb-collapsed-icon-hover-color: $icon-color !default;
+$breadcrumb-collapsed-icon-active-color: $icon-color-pressed !default;
 $breadcrumb-disabled-item-color: $content-text-color-disabled !default;
 $breadcrumb-icon-interaction-color: $icon-color !default;
 $breadcrumb-item-focus-border: $content-text-color-alt3 !default;

package/styles/breadcrumb/_layout.scss

@@ -50,7 +50,12 @@
       flex-shrink: 0;
 
       .e-breadcrumb-text {
-        padding: $breadcrumb-padding;
+        @if $skin-name == 'FluentUI' {
+          padding: 4px;
+        }
+        @else {
+          padding: $breadcrumb-padding;
+        }
 
         @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
           &:focus {
@@ -83,15 +88,42 @@
       a.e-breadcrumb-text {
         cursor: pointer;
         text-decoration: none;
+        @if $skin-name == 'FluentUI' {
+          border: 1px solid transparent;
+        }
 
         @if $breadcrumb-skin == 'bootstrap5' {
           text-decoration: underline;
         }
 
-        &:hover,
-        &:focus,
+        &:hover {
+          @if $skin-name == 'FluentUI' {
+            background-color: $content-bg-color-hover;
+            color: $content-text-color-alt3;
+          }
+          @else {
+            text-decoration: underline;
+          }
+        }
+
+        &:focus {
+          @if $skin-name == 'FluentUI' {
+            border: 1px solid $border-alt;
+            color: $content-text-color-alt1;
+          }
+          @else {
+            text-decoration: underline;
+          }
+        }
+
         &:active {
-          text-decoration: underline;
+          @if $skin-name == 'FluentUI' {
+            background-color: $content-bg-color-alt4;
+            color: $content-text-color-alt3;
+          }
+          @else {
+            text-decoration: underline;
+          }
         }
 
         @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'tailwind' {
@@ -358,7 +390,12 @@
     .e-breadcrumb-item {
 
       .e-breadcrumb-text {
-        padding: $breadcrumb-bigger-padding;
+        @if $skin-name == 'FluentUI' {
+          padding: 8px;
+        }
+        @else {
+          padding: $breadcrumb-bigger-padding;
+        }
 
         @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
           &:focus {

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

@@ -1,60 +1 @@
-// 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: 16px !default;
-$breadcrumb-collapsed-icon-bigger-font-size: 18px !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;
-$cmenu-li-hover-outline-offset: 0 !default;
-$breadcrumb-popup-item-bigger-height: 36px !default;
-
-// Color variables
-$breadcrumb-item-color: $content-text-color-alt2 !default;
-$breadcrumb-separator-color: $icon-color !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: $content-text-color-alt2 !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: $cool-gray-100 !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;
+@import './tailwind-definition.scss';

package/styles/breadcrumb/_tailwind-definition.scss

@@ -48,10 +48,10 @@ $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: $content-text-color-alt2 !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-alt2 !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;

package/styles/breadcrumb/_theme.scss

@@ -108,17 +108,23 @@
 
       &:active {
         background-color: $breadcrumb-collapsed-icon-active-bgcolor;
-        color: $breadcrumb-collapsed-icon-hover-color;
+        @if $skin-name == 'FluentUI' {
+          color: $breadcrumb-collapsed-icon-active-color;
+        }
+        @else {
+          color: $breadcrumb-collapsed-icon-hover-color;
+        }
       }
 
       &:focus {
-        background-color: $breadcrumb-collapsed-icon-focus-bgcolor;
-        color: $breadcrumb-collapsed-icon-hover-color;
-
-        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $skin-name == 'FluentUI' {
           border: $breadcrumb-collapsed-icon-focus-border;
           color: $breadcrumb-collapsed-icon-focus-color;
         }
+        @else {
+          background-color: $breadcrumb-collapsed-icon-focus-bgcolor;
+          color: $breadcrumb-collapsed-icon-hover-color;
+        }
       }
     }
 

package/styles/breadcrumb/bootstrap-dark.css

@@ -89,7 +89,15 @@
   text-decoration: none;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 

package/styles/breadcrumb/bootstrap.css

@@ -89,7 +89,15 @@
   text-decoration: none;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 

package/styles/breadcrumb/bootstrap4.css

@@ -89,7 +89,15 @@
   text-decoration: none;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 

package/styles/breadcrumb/bootstrap5-dark.css

@@ -74,7 +74,7 @@
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  padding: 4px 2px;
+  padding: 0;
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -105,7 +105,15 @@
   text-decoration: underline;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 
@@ -320,7 +328,7 @@
 
 .e-bigger.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text,
 .e-bigger .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  padding: 4px 2px;
+  padding: 0;
 }
 
 .e-bigger.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus,

package/styles/breadcrumb/bootstrap5.css

@@ -74,7 +74,7 @@
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  padding: 4px 2px;
+  padding: 0;
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -105,7 +105,15 @@
   text-decoration: underline;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 
@@ -320,7 +328,7 @@
 
 .e-bigger.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text,
 .e-bigger .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  padding: 4px 2px;
+  padding: 0;
 }
 
 .e-bigger.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus,

package/styles/breadcrumb/fabric-dark.css

@@ -92,7 +92,15 @@
   text-decoration: none;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 
@@ -433,8 +441,6 @@
 
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: transparent;
-  color: #38a9ff;
   border: 1px solid #c8c8c8;
   color: #dadada;
 }

package/styles/breadcrumb/fabric.css

@@ -92,7 +92,15 @@
   text-decoration: none;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 
@@ -433,8 +441,6 @@
 
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: transparent;
-  color: #0078d6;
   border: 1px solid #767676;
   color: #000;
 }