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

corrections mobiles

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