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); height: calc(var(--header-h)*0.75);
width: 100vw; width: 100vw;
background-color: var(--color-bg); background-color: var(--color-bg);
padding-left: var(--padding-body); padding-left: var(--padding-body);
padding-right: var(--padding-body); padding-right: var(--padding-body);

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

@ -10,7 +10,7 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
min-width: 180px;
margin-top: var(--padding-inner); margin-top: var(--padding-inner);
background-color: var(--color-bg); background-color: var(--color-bg);
border: var(--border); border: var(--border);
@ -29,13 +29,16 @@
top: -13px; top: -13px;
left: 16px; left: 16px;
} }
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: var(--padding-inner); padding: var(--padding-inner);
min-width: 180px;
} }
a, button { a,
button {
display: block; display: block;
width: 100%; width: 100%;
padding: 0.75em 1ch; padding: 0.75em 1ch;
@ -58,6 +61,7 @@
&--align-right .dropdown__content { &--align-right .dropdown__content {
left: auto; left: auto;
right: 0; right: 0;
&::before { &::before {
left: auto; left: auto;
right: 16px; right: 16px;
@ -73,35 +77,39 @@
} }
} }
// PANEL
&--position-mobile .dropdown__content { &--position-mobile .dropdown__content {
top: auto; background-color: red;
bottom: calc(var(--h-block) + var(--padding-inner)*2); }
left: auto;
right: 0;
margin-top: 0;
margin-left: 4px;
&::before{ // PANEL
font-family: Arial; // &--position-mobile .dropdown__content {
content: "◀"; // top: auto;
transform: rotate(-90deg); // bottom: calc(var(--h-block) + var(--padding-inner)*2);
font-size: 14px; // left: auto;
position: absolute; // right: 0;
top: auto; // margin-top: 0;
bottom: -13px; // margin-left: 4px;
left: auto;
right: 10%; // &::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 { // &--position-mobile.is-open {
.dropdown__content { // .dropdown__content {
transform: translateX(0); // transform: translateX(0);
} // }
} // }
@ -141,6 +149,10 @@
.dropdown__content { .dropdown__content {
width: calc(100vw - var(--padding-body)*2); width: calc(100vw - var(--padding-body)*2);
left: auto;
right: 0;
background-color: blue!important;
.modal--share { .modal--share {
width: 100%; width: 100%;
} }
@ -153,18 +165,43 @@
@media screen and (max-width: 1280px){ #bottom-bar {
@media #{$x-small} {
}
[data-template="investigations"]{
.dropdown .dropdown__content { .dropdown .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto; left: auto;
right: 0; right: 0;
margin-top: 0;
margin-left: 4px;
&::before { &::before {
font-family: Arial;
content: "◀";
transform: rotate(-90deg);
font-size: 14px;
position: absolute;
top: auto;
bottom: -13px;
left: auto; left: auto;
right: 16px; right: 10%;
}
}
.dropdown.is-open {
.dropdown__content {
transform: translateX(0);
} }
} }
} }
}

53
assets/css/style.css
View file

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

2
site/templates/investigation.php
View file

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