@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/styles/tab/_fluent-definition.scss

@@ -9,16 +9,16 @@ $tab-nrml-vertical-nav-arrow-size: 16px !default;
 $tab-nrml-vertical-nav-arrow-font-size: $text-xxs !default;
 
 $tab-text-transform: capitalize !default;
-$tab-big-height: 42px !default;
-$tab-nrml-height: 32px !default;
+$tab-big-height: 48px !default;
+$tab-nrml-height: 44px !default;
 $tab-focus-big-height: 42px !default;
 $tab-focus-nrml-height: 32px !default;
 $tab-active-big-height: 42px !default;
 $tab-active-nrml-height: 32px !default;
 $tab-active-focus-big-height: 42px !default;
 $tab-active-focus-nrml-height: 32px !default;
-$tab-big-fill-height: 42px !default;
-$tab-nrml-fill-height: 32px !default;
+$tab-big-fill-height: 48px !default;
+$tab-nrml-fill-height: 44px !default;
 $tab-mob-fill-height: 42px !default;
 $tab-focus-big-fill-height: 42px !default;
 $tab-focus-nrml-fill-height: 32px !default;
@@ -53,8 +53,8 @@ $tab-alt-hdr-border: 0 !default;
 
 $tab-items-border: 1px solid $primary-text-color !default;
 
-$tab-big-item-margin: 0 2px 0 0 !default;
-$tab-nrml-item-margin: 0 2px 0 0 !default;
+$tab-big-item-margin: 0 12px 0 0 !default;
+$tab-nrml-item-margin: 0 8px 0 0 !default;
 $tab-big-item-padding: 0 !default;
 $tab-nrml-item-padding: 0 !default;
 $tab-big-icon-top-bottom-item-height: 72px !default;
@@ -88,8 +88,8 @@ $tab-nrml-pop-item-height: 26px !default;
 $tab-alt-item-margin: 0 !default;
 $tab-big-rtl-item-margin: 0 !default;
 $tab-nrml-rtl-item-margin: 0 !default;
-$tab-big-rtl-alt-item-margin: 0 0 0 2px !default;
-$tab-nrml-rtl-alt-item-margin: 0 0 0 2px !default;
+$tab-big-rtl-alt-item-margin: 0 !default;
+$tab-nrml-rtl-alt-item-margin: 0 !default;
 $tab-mob-pop-item-height: 50px !default;
 $tab-ripple-bg-color: none !default;
 $tab-fill-ripple-bg-color: none !default;
@@ -99,8 +99,8 @@ $tab-alt-item-border: 0 !default;
 $tab-active-item-border: 0 !default;
 $tab-active-item-hide-border: 0 !default;
 $tab-active-item-border-color: $content-bg-color !default;
-$tab-big-boot-item-margin: 0 2px 0 0 !default;
-$tab-nrml-boot-item-margin: 0 2px 0 0 !default;
+$tab-big-boot-item-margin: 0 12px 0 0 !default;
+$tab-nrml-boot-item-margin: 0 8px 0 0 !default;
 $tab-big-scroll-boot-item-margin: 0 2px 0 0 !default;
 $tab-nrml-scroll-boot-item-margin: 0 2px 0 0 !default;
 $tab-mob-boot-item-margin: 0 2px 0 0 !default;
@@ -181,13 +181,13 @@ $tab-rtl-big-text-container-margin-right: 0 !default;
 $tab-rtl-nrml-text-container-margin-right: 0 !default;
 $tab-rtl-big-text-container-margin-left: 22px !default;
 $tab-rtl-nrml-text-container-margin-left: 20px !default;
-$tab-big-active-text-container-height: 42px !default;
-$tab-nrml-active-text-container-height: 32px !default;
-$tab-big-active-it-text-container-height: 42px !default;
-$tab-nrml-active-it-text-container-height: 32px !default;
+$tab-big-active-text-container-height: 48px !default;
+$tab-nrml-active-text-container-height: 44px !default;
+$tab-big-active-it-text-container-height: 48px !default;
+$tab-nrml-active-it-text-container-height: 44px !default;
 $tab-fill-big-active-it-text-container-height: 42px !default;
 $tab-fill-nrml-active-it-text-container-height: 32px !default;
-$tab-big-even-active-text-container-height: 42px !default;
+$tab-big-even-active-text-container-height: 48px !default;
 $tab-nrml-even-active-text-container-height: 32px !default;
 $tab-even-active-text-container-padding: 0 !default;
 $tab-even-active-text-container-margin: 0 !default;
@@ -213,7 +213,7 @@ $tab-rtl-big-pop-text-padding-left: 12px !default;
 $tab-rtl-nrml-pop-text-padding-left: 10px !default;
 $tab-big-even-active-text-height: 50px !default;
 $tab-nrml-even-active-text-height: 40px !default;
-$tab-fill-big-even-active-text-height: 50px !default;
+$tab-fill-big-even-active-text-height: 48px !default;
 $tab-fill-nrml-even-active-text-height: 40px !default;
 $tab-text-color: $content-text-color !default;
 $tab-disable-text-color:  $content-text-color-disabled !default;
@@ -245,8 +245,8 @@ $tab-mob-nav-vicon-size: 12px !default;
 $tab-big-icon-size: 16px !default;
 $tab-nrml-icon-size: 14px !default;
 $tab-mob-icon-size: 20px !default;
-$tab-big-icon-container-size: 24px !default;
-$tab-nrml-icon-container-size: 20px !default;
+$tab-big-icon-container-size: 16px !default;
+$tab-nrml-icon-container-size: 16px !default;
 $tab-mob-icon-container-size: 20px !default;
 $tab-big-nav-icon-top: 11px !default;
 $tab-nrml-nav-icon-top: 5px !default;
@@ -275,8 +275,8 @@ $tab-big-close-icon-size: 12px !default;
 $tab-nrml-close-icon-size: 10px !default;
 $tab-mob-close-icon-size: 12px !default;
 $tab-close-icon-minwidth: 12px !default;
-$tab-big-close-icon-margin: 0 0 0 8px !default;
-$tab-nrml-close-icon-margin: 0 0 0 6px !default;
+$tab-big-close-icon-margin: 0 0 0 10px !default;
+$tab-nrml-close-icon-margin: 0 0 0 8px !default;
 $tab-mob-close-icon-margin: 0 0 0 8px !default;
 $tab-rtl-mob-close-icon-margin: 0 8px 0 0 !default;
 $tab-rtl-big-close-icon-margin: 0 10px 0 0 !default;

package/styles/tab/_highcontrast-definition.scss

@@ -45,7 +45,7 @@ $tab-border-color: $selection-bg !default;
 $tab-disable-border-color: $disable !default;
 $tab-alt-border-color: $selection-bg !default;
 $tab-alt-disable-border-color: $disable !default;
-$tab-bg-color: $bg-base-0 !default;
+$tab-bg-color: transparent !default;
 $tab-border: 1px solid $border-default !default;
 
 $tab-alt-hdr-bg-color: $bg-base-20 !default;

package/styles/tab/_layout.scss

@@ -12,7 +12,7 @@
         height: auto;
         min-height: auto;
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' or $tbar-skin == 'FluentUI' {
           height: $tab-big-height;
           min-height: $tab-big-height;
         }
@@ -57,6 +57,9 @@
 
         .e-scroll-nav {
           width: 50px;
+          @if $tab-skin == 'FluentUI' {
+            width: 38px;
+          }
           @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
             border-radius: 4px;
             width: 38px;
@@ -200,6 +203,16 @@
           }
         }
 
+        @if $tab-skin == 'FluentUI' {
+          .e-icon-right {
+            margin: $tab-big-it-text-margin;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-mob-it-text-margin;
+            }
+          }
+        }
+
         .e-icon-left + .e-tab-text {
           margin: $tab-big-it-text-margin;
 
@@ -1303,6 +1316,16 @@
         .e-toolbar-item:not(.e-separator) {
           margin: $tab-big-rtl-item-margin;
 
+          @if $tab-skin == 'FluentUI' {
+            .e-icon-right {
+              margin: $tab-rtl-big-it-text-margin;
+
+              @media screen and (max-width: 480px) {
+                margin: $tab-rtl-mob-it-text-margin;
+              }
+            }
+          }
+
           .e-icon-left + .e-tab-text {
             margin: $tab-rtl-big-it-text-margin;
 
@@ -1467,7 +1490,7 @@
         min-height: $tab-nrml-height;
         position: relative;
 
-        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
+        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' or $tbar-skin == 'FluentUI' {
           height: $tab-nrml-height;
           min-height: $tab-nrml-height;
         }
@@ -1551,7 +1574,7 @@
         .e-scroll-nav {
           width: 40px;
           @if $tab-skin == 'FluentUI' {
-            width: 29px;
+            width: 32px;
           }
           @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
             border-radius: 4px;
@@ -1597,9 +1620,7 @@
         transition: left .125s cubic-bezier(.35, 0, .25, 1), right .25s cubic-bezier(.35, 0, .25, 1);
 
         @if $tab-skin == 'tailwind' {
-          border-radius: 2px;
-          bottom: -1px;
-          height: 2px;
+          border-radius: $tab-border-width;
           transition: all .4s cubic-bezier(.25,.46,.45,.94); // sass-lint:disable-line no-transition-all space-after-comma
         }
       }
@@ -1785,9 +1806,6 @@
         .e-icons.e-tab-icon {
           display: inline-flex;
           height: $tab-nrml-icon-container-size;
-          @if $tab-skin == 'FluentUI' {
-            height: $tab-big-nav-icon-size;
-          }
           min-width: $tab-nrml-icon-container-size;
           width: $tab-nrml-icon-container-size;
 
@@ -1822,6 +1840,16 @@
           }
         }
 
+        @if $tab-skin == 'FluentUI' {
+          .e-icon-right {
+            margin: $tab-nrml-it-text-margin;
+
+            @media screen and (max-width: 480px) {
+              margin: $tab-mob-it-text-margin;
+            }
+          }
+        }
+
         .e-icon-left + .e-tab-text {
           margin: $tab-nrml-it-text-margin;
 
@@ -2543,11 +2571,12 @@
 
               &::before {
                 background-color: $tab-alt-hdr-bg-color;
-                bottom: 5px;
+                bottom: 10px;
                 content: '';
                 height: 60%;
                 left: 99%;
                 position: absolute;
+                right: 0;
                 transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
                 width: 2px;
               }
@@ -2599,11 +2628,12 @@
 
               &::before {
                 background-color: $tab-alt-hdr-bg-color;
-                bottom: 5px;
+                bottom: 10px;
                 content: '';
                 height: 60%;
                 left: 0;
                 position: absolute;
+                right: 99%;
                 transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
                 width: 2px;
               }
@@ -2757,7 +2787,7 @@
       }
 
       &.e-progress {
-        overflow-x: hidden;
+        overflow: hidden;
       }
     }
 
@@ -3585,6 +3615,12 @@
         .e-toolbar-item:not(.e-separator) {
           margin: $tab-nrml-rtl-item-margin;
 
+          @if $tab-skin == 'FluentUI' {
+            .e-icon-right {
+              margin: $tab-rtl-nrml-it-text-margin;
+            }
+          }
+
           .e-icon-left + .e-tab-text {
             margin: $tab-rtl-nrml-it-text-margin;
           }
@@ -3823,6 +3859,16 @@
       }
     }
 
+    @if $tab-skin == 'FluentUI' {
+      .e-icon-right {
+        margin: $tab-nrml-it-text-margin;
+
+        @media screen and (max-width: 480px) {
+          margin: $tab-mob-it-text-margin;
+        }
+      }
+    }
+
     .e-icon-left + .e-tab-text {
       margin: $tab-nrml-it-text-margin;
 
@@ -4004,6 +4050,16 @@
       }
     }
 
+    @if $tab-skin == 'FluentUI' {
+      .e-icon-right {
+        margin: $tab-big-it-text-margin;
+
+        @media screen and (max-width: 480px) {
+          margin: $tab-mob-it-text-margin;
+        }
+      }
+    }
+
     .e-icon-left + .e-tab-text {
       margin: $tab-big-it-text-margin;
 

package/styles/tab/_tailwind-definition.scss

@@ -31,7 +31,7 @@ $tab-big-tb-icon-height: 72px !default;
 $tab-nrml-tb-icon-height: 62px !default;
 $tab-content-font-color: $content-text-color !default;
 
-$tab-border-width: 1px !default;
+$tab-border-width: 2px !default;
 $tab-border-style: $tab-border-width Solid !default;
 $tab-focus-outline: 0 !default;
 $tab-active-focus-outline: 0 !default;
@@ -60,8 +60,8 @@ $tab-items-border: 0 !default;
 
 $tab-big-item-margin: 0 !default;
 $tab-nrml-item-margin: 0 !default;
-$tab-big-item-padding: 0 12px !default;
-$tab-nrml-item-padding: 0 8px !default;
+$tab-big-item-padding: 0 8px !default;
+$tab-nrml-item-padding: 0 6px !default;
 $tab-big-icon-top-bottom-item-height: 72px !default;
 $tab-nrml-icon-top-bottom-item-height: 62px !default;
 $tab-pop-big-icon-top-bottom-item-height: 48px !default;
@@ -124,8 +124,8 @@ $tab-hscroll-item-padding: 0 !default;
 $tab-big-item-last-child-padding-bottom: 0 !default;
 $tab-nrml-item-last-child-padding-bottom: 0 !default;
 
-$tab-big-wrap-padding: 0 36px !default;
-$tab-nrml-wrap-padding: 0 26px !default;
+$tab-big-wrap-padding: 0 12px !default;
+$tab-nrml-wrap-padding: 0 8px !default;
 $tab-mob-wrap-padding: 12px 16px !default;
 $tab-pop-padding: 0 !default;
 $tab-big-pop-item-wrap-padding: 0 16px !default;
@@ -280,8 +280,8 @@ $tab-big-close-icon-size: $text-base !default;
 $tab-nrml-close-icon-size: $text-sm !default;
 $tab-mob-close-icon-size: $text-xxs !default;
 $tab-close-icon-minwidth: 20px !default;
-$tab-big-close-icon-margin: 0 0 0 12px !default;
-$tab-nrml-close-icon-margin: 0 0 0 8px !default;
+$tab-big-close-icon-margin: 0 8px 0 12px !default;
+$tab-nrml-close-icon-margin: 0 4px 0 8px !default;
 $tab-mob-close-icon-margin: 0 0 0 14px !default;
 $tab-rtl-mob-close-icon-margin: 0 14px 0 0 !default;
 $tab-rtl-big-close-icon-margin: 0 12px 0 0 !default;

package/styles/tab/_theme.scss

@@ -1404,7 +1404,12 @@
               .e-tab-text,
               .e-tab-icon {
                 color: $tab-alt-text-color;
-                @if $tab-skin == 'FluentUI' {
+              }
+
+              @if $tab-skin == 'FluentUI' {
+                .e-tab-text,
+                .e-tab-icon,
+                .e-close-icon {
                   color: $tab-bg-nav-focus-icon-color;
                 }
               }
@@ -1601,15 +1606,12 @@
           }
 
           &:focus {
-            @if $tab-skin == 'FluentUI' {
-              background: $tab-item-wrap-hover-bg-color;
-            }
 
             .e-popup-up-icon,
             .e-popup-down-icon {
               color: $tab-bg-hover-nav-icon-color;
               @if $tab-skin == 'FluentUI' {
-                color: $tab-bg-nav-focus-icon-color;
+                background: $tab-item-wrap-hover-bg-color;
               }
 
               @if $tab-skin == 'fabric' {
@@ -1651,7 +1653,11 @@
 
             .e-popup-up-icon {
               color: $tab-bg-hover-nav-icon-color;
-              @if $tab-skin == 'FluentUI' {
+            }
+
+            @if $tab-skin == 'FluentUI' {
+              .e-popup-up-icon,
+              .e-popup-down-icon {
                 color: $tab-alt-active-text-color;
               }
             }

package/styles/tab/bootstrap-dark.css

@@ -2408,7 +2408,7 @@
 }
 
 .e-tab .e-content.e-progress {
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .e-tab.e-vertical-tab .e-content {

package/styles/tab/bootstrap.css

@@ -2414,7 +2414,7 @@
 }
 
 .e-tab .e-content.e-progress {
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .e-tab.e-vertical-tab .e-content {

package/styles/tab/bootstrap4.css

@@ -2421,7 +2421,7 @@
 }
 
 .e-tab .e-content.e-progress {
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .e-tab.e-vertical-tab .e-content {

package/styles/tab/bootstrap5-dark.css

@@ -174,7 +174,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item:not(.e-separator),
 .e-tab.e-bigger .e-tab-header .e-toolbar-item:not(.e-separator) {
   height: 42px;
-  margin: 0 2px 0 0;
+  margin: 0;
   min-height: 42px;
   min-width: auto;
   padding: 0;
@@ -183,7 +183,7 @@
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab .e-tab-header .e-toolbar-item:not(.e-separator),
   .e-tab.e-bigger .e-tab-header .e-toolbar-item:not(.e-separator) {
-    margin: 0 2px 0 0;
+    margin: 0;
   }
 }
 
@@ -257,7 +257,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-icons.e-close-icon,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-icons.e-close-icon {
   cursor: pointer;
-  margin: 0 0 0 8px;
+  margin: 2px 0 0 8px;
 }
 
 @media screen and (max-width: 480px) {
@@ -305,7 +305,7 @@
 
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-icon-left + .e-tab-text,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-icon-left + .e-tab-text {
-  margin: 0 0 0 12px;
+  margin: 0 0 0 8px;
 }
 
 @media screen and (max-width: 480px) {
@@ -353,7 +353,7 @@
 
 .e-bigger .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-text,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item.e-itop .e-tab-text {
-  margin: 10px 0 0;
+  margin: 8px 0 0;
 }
 
 .e-bigger .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-text,
@@ -1524,7 +1524,7 @@
 
 .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
   height: 32px;
-  margin: 0 2px 0 0;
+  margin: 0;
   min-height: 32px;
   min-width: auto;
   padding: 0;
@@ -1660,10 +1660,10 @@
 .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 20px;
-  min-width: 20px;
-  width: 20px;
-  line-height: 20px;
+  height: 24px;
+  min-width: 24px;
+  width: 24px;
+  line-height: 24px;
 }
 
 @media screen and (max-width: 480px) {
@@ -1767,7 +1767,7 @@
 
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-text {
-    margin: 10px 0 0;
+    margin: 8px 0 0;
   }
 }
 
@@ -2418,7 +2418,7 @@
 }
 
 .e-tab .e-content.e-progress {
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 .e-tab.e-vertical-tab .e-content {
@@ -3076,7 +3076,7 @@
 
 .e-tab-clone-element:not(.e-separator) {
   height: 32px;
-  margin: 0 2px 0 0;
+  margin: 0;
   min-height: 32px;
   min-width: auto;
   padding: 0;
@@ -3155,10 +3155,10 @@
 .e-tab-clone-element .e-icons.e-tab-icon {
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 20px;
-  min-width: 20px;
-  width: 20px;
-  line-height: 20px;
+  height: 24px;
+  min-width: 24px;
+  width: 24px;
+  line-height: 24px;
 }
 
 @media screen and (max-width: 480px) {
@@ -3254,7 +3254,7 @@
 
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop .e-tab-text {
-    margin: 10px 0 0;
+    margin: 8px 0 0;
   }
 }
 
@@ -3303,7 +3303,7 @@
 
 .e-bigger .e-tab-clone-element:not(.e-separator) {
   height: 42px;
-  margin: 0 2px 0 0;
+  margin: 0;
   min-height: 42px;
   min-width: auto;
   padding: 0;
@@ -3311,7 +3311,7 @@
 
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab-clone-element:not(.e-separator) {
-    margin: 0 2px 0 0;
+    margin: 0;
   }
 }
 
@@ -3341,7 +3341,7 @@
 
 .e-bigger .e-tab-clone-element .e-icons.e-close-icon {
   cursor: pointer;
-  margin: 0 0 0 8px;
+  margin: 2px 0 0 8px;
 }
 
 @media screen and (max-width: 480px) {
@@ -3379,7 +3379,7 @@
 }
 
 .e-bigger .e-tab-clone-element .e-icon-left + .e-tab-text {
-  margin: 0 0 0 12px;
+  margin: 0 0 0 8px;
 }
 
 @media screen and (max-width: 480px) {
@@ -3413,7 +3413,7 @@
 }
 
 .e-bigger .e-tab-clone-element.e-itop .e-tab-text {
-  margin: 10px 0 0;
+  margin: 8px 0 0;
 }
 
 .e-bigger .e-tab-clone-element.e-ibottom .e-tab-text {