Update _navbar.scss with disabled dropdown menu items colour (#1797)

* Update _navbar.scss * code style fixes * Create mighty-mirrors-drum.md --------- Co-authored-by: codecalm <codecalm@gmail.com> Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
tabler · Jan 1, 2024 · cb4a681 · cb4a681
1 parent 02d6287
commit cb4a681
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/.changeset/mighty-mirrors-drum.md b/.changeset/mighty-mirrors-drum.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update `_navbar.scss` with disabled dropdown menu items color
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
@@ -1,4 +1,3 @@
-
 @mixin navbar-vertical-nav {
   .navbar-collapse {
     flex-direction: column;
@@ -14,7 +13,7 @@
       margin-right: 0;
 
       .nav-link {
-        padding: .5rem calc(#{$container-padding-x} / 2);
+        padding: 0.5rem calc(#{$container-padding-x} / 2);
         justify-content: flex-start;
       }
     }
@@ -40,6 +39,12 @@
         padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
+        &.disabled {
+          color: var(--#{$prefix}gray-300);
+          pointer-events: none;
+          background-color: transparent;
+        }
+
         &.active,
         &:active {
           background: var(--#{$prefix}navbar-active-bg);
@@ -110,8 +115,8 @@ Navbar
 
       .badge {
         position: absolute;
-        top: .375rem;
-        right: .375rem;
+        top: 0.375rem;
+        right: 0.375rem;
         transform: translate(50%, -50%);
       }
     }
@@ -147,7 +152,7 @@ Navbar
             position: absolute;
             left: 0;
             right: 0;
-            bottom: -.25rem;
+            bottom: -0.25rem;
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
           }
@@ -215,7 +220,12 @@ Navbar toggler
   width: 1.25em;
   background: currentColor;
   border-radius: 10px;
-  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
+  @include transition(
+    top $navbar-toggler-animation-time $navbar-toggler-animation-time,
+    bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
+    transform $navbar-toggler-animation-time,
+    opacity 0s $navbar-toggler-animation-time
+  );
   position: relative;
 
   &:before,
@@ -232,11 +242,11 @@ Navbar toggler
   }
 
   &:before {
-    top: -.45em;
+    top: -0.45em;
   }
 
   &:after {
-    bottom: -.45em;
+    bottom: -0.45em;
   }
 
   .navbar-toggler[aria-expanded="true"] & {
@@ -316,7 +326,7 @@ Navbar vertical
             }
 
             .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
+              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
               justify-content: center;
             }
 
@@ -330,8 +340,8 @@ Navbar vertical
               min-height: auto;
 
               .nav-link {
-                padding-top: .5rem;
-                padding-bottom: .5rem;
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
               }
             }
 
@@ -365,7 +375,6 @@ Navbar vertical
   }
 }
 
-
 .navbar-overlap {
   &:after {
     content: "";
@@ -378,4 +387,4 @@ Navbar vertical
     z-index: -1;
     box-shadow: inherit;
   }
-}
+}