studio-variable/index-main
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

create dropdown
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-21 16:33:15 +01:00
parent d28c90aefe
commit d7a8611376
9 changed files with 275 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

84
assets/css/components/_dropdown.scss Normal file
View file

@ -0,0 +1,84 @@
.dropdown {
position: relative;
display: inline-block;
&__trigger {
cursor: pointer;
}
&__content {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin-top: 4px;
background-color: var(--color-bg);
border: var(--border);
border-radius: var(--radius-btn);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 100;
ul {
list-style: none;
margin: 0;
padding: var(--padding-inner);
}
li {
// border-bottom: var(--border-light);
&:last-child {
border-bottom: none;
}
}
a, button {
display: block;
width: 100%;
padding: 0.75em 1ch;
font-size: var(--fs-small);
text-align: left;
text-decoration: none;
color: var(--color-txt);
background: none;
border: none;
cursor: pointer;
&:hover {
background-color: var(--grey-800);
}
}
}
// Positionnement par défaut : sous le bouton, aligné à gauche
// Variante : aligné à droite
&--align-right .dropdown__content {
left: auto;
right: 0;
}
// Variante : dropdown à droite du bouton
&--position-right .dropdown__content {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
&.is-open {
.dropdown__content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
&--position-right.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}