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-border: 0px 0px 0px 1px rgba(18, 18, 23, 0.10) !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-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-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !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-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-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;

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

@@ -275,7 +275,9 @@ Navbar transparent
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;
padding: 0;
align-items: stretch;

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

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

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

@@ -29,7 +29,7 @@
&:hover {
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;
height: 100%;
}
.nav-link:hover & {
color: var(--#{$prefix}nav-link-hover-icon-color);
}
}
.nav-fill {