studio-variable/index-main
4
0
Fork 0
Code Issues 15 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);

115
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,7 +61,8 @@
&--align-right .dropdown__content {
left: auto;
right: 0;
&::before{
&::before {
left: auto;
right: 16px;
@ -73,40 +77,44 @@
}
}
// 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%;
}
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;
// &::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);
}
}
// &--position-mobile.is-open {
// .dropdown__content {
// transform: translateX(0);
// }
// }
@media #{$small-up}{
@media #{$small-up} {
&--position-panel .dropdown__content {
top: auto;
bottom: 0;
@ -114,7 +122,7 @@
margin-top: 0;
margin-left: 4px;
&::before{
&::before {
font-family: Arial;
content: "◀";
transform: rotate(0deg);
@ -137,11 +145,15 @@
}
@media #{$x-small}{
@media #{$x-small} {
.dropdown__content{
.dropdown__content {
width: calc(100vw - var(--padding-body)*2);
.modal--share{
left: auto;
right: 0;
background-color: blue!important;
.modal--share {
width: 100%;
}
}
@ -153,18 +165,43 @@
@media screen and (max-width: 1280px){
#bottom-bar {
@media #{$x-small} {
}
[data-template="investigations"]{
.dropdown .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto;
right: 0;
&::before{
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: 16px;
}
right: 10%;
}
}
.dropdown.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}

59
assets/css/style.css
View file

@ -1269,7 +1269,6 @@ button.sort[data-sort-type=up] .arrow {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
margin-top: var(--padding-inner);
background-color: var(--color-bg);
border: var(--border);
@ -1292,8 +1291,10 @@ button.sort[data-sort-type=up] .arrow {
list-style: none;
margin: 0;
padding: var(--padding-inner);
min-width: 180px;
}
.dropdown__content a, .dropdown__content button {
.dropdown__content a,
.dropdown__content button {
display: block;
width: 100%;
padding: 0.75em 1ch;
@ -1305,7 +1306,8 @@ button.sort[data-sort-type=up] .arrow {
border: none;
cursor: pointer;
}
.dropdown__content a:hover, .dropdown__content button:hover {
.dropdown__content a:hover,
.dropdown__content button:hover {
background-color: var(--grey-800);
}
.dropdown--align-right .dropdown__content {
@ -1322,26 +1324,7 @@ button.sort[data-sort-type=up] .arrow {
transform: translateY(0);
}
.dropdown--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;
}
.dropdown--position-mobile .dropdown__content::before {
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: auto;
right: 10%;
}
.dropdown--position-mobile.is-open .dropdown__content {
transform: translateX(0);
background-color: red;
}
@media screen and (min-width: 768px) {
.dropdown--position-panel .dropdown__content {
@ -1368,22 +1351,38 @@ button.sort[data-sort-type=up] .arrow {
@media screen and (max-width: 560px) {
.dropdown .dropdown__content {
width: calc(100vw - var(--padding-body) * 2);
left: auto;
right: 0;
background-color: blue !important;
}
.dropdown .dropdown__content .modal--share {
width: 100%;
}
}
@media screen and (max-width: 1280px) {
[data-template=investigations] .dropdown .dropdown__content {
#bottom-bar .dropdown .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner) * 2);
left: auto;
right: 0;
}
[data-template=investigations] .dropdown .dropdown__content::before {
left: auto;
right: 16px;
}
margin-top: 0;
margin-left: 4px;
}
#bottom-bar .dropdown .dropdown__content::before {
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: auto;
right: 10%;
}
#bottom-bar .dropdown.is-open .dropdown__content {
transform: translateX(0);
}
.main__single .page__content,
#investigation__content {
font-size: var(--fs-text);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

2
assets/js/dropdown.js
View file

@ -38,7 +38,7 @@ export function initDropdowns(responsiveSmall) {
const isOpening = !dropdown.classList.contains('is-open');
if (isOpening) {
if (isOpening && !dropdown.closest('#bottom-bar')) {
// Vérifie s'il y a la place à droite
const content = dropdown.querySelector('.dropdown__content');
const triggerRect = trigger.getBoundingClientRect();

2
site/templates/investigation.php
View file

@ -458,7 +458,7 @@ if ($package):
<p class="title"><?= $page->title()->esc() ?></p>
</div>
<div class="dropdown dropdown--position-mobile">
<div class="dropdown">
<button class="dropdown__trigger btn--simple no-link">
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
<span class="text">Partager</span>