botascopia-webiste-static/assets/css/_site-header.scss
2026-01-12 18:25:15 +01:00

86 lines
No EOL
1.6 KiB
SCSS
Executable file

#site-header{
height: var(--header-h);
width: 100vw;
background-color: var(--white);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--padding-body);
gap: calc(var(--unit)*2);
a{ text-decoration: none; }
h1{
font-family: var(--font-title);
color: var(--color-txt);
text-decoration: none;
font-size: 1.2rem;
}
}
#site-header ul{
list-style: none;
}
/*----------------*/
/* search bar */
/*----------------*/
.search {
display: flex;
flex-direction: row-reverse;
height: calc(var(--unit)*1.5);
flex-grow: 2;
}
.search__toggle {
display: none;
}
.search__label {
cursor: pointer;
user-select: none;
width: calc(var(--unit)*1.5);
height: calc(var(--unit)*1.5);
display: flex;
justify-content: center;
align-items: center;
}
.search__input {
display: none;
}
.search__icon{
width: var(--unit);
}
.search__icon--open {
display: block;
}
.search__icon--close {
display: none;
}
.search__toggle:checked ~ .search__input {
display: block;
}
.search__toggle:checked ~ .search__label .search__icon--open {
display: none;
}
.search__toggle:checked ~ .search__label .search__icon--close {
display: block;
}
#btn__connexion{
font-weight: 500;
font-size: 1rem;
background-color: var(--color-txt);
color: white;
display: inline-flex;
align-items: center;
height: calc(var(--unit)*1.25);
padding: 0px 1ch;
border-radius: var(--radius-btn);
cursor: pointer;
}