From 6e077aaeed529742d228754edf58e05c61bb4d8c Mon Sep 17 00:00:00 2001 From: unkn0wn Date: Tue, 23 Jun 2026 12:35:23 +0200 Subject: [PATCH] style: update Navbar and Select component styles for improved consistency and usability --- src/components/Navbar/_navbar.scss | 27 +++--- src/components/Select/_select.scss | 107 +++++++++++++---------- src/components/Select/_selectOption.scss | 40 ++++----- 3 files changed, 96 insertions(+), 78 deletions(-) diff --git a/src/components/Navbar/_navbar.scss b/src/components/Navbar/_navbar.scss index 8e9d6a2..c430313 100644 --- a/src/components/Navbar/_navbar.scss +++ b/src/components/Navbar/_navbar.scss @@ -29,22 +29,25 @@ &__links { display: flex; align-items: center; - gap: var(--nds-spacing-2xs); + gap: var(--nds-spacing-xs); flex: 1; - } - &__link { - padding: var(--nds-spacing-2xs) var(--nds-spacing-sm); - border-radius: var(--nds-radius-md); - @include text-label; - color: var(--nds-neutral); - text-decoration: none; - transition: all 120ms ease; - &:hover { + + :global(.navbar__link) { + padding: var(--nds-spacing-2xs) var(--nds-spacing-sm); + border-radius: var(--nds-radius-md); + @include text-label; color: var(--nds-text); + text-decoration: none !important; + transition: all 120ms ease; + + } + :global(.navbar__link:hover) { background-color: var(--nds-surface-hover); } - &--active { - color: var(--nds-text); + + // On cible la variante active globale séparément + :global(.navbar__link--active) { + color: var(--nds-primary); } } &__right { diff --git a/src/components/Select/_select.scss b/src/components/Select/_select.scss index 07739f5..4ffbbb9 100644 --- a/src/components/Select/_select.scss +++ b/src/components/Select/_select.scss @@ -1,71 +1,90 @@ -@use '../../styles/tokens/typography' as *; +@use "../../styles/tokens/typography" as *; .select { position: relative; display: inline-flex; flex-direction: column; - width: 100%; + min-width: 200px; &__trigger { display: flex; align-items: center; justify-content: space-between; - padding: var(--nds-spacing-xs) var(--nds-spacing-md); - background-color: var(--nds-neutral); - color: var(--nds-text); - border: none; - border-radius: var(--nds-radius-sm); - cursor: pointer; - width: 100%; gap: var(--nds-spacing-xs); - + height: 38px; + padding: 0 var(--nds-spacing-sm); + background-color: var(--nds-surface); + border: var(--nds-border-width-thin) solid var(--nds-border-strong); + border-radius: var(--nds-radius-md); + cursor: pointer; + @include text-base; + color: var(--nds-text); + transition: + border-color 130ms ease, + box-shadow 130ms ease; &:hover { - background-color: color-mix(in srgb, var(--nds-neutral) 85%, var(--nds-text)); + border-color: var(--nds-neutral); + } + &:focus-visible { + outline: none; + border-color: var(--nds-primary); + box-shadow: 0 0 0 3px var(--nds-ring); + } + + svg { + color: var(--nds-neutral); + transition: transform 160ms ease; + flex-shrink: 0; } } - - &__label { - flex: 1; - text-align: left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &__placeholder { + color: var(--nds-neutral); } + &[data-open="true"] &__trigger { + border-color: var(--nds-primary); + } + &[data-open="true"] &__trigger svg { + transform: rotate(180deg); + } + + &__menu { + position: absolute; + top: calc(100% + 6px); + left: 0; + right: 0; + z-index: 40; + background-color: var(--nds-surface); + border: var(--nds-border-width-thin) solid var(--nds-border); + border-radius: var(--nds-radius-md); + box-shadow: var(--nds-shadow-md); + padding: var(--nds-spacing-3xs); + max-height: 240px; + overflow-y: auto; + display: none; + } &__arrow { - flex-shrink: 0; display: flex; align-items: center; - + justify-content: center; &--hidden { display: none; } } - - &__dropdown { - position: absolute; - top: calc(100% + var(--nds-spacing-2xs)); - left: 0; - right: 0; - background-color: var(--nds-neutral); - border-radius: var(--nds-radius-sm); - list-style: none; - margin: 0; - padding: 0; - z-index: 100; - overflow: hidden; - - &[hidden] { - display: none; + &--disabled { + cursor: not-allowed; + background-color: var(--nds-surface); + color: var(--nds-neutral); + border-color: var(--nds-border-strong); + opacity: 0.55; + & .select__trigger { + cursor: not-allowed; + &:hover { + border-color: var(--nds-border-strong); + } } } - - &--disabled { - opacity: 0.5; - - .select__trigger { - background-color: var(--nds-disabled); - cursor: not-allowed; + &[data-open="true"] &__menu { + display: block; } } -} \ No newline at end of file diff --git a/src/components/Select/_selectOption.scss b/src/components/Select/_selectOption.scss index 234498e..bfdfa38 100644 --- a/src/components/Select/_selectOption.scss +++ b/src/components/Select/_selectOption.scss @@ -1,32 +1,28 @@ -@use '../../styles/tokens/typography' as *; +@use "../../styles/tokens/typography" as *; .select-option { - padding: var(--nds-spacing-xs) var(--nds-spacing-md); + display: flex; + align-items: center; + gap: var(--nds-spacing-xs); + padding: var(--nds-spacing-xs) var(--nds-spacing-sm); cursor: pointer; + border-radius: var(--nds-radius-sm); + @include text-base; color: var(--nds-text); - background-color: var(--nds-neutral); - transition: background-color 0.15s ease; + transition: background-color 110ms ease; - &:hover:not(.select-option__disabled) { - background-color: var(--nds-secondary); + &:hover { + background-color: var(--nds-surface-hover); } - - &:active { - background-color: var(--nds-accent); + &[aria-selected="true"] { + color: var(--nds-primary); + font-weight: 600; } - - &__selected { - background-color: var(--nds-primary); - color: var(--nds-text); - + &__disabled { + color: var(--nds-disabled); + cursor: not-allowed; &:hover { - background-color: color-mix(in srgb, var(--nds-primary) 85%, var(--nds-background)); + background: transparent; } } - - &__disabled { - background-color: var(--nds-disabled); - color: color-mix(in srgb, var(--nds-text) 40%, transparent); - cursor: not-allowed; - } -} \ No newline at end of file +}