@syncfusion/ej2-navigations 19.3.57 → 19.4.38

package/styles/tab/_theme.scss

@@ -9,6 +9,10 @@
       border: 0;
       border-radius: 0;
 
+      @if $tab-skin == 'FluentUI' {
+        box-shadow: none;
+      }
+
       @if $tab-skin == 'tailwind' {
         font-weight: $tab-font-weight;
       }
@@ -39,6 +43,9 @@
 
         .e-toolbar-item.e-active {
           border-bottom: $tab-active-item-hide-border;
+          @if $tab-skin == 'FluentUI' {
+            margin-bottom: $tab-item-wrap-border-radius;
+          }
         }
       }
 
@@ -54,12 +61,18 @@
         background: inherit;
         border: $tab-item-border;
 
+        @if $tab-skin == 'FluentUI' {
+          &:hover {
+            background: $tab-alt-hover-bg-color;
+          }
+        }
+
         .e-ripple-element {
           background: $tab-ripple-bg-color;
         }
 
         .e-tab-wrap {
-          border-radius: $tab-item-wrap-border-radius;
+          border-radius: $tab-active-item-border-radius;
           color: $tab-text-color;
 
           @if $tab-skin == 'fabric' {
@@ -74,10 +87,7 @@
           }
 
           .e-tab-icon {
-            color: $tab-text-color;
-            @if $tbar-skin == 'bootstrap5' {
-              color: $tab-comb-icon-color;
-            }
+            color: $tab-wrap-comb-icon-color;
           }
 
           @media screen and (max-width: 480px) {
@@ -187,6 +197,10 @@
         }
       }
 
+      &.e-reorder-active-item:not(.e-vertical) .e-toolbar-pop .e-toolbar-item.e-active {
+        border: $tab-active-item-hide-border;
+      }
+
       .e-toolbar-pop {
         background: $tab-pop-bg-color;
         border: $tab-pop-border;
@@ -218,10 +232,6 @@
                 border-color: $tab-wrap-hover-border-color;
               }
 
-              @if $tab-skin == 'highcontrast' {
-                background: $tab-wrap-hover-bg-color;
-              }
-
               @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                 border: $tab-vscroll-nav-border;
                 border-radius: 0;
@@ -232,6 +242,12 @@
               .e-close-icon {
                 color: $tab-hover-text-color;
               }
+              @if $tab-skin == 'FluentUI' {
+                .e-tab-icon,
+                .e-close-icon {
+                  color: $tab-comb-icon-color;
+                }
+              }
             }
 
             &:active {
@@ -257,6 +273,14 @@
             }
           }
 
+          &.e-active .e-tab-wrap {
+
+            .e-tab-text,
+            .e-tab-icon {
+              color: $tab-active-text-color;
+            }
+          }
+
           &.e-disable.e-overlay {
             .e-tab-text,
             .e-tab-icon {
@@ -275,7 +299,9 @@
 
 
         .e-nav-arrow {
-          color: $tab-nav-icon-color;
+          @if $tab-skin != 'FluentUI' {
+            color: $tab-nav-icon-color;
+          }
 
           @if $tab-skin == 'fabric' {
             border: 1px solid $tab-wrap-border-color;
@@ -292,10 +318,6 @@
             @if $tab-skin == 'highcontrast' {
               border: 2px solid $tab-wrap-hover-border-color;
             }
-
-            @if $tab-skin == 'tailwind' {
-              background: $tab-pop-icon-hover-bg-color;
-            }
           }
 
           &:active {
@@ -362,10 +384,14 @@
         &.e-overlay {
 
           .e-nav-arrow {
-            color: $tab-disable-nav-icon-color;
+            @if $tab-skin != 'FluentUI' {
+              color: $tab-disable-nav-icon-color;
+            }
 
             &:hover {
-              color: $tab-disable-nav-icon-color;
+              @if $tab-skin != 'FluentUI' {
+                color: $tab-disable-nav-icon-color;
+              }
 
               @if $tab-skin == 'highcontrast' {
                 background: $tab-nav-disable-hover-bg-color;
@@ -385,10 +411,6 @@
         background: transparent;
         border: 0;
 
-        @if $tab-skin == 'bootstrap4'or $tab-skin == 'bootstrap5' {
-          border: $tab-nav-pop-press-border;
-        }
-
         .e-popup-up-icon,
         .e-popup-down-icon {
           color: $tab-pop-icon-color;
@@ -407,20 +429,8 @@
 
           &:hover {
             background: $tab-pop-icon-hover-bg-color;
-            border: $tab-pop-icon-hover-border;
+            border: $tab-pop-up-icon-hover-border;
             border-radius: $tab-active-item-border-radius;
-
-            @if $tab-skin == 'fabric' {
-              border: 1px solid $tab-wrap-hover-border-color;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              border: 2px solid $tab-wrap-hover-border-color;
-            }
-
-            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-              border: $tab-active-text-item-border;
-            }
           }
         }
 
@@ -440,61 +450,24 @@
           .e-popup-up-icon,
           .e-popup-down-icon {
             background: $tab-nav-focus-bg-color;
-            border: $tab-pop-icon-focus-border;
+            border: $tab-pop-up-icon-focus-border;
             border-radius: $tab-active-item-border-radius;
             color: $tab-nav-focus-icon-color;
 
-            @if $tab-skin == 'fabric' {
-              border: 1px solid $tab-nav-focus-border-color;
-            }
-
-            @if $tab-skin == 'bootstrap' {
-              background: $tab-nav-focus-bg-color;
-            }
-
-            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-              border: $tab-active-text-item-border;
-            }
-
-            @if $tab-skin == 'highcontrast' {
-              border: 2px solid $tab-wrap-focus-border-color;
-            }
-
             &:hover {
               background: $tab-pop-icon-hover-bg-color;
-              border: $tab-pop-icon-hover-border;
+              border: $tab-pop-up-down-icon-hover-border;
               border-radius: $tab-active-item-border-radius;
-
-              @if $tab-skin == 'fabric' {
-                border: 1px solid $tab-nav-focus-hover-border-color;
-              }
-
-              @if $tab-skin == 'highcontrast' {
-                border: 2px solid $tab-nav-focus-hover-border-color;
-              }
-
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                border: $tab-active-text-item-border;
-              }
             }
 
             &:active {
               background: $tab-pop-icon-hover-bg-color;
-              border: $tab-pop-icon-active-border;
+              border: $tab-pop-up-icon-active-border;
               border-radius: $tab-active-item-border-radius;
               box-shadow: $tab-pop-border-box-shadow;
 
-              @if $tab-skin == 'fabric' {
-                border: 1px solid $tab-nav-focus-active-border-color;
-              }
-
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                border: $tab-active-text-item-border;
-              }
-
               @if $tab-skin == 'highcontrast' {
                 background: $tab-nav-focus-active-bg-color;
-                border: 2px solid $tab-nav-focus-active-border-color;
                 color: $tab-nav-focus-active-color;
               }
             }
@@ -508,10 +481,6 @@
         &:hover {
           border: 0;
 
-          @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-            border: $tab-nav-pop-press-border;
-          }
-
           &:active {
             background: transparent;
           }
@@ -550,9 +519,6 @@
 
             &:focus {
               border: $tab-nav-pop-arrow-active-focus-border;
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                border: 0;
-              }
             }
           }
         }
@@ -579,13 +545,15 @@
         .e-toolbar-item {
 
           &.e-active {
-            border-bottom: 0;
-            border-radius: $tab-bottom-active-item-border-radius;
-            border-top: $tab-active-item-hide-border;
-            border-top-color: $tab-active-item-border-color;
+            border-bottom: $tab-even-active-item-bottom-border-color;
 
-            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-              border-bottom: 1px solid $tab-even-active-item-bottom-border-color;
+            @if $tab-skin == 'FluentUI' {
+              margin-top: $tab-item-wrap-border-radius;
+            }
+            @else {
+              border-radius: $tab-bottom-active-item-border-radius;
+              border-top: $tab-active-item-hide-border;
+              border-top-color: $tab-active-item-border-color;
             }
           }
         }
@@ -593,6 +561,10 @@
 
       &.e-vertical {
 
+        @if $tab-skin == 'tailwind' {
+          border-bottom: 0;
+        }
+
         &::before {
           border-width: 0 1px 0 0;
         }
@@ -768,6 +740,11 @@
           .e-tab-text {
             color: $tab-focus-text-color;
           }
+          @if $tbar-skin == 'bootstrap5' or $tab-skin == 'FluentUI' {
+            .e-tab-icon {
+              color: $tab-comb-icon-color;
+            }
+          }
         }
       }
 
@@ -903,6 +880,11 @@
             &:hover .e-tab-icon {
               color: $tab-hover-text-color;
             }
+            @if $tab-skin == 'FluentUI' {
+              &:hover .e-tab-icon {
+                color: $tab-comb-icon-color;
+              }
+            }
           }
 
           .e-text-wrap {
@@ -1071,7 +1053,7 @@
           .e-tab-wrap:focus .e-tab-icon,
           .e-tab-wrap:focus .e-tab-text,
           .e-tab-wrap:focus .e-close-icon {
-            color: $tab-alt-hover-text-color;
+            color: $tab-hover-text-color;
           }
 
           &.e-active .e-tab-wrap:focus {
@@ -1095,10 +1077,7 @@
 
             .e-tab-text,
             .e-tab-icon {
-              color: $tab-alt-active-hover-text-color;
-              @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
-                color: $tab-alt-active-style-hover-text-color;
-              }
+              color: $tab-alt-active-style-hover-icon-color;
             }
           }
         }
@@ -1147,8 +1126,20 @@
               border-color: $tab-alt-wrap-border-color;
             }
 
+            .e-tab-text,
+            .e-tab-icon,
+            .e-close-icon {
+              color: $tab-alt-text-color;
+            }
+
+            @if $tab-skin != 'tailwind' {
+              .e-close-icon:hover {
+                color: $tab-alt-active-wrap-close-icon-color;
+              }
+            }
+
             &:hover {
-              background: $tab-item-hover-bg-color;
+              background: $tab-bg-item-wrap-hover-bg-color;
 
               .e-tab-text,
               .e-tab-icon {
@@ -1159,6 +1150,14 @@
                 }
               }
 
+              @if $tab-skin == 'FluentUI' {
+                .e-tab-text,
+                .e-tab-icon,
+                .e-close-icon {
+                  color: $tab-alt-border-color;
+                }
+              }
+
               @if $tab-skin == 'material' {
                 .e-close-icon {
 
@@ -1211,32 +1210,23 @@
             }
           }
 
-          .e-tab-text,
-          .e-tab-icon,
-          .e-close-icon {
-            color: $tab-alt-text-color;
-          }
-
-          .e-close-icon {
-            color: $tab-alt-close-icon-color;
-            @if $tab-skin == 'tailwind' {
-              color: $tab-alt-active-close-icon-color;
-            }
-            @if $tab-skin == 'bootstrap5' {
-              color: $tab-alt-active-text-color;
-            }
-          }
-
-          .e-close-icon:hover {
-            color: $tab-alt-hover-text-color;
-          }
-
           &.e-active {
             border: 0;
             margin: 0;
+            @if $tab-skin == 'FluentUI' {
+              background: $tab-alt-active-text-color;
+            }
 
             .e-tab-wrap {
 
+              @if $tab-skin == 'FluentUI' {
+                .e-tab-text,
+                .e-tab-icon,
+                .e-close-icon {
+                  color: $tab-fill-active-bg-color;
+                }
+              }
+
               @if $tab-skin == 'bootstrap5' {
                 background: $tab-active-item-border-color;
                 border-color: $tab-alt-active-bg-color;
@@ -1258,6 +1248,9 @@
                 .e-tab-text,
                 .e-tab-icon {
                   color: $tab-alt-active-text-color;
+                  @if $tab-skin == 'FluentUI' {
+                    color: $tab-fill-active-bg-color;
+                  }
                 }
 
                 @if $tab-skin == 'bootstrap5' {
@@ -1301,6 +1294,9 @@
                     .e-tab-icon,
                     .e-tab-text {
                       color: $tab-alt-active-wrap-hover-focus-color;
+                      @if $tab-skin == 'FluentUI' {
+                        color: $tab-fill-active-bg-color;
+                      }
                     }
                   }
                 }
@@ -1319,6 +1315,9 @@
                   @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                     color: $tab-alt-active-hover-text-color;
                   }
+                  @if $tab-skin == 'FluentUI' {
+                    color: $tab-fill-active-bg-color;
+                  }
                 }
               }
 
@@ -1350,15 +1349,24 @@
             .e-tab-text,
             .e-tab-icon {
               color: $tab-alt-active-text-color;
+              @if $tab-skin == 'FluentUI' {
+                color: $tab-fill-active-bg-color;
+              }
             }
 
             .e-close-icon {
               color: $tab-alt-active-close-icon-color;
+              @if $tab-skin == 'FluentUI' {
+                color: $tab-fill-active-bg-color;
+              }
             }
 
             .e-close-icon:hover {
               @if $tab-skin != 'tailwind' {
                 color: $tab-alt-active-hover-close-icon-color;
+                @if $tab-skin == 'FluentUI' {
+                  color: $tab-fill-active-bg-color;
+                }
               }
             }
 
@@ -1396,6 +1404,9 @@
               .e-tab-text,
               .e-tab-icon {
                 color: $tab-alt-text-color;
+                @if $tab-skin == 'FluentUI' {
+                  color: $tab-bg-nav-focus-icon-color;
+                }
               }
 
               &:hover {
@@ -1413,6 +1424,9 @@
                   @if $tab-skin == 'fabric' or $tab-skin == 'bootstrap' or $tab-skin == 'highcontrast' {
                     color: $tab-alt-pop-wrap-hover-color;
                   }
+                  @if $tab-skin == 'FluentUI' {
+                    color: $tab-alt-active-style-hover-text-color;
+                  }
                 }
               }
 
@@ -1436,7 +1450,11 @@
           }
         }
 
+        .e-hscroll:not(.e-scroll-device) .e-scroll-nav,
         .e-scroll-nav {
+          @if $tab-skin == 'FluentUI' {
+            background: $tab-alt-active-wrap-hover-close-color;
+          }
 
           .e-nav-arrow {
             color: $tab-alt-nav-icon-color;
@@ -1451,6 +1469,9 @@
 
             &:hover {
               background: $tab-bg-hover-nav-bg-color;
+              @if $tab-skin == 'FluentUI' {
+                background: $tab-item-wrap-hover-bg-color;
+              }
               color: $tab-bg-hover-nav-icon-color;
 
               @if $tab-skin == 'highcontrast' {
@@ -1511,13 +1532,29 @@
           &:active::after {
             @include hscroll-alt-btn-animation-after;
           }
+
+          &.e-overlay {
+            @if $tab-skin == 'FluentUI' {
+              .e-nav-arrow {
+                color: $tab-alt-nav-icon-color;
+              }
+            }
+          }
+
         }
 
+        .e-hor-nav:not(.e-expended-nav),
         .e-hor-nav {
+          @if $tab-skin == 'FluentUI' {
+            background: $tab-border-color;
+          }
 
           .e-popup-up-icon,
           .e-popup-down-icon {
             color: $tab-alt-nav-icon-color;
+            @if $tab-skin == 'FluentUI' {
+              color: $tab-alt-border-color;
+            }
 
             @if $tab-skin == 'fabric' {
               border: 1px solid $tab-alt-nav-border-color;
@@ -1564,10 +1601,16 @@
           }
 
           &: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;
+              }
 
               @if $tab-skin == 'fabric' {
                 border: 1px solid $tab-nav-focus-border-color;
@@ -1602,9 +1645,15 @@
           }
 
           &.e-nav-active {
+            @if $tab-skin == 'FluentUI' {
+              background: $tab-fill-active-bg-color;
+            }
 
             .e-popup-up-icon {
               color: $tab-bg-hover-nav-icon-color;
+              @if $tab-skin == 'FluentUI' {
+                color: $tab-alt-active-text-color;
+              }
             }
           }
         }
@@ -1781,6 +1830,10 @@
               background: $tab-alt-hover-bg-color;
             }
 
+            @if $tab-skin == 'FluentUI' {
+              background: $tab-item-wrap-hover-bg-color;
+            }
+
             @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
               border-color: $tab-wrap-focus-border-color;
             }
@@ -1797,6 +1850,9 @@
             .e-tab-text,
             .e-close-icon {
               color: $tab-alt-text-color;
+              @if $tab-skin == 'FluentUI' {
+                color: $tab-alt-border-color;
+              }
             }
           }
 
@@ -1808,6 +1864,10 @@
                 background: $tab-key-alt-active-focus-bg-color;
               }
 
+              @if $tab-skin == 'FluentUI' {
+                background: $tab-alt-active-text-color;
+              }
+
               @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                 border-color: $tab-alt-focused-active-wrap-focus-border-color;
               }
@@ -1820,6 +1880,9 @@
             .e-tab-wrap:focus .e-tab-text,
             .e-tab-wrap:focus .e-tab-icon {
               color: $tab-alt-active-hover-text-color;
+              @if $tab-skin == 'FluentUI' {
+                color: $tab-fill-active-bg-color;
+              }
             }
 
             .e-tab-wrap:hover {
@@ -1828,6 +1891,10 @@
                 background: $tab-alt-focused-active-wrap-hover-bg-color;
               }
 
+              @if $tab-skin == 'FluentUI' {
+                background: $tab-alt-active-text-color;
+              }
+
               @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                 border: 1px solid $tab-hover-border-color;
                 border-radius: $tab-top-active-item-border-radius;
@@ -1843,6 +1910,14 @@
                   color: $tab-alt-focused-active-wrap-focus-or-hover-color;
                 }
               }
+
+              @if $tab-skin == 'FluentUI' {
+                .e-tab-text,
+                .e-tab-icon,
+                .e-close-icon {
+                  color: $tab-fill-active-bg-color;
+                }
+              }
             }
 
             .e-tab-wrap:focus:hover {
@@ -1923,7 +1998,7 @@
     color: $tab-clone-text-color;
 
     .e-tab-wrap {
-      border-radius: $tab-item-wrap-border-radius;
+      border-radius: $tab-active-item-border-radius;
       color: $tab-clone-text-color;
 
       @if $tab-skin == 'fabric' {