0001-CSS-manage-sidebar-columns-gutter-since-sidebar-marg.patch

Thomas Jund (congés, retour le 29/04), 25 octobre 2022 11:17

Voir les différences: en ligne côte à côte

Subject: [PATCH] CSS: manage sidebar-columns-gutter since #sidebar margin
 (#70656)

Instead #sidebar > .cell margin

 static/alpes-maritimes-2018/_vars.scss        |  2 +-
 static/arles-2020/_custom.scss                |  1 +
 static/armentieres/_vars.scss                 |  2 +-
 static/caen/_vars.scss                        |  2 +-
 static/cantal/_vars.scss                      |  2 +-
 static/clermont-ici/_vars.scss                |  2 +-
 static/clermont-metropole/_vars.scss          |  2 +-
 static/dordogne-cd24/_custom.scss             |  1 -
 static/dordogne-cd24/_vars.scss               |  2 ++
 static/fontenay-sous-bois-2018/_custom.scss   |  7 -------
 static/fontenay-sous-bois-2018/_vars.scss     |  2 ++
 static/gers-cd32/_custom.scss                 |  1 -
 static/gers-cd32/_vars.scss                   |  1 +
 static/grandlyon-sau/_vars.scss               |  2 +-
 static/haguenau/_custom.scss                  |  1 +
 static/haguenau/_vars.scss                    |  4 ++--
 static/includes/_layout.scss                  | 16 +++++++---------
 static/isere-cd38/_custom.scss                | 15 +--------------
 static/isere-cd38/_vars.scss                  |  2 +-
 static/jura/_vars.scss                        |  2 +-
 static/la-hague-2022/_vars.scss               |  2 +-
 static/metz-metropole-2019/_vars.scss         |  2 +-
 static/meudon-2021/_vars.scss                 |  2 +-
 static/meuse-cd55/_custom.scss                |  2 --
 static/miribel/_vars.scss                     |  2 +-
 static/montlouis-sur-loire/_custom.scss       |  2 +-
 static/montlouis-sur-loire/_vars.scss         |  1 +
 static/nantes/_vars.scss                      |  2 +-
 static/orleans/_custom.scss                   |  5 -----
 static/orleans/_vars.scss                     |  1 +
 static/quimper/_vars.scss                     |  2 +-
 static/roannais-agglomeration/_vars.scss      |  2 +-
 static/rouen/_vars.scss                       |  2 +-
 static/saint-chamond/_custom.scss             |  2 --
 static/saint-chamond/_vars.scss               |  3 ++-
 static/saone-et-loire-cd71-2019/_custom.scss  |  6 ------
 static/saone-et-loire-cd71-2019/_vars.scss    |  3 +++
 static/signal-publik/_vars.scss               |  4 ++--
 static/thonon-agglomeration-online/_vars.scss |  2 +-
 static/toodego/_specialpages.scss             |  4 ++--
 static/tournai/_custom.scss                   |  2 +-
 static/tournai/_vars.scss                     |  1 +
 42 files changed, 49 insertions(+), 74 deletions(-)

     $font-size: 1em;
     $mobile-limit: 1100px;
     $sidebar-width: 400px;
     $sidebar-width: 380px;
     $primary-color: #001c76;
     $secondary-color: #e6007e;

static/arles-2020/_custom.scss
160	160	#sidebar {
161	161	max-width: 100%;
162	162	flex: 0 0 auto;
	163	margin-right: 0;
163	164	}
164	165	#columns {
165	166	display: flex;

     // Header
     $header-logo-size: 250px 60px;
     $toplinks-style: none;
     $sidebar-width: 30%;
     $sidebar-width: 26%;
     $nav-after-image: false;
     $nav-color: $gray;

     $columns-gutter: 60rem / $base-font;
     // $sidebar-columns-gutter: 120em / $base-font;
     $sidebar-columns-gutter: $columns-gutter;
     $sidebar-width: (320rem / $base-font) + $sidebar-columns-gutter;
     $sidebar-width: 320rem / $base-font;
     $font-size: 100% / ( 16 / $base-font );
     $font-family: Lato, sans-serif;

     $notification_error_color: #cc3333;
     $sidebar-position: left;
     $sidebar-width: 275px;
     $sidebar-width: 255px;
     $title-weight: bold;
     $title-transform: uppercase;

     $width: 95rem;
     $mobile-limit: 1024px;
     $mobile-width: none;
     $sidebar-width: 25%;
     $sidebar-width: 22%;
     $sidebar-min-width: 18rem;
     $sidebar-columns-gutter: 40px;

     $title-color: #ffffff;
     $title-background: $primary-color;
     $sidebar-width: 410px;
     $sidebar-width: 390px;
     $sidebar-position: right;
     $nav-after-image: false;

static/dordogne-cd24/_custom.scss
573	573	}
574	574
575	575	div#sidebar {
576		margin-right: 2.5em;
577	576	h1, h2, h3 {
578	577	@include after-line($purple);
579	578	}

     $purple: #88446b;
     $green: #cbd05d;
     $width: 1316px;
     $sidebar-width: 300px;
     $sidebar-columns-gutter: 2.5em;
     $font-family: Montserrat, sans-serif;
     $font-color: #000;

+    	}
+    }
     .gru-content #sidebar div.cell {
     	margin-right: 40px;
     	@media screen and ($max-mobile-viewport) {
     		margin-right: 0rem;
+    	}
+    }
     #content div.trackingcodeinputcell {
     	background: url(img/trackingcode.png) 2rem 1rem no-repeat;
     	border: 1px solid #c6c6c6;

     $font-size: 1.25em;
     $font-family: "Barlow Condensed", sans-serif;
     $link-color: $primary-color;
     $sidebar-width: 260px;
     $sidebar-columns-gutter: 40px;
     $width: 1200px;
     $nav-mobile-limit: 50000px;

static/gers-cd32/_custom.scss
93	93
94	94	#sidebar {
95	95	box-shadow: 3px 3px 20px 0px #dedede;
96		margin-right: 2.5em;
97	96	}
98	97
99	98	div.linkcell.has-asset-picture {

static/gers-cd32/_vars.scss
2	2	$secondary-color: #f4f4f4;
3	3	$tertiary-color: #0f183b;
4	4	$width: 1200px;
	5	$sidebar-columns-gutter: 2.5em;
5	6
6	7	$border-radius: 3px;
7	8	$font-size: 1.25em;

     $cell-entry-hover-effect: top-to-bottom;
     $cell-entry-hover-background: #999999;
     $cell-entry-border: 1px solid transparent;
     $sidebar-width: 250px;
     $sidebar-width: 230px;
     $menucell-hover-border: 5px solid #999;
     $button-background: #CCC;

static/haguenau/_custom.scss
320	320
321	321	.gru-content #sidebar {
322	322	background-color: $gray-light;
	323	padding: $columns-gutter;
323	324	padding-top: 2rem;
324	325
325	326	& + #columns-wrapper {

     $mobile-limit: 64em;
     $very-small-limit: 560px;
     $columns-gutter: 1.5rem;
     $sidebar-columns-gutter: $columns-gutter;
     $sidebar-width: calc(240em / 17 + #{$sidebar-columns-gutter});
     $sidebar-columns-gutter: 0;
     $sidebar-width: calc(265em / 17);
     $grid-gutter: $columns-gutter;
     $nav-color: $blue;

     $footer-full-width-background: true !default;
     $footer-color: white !default;
     $footer-link-color: $link-color !default;
     $sidebar-width: 300px !default;
     $sidebar-width: 280px !default;
     $sidebar-max-width: $sidebar-width !default;
     $sidebar-min-width: 0 !default;
     $sidebar-position: left !default;
-...
     		@if $sidebar-position == right {
     			order: 1;
+    		}
     		div.cell {
     			@if $sidebar-position == left {
     				margin-left: 0;
     				margin-right: $sidebar-columns-gutter;
     			} @else {
     				margin-left: $sidebar-columns-gutter;
     				margin-right: 0px;
+    			}
     		@if $sidebar-position == left {
     			margin-left: 0;
     			margin-right: $sidebar-columns-gutter;
     		} @else {
     			margin-left: $sidebar-columns-gutter;
     			margin-right: 0px;
+    		}
+    	}
+    }

     //
     // LAYOUT
     //
     // sidebar <-> columns gutter
     @media ($min-desktop-viewport) {
     	.gru-content {
     		#sidebar {
     			div.cell {
     				@if $sidebar-position == left {
     					margin-right: $sidebar-columns-gutter;
     				} @else {
     					margin-left: $sidebar-columns-gutter;
+    				}
+    			}
+    		}
+    	}
+    }
     // 3cols layout
     .theme-3cols-layout {
     	@media ($min-desktop-viewport) {

     $link-decoration: underline;
     $sidebar-position: right;
     $sidebar-max-width: 400px;
     $sidebar-width: 26%;
     $sidebar-width: 21%;
     $sidebar-min-width: 290px;
     $nav-background: $cyan-dark;

     $footer-menucell-separator: none;
     $sidebar-position: left;
     $sidebar-width: 265px;
     $sidebar-width: 245px;
     $title-background: transparent;
     $title-weight: bold;

     $mobile-limit: 64em;
     $very-small-limit: 35em;
     $columns-gutter: 30px;
     $sidebar-width: 310px + $columns-gutter;
     $sidebar-width: 310px;
     $primary-color: $cyan;
     $body-background: white;

     $link-color: $blue;
     $width: 1120px;
     $pwa-desktop-nav-width: 635px;
     $sidebar-width: 270px;
     $sidebar-width: 250px;
     $sidebar-position: right;
     $body-background: white;

     $mobile-limit: 64em;
     $very-small-limit: 35em;
     $columns-gutter: 2rem;
     $sidebar-width: 20rem;
     $sidebar-width: 18rem;
     $sidebar-position: right;
     $nav-background: transparent;

     #sidebar {
     	background-color: $white-blue;
     	padding-top: 2em;
     	// change Sidebar gutter with columns
     	margin-right: 20px;
     	.gru-content & div.cell {
     		margin-right: 10px;
     		margin-left: 10px;

     $very-small-limit: 35em;
     $mobile-width: 50em;
     $columns-gutter: 2rem;
     $sidebar-width: calc(33% + 1rem);
     $sidebar-width: calc(33% - 1rem);
     $primary-color: $blue;
     $link-color: $red;

     				div#sidebar {
     					border-right: 2px solid #d6d6d6;
     					margin-right: 30px;
     					padding-right: 20px;
+    				}
     				.cell.wcsformsofcategorycell {

static/montlouis-sur-loire/_vars.scss
29	29	$category-toggled-background: $primary-color;
30	30	$cell-border: none;
31	31	$sidebar-width: 240px;
	32	$sidebar-columns-gutter: 30px;
32	33	$grid-gutter: 0px;
33	34	$widget-border: 2px solid #b4b4b4;
34	35	$wcs-steps-spacing: 0.5rem;

     $width: 1280px;
     $columns-gutter: 2rem;
     $grid-gutter: 2rem;
     $sidebar-width: 33%;
     $sidebar-width: calc(33% - #{$columns-gutter });
     $sidebar-min-width: 300px;
     $header-logo-size: 137px 30px;

+    }
     #content div#sidebar {
     	order: 2;
     	div.cell {
     		margin-left: 20px;
     		margin-right: 0;
+    	}
     	div.cell.dashboard-title {
     		margin-top: 0;
     		h3 {

static/orleans/_vars.scss
3	3	$ternary-color: #F7EFE2;
4	4
5	5	$width: 1150px;
	6	$sidebar-position: right;
6	7	$mobile-limit: 800px;
7	8	$font-size: 0.875em;
8	9	$font-family: "Roboto", arial, helvetica, sans-serif;

     $mobile-limit: 800px;
     $very-small-limit: 360px;
     $width: 1280px;
     $sidebar-width: 400px;
     $sidebar-width: 380px;
     $sidebar-position: right;
     $body-background: #eee;
     $title-font-family: "Geometric 231", $font-family;

     $blue: #00a0bd;
     $width: 1240px;
     $sidebar-width: 240px;
     $sidebar-width: 220px;
     $font-color: #3c3c3b;
     $font-family: "Oswald", sans-serif;

     $nav-button-background: $black;
     $nav-item-selected-background: #2D2D2D;
     $nav-mobile-menu-background: $pale-primary-color;
     $sidebar-width: 240px;
     $sidebar-width: 220px;
     $steps-color: #9B9B9B;
     $title-weight: bold;
     $width: 1243.97px;

static/saint-chamond/_custom.scss
70	70	}
71	71
72	72	#sidebar {
73		box-sizing: content-box;
74		padding-right: 40px;
75	73	@media screen and (max-width: $nav-mobile-limit) {
76	74	padding-right: 0;
77	75	}

     $turquoise: #3eb2af;
     $width: 1240px;
     $sidebar-width: 240px;
     $sidebar-width: 220px;
     $sidebar-columns-gutter: 60px;
     $font-color: #020202;
     $font-family: Din, sans-serif;

+    	}
+    }
     .gru-content #sidebar div.cell {
     	margin-right: 40px;
     	@media screen and ($max-mobile-viewport) {
     		margin-right: 0rem;
+    	}
+    }
     #content div.cell.with-borders {
     	border: 1px solid #c6c6c6;

     $link-color: $primary-color;
     $width: 1200px;
     $sidebar-width: 300px;
     $sidebar-columns-gutter: 40px;
     $nav-mobile-limit: 50000px;
     $nav-button-background: transparent;
     $nav-button-color: $green;

     $primary-color: $green;
     $very-small-limit: 360px;
     $width: 1180px;
     $sidebar-width: 493px;
     $sidebar-width: 473px;
     $sidebar-position: left;
     $border-radius: 0;
-...
     $wcs-step-current-background: $steps-background;
     $wcs-step-marker-background: hsla(0,0%,100%,0.6);
     $wcs-step-current-marker-color: #000;
     $wcs-step-current-marker-background: hsla(0,0%,100%,0.9);
     $wcs-step-current-marker-background: hsla(0,0%,100%,0.9);

     $very-small-limit: 35em;
     $columns-gutter: 40em / 15;
     $sidebar-position: right;
     $sidebar-width: 480em / 15;
     $sidebar-width: 400em / 15;
     $sidebar-columns-gutter: 80em / 15;
     $grid-gutter: 2rem;
     $columns-gutter: 2rem;

+    		}
+    	}
     	.gru-content #sidebar {
     		flex: 0 0 $sidebar-width + 150px;
     		max-width: $sidebar-width + 150px;
     		flex: 0 0 $sidebar-width + 170px;
     		max-width: $sidebar-width + 170px;
     		margin-top: calc(0.4em + 60px);
     		overflow: auto;
     		height: 60vh;

     #sidebar {
     	border-right: 2px solid #d6d6d6;
     	margin-right: 10px;
     	padding-right: 20px;
+    }
     div#gauche + div#rub_service {

     $category-toggled-background: $primary-color;
     $cell-border: 0px;  // != none, to avoid "OR" between login blocks
     $sidebar-width: 240px;
     $sidebar-columns-gutter: 10px;
     $grid-gutter: 0px;
     $widget-border: 2px solid #b4b4b4;
+    -

Projet

Général

Profil

Produits Entr'ouvert » Intégrations graphiques Publik

0001-CSS-manage-sidebar-columns-gutter-since-sidebar-marg.patch