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

harmonisation des styles
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-29 20:57:17 +01:00
parent 9ead1c51f4
commit b3f985a41b
30 changed files with 1601 additions and 465 deletions
Download patch file Download diff file Expand all files Collapse all files

86
assets/css/components/_slider-before-after.scss Normal file
View file

@ -0,0 +1,86 @@
.slider-before-after{
width: 100%;
max-width: 700px;
z-index: 300;
display: grid;
place-content: center;
position: relative;
overflow: hidden;
--position: 50%;
img {
display: block;
max-width: 100%;
}
.image-container {
position: relative;
width: 100%;
// max-width: 800px;
// max-height: 90vh;
// aspect-ratio: 1/1;
}
.slider-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before {
position: absolute;
inset: 0;
width: var(--position);
}
.slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
.slider-line {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
}