liste etape scrollable if window too small

This commit is contained in:
2025-01-15 01:39:56 +01:00
parent fc005904e2
commit 9049939b92
3 changed files with 63 additions and 1 deletions

View File

@@ -567,6 +567,9 @@ body{
max-width: 25%;
// grid-column: 16 / span 1;
}
&.liste-etapes-scrollable {
align-items: start;
}
@media screen and (min-width: $desktop-min-width) {
background: linear-gradient(to right, transparent, #faf1eb);
grid-column: 11 / span 6;
@@ -590,6 +593,20 @@ body{
&.disapeared {
display: none;
}
&.scrollable {
overflow-y: scroll;
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 7%,
black 85%,
transparent 100%
);
ul {
// padding-top: 0.5rem;
padding-bottom: 1rem;
}
}
ul {
list-style: none;
> li {
@@ -746,6 +763,13 @@ body{
transition: transform 0.3s ease-out;
}
}
.transparent-gradient {
position:absolute;
z-index:2;
right:0; bottom:0; left:0;
height:200px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}
}
> #content-modale {
padding-bottom: 20vh;
@@ -1247,10 +1271,10 @@ body{
}
}
> #animation-toggle {
transition: opacity 0.3s ease-out;
@media screen and (min-width: $desktop-min-width) {
z-index: 5;
}
transition: opacity 0.3s ease-out;
&.hidden {
opacity: 0;
}