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

dropdown css

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 17:00:54 +01:00
parent d0b21ac4bb
commit 662a55863d
6 changed files with 153 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/components/_bottom-bar.scss
View file

@ -10,6 +10,7 @@
height: calc(var(--header-h)*0.75);
width: 100vw;
background-color: var(--color-bg);
padding-left: var(--padding-body);
padding-right: var(--padding-body);

199
assets/css/components/_dropdown.scss
View file

@ -10,7 +10,7 @@
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin-top: var(--padding-inner);
background-color: var(--color-bg);
border: var(--border);
@ -21,7 +21,7 @@
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: calc(var(--z-header) - 100);
&::before{
&::before {
content: "◀";
transform: rotate(90deg);
font-size: 14px;
@ -29,13 +29,16 @@
top: -13px;
left: 16px;
}
ul {
list-style: none;
margin: 0;
padding: var(--padding-inner);
min-width: 180px;
}
a, button {
a,
button {
display: block;
width: 100%;
padding: 0.75em 1ch;
@ -58,14 +61,15 @@
&--align-right .dropdown__content {
left: auto;
right: 0;
&::before{
&::before {
left: auto;
right: 16px;
}
}
&.is-open {
&.is-open {
.dropdown__content {
opacity: 1;
visibility: visible;
@ -73,98 +77,131 @@
}
}
// PANEL
&--position-mobile .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto;
right: 0;
margin-top: 0;
margin-left: 4px;
&::before{
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: auto;
right: 10%;
}
}
&--position-mobile.is-open {
.dropdown__content {
transform: translateX(0);
}
}
@media #{$small-up}{
&--position-panel .dropdown__content {
top: auto;
bottom: 0;
left: calc(100% + var(--padding-inner));
margin-top: 0;
margin-left: 4px;
&::before{
font-family: Arial;
content: "◀";
transform: rotate(0deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: 4px;
left: -11px;
}
}
&--position-panel.is-open {
.dropdown__content {
transform: translateX(0);
}
}
&--position-mobile .dropdown__content {
background-color: red;
}
// PANEL
// &--position-mobile .dropdown__content {
// top: auto;
// bottom: calc(var(--h-block) + var(--padding-inner)*2);
// left: auto;
// right: 0;
// margin-top: 0;
// margin-left: 4px;
@media #{$x-small}{
// &::before{
// font-family: Arial;
// content: "◀";
// transform: rotate(-90deg);
// font-size: 14px;
// position: absolute;
// top: auto;
// bottom: -13px;
// left: auto;
// right: 10%;
// }
// }
.dropdown__content{
width: calc(100vw - var(--padding-body)*2);
.modal--share{
width: 100%;
}
// &--position-mobile.is-open {
// .dropdown__content {
// transform: translateX(0);
// }
// }
@media #{$small-up} {
&--position-panel .dropdown__content {
top: auto;
bottom: 0;
left: calc(100% + var(--padding-inner));
margin-top: 0;
margin-left: 4px;
&::before {
font-family: Arial;
content: "◀";
transform: rotate(0deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: 4px;
left: -11px;
}
}
&--position-panel.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}
}
@media #{$x-small} {
@media screen and (max-width: 1280px){
[data-template="investigations"]{
.dropdown .dropdown__content {
.dropdown__content {
width: calc(100vw - var(--padding-body)*2);
left: auto;
right: 0;
&::before{
left: auto;
right: 16px;
background-color: blue!important;
.modal--share {
width: 100%;
}
}
}
}
#bottom-bar {
@media #{$x-small} {
}
.dropdown .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto;
right: 0;
margin-top: 0;
margin-left: 4px;
&::before {
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: auto;
right: 10%;
}
}
.dropdown.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}