mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
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>
This commit is contained in:
5
.changeset/mighty-mirrors-drum.md
Normal file
5
.changeset/mighty-mirrors-drum.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Update `_navbar.scss` with disabled dropdown menu items color
|
||||
@@ -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: "";
|
||||
|
||||
Reference in New Issue
Block a user