scss: introduce $edge-gutter & $edge-gutter-mobile (#85848)

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.
   <td><p>Espace (« gouttière ») entre la barre latérale et les colonnes.</p></td>
   <td><p><var>$columns-gutter</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$edge-gutter</code></p></td>
+  <td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
+  <td><p><var>false</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$grid-gutter</code></p></td>
   <td><p>Espace (« gouttière ») entre les éléments disposés en grille.</p></td>
@@ -391,6 +396,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Largeur maximale de la page "mobile"</p></td>
   <td><p><var>null</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$edge-gutter-mobile</code></p></td>
+  <td><p>Espace (« gouttière ») entre le contenu et le bord du navigateur.</p></td>
+  <td><p><var>$edge-gutter</var></p></td>
+ </tr>
  <tr>
   <td><p><code>$nav-mobile-limit</code></p></td>
   <td><p>Largeur sous laquelle adopter la navigation "mobile"</p></td>

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: false !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,
@@ -63,9 +64,7 @@ div#page main {
 }
 
 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,58 @@ 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 {
+	.page-width,
+	.header-width, div#header,
+	.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);
+		}
+	}
+} @else {
+	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;
+		}
+	}
+}
+
 @media screen and ($max-mobile-viewport) {
 	.pk-desktop-only, .desktop-only {
 		display: none !important;

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;