@syncfusion/ej2-navigations 19.3.53 → 19.4.38

package/styles/tab/_layout.scss

@@ -1492,6 +1492,37 @@
             margin: $tab-mob-last-item-margin;
           }
         }
+        @if $tab-skin == 'FluentUI' {
+          .e-toolbar-item.e-active {
+            position: relative;
+
+            &:hover::before {
+              left: 0;
+              right: 0;
+            }
+
+            &::before {
+              background-color: $tab-alt-hdr-bg-color;
+              bottom: 0;
+              content: '';
+              height: 2px;
+              left: 8px;
+              position: absolute;
+              right: 8px;
+              transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
+            }
+
+            &::after {
+              color: transparent;
+              content: attr(data-content);
+              display: block;
+              font-weight: 700;
+              height: 1px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        }
       }
 
       .e-toolbar-items.e-hscroll {
@@ -1519,6 +1550,9 @@
 
         .e-scroll-nav {
           width: 40px;
+          @if $tab-skin == 'FluentUI' {
+            width: 29px;
+          }
           @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
             border-radius: 4px;
             width: 32px;
@@ -1751,6 +1785,9 @@
         .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;
 
@@ -2237,6 +2274,38 @@
 
       &.e-horizontal-bottom {
 
+        @if $tab-skin == 'FluentUI' {
+          .e-toolbar-items .e-toolbar-item.e-active {
+            position: relative;
+
+            &:hover::before {
+              left: 0;
+              right: 0;
+            }
+
+            &::before {
+              background-color: $tab-alt-hdr-bg-color;
+              content: '';
+              height: 2px;
+              left: 8px;
+              position: absolute;
+              right: 8px;
+              top: 0;
+              transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
+            }
+
+            &::after {
+              color: transparent;
+              content: attr(data-content);
+              display: block;
+              font-weight: 700;
+              height: 1px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        }
+
         &::before {
           bottom: auto;
         }
@@ -2344,6 +2413,10 @@
         }
       }
 
+      &.e-reorder-active-item .e-toolbar-pop .e-toolbar-item.e-active .e-text-wrap::before {
+        display: none;
+      }
+
       &.e-vertical {
         max-width: 150px;
         z-index: 1;
@@ -2458,6 +2531,38 @@
             left: auto;
             right: 0;
           }
+
+          @if $tab-skin == 'FluentUI' {
+            .e-toolbar-items .e-toolbar-item.e-active {
+              position: relative;
+
+              &:hover::before {
+                bottom: 0;
+                height: 100%;
+              }
+
+              &::before {
+                background-color: $tab-alt-hdr-bg-color;
+                bottom: 5px;
+                content: '';
+                height: 60%;
+                left: 99%;
+                position: absolute;
+                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
+                width: 2px;
+              }
+
+              &::after {
+                color: transparent;
+                content: attr(data-content);
+                display: block;
+                font-weight: 700;
+                height: 1px;
+                overflow: hidden;
+                visibility: hidden;
+              }
+            }
+          }
         }
 
         &.e-vertical-right {
@@ -2482,6 +2587,38 @@
               width: auto;
             }
           }
+
+          @if $tab-skin == 'FluentUI' {
+            .e-toolbar-items .e-toolbar-item.e-active {
+              position: relative;
+
+              &:hover::before {
+                bottom: 0;
+                height: 100%;
+              }
+
+              &::before {
+                background-color: $tab-alt-hdr-bg-color;
+                bottom: 5px;
+                content: '';
+                height: 60%;
+                left: 0;
+                position: absolute;
+                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
+                width: 2px;
+              }
+
+              &::after {
+                color: transparent;
+                content: attr(data-content);
+                display: block;
+                font-weight: 700;
+                height: 1px;
+                overflow: hidden;
+                visibility: hidden;
+              }
+            }
+          }
         }
 
         .e-scroll-nav {
@@ -2647,6 +2784,14 @@
         height: $tab-nrml-tb-icon-height;
         min-height: $tab-nrml-tb-icon-height;
 
+        &.e-reorder-active-item .e-toolbar-pop {
+
+          .e-toolbar-item.e-active .e-tab-wrap::before,
+          .e-toolbar-item:not(.e-separator):last-child.e-active .e-tab-wrap::before {
+            display: none;
+          }
+        }
+
         .e-toolbar-items {
           height: $tab-nrml-tb-icon-height;
         }

package/styles/tab/_material-dark-definition.scss

@@ -180,6 +180,7 @@ $tab-mob-fill-wrap-padding: 0 18px !default;
 $tab-bg-big-wrap-padding: 0 24px !default;
 $tab-bg-nrml-wrap-padding: 0 18px !default;
 $tab-item-hover-bg-color: inherit !default;
+$tab-bg-item-wrap-hover-bg-color: $tab-item-hover-bg-color !default;
 $tab-mob-item-hover-bg-color: inherit !default;
 $tab-pop-text-color: $grey-dark-font !default;
 $tab-alt-disable-active-item-opacity: 1 !default;
@@ -235,6 +236,7 @@ $tab-nrml-even-active-text-height: 36px !default;
 $tab-fill-big-even-active-text-height: 46px !default;
 $tab-fill-nrml-even-active-text-height: 34px !default;
 $tab-text-color: rgba($grey-dark-font, .7) !default;
+$tab-wrap-comb-icon-color: $tab-text-color !default;
 $tab-disable-text-color: rgba($grey-dark-font, .3) !default;
 $tab-mob-text-color: rgba($grey-dark-font, .7) !default;
 $tab-active-text-color: rgba($accent, 1) !default;
@@ -248,11 +250,13 @@ $tab-alt-active-text-color: rgba($primary-font, 1) !default;
 $tab-alt-disable-active-text-color: rgba($primary-font, .38) !default;
 $tab-alt-hover-text-color: rgba($accent, 1) !default;
 $tab-alt-active-hover-text-color: rgba($primary-font, 1) !default;
+$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
 $tab-clone-item-bg-color: rgba($grey-light-font, .87) !default;
 $tab-clone-text-color: rgba($grey-dark-font, .7) !default;
 
 $tab-icon-container-width: auto !default;
 
+$tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 24px !default;
 $tab-nrml-nav-icon-container-size: 24px !default;
 $tab-big-nav-icon-size: 12px !default;
@@ -323,6 +327,7 @@ $tab-mob-close-icon-color: $grey-dark-font !default;
 $tab-close-icon-hover-color: $tab-hover-text-color !default;
 $tab-close-icon-active-color: $tab-hover-text-color !default;
 $tab-alt-close-icon-color: rgba($primary-font, .54) !default;
+$tab-alt-active-wrap-close-icon-color: $tab-alt-close-icon-color !default;
 $tab-alt-active-close-icon-color: rgba($primary-font, .7) !default;
 $tab-alt-active-hover-close-icon-color: rgba($primary-font, 1) !default;
 $tab-pop-bg-color: $grey-800 !default;
@@ -356,8 +361,13 @@ $tab-bg-nav-focus-icon-color: rgba($grey-dark-font, .7) !default;
 $tab-pop-icon-color: rgba($grey-dark-font, .7) !default;
 $tab-pop-icon-hover-bg-color: initial !default;
 $tab-pop-icon-hover-border: initial !default;
+$tab-pop-up-icon-hover-border: $tab-pop-icon-hover-border !default;
+$tab-pop-up-down-icon-hover-border: $tab-pop-icon-hover-border !default;
 $tab-pop-icon-focus-border: initial !default;
+$tab-pop-up-icon-focus-border: $tab-pop-icon-focus-border !default;
 $tab-pop-icon-active-border: 0 !default;
+$tab-even-active-item-bottom-border-color: 0 !default;
+$tab-pop-up-icon-active-border: $tab-pop-icon-active-border !default;
 $tab-pop-border-box-shadow: none !default;
 $tab-bg-hover-nav-icon-color: rgb(255, 255, 0) !default;
 

package/styles/tab/_material-definition.scss

@@ -163,6 +163,7 @@ $tab-mob-fill-wrap-padding: 0 18px !default;
 $tab-bg-big-wrap-padding: 0 24px !default;
 $tab-bg-nrml-wrap-padding: 0 18px !default;
 $tab-item-hover-bg-color: inherit !default;
+$tab-bg-item-wrap-hover-bg-color: $tab-item-hover-bg-color !default;
 $tab-mob-item-hover-bg-color: inherit !default;
 $tab-pop-text-color: rgba($grey-light-font, .54) !default;
 $tab-alt-disable-active-item-opacity: 1 !default;
@@ -218,6 +219,7 @@ $tab-nrml-even-active-text-height: 36px !default;
 $tab-fill-big-even-active-text-height: 46px !default;
 $tab-fill-nrml-even-active-text-height: 34px !default;
 $tab-text-color: rgba($grey-light-font, .54) !default;
+$tab-wrap-comb-icon-color: $tab-text-color !default;
 $tab-disable-text-color: rgba($grey-light-font, .38) !default;
 $tab-mob-text-color: rgba($grey-light-font, .54) !default;
 $tab-active-text-color: rgba($accent, 1) !default;
@@ -231,11 +233,13 @@ $tab-alt-active-text-color: rgba($primary-font, 1) !default;
 $tab-alt-disable-active-text-color: rgba($primary-font, .38) !default;
 $tab-alt-hover-text-color: rgba($accent, 1) !default;
 $tab-alt-active-hover-text-color: rgba($primary-font, 1) !default;
+$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
 $tab-clone-item-bg-color: $grey-white !default;
 $tab-clone-text-color: rgba($grey-light-font, .54) !default;
 
 $tab-icon-container-width: auto !default;
 
+$tab-nav-pop-press-border: 0 !default;
 $tab-big-nav-icon-container-size: 24px !default;
 $tab-nrml-nav-icon-container-size: 24px !default;
 $tab-big-nav-icon-size: 12px !default;
@@ -306,6 +310,7 @@ $tab-mob-close-icon-color: rgba($grey-light-font, .87) !default;
 $tab-close-icon-hover-color: $tab-hover-text-color !default;
 $tab-close-icon-active-color: $tab-hover-text-color !default;
 $tab-alt-close-icon-color: rgba($primary-font, .54) !default;
+$tab-alt-active-wrap-close-icon-color: $tab-alt-close-icon-color !default;
 $tab-alt-active-close-icon-color: rgba($primary-font, .7) !default;
 $tab-alt-active-hover-close-icon-color: rgba($primary-font, 1) !default;
 $tab-pop-bg-color: $grey-white !default;
@@ -339,8 +344,13 @@ $tab-bg-nav-focus-icon-color: rgba($grey-white, .87) !default;
 $tab-pop-icon-color: rgba($grey-light-font, .54) !default;
 $tab-pop-icon-hover-bg-color: initial !default;
 $tab-pop-icon-hover-border: initial !default;
+$tab-pop-up-icon-hover-border: $tab-pop-icon-hover-border !default;
+$tab-pop-up-down-icon-hover-border: $tab-pop-icon-hover-border !default;
 $tab-pop-icon-focus-border: initial !default;
+$tab-pop-up-icon-focus-border: $tab-pop-icon-focus-border !default;
 $tab-pop-icon-active-border: 0 !default;
+$tab-even-active-item-bottom-border-color: 0 !default;
+$tab-pop-up-icon-active-border: $tab-pop-icon-active-border !default;
 $tab-pop-border-box-shadow: none !default;
 $tab-bg-hover-nav-icon-color: $primary-font !default;