style: update Navbar and Select component styles for improved consistency and usability
This commit is contained in:
@@ -29,22 +29,25 @@
|
||||
&__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-2xs);
|
||||
gap: var(--nds-spacing-xs);
|
||||
flex: 1;
|
||||
}
|
||||
&__link {
|
||||
|
||||
:global(.navbar__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 {
|
||||
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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
svg {
|
||||
color: var(--nds-neutral);
|
||||
transition: transform 160ms ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
&__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 {
|
||||
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 {
|
||||
opacity: 0.5;
|
||||
|
||||
.select__trigger {
|
||||
background-color: var(--nds-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-open="true"] &__menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
&:hover:not(.select-option__disabled) {
|
||||
background-color: var(--nds-secondary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--nds-accent);
|
||||
}
|
||||
|
||||
&__selected {
|
||||
background-color: var(--nds-primary);
|
||||
color: var(--nds-text);
|
||||
transition: background-color 110ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in srgb, var(--nds-primary) 85%, var(--nds-background));
|
||||
background-color: var(--nds-surface-hover);
|
||||
}
|
||||
&[aria-selected="true"] {
|
||||
color: var(--nds-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__disabled {
|
||||
background-color: var(--nds-disabled);
|
||||
color: color-mix(in srgb, var(--nds-text) 40%, transparent);
|
||||
color: var(--nds-disabled);
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user