Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

Enhance navbar styles with new hover effects and color variables (#2159)

Browse Source
This commit is contained in:
Paweł Kuna
2025-02-14 00:01:41 +01:00
committed by GitHub
parent 9755e1e9e9
commit ca4ba14718
8 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/thick-kids-glow.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixes navbar styles with new hover effects and color variables

12
core/scss/_variables.scss
View File

@@ -681,7 +681,7 @@ $dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
// Tooltip
$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
$tooltip-color: var(--#{$prefix}light) !default;
$tooltip-padding-y: var(--#{$prefix}spacer-2) !default;
$tooltip-padding-y: var(--#{$prefix}spacer-1) !default;
$tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
// Loader
@@ -729,9 +729,10 @@ $modal-sm: 380px !default;
$nav-link-padding-y: 0.5rem !default;
$nav-link-padding-x: 0.75rem !default;
$nav-link-color: var(--#{$prefix}gray-500) !default;
$nav-link-active-color: var(--#{$prefix}body-color) !default;
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
$nav-link-icon-size: $icon-size !default;
$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
$nav-link-icon-color: inherit !default;
$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
$nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
@@ -753,7 +754,7 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
// Navbar
$navbar-height: 3.5rem !default;
$navbar-padding-y: 0.25rem !default;
$navbar-light-color: var(--#{$prefix}muted) !default;
$navbar-light-color: var(--#{$prefix}secondary) !default;
$navbar-hover-color: $white !default;
@@ -762,8 +763,8 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
$navbar-light-color: var(--#{$prefix}body-color) !default;
$navbar-light-brand-color: var(--#{$prefix}body-color) !default;
$navbar-light-active-color: var(--#{$prefix}body-color) color !default;
$navbar-light-hover-color: var(--#{$prefix}body-color) color !default;
$navbar-light-active-color: var(--#{$prefix}body-color) !default;
$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
$navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
@@ -787,6 +788,7 @@ $navbar-toggler-focus-width: 0 !default;
$navbar-overlap-height: 9rem !default;
$navbar-nav-link-padding-x: $nav-link-padding-x !default;
$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default;
$navbar-active-border-color: var(--#{$prefix}primary) !default;

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

@@ -107,8 +107,8 @@ Navbar
.nav-link {
position: relative;
min-width: 2rem;
min-height: 2rem;
min-width: 2.5rem;
min-height: 2.5rem;
justify-content: center;
border-radius: var(--#{$prefix}border-radius);
@@ -122,11 +122,6 @@ Navbar
}
}
.navbar-nav {
margin: 0;
padding: 0;
}
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -146,6 +141,10 @@ Navbar
.nav-item.active {
position: relative;
.nav-link {
color: var(--#{$prefix}navbar-active-color);
}
&:after {
content: "";
position: absolute;
@@ -276,6 +275,9 @@ Navbar transparent
Navbar nav
*/
.navbar-nav {
--#{$prefix}nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
margin: 0;
padding: 0;
align-items: stretch;
.nav-item {

2
core/scss/marketing/_browser.scss
View File

@@ -53,7 +53,7 @@
justify-content: center;
text-decoration: none;
padding: .25rem;
color: var(--#{$prefix}muted);
color: var(--#{$prefix}secondary);
font-size: var(--#{$prefix}font-size-h5);
border-radius: var(--#{$prefix}border-radius);
line-height: 1;

2
core/scss/marketing/_hero.scss
View File

@@ -18,7 +18,7 @@
}
.hero-description {
color: var(--#{$prefix}muted);
color: var(--#{$prefix}secondary);
font-size: var(--#{$prefix}font-size-h2);
line-height: 1.5;
margin: 0 auto;

2
core/scss/marketing/_sections.scss
View File

@@ -81,7 +81,7 @@
}
.section-description {
color: var(--#{$prefix}muted);
color: var(--#{$prefix}secondary);
font-size: var(--#{$prefix}font-size-h3);
line-height: var(--#{$prefix}line-height-h3);
margin-top: 1rem;

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

@@ -51,8 +51,13 @@
.nav-link {
display: flex;
@include transition(color $transition-time);
@include transition(color $transition-time, background-color $transition-time);
align-items: center;
&:hover,
&:focus {
background-color: var(--#{$prefix}nav-link-hover-bg);
}
}
.nav-link-toggle {

4
preview/pages/_includes/layout/navbar-side.html
View File

@@ -14,6 +14,7 @@
{% endunless %}
<div class="d-none d-{{ include.breakpoint }}-flex">
<div class="nav-item">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
data-bs-placement="bottom">
{% include "ui/icon.html" icon="moon" %}
@@ -23,6 +24,7 @@
data-bs-placement="bottom">
{% include "ui/icon.html" icon="sun" %}
</a>
</div>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
@@ -36,7 +38,7 @@
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
{% include "ui/avatar.html" person-id=person-id size="sm" %}
{% unless include.hide-username %}