diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index e72d00f8..bf1c2ded 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -146,6 +146,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
Espace (« gouttière ») entre la barre latérale et les colonnes. |
$columns-gutter |
+
+ $edge-gutter
|
+ Espace (« gouttière ») entre le contenu et le bord du navigateur. |
+ legacy |
+
$grid-gutter
|
Espace (« gouttière ») entre les éléments disposés en grille. |
@@ -391,6 +396,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
Largeur maximale de la page "mobile" |
null |
+
+ $edge-gutter-mobile
|
+ Espace (« gouttière ») entre le contenu et le bord du navigateur. |
+ $edge-gutter |
+
$nav-mobile-limit
|
Largeur sous laquelle adopter la navigation "mobile" |
diff --git a/static/includes/_cells.scss b/static/includes/_cells.scss
index d2cb0629..cf0e5a91 100644
--- a/static/includes/_cells.scss
+++ b/static/includes/_cells.scss
@@ -636,7 +636,7 @@ div.bookingcalendar {
#login-page.methods2 > .block {
width: 50%;
width: calc(50% - 2em);
- margin: 0;
+ margin-left: 0;
margin-right: 2em;
float: left;
}
@@ -645,7 +645,7 @@ div.bookingcalendar {
#login-page.methods3 > .block {
width: 33%;
width: calc(33% - 2em);
- margin: 0;
+ margin-left: 0;
margin-right: 2em;
float: left;
}
@@ -657,7 +657,11 @@ div.bookingcalendar {
@media screen and ($max-mobile-viewport) {
width: auto;
float: none;
- margin: 0.7em;
+ margin-right: 0;
+ @if $edge-gutter == legacy {
+ margin-left: 0.7em;
+ margin-right: 0.7em;
+ }
}
}
diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss
index 958d0c2f..b97ecd1a 100644
--- a/static/includes/_layout.scss
+++ b/static/includes/_layout.scss
@@ -12,6 +12,8 @@ $sidebar-max-width: $sidebar-width !default;
$sidebar-min-width: 0 !default;
$sidebar-position: left !default;
$sidebar-columns-gutter: $columns-gutter !default;
+$edge-gutter: legacy !default;
+$edge-gutter-mobile: $edge-gutter !default;
// custom media queries
// @media ($max-mobile-viewport) {}
@@ -41,7 +43,6 @@ div#page {
div#page div#main-content-wrapper,
div#page main {
flex: 1 0 auto;
- width: 100%;
}
.page-width,
@@ -54,18 +55,16 @@ div#page main {
}
@if ($mobile-width) {
- .page-width,
- .footer-width {
+ .page-width,
+ .footer-width {
@media ($max-mobile-viewport) {
max-width: $mobile-width;
- }
- }
+ }
+ }
}
div#header {
- width: 100%;
position: relative;
- padding: 0 0.7em;
& h1 {
margin: 0;
}
@@ -118,7 +117,6 @@ div#main-content {
@media screen and ($max-mobile-viewport) {
#columns-wrapper {
- padding: 0 0.7em;
max-width: 100%;
}
.column {
@@ -129,13 +127,13 @@ div#main-content {
.central-content {
flex-direction: column;
#sidebar {
+ margin: 0;
flex: 0 0 auto;
max-width: 100%;
// don't apply min-width on mobile
@if $sidebar-min-width != 0 {
min-width: 0;
}
- margin: 0 0.7em;
div.cell {
margin-left: 0;
margin-right: 0;
@@ -155,16 +153,66 @@ div#main-content {
@if $footer-full-width-background {
#footer-wrapper {
- padding: 0.7em 0 1.5em 0;
+ padding-top: 0.7em;
+ padding-bottom: 1.5em;
background-color: $footer-background;
}
} @else {
#footer {
- padding: 0.7em 0.7em 1.5em 0.7em;
+ padding-top: 0.7em;
+ padding-bottom: 1.5em;
background-color: $footer-background;
}
}
+// edge-gutter
+@if $edge-gutter == legacy {
+ div#header {
+ width: 100%;
+ padding: 0 0.7em;
+ }
+ div#page div#main-content-wrapper,
+ div#page main {
+ width: 100%;
+ }
+ @if not $footer-full-width-background {
+ #footer {
+ padding-left: 0.7em;
+ padding-right: 0.7em;
+ }
+ }
+ @media ($max-mobile-viewport) {
+ .central-content #sidebar {
+ margin: 0 0.7em;
+ }
+ #columns-wrapper {
+ padding: 0 0.7em;
+ }
+ }
+} @else {
+ .page-width,
+ .header-width,
+ .nav-width,
+ .footer-width {
+ --edge-gutter: #{$edge-gutter};
+ --edge-gutter-mobile: #{$edge-gutter-mobile};
+ box-sizing: content-box;
+ padding-left: var(--edge-gutter);
+ padding-right: var(--edge-gutter);
+ @media ($max-mobile-viewport) {
+ --edge-gutter: var(--edge-gutter-mobile);
+ }
+ }
+ @if ($mobile-width) {
+ .header-width,
+ .nav-width {
+ @media ($max-mobile-viewport) {
+ --edge-gutter-mobile: 0;
+ }
+ }
+ }
+}
+
@media screen and ($max-mobile-viewport) {
.pk-desktop-only, .desktop-only {
display: none !important;
diff --git a/static/includes/_nav.scss b/static/includes/_nav.scss
index 5800a4c5..9960daf9 100644
--- a/static/includes/_nav.scss
+++ b/static/includes/_nav.scss
@@ -70,7 +70,6 @@ $nav-mobile-bottom-bar-badge-background: #e22 !default;
}
div.gru-nav {
- padding: 0;
height: $nav-height;
border-radius: $nav-border-radius;
font-family: $nav-font-family;