bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

toggle animations

Browse Source
This commit is contained in:
Valentin
2024-11-14 02:31:10 +01:00
parent f2680fc65a
commit 9bf84290ac
8 changed files with 258 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
web/themes/custom/caravane/assets/scss/main.scss
View File

@@ -63,7 +63,7 @@ body{
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 1 / span 1;
grid-column: 1 / span 1;
}
> div > div > a > img {
width: 100%;
@@ -76,7 +76,7 @@ body{
align-items: center;
padding-right: 2.5rem;
@media screen and (min-width: $desktop-min-width) {
grid-column: 2 / span 2;
grid-column: 2 / span 2;
}
> div > div > a > img {
width: 100%;
@@ -90,7 +90,7 @@ body{
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 8 / span 2;
grid-column: 8 / span 2;
}
> div > div > a > img {
width: 100%;
@@ -296,7 +296,7 @@ body{
> div {
pointer-events: auto;
}
}
}
> .layout__region--second {
position: fixed;
z-index: 1;
@@ -404,7 +404,7 @@ body{
flex-direction: column;
justify-content: center;
align-items: center;
*/
*/
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
@@ -597,6 +597,7 @@ body{
margin: 30px 0;
transform: scale(1);
opacity: 1;
padding-right: 0.5rem;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
cursor: pointer;
> .infos-arret {
@@ -625,7 +626,7 @@ body{
text-align: right;
@media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop;
}
}
}
}
> .views-field-field-adresse-postal-code {
@@ -647,7 +648,7 @@ body{
content: ')';
}
}
}
> .views-field-field-dates {
grid-column: 1 / span 2;
@@ -821,7 +822,7 @@ body{
@media screen and (min-width: $tablet-min-width) {
width: calc($modale-width-mobile - $modale-x-padding * 6);
margin-left: $modale-x-padding * 3;
}
@media screen and (min-width: $desktop-min-width) {
width: calc($modale-width-desktop - $modale-x-padding * 4);
@@ -960,7 +961,7 @@ body{
> .description {
width: 100%;
margin-top: 1rem;
@media screen and (min-width: $desktop-min-width) {
@media screen and (min-width: $desktop-min-width) {
width: calc(100% - 6rem);
margin-top: 0;
}
@@ -1178,6 +1179,75 @@ body{
}
}
}
> #animation-toggle > div {
cursor: pointer;
position: fixed;
bottom: $body-margin-bottom;
right: $body-margin-x;
z-index: 999;
display: flex;
align-items: center;
padding: 0.4rem 1.2rem;
border-radius: 10rem;
background-color: white;
transition: background-color 0.3s ease-out;
> div {
margin-right: 1rem;
> p {
font-size: $sm-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
}
> .switch {
position: relative;
display: inline-block;
width: 2.2rem;
height: 1.2rem;
> input {
opacity: 0;
width: 0;
height: 0;
&:checked + .slider {
background-color: $brand-color;
}
&:focus + .slider {
box-shadow: 0 0 1px $brand-color;
}
&:checked + .slider::before {
-webkit-transform: translateX(1rem);
-ms-transform: translateX(1rem);
transform: translateX(1rem);
}
}
> .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: $main-color-light;
-webkit-transition: .4s;
transition: .4s;
&::before {
position: absolute;
content: "";
height: 1rem;
width: 1rem;
border-radius: 50%;
left: 0.1rem;
bottom: 0.1rem;
background-color: $light-color;
-webkit-transition: .4s;
transition: .4s;
}
}
}
}
}
> .user-login-form {
height: 90vh;
@@ -1192,5 +1262,5 @@ body{
}
}
}
}
}
}
}