59 lines
1.3 KiB
SCSS
59 lines
1.3 KiB
SCSS
@use "../../styles/tokens/typography" as *;
|
|
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-lg);
|
|
height: 60px;
|
|
padding: 0 var(--nds-spacing-lg);
|
|
background-color: var(--nds-surface);
|
|
border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
|
|
|
|
&__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-xs);
|
|
}
|
|
&__mark {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--nds-radius-md);
|
|
background: linear-gradient(135deg, var(--nds-primary), var(--nds-accent));
|
|
}
|
|
&__title {
|
|
@include text-xl;
|
|
font-size: 1rem;
|
|
color: var(--nds-text);
|
|
}
|
|
|
|
&__links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-xs);
|
|
flex: 1;
|
|
|
|
: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);
|
|
}
|
|
|
|
// On cible la variante active globale séparément
|
|
:global(.navbar__link--active) {
|
|
color: var(--nds-primary);
|
|
}
|
|
}
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-sm);
|
|
}
|
|
}
|