From b4ece522f7adc86e513334d09ed4de1a10f6e8e6 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Fri, 20 Dec 2019 15:56:33 +0100
Subject: [PATCH] scss: add custom medias sass vars to manage medias queries
 (#37223)

---
 static/includes/_cells.scss           | 10 +++++-----
 static/includes/_grid.scss            |  2 +-
 static/includes/_layout.scss          | 17 ++++++++++++-----
 static/includes/_misc.scss            | 12 ++++++------
 static/includes/_user-info.scss       |  4 ++--
 static/includes/wcs/_bulk.scss        | 10 +++++-----
 static/includes/wcs/_nearby-form.scss |  2 +-
 static/includes/wcs/_steps.scss       |  4 ++--
 8 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/static/includes/_cells.scss b/static/includes/_cells.scss
index 8a5ce206..030cc1b1 100644
--- a/static/includes/_cells.scss
+++ b/static/includes/_cells.scss
@@ -38,7 +38,7 @@ div#left div.block,
 div#right div.block,
 .gru-content #right .cell { margin-right: 0; }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#left div.block,
 	.gru-content #left .cell,
 	div#right div.block,
@@ -54,7 +54,7 @@ div.a2-block {
 	& form, & p {
 		margin: 1em 0.5em;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 0 auto;
 	}
 }
@@ -614,7 +614,7 @@ div.bookingcalendar {
 #registration-blocks.methods3 > .a2-block,
 #login-page.methods2 > .block,
 #login-page.methods3 > .block {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 		float: none;
 		margin: 0.7em;
@@ -661,13 +661,13 @@ div.familyinfoscell {
 	div.family_members {
 		display: flex;
 		justify-content: space-between;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			flex-direction: column;
 		}
 	}
 	div.family_adults, div.family_children {
 		width: 48%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 		}
 		> div {
diff --git a/static/includes/_grid.scss b/static/includes/_grid.scss
index 3b0006de..7366d90a 100644
--- a/static/includes/_grid.scss
+++ b/static/includes/_grid.scss
@@ -74,7 +74,7 @@ form div[class*=grid-] div.select2-container {
 	@for $j from 1 through $i {
 		.grid-#{$j}-#{$i} {
 			width: calc( #{100*$j/$i+0%} - #{$grid-gutter});
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				@if $i == 4 and $j <= 2 { width: calc(50% - #{$grid-gutter}); }
 				@else if $i == 4 and $j >  2 { width: calc(100% - #{$grid-gutter}); }
 				@else if $i == 6 and $j <= 2 { width: calc(#{100/3+0%} - #{$grid-gutter}); }
diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss
index de4bf917..018da249 100644
--- a/static/includes/_layout.scss
+++ b/static/includes/_layout.scss
@@ -9,6 +9,13 @@ $sidebar-max-width: $sidebar-width !default;
 $sidebar-min-width: 0 !default;
 $sidebar-position: left !default;
 
+// custom media queries
+// 	@media ($max-mobile-viewport) {}
+//	@media ($min-desktop-viewport) {}
+$max-mobile-viewport: "max-width: #{$mobile-limit}";
+$min-desktop-viewport: "min-width: #{$mobile-limit + 1}";
+
+
 html, body {
 	margin: 0;
 	min-height: 100vh;
@@ -51,7 +58,7 @@ div#header {
 	& h1 {
 		margin: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		& h1 {
 			padding-left: $top-logo-width+70px;
 			background-position: 70px;
@@ -65,7 +72,7 @@ div#main-content-wrapper {
 	max-width: $width;
 	margin: 0px auto 0px auto;
 	padding: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		position: static;
 		z-index: 0;
 	}
@@ -122,7 +129,7 @@ div#main-content {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#columns {
 		padding: 0 0.7em;
 		max-width: 100%;
@@ -171,13 +178,13 @@ h1#logo {
 	padding-left: $top-logo-width;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.desktop-only {
 		display: none;
 	}
 }
 
-@media screen and (min-width: $mobile-limit+1px) {
+@media screen and ($min-desktop-viewport) {
 	.mobile-only {
 		display: none;
 	}
diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index a69e6665..431cd98a 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -18,7 +18,7 @@ div.textcell table {
 	margin: 0.7em 0.5rem;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	img {
 		max-width: 100%;
 	}
@@ -43,7 +43,7 @@ div#footer div.cell.test-banner {
 	white-space: pre;
 	opacity: 0.9;
 	pointer-events: none;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		top: auto;
 		bottom: 3rem;
 		right: -1rem;
@@ -74,7 +74,7 @@ div#footer div.cell.test-banner p {
 }
 
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#welcome-text,
 	#login-methods {
 		width: auto;
@@ -114,7 +114,7 @@ div#login-methods input {
 			height: 3rem;
 			line-height: 3rem;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			border-left: none;
 			padding-left: 0;
 			&::after {
@@ -157,7 +157,7 @@ a#publik-portal-agent {
 	padding: 5px 10px;
 	border: 1px solid #888;
 	border-width: 0 1px 1px 1px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 }
@@ -187,7 +187,7 @@ div#consent_banner {
 }
 
 %top-consent-banner {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		position: absolute;
 		background: rgba(255, 255, 255, 0.98);
 		box-shadow: 0 0 8px 1px #333;
diff --git a/static/includes/_user-info.scss b/static/includes/_user-info.scss
index e27edba1..37eef861 100644
--- a/static/includes/_user-info.scss
+++ b/static/includes/_user-info.scss
@@ -12,7 +12,7 @@ $primary-color: #910956 !default;
 	padding: 0.7em 2em 0.2em 2em;
 	border: 3px solid $primary-color;
 	border-width: 0 1px 1px 1px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border-right: 0;
 		right: 0;
 		max-width: 90%;
@@ -27,7 +27,7 @@ $primary-color: #910956 !default;
 
 #toplinks span.connected-user {
 	padding-right: 0.7em;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-right: 0;
 	}
 }
diff --git a/static/includes/wcs/_bulk.scss b/static/includes/wcs/_bulk.scss
index da0e34a2..9bf668c5 100644
--- a/static/includes/wcs/_bulk.scss
+++ b/static/includes/wcs/_bulk.scss
@@ -58,7 +58,7 @@ div#services > ul {
 	padding: 0;
 	margin: 0;
 	list-style: none;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		@include vendor-prefix('column-count', '1');
 	}
 }
@@ -132,7 +132,7 @@ div#services div.block-custom-text {
 
 
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	// move #gauche on top and tracking code after steps
 	div#gauche {
 		float: none;
@@ -151,7 +151,7 @@ div#services div.block-custom-text {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#gauche + div#rub_service,
 	div#rub_service {
 		width: 100%;
@@ -405,7 +405,7 @@ span.geoloc-error {
 	font-weight: normal;
 	font-size: smaller;
 	float: right;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 0;
 		float: none;
 		display: block;
@@ -647,7 +647,7 @@ div.section.foldable {
 	&.folded {
 		span.disclose-message {
 			display: inline-block;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				// never displayed on mobile as the small width
 				// makes clear the relation between title and
 				// open/close bracket.
diff --git a/static/includes/wcs/_nearby-form.scss b/static/includes/wcs/_nearby-form.scss
index 3bc845ff..b7ece7be 100644
--- a/static/includes/wcs/_nearby-form.scss
+++ b/static/includes/wcs/_nearby-form.scss
@@ -40,7 +40,7 @@
 }
 .nearby-form--datetime {
 	width: 20%;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 30%;
 	}
 }
diff --git a/static/includes/wcs/_steps.scss b/static/includes/wcs/_steps.scss
index fa51bd9c..7d7905cd 100644
--- a/static/includes/wcs/_steps.scss
+++ b/static/includes/wcs/_steps.scss
@@ -49,14 +49,14 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 //	Steps orientations depend on media-queries & $form-sidebar-position
 @mixin desktop-horizontal-steps() {
 	@if ($form-sidebar-position == top) {
-		@media (min-width: $mobile-limit + 1) {
+		@media ($min-desktop-viewport) {
 			@content;
 		}
 	}
 }
 @mixin desktop-vertical-steps() {
 	@if ($form-sidebar-position == left or $form-sidebar-position == right) {
-		@media (min-width: $mobile-limit + 1) {
+		@media ($min-desktop-viewport) {
 			@content;
 		}
 	}
-- 
2.20.1

