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

panel/btn mobile & scripts
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-25 19:40:55 +01:00
parent bd97c1c33e
commit f28680f77e
26 changed files with 506 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

48
assets/css/components/_btn-group-mobile.scss Normal file
View file

@ -0,0 +1,48 @@
.btn--group__mobile{
z-index: calc(var(--z-header) - 10);
opacity: 0;
transition: opacity .3s ease-in;
&.is-visible{
opacity: 1;
}
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
// padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,
var(--color-bg) 0%,
var(--color-bg) 75%,
transparent 100%);
// background-color: yellow;
display: flex;
align-items: flex-end;
gap: var(--padding-inner);
button, .dropdown{
flex-grow: 1;
width: 100%;
}
}
@media #{$small-up}{
.btn--group__mobile{
display: none;
opacity: 0!important;
}
}

16
assets/css/components/_buttons.scss
View file

@ -160,12 +160,26 @@ button:disabled{
}
.btn--toc{
svg{
width: 15px;
height: 15px;
top: 0px;
}
}
.btn--back-to-top{
display: flex;
border-color: var(--color-txt);
width: fit-content;
margin-inline: auto;
margin: var(--spacing) auto;
@media #{$small}{
margin-bottom: calc(var(--spacing)*2);
}
.icon{
width: 12px;
height: 12px;

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

@ -74,10 +74,9 @@
}
// PANEL 
@media #{$small}{
&--position-panel .dropdown__content {
&--position-mobile .dropdown__content {
top: auto;
bottom: calc(var(--h-block) + var(--padding-inner));
bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto;
right: 0;
margin-top: 0;
@ -91,19 +90,20 @@
position: absolute;
top: auto;
bottom: -13px;
left: 50%;
left: auto;
right: 10%;
}
}
&--position-panel.is-open {
&--position-mobile.is-open {
.dropdown__content {
transform: translateX(0);
}
}
}
@media #{$small-up}{

1
assets/css/components/_modal-share.scss
View file

@ -1,6 +1,7 @@
.modal--share{
width: 240px;
padding-bottom: var(--padding-inner);
background-color: var(--color-bg);
.socials{
display: block;
list-style: none;