@syncfusion/ej2-navigations 27.2.4 → 28.1.33-686179

package/styles/menu/_theme.scss

@@ -1,386 +1,428 @@
-@import '../context-menu/theme-mixin.scss';
-@include export-module('menu-theme') {
-  .e-menu-wrapper,
-  .e-menu-container {
-    background: $menu-ul-bgcolor;
-
-    @at-root {
-      & .e-menu {
-        @if $skin-name == 'bootstrap4' {
-          background-color: $cmenu-ul-bgcolor;
-        }
-        @else {
-          background: inherit;
-        }
-        color: $menu-color;
-
-        &.e-menu {
-          &:not(.e-vertical) {
-            & .e-separator {
-              border-right-color: $menu-seperator-border-color;
-            }
-          }
-        }
-
-        & .e-menu-item  {
-          @if $skin-name == 'bootstrap4' {
-            & .e-caret {
-              color: $menu-caret-color;
-            }
-
-            & .e-menu-icon {
-              color: $menu-icon-color;
-            }
-          }
-          @else {
-            @include icon-color;
-            @if $skin-name == 'fluent2' {
-              & .e-menu-icon,
-              & .e-caret {
-                color: $icon-color;
-              }
-            }
-          }
-
-          &.e-menu-header {
-            border-bottom-color: $cmenu-li-border-color;
-          }
-
-          & .e-menu-url {
-            color: $menu-color;
-          }
-
-          &.e-focused {
-            color: $menu-icon-hover-color;
-            outline: $menu-li-hover-outline;
-            outline-offset: $menu-li-hover-outline-offset;
-            @if $skin-name == 'bootstrap4' {
-              background: $menu-ul-bgcolor;
-
-              & .e-caret {
-                color: $menu-caret-color;
-              }
-
-              & .e-menu-icon {
-                color: $menu-icon-hover-color;
-              }
-            }
-            @else {
-              @include focused-icon-color;
-              background: $menu-li-bgcolor;
-              @if $skin-name == 'Material3' {
-                border-radius: 2px;
-              }
-              @if $skin-name == 'fluent2' {
-                border-radius: 4px;
-              }
-            }
-          }
-
-          &.e-selected,
-          &.e-active-item {
-            color: $menu-selected-color;
-            outline: $menu-li-selected-outline;
-            outline-offset: $menu-li-selected-outline-offset;
-            @if $skin-name == 'bootstrap4' {
-              background: $menu-ul-bgcolor;
-            }
-            @if $skin-name == 'FluentUI' {
-              background: $cmenu-li-bgcolor;
-            }
-            @else {
-              background: $menu-li-selection-bgcolor;
-            }
-            @if $skin-name == 'Material3' {
-              border-radius: 2px;
-            }
-            @if $skin-name == 'fluent2' {
-              border-radius: 4px;
-            }
-
-            & .e-caret {
-              @if $skin-name == 'Material3' {
-                color: $menu-icon-focussed-color;
-              }
-              @else {
-                color: $menu-caret-color;
-              }
-            }
-
-            & .e-menu-icon {
-              @if $skin-name == 'Material3' {
-                color: $menu-icon-focussed-color;
-              }
-              @else {
-                color: $menu-caret-color;
-              }
-            }
-          }
-
-          &.e-separator {
-            border-bottom-color: $menu-seperator-border-color;
-          }
-
-          &:focus-visible {
-            @if $skin-name == 'fluent2' {
-              border-radius: 4px;
-              background-color: $content-bg-color;
-              box-shadow: $shadow-focus-ring1;
-            }
-          }
-        }
-
-        @include disabled-color;
-      }
-
-      & .e-ul {
-        background: inherit;
-        color: $submenu-color;
-
-        & .e-menu-item {
-          @if $skin-name == 'bootstrap4' {
-            & .e-caret,
-            & .e-menu-icon {
-              color: $submenu-color;
-            }
-          }
-          @else if $skin-name == 'FluentUI' {
-            & .e-caret,
-            & .e-menu-icon {
-              color: $menu-icon-color;
-            }
-          }
-
-          &.e-focused {
-            @if $skin-name == 'bootstrap4' {
-              & .e-caret {
-                color: $menu-caret-color;
-              }
-
-              & .e-menu-icon {
-                color: $submenu-color;
-              }
-            }
-            @if $skin-name == 'fluent2' {
-              background-color: $flyout-bg-color-hover;
-              border-radius: 4px;
-            }
-          }
-
-          &.e-selected,
-          &.e-active-item {
-            @if $skin-name == 'bootstrap4' {
-              & .e-caret,
-              & .e-menu-icon {
-                color: $menu-icon-focussed-color;
-              }
-            }
-            @if $skin-name == 'fluent2' {
-              background-color: $flyout-bg-color-selected;
-            }
-          }
-
-          & .e-menu-url {
-            color: $submenu-color;
-          }
-
-          &.e-focused {
-            @include focused-color;
-          }
-
-          &.e-selected,
-          &.e-active-item {
-            @include selected-color;
-          }
-
-          &.e-separator {
-            border-bottom-color: $cmenu-li-border-color;
-          }
-
-          &:focus-visible {
-            @if $skin-name == 'fluent2' {
-              background-color: $content-bg-color;
-              box-shadow: $shadow-focus-ring1;
-              border-radius: 4px;
-            }
-          }
-
-          &:active {
-            @if $skin-name == 'bootstrap5.3' {
-              background-color: $cmenu-li-selection-bgcolor;
-              color: $cmenu-selected-color;
-            }
-          }
-        }
-      }
-    }
-
-    &.e-menu-popup {
-      background: $cmenu-ul-bgcolor;
-
-      & .e-ul .e-menu-item.e-disabled,
-      & .e-ul .e-menu-item.e-disabled .e-menu-icon {
-        @if $skin-name == 'fluent2' {
-          color: $flyout-text-color-disabled;
-          opacity: 1;
-        }
-      }
-
-      &.e-sfcontextmenu .e-menu-vscroll {
-        background: inherit;
-      }
-    }
-
-    & .e-menu-hscroll.e-hscroll .e-scroll-nav {
-      background: $menu-ul-bgcolor;
-
-      & .e-nav-arrow.e-icons {
-        @if $skin-name == 'fluent2' {
-          color: $icon-color;
-        }
-        @else {
-          color: $cmenu-caret-color;
-        }
-      }
-
-      &:hover {
-        @if $skin-name == 'bootstrap4' {
-          background: darken($gray-600, 7.5%);
-          border: 1px inset darken($gray-600, 10%);
-
-          & .e-icons {
-            color: $menu-icon-focussed-color;
-          }
-        }
-        @else if $skin-name == 'Material3' {
-          border-radius: 2px;
-        }
-        @else {
-          background: $menu-li-bgcolor;
-        }
-
-        @if $skin-name == 'fluent2' {
-          & .e-nav-arrow.e-icons {
-            color: $icon-color-pressed;
-          }
-        }
-      }
-
-      &:focus {
-        @if $skin-name == 'bootstrap4' {
-          background: darken($gray-600, 7.5%);
-          border-color: darken($gray-600, 10%);
-
-          & .e-icons {
-            color: $menu-icon-focussed-color;
-          }
-        }
-        @else {
-          background: $menu-li-bgcolor;
-        }
-
-        @if $skin-name == 'fluent2' {
-          & .e-nav-arrow.e-icons {
-            color: $icon-color-hover;
-          }
-        }
-      }
-
-      &:active {
-        @if $skin-name == 'bootstrap4' {
-          background: darken($gray-600, 7.5%);
-          border: 1px inset darken($gray-600, 10%);
-        }
-        @else {
-          background: $menu-li-bgcolor;
-        }
-        @if $skin-name == 'fluent2' {
-          & .e-nav-arrow.e-icons {
-            color: $icon-color-pressed;
-          }
-        }
-      }
-    }
-
-    &.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
-      background: $cmenu-ul-bgcolor;
-      border-color: $menu-seperator-border-color;
-
-      & .e-icons {
-        color: $cmenu-color;
-      }
-
-      &:hover,
-      &:focus {
-        background: $cmenu-li-bgcolor;
-        @if $skin-name == 'fluent2' {
-          & .e-nav-arrow.e-icons {
-            color: $flyout-text-color-selected;
-          }
-        }
-      }
-
-      &.e-overlay {
-        @if $skin-name == 'fluent2' {
-          & .e-nav-arrow.e-icons {
-            color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
-          }
-        }
-      }
-
-      &:active {
-        background: $cmenu-li-selection-bgcolor;
-      }
-    }
-
-    &.e-inherit {
-      border: 0;
-
-      & .e-menu,
-      & .e-menu .e-menu-item .e-menu-icon,
-      & .e-menu .e-menu-item .e-caret {
-        color: inherit;
-      }
-
-      & .e-menu {
-        background: inherit;
-      }
-
-      & .e-menu .e-menu-item.e-selected,
-      & .e-menu .e-menu-item.e-active-item,
-      & .e-menu .e-menu-item.e-focused {
-        background: rgba(transparent, .056);
-        color: inherit;
-      }
-    }
-  }
-
-  .e-menu-wrapper.e-hamburger,
-  .e-menu-container.e-hamburger {
-    & .e-menu-header {
-      color: $submenu-color;
-
-      & .e-menu-icon {
-        color: $submenu-color;
-      }
-    }
-
-    & ul {
-      color: $submenu-color;
-
-      @if $skin-name == 'bootstrap4' {
-        & .e-selected .e-caret,
-        & .e-active-item .e-caret,
-        & .e-caret {
-          color: $submenu-color;
-        }
-      }
-    }
-  }
-}
-
-@if $skin-name == 'fluent2' {
-  .e-menu-wrapper.e-hamburger .e-menu-popup .e-menu-item.e-menu-caret-icon:not(.e-selected):not(.e-focused) .e-icons {
-    color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
-  }
-}
+@use 'sass:color';
+@import '../context-menu/theme-mixin.scss';
+@include export-module('menu-theme') {
+  .e-menu-wrapper,
+  .e-menu-container {
+    background: $menu-ul-bgcolor;
+
+    @at-root {
+      & .e-menu {
+        @if $skin-name == 'bootstrap4' {
+          background-color: $cmenu-ul-bgcolor;
+        }
+        @else {
+          background: inherit;
+        }
+        color: $menu-color;
+
+        &.e-menu {
+          &:not(.e-vertical) {
+            & .e-separator {
+              border-right-color: $menu-seperator-border-color;
+            }
+          }
+        }
+
+        & .e-menu-item  {
+          @if $skin-name == 'bootstrap4' {
+            & .e-caret {
+              color: $menu-caret-color;
+            }
+
+            & .e-menu-icon {
+              color: $menu-icon-color;
+            }
+          }
+          @else {
+            @include icon-color;
+            @if $skin-name == 'fluent2' {
+              & .e-menu-icon,
+              & .e-caret {
+                color: $icon-color;
+              }
+            }
+          }
+
+          &.e-menu-header {
+            border-bottom-color: $cmenu-li-border-color;
+          }
+
+          & .e-menu-url {
+            color: $menu-color;
+          }
+
+          &.e-focused {
+            color: $menu-icon-hover-color;
+            outline: $menu-li-hover-outline;
+            outline-offset: $menu-li-hover-outline-offset;
+            @if $skin-name == 'bootstrap4' {
+              background: $menu-ul-bgcolor;
+
+              & .e-caret {
+                color: $menu-caret-color;
+              }
+
+              & .e-menu-icon {
+                color: $menu-icon-hover-color;
+              }
+            }
+            @else {
+              @include focused-icon-color;
+              background: $menu-li-bgcolor;
+              @if $skin-name == 'Material3' {
+                border-radius: 2px;
+              }
+              @if $skin-name == 'fluent2' {
+                border-radius: 4px;
+                &:focus-visible {
+                  color: $content-text-color;
+                  & .e-caret,
+                  & .e-menu-icon {
+                    color: $icon-color;
+                  }
+                }
+              }
+            }
+          }
+
+          &.e-selected,
+          &.e-active-item {
+            color: $menu-selected-color;
+            outline: $menu-li-selected-outline;
+            outline-offset: $menu-li-selected-outline-offset;
+            @if $skin-name == 'bootstrap4' {
+              background: $menu-ul-bgcolor;
+            }
+            @if $skin-name == 'FluentUI' {
+              background: $cmenu-li-bgcolor;
+            }
+            @else {
+              background: $menu-li-selection-bgcolor;
+            }
+            @if $skin-name == 'Material3' {
+              border-radius: 2px;
+            }
+            @if $skin-name == 'fluent2' {
+              border-radius: 4px;
+            }
+
+            & .e-caret {
+              @if $skin-name == 'Material3' {
+                color: $menu-icon-focussed-color;
+              }
+              @else {
+                color: $menu-caret-color;
+              }
+            }
+
+            & .e-menu-icon {
+              @if $skin-name == 'Material3' {
+                color: $menu-icon-focussed-color;
+              }
+              @else {
+                color: $menu-caret-color;
+              }
+            }
+          }
+
+          &.e-separator {
+            border-bottom-color: $menu-seperator-border-color;
+          }
+
+          &:focus-visible {
+            @if $skin-name == 'fluent2' {
+              &:not(.e-selected) {
+                border-radius: 4px;
+                background-color: $content-bg-color;
+                box-shadow: $shadow-focus-ring1;
+              }
+            }
+            @if $skin-name == 'tailwind3' {
+              box-shadow: $shadow-focus-ring2;
+              background: transparent;
+              border-radius: 4px;
+            }
+          }
+        }
+
+        @include disabled-color;
+      }
+
+      & .e-ul {
+        background: inherit;
+        color: $submenu-color;
+
+        & .e-menu-item {
+          @if $skin-name == 'bootstrap4' {
+            & .e-caret,
+            & .e-menu-icon {
+              color: $submenu-color;
+            }
+          }
+          @else if $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
+            & .e-caret,
+            & .e-menu-icon {
+              color: $menu-icon-color;
+            }
+          }
+
+          &.e-focused {
+            @if $skin-name == 'bootstrap4' {
+              & .e-caret {
+                color: $menu-caret-color;
+              }
+
+              & .e-menu-icon {
+                color: $submenu-color;
+              }
+            }
+            @if $skin-name == 'fluent2' {
+              background-color: $flyout-bg-color-hover;
+              border-radius: 4px;
+            }
+            @if $skin-name == 'tailwind3' {
+              & .e-caret,
+              & .e-menu-icon {
+                color: $icon-color-hover;
+              }
+            }
+          }
+
+          &.e-selected,
+          &.e-active-item {
+            @if $skin-name == 'bootstrap4' {
+              & .e-caret,
+              & .e-menu-icon {
+                color: $menu-icon-focussed-color;
+              }
+            }
+            @if $skin-name == 'fluent2' {
+              background-color: $flyout-bg-color-selected;
+            }
+            @if $skin-name == 'tailwind3' {
+              & .e-caret,
+              & .e-menu-icon {
+                color: $menu-icon-color;
+              }
+            }
+          }
+
+          & .e-menu-url {
+            color: $submenu-color;
+          }
+
+          &.e-focused {
+            @include focused-color;
+          }
+
+          &.e-selected,
+          &.e-active-item {
+            @include selected-color;
+          }
+
+          &.e-separator {
+            border-bottom-color: $cmenu-li-border-color;
+          }
+
+          &:focus-visible {
+            @if $skin-name == 'fluent2' {
+              background-color: $flyout-bg-color-focus;
+              box-shadow: $shadow-focus-ring1;
+              border-radius: 4px;
+            }
+            @if $skin-name == 'tailwind3' {
+              box-shadow: $shadow-focus-ring2;
+              background: $flyout-bg-color;
+            }
+          }
+
+          &:active {
+            @if $skin-name == 'bootstrap5.3' {
+              background-color: $cmenu-li-selection-bgcolor;
+              color: $cmenu-selected-color;
+            }
+          }
+        }
+      }
+    }
+
+    &.e-menu-popup {
+      background: $cmenu-ul-bgcolor;
+
+      & .e-ul .e-menu-item.e-disabled,
+      & .e-ul .e-menu-item.e-disabled .e-menu-icon {
+        @if $skin-name == 'fluent2' {
+          color: $flyout-text-color-disabled;
+          opacity: 1;
+        }
+      }
+
+      &.e-sfcontextmenu .e-menu-vscroll {
+        background: inherit;
+      }
+    }
+
+    & .e-menu-hscroll.e-hscroll .e-scroll-nav {
+      background: $menu-ul-bgcolor;
+
+      & .e-nav-arrow.e-icons {
+        @if $skin-name == 'fluent2' {
+          color: $icon-color;
+        }
+        @else if $skin-name == 'tailwind3' {
+          color: $secondary-text-color-focus;
+        }
+        @else {
+          color: $cmenu-caret-color;
+        }
+      }
+
+      &:hover {
+        @if $skin-name == 'bootstrap4' {
+          background: color.adjust($gray-600, $lightness: -7.5%);
+          border: 1px inset color.adjust($gray-600, $lightness: -10%);
+
+          & .e-icons {
+            color: $menu-icon-focussed-color;
+          }
+        }
+        @else if $skin-name == 'Material3' {
+          border-radius: 2px;
+        }
+        @else {
+          background: $menu-li-bgcolor;
+        }
+
+        @if $skin-name == 'fluent2' {
+          & .e-nav-arrow.e-icons {
+            color: $icon-color-pressed;
+          }
+        }
+      }
+
+      &:focus {
+        @if $skin-name == 'bootstrap4' {
+          background: color.adjust($gray-600, $lightness: -7.5%);
+          border-color: color.adjust($gray-600, $lightness: -10%);
+
+          & .e-icons {
+            color: $menu-icon-focussed-color;
+          }
+        }
+        @else {
+          background: $menu-li-bgcolor;
+        }
+
+        @if $skin-name == 'fluent2' {
+          & .e-nav-arrow.e-icons {
+            color: $icon-color-hover;
+          }
+        }
+      }
+
+      &:active {
+        @if $skin-name == 'bootstrap4' {
+          background: color.adjust($gray-600, $lightness: -7.5%);
+          border: 1px inset color.adjust($gray-600, $lightness: -10%);
+        }
+        @else if $skin-name == 'tailwind3' {
+          background: $secondary-bg-color-pressed;
+        }
+        @else {
+          background: $menu-li-bgcolor;
+        }
+        @if $skin-name == 'fluent2' {
+          & .e-nav-arrow.e-icons {
+            color: $icon-color-pressed;
+          }
+        }
+      }
+    }
+
+    &.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
+      background: $cmenu-ul-bgcolor;
+      border-color: $menu-seperator-border-color;
+
+      & .e-icons {
+        color: $cmenu-color;
+      }
+
+      &:hover,
+      &:focus {
+        background: $cmenu-li-bgcolor;
+        @if $skin-name == 'fluent2' {
+          & .e-nav-arrow.e-icons {
+            color: $flyout-text-color-selected;
+          }
+        }
+      }
+
+      &.e-overlay {
+        @if $skin-name == 'fluent2' {
+          & .e-nav-arrow.e-icons {
+            color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
+      &:active {
+        background: $cmenu-li-selection-bgcolor;
+      }
+    }
+
+    &.e-inherit {
+      border: 0;
+
+      & .e-menu,
+      & .e-menu .e-menu-item .e-menu-icon,
+      & .e-menu .e-menu-item .e-caret {
+        color: inherit;
+      }
+
+      & .e-menu {
+        background: inherit;
+      }
+
+      & .e-menu .e-menu-item.e-selected,
+      & .e-menu .e-menu-item.e-active-item,
+      & .e-menu .e-menu-item.e-focused {
+        background: rgba(transparent, .056);
+        color: inherit;
+      }
+    }
+  }
+
+  .e-menu-wrapper.e-hamburger,
+  .e-menu-container.e-hamburger {
+    & .e-menu-header {
+      color: $submenu-color;
+
+      & .e-menu-icon {
+        color: $submenu-color;
+      }
+    }
+
+    & ul {
+      color: $submenu-color;
+
+      @if $skin-name == 'bootstrap4' {
+        & .e-selected .e-caret,
+        & .e-active-item .e-caret,
+        & .e-caret {
+          color: $submenu-color;
+        }
+      }
+    }
+  }
+}
+
+@if $skin-name == 'fluent2' {
+  .e-menu-wrapper.e-hamburger .e-menu-popup .e-menu-item.e-menu-caret-icon:not(.e-selected):not(.e-focused) .e-icons {
+    color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+@if $skin-name == 'tailwind3' {
+  .e-menu-wrapper.e-hamburger .e-menu .e-menu-item.e-selected {
+    color: $primary;
+  }
+}