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

corrections mobiles

This commit is contained in:
Valentin 2024-10-22 10:25:01 +02:00
parent ec73eabda9
commit bc44cef61a
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ $body-margin-bottom: 4vh;
$modale-x-padding: 5vw; $modale-x-padding: 5vw;
$modale-bottom-padding: 180px; $modale-bottom-padding: 180px;
$modale-width-mobile: 80vw; $modale-width-mobile: 90vw;
$modale-width-desktop: 50vw; $modale-width-desktop: 50vw;
$brand-pattern-height: 110px; $brand-pattern-height: 110px;
@ -18,6 +18,9 @@ $brand-pattern-height: 110px;
$sm-font-size-mobile: 0.6rem; $sm-font-size-mobile: 0.6rem;
$sm-font-size-desktop: 0.8rem; $sm-font-size-desktop: 0.8rem;
$labeur-font-size-mobile: 0.9rem;
$labeur-font-size-desktop: 1rem;
$m-font-size-mobile: 1.1rem; $m-font-size-mobile: 1.1rem;
$m-font-size-desktop: 1.4rem; $m-font-size-desktop: 1.4rem;
@ -50,7 +53,7 @@ body{
.layout-container { .layout-container {
> header { > header {
z-index: 2; z-index: 2;
position: fixed; position: relative;
> div { > div {
padding: $body-margin-y $body-margin-x 0 $body-margin-x; padding: $body-margin-y $body-margin-x 0 $body-margin-x;
display: grid; display: grid;
@ -359,8 +362,11 @@ body{
} }
} }
.leaflet-tooltip-pane { .leaflet-tooltip-pane {
width: 25vw; width: 75vw;
pointer-events: none; pointer-events: none;
@media screen and (min-width: $desktop-min-width) {
width: 25vw;
}
> div { > div {
padding: 0; padding: 0;
border-radius: none; border-radius: none;
@ -534,7 +540,7 @@ body{
> .layout__region--third { > .layout__region--third {
height: 100%; height: 100%;
padding-right: $body-margin-x; padding-right: $body-margin-x;
grid-column: 4 / span 13; // grid-column: 4 / span 13;
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 4; z-index: 4;
@ -548,7 +554,7 @@ body{
justify-self: end; justify-self: end;
&.retracted { &.retracted {
max-width: 25%; max-width: 25%;
grid-column: 16 / span 1; // grid-column: 16 / span 1;
} }
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
background: linear-gradient(to right, transparent, #faf1eb); background: linear-gradient(to right, transparent, #faf1eb);
@ -556,7 +562,9 @@ body{
} }
> div #etapes-liste { > div #etapes-liste {
pointer-events: auto; pointer-events: auto;
padding-right: 2rem; padding-right: 0.5rem;
padding-left: $body-margin-x;
box-sizing: border-box;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
opacity: 1; opacity: 1;
@ -681,7 +689,7 @@ body{
position: fixed; position: fixed;
top: 50%; top: 50%;
text-wrap: nowrap; text-wrap: nowrap;
right: 70vw; right: calc(100vw - 5rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -691,7 +699,8 @@ body{
transform: rotate(90deg) scale(1.05); transform: rotate(90deg) scale(1.05);
} }
&.retracted { &.retracted {
right: -3vw; right: 0vw;
// right: -3vw;
> div { > div {
transform: rotate(0deg); transform: rotate(0deg);
} }
@ -725,14 +734,16 @@ body{
> div:not(.image-viewer-wrapper, .image-modale) { > div:not(.image-viewer-wrapper, .image-modale) {
padding-bottom: 5vh; padding-bottom: 5vh;
> .content-wrapper { > .content-wrapper {
left: calc(100vw - $modale-width-mobile - $modale-x-padding * 3.5); left: 1.5vw;
width: calc($modale-width-mobile); width: calc($modale-width-mobile);
top: 15vh; top: 15vh;
z-index: 2; z-index: 2;
position: relative; position: relative;
background-color: white; background-color: white;
font-size: $labeur-font-size-mobile;
//padding-bottom: $modale-bottom-padding; //padding-bottom: $modale-bottom-padding;
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
font-size: $labeur-font-size-desktop;
width: $modale-width-desktop; width: $modale-width-desktop;
} }
img { img {
@ -758,6 +769,7 @@ body{
z-index: 0; z-index: 0;
} }
> .cartouche { > .cartouche {
font-size: $labeur-font-size-mobile;
grid-row: 4 / span 1; grid-row: 4 / span 1;
position: relative; position: relative;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
@ -766,6 +778,7 @@ body{
background-color: $brand-color; background-color: $brand-color;
z-index: 1; z-index: 1;
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
font-size: $labeur-font-size-desktop;
top: 2rem; top: 2rem;
position: absolute; position: absolute;
} }
@ -1052,6 +1065,7 @@ body{
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
margin-top: 2.5rem; margin-top: 2.5rem;
align-items: flex-start;
} }
> .card { > .card {
width: 80%; width: 80%;