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

menu mobile

Browse Source
This commit is contained in:
Valentin
2024-10-18 18:44:03 +02:00
parent d5c5d81841
commit baa26f3c49
6 changed files with 168 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,7 @@
@import 'fonts.scss';
$desktop-min-width: 992px;
$body-margin-x: 30px;
$body-margin-y: 5px;
$body-margin-bottom: 4vh;
@@ -17,9 +19,11 @@ $main-color-light: #635b58;
$light-color: #faf1eb;
$brand-color: #80c8bf;
$menu-width: 15vw;
$menu-mobile-width: 60vw;
$menu-desktop-width: 20vw;
$menu-margin: 2rem;
body{
font-family: 'Marianne', sans-serif;
color: $main-color;
@@ -38,29 +42,39 @@ body{
display: grid;
grid-template-columns: repeat(16, 1fr);
> #block-caravane-logorepublique {
grid-column: 1 / span 1;
grid-column: 7 / span 3;
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 1 / span 1;
}
> div > div > a > img {
width: 100%;
height: auto;
}
}
> #block-caravane-logoepau {
grid-column: 2 / span 2;
grid-column: 10 / span 6;
display: flex;
align-items: center;
padding-right: 2.5rem;
@media screen and (min-width: $desktop-min-width) {
grid-column: 2 / span 2;
}
> div > div > a > img {
width: 100%;
height: auto;
}
}
> #block-caravane-logocaravane {
grid-column: 8 / span 2;
grid-column: 1 / span 5;
grid-row: 1;
padding-top: 0.5rem;
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 8 / span 2;
}
> div > div > a > img {
width: 100%;
height: auto;
@@ -79,7 +93,7 @@ body{
z-index: 2;
background-color: $brand-color;
position: fixed;
width: $menu-width;
width: $menu-mobile-width;
right: 0;
top: 0;
padding-top: 2.8vh;
@@ -91,6 +105,9 @@ body{
transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
opacity: 0;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
width: $menu-desktop-width;
}
> p {
padding-left: $menu-margin;
margin: 10px 0;
@@ -173,7 +190,7 @@ body{
list-style-type: none;
background-color: white;
position: fixed;
width: $menu-width;
width: $menu-mobile-width;
right: $body-margin-x;
padding: 0;
padding-top: 1.5rem;
@@ -182,6 +199,9 @@ body{
opacity: 0;
transition: top 0.3s ease-out, opacity 0.2s ease-out;
z-index: 1;
@media screen and (min-width: $desktop-min-width) {
width: $menu-desktop-width;
}
> li {
padding-left: $menu-margin;
margin: 15px 0;
@@ -474,20 +494,39 @@ body{
}
}*/
}
}
> .layout__region--third {
padding-right: $body-margin-x;
height: 100%;
grid-column: 11 / span 6;
grid-column: 4 / span 13;
position: relative;
z-index: 2;
background: linear-gradient(to right, transparent, #faf1eb);
display: flex;
background: linear-gradient(to right, #faf1ebaa, #faf1eb);
align-items: center;
justify-content: flex-end;
pointer-events: none;
> div {
max-width: 100%;
transition: all 0.3s ease-out;
justify-self: end;
&.retracted {
max-width: 25%;
grid-column: 16 / span 1;
}
@media screen and (min-width: $desktop-min-width) {
background: linear-gradient(to right, transparent, #faf1eb);
grid-column: 11 / span 6;
}
> div #etapes-liste {
pointer-events: auto;
padding-right: 2rem;
width: 100%;
overflow: hidden;
opacity: 1;
transition: opacity 0.3s ease-out;
&.retracted {
opacity: 0;
}
ul {
list-style: none;
> li {
@@ -564,7 +603,6 @@ body{
justify-content: center;
align-items: center;
> div {
background-color: red;
display: block;
width: 20px;
height: 10px;
@@ -586,6 +624,49 @@ body{
}
}
}
#retractable-message {
cursor: pointer;
pointer-events: auto;
color: $light-color;
position: fixed;
top: 50%;
text-wrap: nowrap;
right: 70vw;
display: flex;
flex-direction: column;
align-items: center;
transform: rotate(90deg) scale(1);
transition: all 0.3s ease-out;
&:hover {
transform: rotate(90deg) scale(1.05);
}
&.retracted {
right: -3vw;
> div {
transform: rotate(0deg);
}
}
@media screen and (min-width: $desktop-min-width) {
display: none;
}
> p {
background-color: $main-color;
padding: 0.5rem 1rem;
border-radius: 1.3rem;
margin: 0;
margin-bottom: 0.2rem;
font-size: $sm-font-size;
}
> div {
width: 20px;
height: 20px;
background-color: $main-color;
mask: url('/themes/custom/caravane/assets/pictograms/chevron-down.svg') no-repeat center;
mask-size: contain;
transform: rotate(180deg);
transition: transform 0.3s ease-out;
}
}
}
}
> .user-login-form {