flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Carousel: Rewrite some classes

Browse Source
This commit is contained in:
Félix Péault
2020-02-29 10:47:46 +01:00
parent 4d8493e407
commit fd45ce1731
2 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/style/organisms/_carousel.scss
View File

@@ -185,53 +185,49 @@
/*
** Information
*/
&__information {
&__infos {
position: relative;
z-index: 3;
// Locations
&--locations {
position: relative;
overflow: hidden;
min-height: 128px;
}
// Location
&--location {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
text-align: center;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
.street {
width: 100%;
position: relative;
margin-top: 32px;
height: 30px;
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
margin-top: 72px;
}
span {
$distance: 40%;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
white-space: nowrap;
transform: translateY(-$distance);
opacity: 0;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
&.prev {
transform: translateY(-$distance);
}
&.active {
transform: translateY(0);
opacity: 1;
}
&.next {
transform: translateY($distance);
}
}
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
margin-top: 72px;
}
&.prev {
transform: translateY(-$distance);
}
&.active {
transform: translateY(0);
opacity: 1;
}
&.next {
transform: translateY($distance);
}
// State
.state {
margin-top: 6px;
}