Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-04-14 12:33:08 +04:00
Code Issues Projects Releases Wiki Activity

Refactor SCSS variables for box-shadow and nav-link colors to use CSS custom properties for improved consistency and customization

Browse Source
This commit is contained in:
codecalm
2026-02-19 00:10:04 +01:00
parent 943283568a
commit 65829e9d5e
5 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/scss/_variables.scss
View File

@@ -1003,7 +1003,7 @@ $box-shadow: $box-shadow-md !default;
$box-shadow-transparent: 0 0 0 0 transparent !default; $box-shadow-transparent: 0 0 0 0 transparent !default;
$box-shadow-border: 0px 0px 0px 1px rgba(18, 18, 23, 0.10) !default; $box-shadow-border: 0px 0px 0px 1px rgba(18, 18, 23, 0.10) !default;
$box-shadow-input: $box-shadow-xs !default; $box-shadow-input: $box-shadow-xs !default;
$box-shadow-card: $box-shadow-sm !default; $box-shadow-card: $box-shadow-xs !default;
$box-shadow-card-hover: $box-shadow-lg !default; $box-shadow-card-hover: $box-shadow-lg !default;
$box-shadow-dropdown: $box-shadow-overlay !default; $box-shadow-dropdown: $box-shadow-overlay !default;
@@ -1486,7 +1486,8 @@ $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
$nav-link-focus-box-shadow: $focus-ring-box-shadow !default; $nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$nav-link-icon-size: $icon-size !default; $nav-link-icon-size: $icon-size !default;
$nav-link-icon-color: inherit !default; $nav-link-icon-color: color-transparent(var(--#{$prefix}nav-link-color), 0.5) !default;
$nav-link-hover-icon-color: color-transparent(var(--#{$prefix}nav-link-color), 0.8) !default;
$nav-pills-border-radius: var(--#{$prefix}border-radius) !default; $nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
$nav-pills-link-active-color: var(--#{$prefix}primary) !default; $nav-pills-link-active-color: var(--#{$prefix}primary) !default;
@@ -1563,7 +1564,7 @@ $navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;
$navbar-toggler-animation-time: 0.2s !default; $navbar-toggler-animation-time: 0.2s !default;
$navbar-overlap-height: 9rem !default; $navbar-overlap-height: 9rem !default;
$navbar-nav-link-hover-bg: rgba(0, 0, 0, 0.04) !default; $navbar-nav-link-hover-bg: color-transparent(var(--#{$prefix}nav-link-color), 0.04) !default;
$navbar-active-border-color: var(--#{$prefix}primary) !default; $navbar-active-border-color: var(--#{$prefix}primary) !default;

4
core/scss/layout/_navbar.scss
View File

@@ -275,7 +275,9 @@ Navbar transparent
Navbar nav Navbar nav
*/ */
.navbar-nav { .navbar-nav {
--#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)}; --#{$prefix}nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
--#{$prefix}nav-link-icon-color: #{$nav-link-icon-color};
--#{$prefix}nav-link-hover-icon-color: #{$nav-link-hover-icon-color};
margin: 0; margin: 0;
padding: 0; padding: 0;
align-items: stretch; align-items: stretch;

4
core/scss/marketing/_pricing.scss
View File

@@ -20,7 +20,7 @@ $pricing-card-width: 22rem;
padding: 2rem; padding: 2rem;
margin: 0 0 1rem; margin: 0 0 1rem;
position: relative; position: relative;
box-shadow: $box-shadow-card; box-shadow: var(--#{$prefix}shadow-card);
text-align: center; text-align: center;
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
@@ -46,7 +46,7 @@ $pricing-card-width: 22rem;
order: unset; order: unset;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
box-shadow: $box-shadow-card; box-shadow: var(--#{$prefix}shadow-card);
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
} }
} }

2
core/scss/ui/_cards.scss
View File

@@ -29,7 +29,7 @@
&:hover { &:hover {
text-decoration: none; text-decoration: none;
box-shadow: $box-shadow-card-hover; box-shadow: var(--#{$prefix}shadow-card-hover);
} }
} }

4
core/scss/ui/_nav.scss
View File

@@ -99,6 +99,10 @@
display: block; display: block;
height: 100%; height: 100%;
} }
.nav-link:hover & {
color: var(--#{$prefix}nav-link-hover-icon-color);
}
} }
.nav-fill { .nav-fill {