Projet

Général

Profil

0001-scss-introduce-max-nav-mobile-viewport-min-nav-deskt.patch

Thomas Jund (congés, retour le 29/04), 09 octobre 2020 17:06

Télécharger (31,1 ko)

Voir les différences:

Subject: [PATCH] scss: introduce $max-nav-mobile-viewport &
 $min-nav-desktop-viewport (#47531)

 static/arles-2020/_custom.scss               |  2 +-
 static/bouches-du-rhone/_custom.scss         |  2 +-
 static/cinor/_custom.scss                    |  6 +--
 static/clermont-metropole/_custom.scss       |  2 +-
 static/entrouvert/_carrousel-references.scss |  2 +-
 static/entrouvert/_custom.scss               | 10 ++---
 static/essonne-cd91/_custom.scss             |  4 +-
 static/hautes-alpes-cd05-2020/_custom.scss   | 20 ++++-----
 static/includes/_carrousel.scss              |  4 +-
 static/includes/_nav.scss                    | 18 +++++---
 static/montreuil/_custom.scss                | 12 ++---
 static/pre-saint-gervais/_custom.scss        | 46 ++++++++++----------
 static/quimper/_custom.scss                  | 36 +++++++--------
 static/roannais-agglomeration/_custom.scss   | 16 +++----
 static/saint-chamond/_custom.scss            | 18 ++++----
 static/saint-denis/_custom.scss              |  2 +-
 static/signal-publik/_custom.scss            | 22 +++++-----
 static/thonon-agglomeration/_custom.scss     |  2 +-
 static/vendargues/_custom.scss               |  2 +-
 19 files changed, 116 insertions(+), 110 deletions(-)
static/arles-2020/_custom.scss
38 38
}
39 39

  
40 40
.gru-nav-wrapper {
41
	@media screen and (max-width: $nav-mobile-limit) {
41
	@media screen and ($max-nav-mobile-viewport) {
42 42
		margin-top: -$nav-menu-side - 10px - 12px;
43 43
	}
44 44
}
static/bouches-du-rhone/_custom.scss
4 4
	left: 15%;
5 5
	top: 2rem;
6 6
	z-index: 100;
7
	@media screen and (max-width: $nav-mobile-limit) {
7
	@media screen and ($max-nav-mobile-viewport) {
8 8
		left: 5%;
9 9
	}
10 10
	#header {
static/cinor/_custom.scss
108 108
div.gru-nav > ul {
109 109
	margin: 0;
110 110

  
111
	@media (min-width: $nav-mobile-limit + 1) {
111
	@media ($min-nav-desktop-viewport) {
112 112
		text-align: center;
113 113
	}
114 114

  
......
116 116
		a {
117 117
			text-transform: uppercase;
118 118
			font-weight: 600;
119
			@media (min-width: $nav-mobile-limit + 1) {
119
			@media ($min-nav-desktop-viewport) {
120 120
				padding-top: 0;
121 121
			}
122 122
		}
123 123
	}
124 124

  
125
	@media (min-width: $nav-mobile-limit + 1) {
125
	@media ($min-nav-desktop-viewport) {
126 126
		// separator
127 127
		& > li:not(:first-child)::before {
128 128
			content: "";
static/clermont-metropole/_custom.scss
165 165
}
166 166

  
167 167
#pwa-navigation {
168
	@media screen and (min-width: $nav-mobile-limit - 1px) {
168
	@media screen and ($min-nav-desktop-viewport) {
169 169
		display: block;
170 170
		position: fixed;
171 171
		right: 0;
static/entrouvert/_carrousel-references.scss
125 125
				content: "\f054";  // chevron-right;
126 126
			}
127 127
		}
128
		@media screen and (max-width: $nav-mobile-limit) {
128
		@media screen and ($max-nav-mobile-viewport) {
129 129
			display: none;
130 130
		}
131 131
	}
static/entrouvert/_custom.scss
37 37
		display: block;
38 38
		margin-top: 7px;
39 39
		text-indent: -10000px;
40
		@media screen and (max-width: $nav-mobile-limit) {
40
		@media screen and ($max-nav-mobile-viewport) {
41 41
			height: 60px;
42 42
			background-size: contain;
43 43
		}
......
62 62

  
63 63
.page-index {
64 64
	background: url('img/eo-background.png') left top repeat-x;
65
	@media screen and (max-width: $nav-mobile-limit) {
65
	@media screen and ($max-nav-mobile-viewport) {
66 66
		background-image: none;
67 67
	}
68 68
}
......
116 116
div.gru-nav > ul {
117 117
	border-top: 1px solid #ced0d5;
118 118
	border-bottom: 1px solid #ced0d5;
119
	@media screen and (max-width: $nav-mobile-limit) {
119
	@media screen and ($max-nav-mobile-viewport) {
120 120
		border-bottom: 0px solid white;
121 121
	}
122 122
}
......
182 182
	box-sizing: content-box;
183 183
	padding: 20px 20px 0 0;
184 184
	text-align: center;
185
	@media screen and (max-width: $nav-mobile-limit) {
185
	@media screen and ($max-nav-mobile-viewport) {
186 186
		padding: 0;
187 187
	}
188 188
}
......
192 192
	padding-right: 20px;
193 193
	box-sizing: content-box;
194 194
	overflow: hidden;
195
	@media screen and (max-width: $nav-mobile-limit) {
195
	@media screen and ($max-nav-mobile-viewport) {
196 196
		float: left;
197 197
	}
198 198
}
static/essonne-cd91/_custom.scss
41 41
	text-transform: uppercase;
42 42

  
43 43
    // nav desktop only
44
    @media (min-width: $nav-mobile-limit + 1) {
44
    @media ($min-nav-desktop-viewport) {
45 45
        > ul {
46 46
            margin-bottom: 5px;
47 47
            // Item separator
......
60 60
        }
61 61
    }
62 62
    // nav mobile only
63
	@media screen and (max-width: $nav-mobile-limit) {
63
	@media screen and ($max-nav-mobile-viewport) {
64 64
		text-align: left;
65 65
	}
66 66
}
static/hautes-alpes-cd05-2020/_custom.scss
66 66
	#top {
67 67
		display: flex;
68 68
		flex-wrap: wrap;
69
		@media (min-width: $nav-mobile-limit + 1) {
69
		@media ($min-nav-desktop-viewport) {
70 70
			flex-direction: column;
71 71
			height: $header-height-desktop;
72 72
		}
......
76 76
		background-color: $red;
77 77
		flex: 0 0 100px;
78 78
		padding: 10px;
79
		@media (min-width: $nav-mobile-limit + 1) {
79
		@media ($min-nav-desktop-viewport) {
80 80
			flex: 1 0 100%;
81 81
			width: 33.333%;
82 82
			padding: 21px;
......
97 97
		text-transform: uppercase;
98 98
		width: 66.666%;
99 99
		flex: 0 0 100%;
100
		@media (min-width: $nav-mobile-limit + 1) {
100
		@media ($min-nav-desktop-viewport) {
101 101
			flex: 1 0 auto;
102 102
			display: flex;
103 103
			align-items: center;
......
121 121
		line-height: 1.5;
122 122

  
123 123

  
124
		@media (max-width: $nav-mobile-limit) {
124
		@media ($max-nav-mobile-viewport) {
125 125
			flex: 1 1 0;
126 126
			margin-right: $header-height-mobile;
127 127
		}
128
		@media (min-width: $nav-mobile-limit + 1) {
128
		@media ($min-nav-desktop-viewport) {
129 129
			flex: 0 0 auto;
130 130
		}
131 131

  
......
133 133
			display: block;
134 134
			padding: 1em;
135 135

  
136
			@media (max-width: $nav-mobile-limit) {
136
			@media ($max-nav-mobile-viewport) {
137 137
				padding: .33em 1em;
138 138
			}
139 139

  
......
143 143
			display: inline-block;
144 144
			color: #6e6e6e;
145 145
			white-space: nowrap;
146
			@media (max-width: $nav-mobile-limit + 1 ) {
146
			@media ($max-nav-mobile-viewport) {
147 147
				display: block;
148 148
			}
149 149
			// orange dash
150 150
			@include dash($orange);
151 151

  
152 152
			// sep
153
			@media (min-width: $nav-mobile-limit + 1) {
153
			@media ($min-nav-desktop-viewport) {
154 154
				&:not(:last-child) {
155 155
					&::after {
156 156
						content: "";
......
168 168
			display: none;
169 169
		}
170 170
		.logged-in {
171
			@media (max-width: $nav-mobile-limit) {
171
			@media ($max-nav-mobile-viewport) {
172 172
				max-width: calc(100vw - 100px - 60px);
173 173
				a {
174 174
					overflow: hidden;
......
202 202
}
203 203
// Adapt to create a right-to-left nav
204 204
@if $responsive-menu == left-to-right {
205
@media screen and (max-width: $nav-mobile-limit) {
205
@media screen and ($max-nav-mobile-viewport) {
206 206
	body {
207 207
		border: none;
208 208
	}
static/includes/_carrousel.scss
71 71
						padding: 1rem;
72 72
						margin-left: 6rem;
73 73
						margin-right: 6rem;
74
						@media screen and (max-width: $nav-mobile-limit) {
74
						@media screen and ($max-nav-mobile-viewport) {
75 75
							margin-left: 2rem;
76 76
							margin-right: 2rem;
77 77
						}
......
153 153
				content: "\f054";  // chevron-right;
154 154
			}
155 155
		}
156
		@media screen and (max-width: $nav-mobile-limit) {
156
		@media screen and ($max-nav-mobile-viewport) {
157 157
			display: none;
158 158
		}
159 159
	}
static/includes/_nav.scss
47 47
$nav-mobile-bottom-bar-badge-color: white !default;
48 48
$nav-mobile-bottom-bar-badge-background: #e22 !default;
49 49

  
50
// custom media queries
51
// 	@media ($max-nav-mobile-viewport) {}
52
//	@media ($min-nav-desktop-viewport) {}
53
$max-nav-mobile-viewport: "max-width: #{$nav-mobile-limit}";
54
$min-nav-desktop-viewport: "min-width: #{min-desktop-viewport($nav-mobile-limit)}";
55

  
50 56

  
51 57
@if $nav-full-width-background == true {
52 58
	div.gru-nav-wrapper {
......
181 187
	span.badge::before { content: '('; }
182 188
	span.badge::after { content: ')'; }
183 189
	@if $nav-mobile-mode == bottom-bar {
184
		@media screen and (max-width: $nav-mobile-limit) {
190
		@media screen and ($max-nav-mobile-viewport) {
185 191
			span.badge::before { content: none; }
186 192
			span.badge::after { content: none; }
187 193
		}
......
189 195
}
190 196

  
191 197
@if $nav-mobile-mode == hamburger {
192
@media screen and (max-width: $nav-mobile-limit) {
198
@media screen and ($max-nav-mobile-viewport) {
193 199
	@if $responsive-menu == left-to-right {
194 200
		body {
195 201
			border-left: 4px solid $nav-border-color;
......
349 355
	display: none;
350 356
}
351 357

  
352
@media screen and (max-width: $nav-mobile-limit) {
358
@media screen and ($max-nav-mobile-viewport) {
353 359
	.pwa-navigation {
354 360
		display: block;
355 361
	}
......
430 436
	@include pwa-bottom-bar;
431 437
}
432 438

  
433
@media screen and (max-width: $nav-mobile-limit) {
439
@media screen and ($max-nav-mobile-viewport) {
434 440
	.pwa-navigation ~ footer {
435 441
		margin-bottom: $nav-mobile-bottom-bar-height;
436 442
	}
......
438 444

  
439 445

  
440 446
@if $nav-mobile-mode == bottom-bar {
441
@media screen and (max-width: $nav-mobile-limit) {
447
@media screen and ($max-nav-mobile-viewport) {
442 448
	nav {
443 449
		@include pwa-bottom-bar;
444 450
	}
......
456 462
}
457 463

  
458 464
@if $nav-mobile-mode == hidden {
459
	@media screen and (max-width: $nav-mobile-limit) {
465
	@media screen and ($max-nav-mobile-viewport) {
460 466
		nav {
461 467
			display: none;
462 468
		}
static/montreuil/_custom.scss
3 3
	background: $background-color;
4 4
	border: 1px solid $border-color;
5 5
	padding: 5px 10px;
6
	@media screen and (max-width: $nav-mobile-limit) {
6
	@media screen and ($max-nav-mobile-viewport) {
7 7
		display: inline-block;
8 8
		margin: 3px 1px;
9 9
	}
......
50 50
		font-family: FontAwesome;
51 51
		margin-right: 5px;
52 52
	}
53
	@media screen and (max-width: $nav-mobile-limit) {
53
	@media screen and ($max-nav-mobile-viewport) {
54 54
		right: 1.5em;
55 55
		background: transparent;
56 56
		> span:first-child::before {
......
59 59
	}
60 60
	span {
61 61
		a {
62
			@media screen and (max-width: $nav-mobile-limit) {
62
			@media screen and ($max-nav-mobile-viewport) {
63 63
				background: $secondary-color;
64 64
				padding: 5px 10px;
65 65
			}
......
68 68
}
69 69

  
70 70
div.gru-nav {
71
	@media screen and (max-width: $nav-mobile-limit) {
71
	@media screen and ($max-nav-mobile-viewport) {
72 72
		position: absolute;
73 73
		top: 0;
74 74
		z-index: 1;
......
79 79
	}
80 80
	.gru-nav-button {
81 81
		border-radius: 0;
82
		@media screen and (max-width: $nav-mobile-limit) {
82
		@media screen and ($max-nav-mobile-viewport) {
83 83
			margin-left: 0;
84 84
		}
85 85
		& + ul {
......
91 91
	}
92 92
	> ul {
93 93
		> li a {
94
			@media screen and (max-width: $nav-mobile-limit) {
94
			@media screen and ($max-nav-mobile-viewport) {
95 95
				font-size: 0.8em;
96 96
				font-weight: normal;
97 97
			}
static/pre-saint-gervais/_custom.scss
38 38
%title {
39 39
	@extend %title;
40 40
	text-align: left;
41
	@media screen and (max-width: $nav-mobile-limit) {
41
	@media screen and ($max-nav-mobile-viewport) {
42 42
	}
43 43
	font-weight: bold;
44 44
}
......
57 57
		margin-right: 10px;
58 58
	}
59 59
	font-size: 2.778rem;
60
	@media screen and (max-width: $nav-mobile-limit) {
60
	@media screen and ($max-nav-mobile-viewport) {
61 61
		font-size: 2.222rem;
62 62
		&::before {
63 63
			content: none;
......
83 83
	position: fixed;
84 84
	z-index: 1000;
85 85
	width: 100%;
86
	@media screen and (max-width: $nav-mobile-limit) {
86
	@media screen and ($max-nav-mobile-viewport) {
87 87
		left: 0px;  // no burger menu
88 88
		width: 100%;
89 89
		background: white;
......
103 103
		margin: 0 auto;
104 104
		text-align: left;
105 105
		padding-left: 150px;
106
		@media screen and (max-width: $nav-mobile-limit) {
106
		@media screen and ($max-nav-mobile-viewport) {
107 107
			padding-left: 0;
108 108
			text-align: center;
109 109
		}
110 110
	}
111
	@media screen and (max-width: $nav-mobile-limit) {
111
	@media screen and ($max-nav-mobile-viewport) {
112 112
		position: static;
113 113
		padding-bottom: 10px;
114 114
	}
......
116 116

  
117 117
div#search-top-wrapper {
118 118
	margin-top: 130px;
119
	@media screen and (max-width: $nav-mobile-limit) {
119
	@media screen and ($max-nav-mobile-viewport) {
120 120
		margin-top: 0;
121 121
	}
122 122
}
......
129 129
	div.shortcuts-top {
130 130
		max-width: $width;
131 131
		margin: 0 auto;
132
		@media screen and (max-width: $nav-mobile-limit) {
132
		@media screen and ($max-nav-mobile-viewport) {
133 133
			padding: 1rem;
134 134
		}
135 135
	}
......
165 165
	margin-top: 40px;
166 166
	padding-top: 2rem;
167 167
	padding-bottom: 2rem;
168
	@media screen and (max-width: $nav-mobile-limit) {
168
	@media screen and ($max-nav-mobile-viewport) {
169 169
		text-align: center;
170 170
	}
171 171
	h2 {
......
199 199
		text-align: center;
200 200
		font-weight: bold;
201 201
		color: white;
202
		@media screen and (max-width: $nav-mobile-limit) {
202
		@media screen and ($max-nav-mobile-viewport) {
203 203
			margin: 0 auto 1rem auto;
204 204
		}
205 205
		div {
......
230 230

  
231 231
div#page div#main-content-wrapper {
232 232
	margin-top: 130px;
233
	@media screen and (max-width: $nav-mobile-limit) {
233
	@media screen and ($max-nav-mobile-viewport) {
234 234
		margin-top: 80px;
235 235
	}
236 236
}
......
241 241
	color: white;
242 242
	height: 48px;
243 243
	text-transform: uppercase;
244
	@media screen and (max-width: $nav-mobile-limit) {
244
	@media screen and ($max-nav-mobile-viewport) {
245 245
		background: transparent;
246 246
	}
247 247
	#header {
......
258 258
			background: url(img/logo.png) top left no-repeat;
259 259
			text-indent: -10000px;
260 260
		}
261
		@media screen and (max-width: $nav-mobile-limit) {
261
		@media screen and ($max-nav-mobile-viewport) {
262 262
			h1 {
263 263
				padding-left: calc(50vw - 30px);
264 264
			}
......
345 345
				}
346 346
			}
347 347
		}
348
		@media screen and (max-width: $nav-mobile-limit) {
348
		@media screen and ($max-nav-mobile-viewport) {
349 349
			a {
350 350
				display: none;
351 351
				&.login,
......
371 371
	margin-top: 0;
372 372
	margin-bottom: 1rem;
373 373
	margin-left: 120px;  // logo overflowing
374
	@media screen and (max-width: $nav-mobile-limit) {
374
	@media screen and ($max-nav-mobile-viewport) {
375 375
		margin-left: 0;
376 376
		box-shadow: none;
377 377
	}
......
397 397
	box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
398 398
}
399 399

  
400
@media screen and (max-width: $nav-mobile-limit) {
400
@media screen and ($max-nav-mobile-viewport) {
401 401
	div#nav {
402 402
		margin-top: 5px;
403 403
	}
......
451 451
	position: static;
452 452
	margin-top: 160px;
453 453
	margin-bottom: 20px;
454
	@media screen and (max-width: $nav-mobile-limit) {
454
	@media screen and ($max-nav-mobile-viewport) {
455 455
		margin-top: 60px;
456 456
	}
457 457
}
......
507 507
div#form-page {
508 508
	position: relative;
509 509
	margin-top: 1rem;
510
	@media screen and (max-width: $nav-mobile-limit) {
510
	@media screen and ($max-nav-mobile-viewport) {
511 511
		margin-top: 0;
512 512
	}
513 513
	div#gauche {
......
517 517
		position: absolute;
518 518
		top: 0;
519 519
		left: 0;
520
		@media screen and (max-width: $nav-mobile-limit) {
520
		@media screen and ($max-nav-mobile-viewport) {
521 521
			width: auto;
522 522
			position: static;
523 523
			margin-bottom: 1rem;
......
525 525
	}
526 526
	&.with-sidebar {
527 527
		padding-left: 460px;
528
		@media screen and (max-width: $nav-mobile-limit) {
528
		@media screen and ($max-nav-mobile-viewport) {
529 529
			padding-left: 0;
530 530
		}
531 531
	}
......
541 541

  
542 542
	#title-section {
543 543
		padding-top: 1rem;
544
		@media screen and (max-width: $nav-mobile-limit) {
544
		@media screen and ($max-nav-mobile-viewport) {
545 545
			padding-top: 0;
546 546
		}
547 547
		h1 {
......
690 690
		font-size: 2.222rem;
691 691
		color: black;
692 692
	}
693
	@media screen and (max-width: $nav-mobile-limit) {
693
	@media screen and ($max-nav-mobile-viewport) {
694 694
		margin-top: 1rem;
695 695
	}
696 696
}
......
711 711
			background: $pink;
712 712
		}
713 713
	}
714
	@media screen and (min-width: $nav-mobile-limit - 1px) {
714
	@media screen and ($min-nav-desktop-viewport) {
715 715
		box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
716 716
		display: block;
717 717
		top: 200px;
......
827 827
			content: none;
828 828
		}
829 829
		padding-left: 3rem;
830
		@media screen and (max-width: $nav-mobile-limit) {
830
		@media screen and ($max-nav-mobile-viewport) {
831 831
			padding-left: 2rem;
832 832
		}
833 833
	}
static/quimper/_custom.scss
22 22
#header-wrapper {
23 23
	background: $primary-color;
24 24
	height: 100px;
25
	@media screen and (max-width: $nav-mobile-limit) {
25
	@media screen and ($max-nav-mobile-viewport) {
26 26
		position: fixed;
27 27
		top: 0;
28 28
		left: 0;
......
33 33
}
34 34

  
35 35
div#header {
36
	@media screen and (max-width: $nav-mobile-limit) {
36
	@media screen and ($max-nav-mobile-viewport) {
37 37
		h1 {
38 38
			padding-left: 90px;
39 39
		}
......
44 44
		height: 100px;
45 45
		display: block;
46 46
		text-indent: -10000px;
47
		@media screen and (max-width: $nav-mobile-limit) {
47
		@media screen and ($max-nav-mobile-viewport) {
48 48
			float: right;
49 49
			height: $mobile-header-height - 10px;
50 50
			margin-top: 5px;
......
95 95
}
96 96

  
97 97
div.gru-nav-wrapper {
98
	@media screen and (max-width: $nav-mobile-limit) {
98
	@media screen and ($max-nav-mobile-viewport) {
99 99
		position: fixed;
100 100
		width: 100%;
101 101
		pointer-events: none;
......
148 148

  
149 149
div#main-content-wrapper {
150 150
	margin-top: 1rem;
151
	@media screen and (max-width: $nav-mobile-limit) {
151
	@media screen and ($max-nav-mobile-viewport) {
152 152
		margin-top: $mobile-header-height;
153 153
		#columns {
154 154
			padding: 1rem;
......
174 174
	div {
175 175
		background: white url(img/plus.svg) right 0.5rem bottom 0.5rem no-repeat;
176 176
		background-size: 25px 25px;
177
		@media screen and (max-width: $nav-mobile-limit) {
177
		@media screen and ($max-nav-mobile-viewport) {
178 178
			background-size: 20px;
179 179
		}
180 180
		padding: 1rem;
......
189 189
		}
190 190
	}
191 191
	margin-bottom: 2rem;
192
	@media screen and (max-width: $nav-mobile-limit) {
192
	@media screen and ($max-nav-mobile-viewport) {
193 193
		margin-bottom: 1rem;
194 194
		height: 160px;
195 195
		padding-top: 0;
......
250 250
		position: relative;
251 251
		background: white url(img/plus.svg) right 0.5rem bottom 0.5rem no-repeat;
252 252
		background-size: 25px 25px;
253
		@media screen and (max-width: $nav-mobile-limit) {
253
		@media screen and ($max-nav-mobile-viewport) {
254 254
			background-size: 20px;
255 255
		}
256 256
		padding: 1rem;
......
268 268

  
269 269

  
270 270
footer {
271
	@media screen and (max-width: $nav-mobile-limit) {
271
	@media screen and ($max-nav-mobile-viewport) {
272 272
		#footer-wrapper {
273 273
			margin-top: 0;
274 274
			padding-top: 0;
......
290 290
	}
291 291
}
292 292

  
293
@media screen and (max-width: $nav-mobile-limit) {
293
@media screen and ($max-nav-mobile-viewport) {
294 294
	div.gru-nav .gru-nav-button {
295 295
		& .icon-bar {
296 296
			left: 30px;
......
329 329
	color: white;
330 330
	div.wcs-tracking-code-input {
331 331
		display: flex;
332
		@media screen and (max-width: $nav-mobile-limit) {
332
		@media screen and ($max-nav-mobile-viewport) {
333 333
			display: block;
334 334
		}
335 335
		h2 {
......
338 338
			color: white;
339 339
			max-width: 11ex;
340 340
			text-align: right;
341
			@media screen and (max-width: $nav-mobile-limit) {
341
			@media screen and ($max-nav-mobile-viewport) {
342 342
				font-size: 1rem;
343 343
				max-width: none;
344 344
				text-align: left;
......
350 350
			border-left: 1px solid white;
351 351
			padding-left: 1rem;
352 352
			max-width: 30ex;
353
			@media screen and (max-width: $nav-mobile-limit) {
353
			@media screen and ($max-nav-mobile-viewport) {
354 354
				display: none;
355 355
			}
356 356
		}
......
359 359
			text-align: right;
360 360
			margin: 0;
361 361
			padding: 1rem;
362
			@media screen and (max-width: $nav-mobile-limit) {
362
			@media screen and ($max-nav-mobile-viewport) {
363 363
				display: flex;
364 364
			}
365 365
			input {
......
388 388
	> div {
389 389
		padding: 0;
390 390
	}
391
	@media screen and (max-width: $nav-mobile-limit) {
391
	@media screen and ($max-nav-mobile-viewport) {
392 392
		margin: 0 -1rem;
393 393
	}
394 394
	h2 {
......
643 643
div#gauche, div#rub_service {
644 644
	margin-top: 0;
645 645
	background: transparent;
646
	@media screen and (max-width: $nav-mobile-limit) {
646
	@media screen and ($max-nav-mobile-viewport) {
647 647
		margin-top: -1rem;
648 648
		margin-left: -1rem;
649 649
		margin-right: -1rem;
......
653 653

  
654 654
div#rub_service.has-sidebox > h2 {
655 655
	padding-left: 0.5rem;
656
	@media screen and (max-width: $nav-mobile-limit) {
656
	@media screen and ($max-nav-mobile-viewport) {
657 657
		display: none;
658 658
	}
659 659
}
......
766 766
	}
767 767
}
768 768

  
769
@media screen and (max-width: $nav-mobile-limit) {
769
@media screen and ($max-nav-mobile-viewport) {
770 770
	div.tracking-code-part {
771 771
		background: #d5d5d5;
772 772
	}
static/roannais-agglomeration/_custom.scss
8 8
	padding-top: 0;
9 9
	padding-bottom: 0;
10 10
	height: 0;
11
	@media screen and (max-width: $nav-mobile-limit) {
11
	@media screen and ($max-nav-mobile-viewport) {
12 12
		height: auto;
13 13
		padding-top: 0px;
14 14
	}
......
23 23
			width: 180px;
24 24
			height: 40px;
25 25
			text-indent: -10000px;
26
			@media screen and (max-width: $nav-mobile-limit) {
26
			@media screen and ($max-nav-mobile-viewport) {
27 27
				height: 55px;
28 28
			}
29 29
		}
30
		@media screen and (max-width: $nav-mobile-limit) {
30
		@media screen and ($max-nav-mobile-viewport) {
31 31
			padding-top: 40px;
32 32
			padding-left: 0;
33 33
			a {
......
48 48
		border: none;
49 49
		background: none;
50 50
		box-shadow: none;
51
		@media screen and (max-width: $nav-mobile-limit) {
51
		@media screen and ($max-nav-mobile-viewport) {
52 52
			padding-top: 2px;
53 53
		}
54 54
	}
......
119 119
	background: rgba(231, 39, 32, 0.8);
120 120
	padding: 0.5rem 2rem;
121 121
	color: white;
122
	@media screen and (max-width: $nav-mobile-limit) {
122
	@media screen and ($max-nav-mobile-viewport) {
123 123
		padding: 0.5rem 0.5rem;
124 124
		position: static;
125 125
		width: auto;
......
127 127
	h2 {
128 128
		font-size: 2rem;
129 129
		color: white;
130
		@media screen and (max-width: $nav-mobile-limit) {
130
		@media screen and ($max-nav-mobile-viewport) {
131 131
			font-size: 1.333rem;
132 132
		}
133 133
	}
......
172 172
div#gauche {
173 173
	width: 15%;
174 174
	text-align: center;
175
	@media screen and (max-width: $nav-mobile-limit) {
175
	@media screen and ($max-nav-mobile-viewport) {
176 176
		width: auto;
177 177
		margin-top: 0;
178 178
	}
......
221 221
	}
222 222
}
223 223

  
224
@media screen and (max-width: $nav-mobile-limit) {
224
@media screen and ($max-nav-mobile-viewport) {
225 225
	body.has-picture nav::after {
226 226
		height: 200px;
227 227
	}
static/saint-chamond/_custom.scss
4 4
	background: $blue;
5 5
	padding-top: 25px;
6 6
	padding-bottom: 40px;
7
	@media screen and (max-width: $nav-mobile-limit) {
7
	@media screen and ($max-nav-mobile-viewport) {
8 8
		padding-top: 0;
9 9
	}
10 10
	h1#logo {
11
		@media screen and (max-width: $nav-mobile-limit) {
11
		@media screen and ($max-nav-mobile-viewport) {
12 12
			padding-top: 50px;
13 13
			padding-left: 0;
14 14
			text-align: center;
......
72 72
#sidebar {
73 73
	box-sizing: content-box;
74 74
	padding-right: 40px;
75
	@media screen and (max-width: $nav-mobile-limit) {
75
	@media screen and ($max-nav-mobile-viewport) {
76 76
		padding-right: 0;
77 77
	}
78 78
}
79 79

  
80 80
#left {
81 81
	width: calc(100% - 250px);
82
	@media screen and (max-width: $nav-mobile-limit) {
82
	@media screen and ($max-nav-mobile-viewport) {
83 83
		width: auto;
84 84
	}
85 85
}
86 86

  
87 87
#right {
88 88
	width: 250px;
89
	@media screen and (max-width: $nav-mobile-limit) {
89
	@media screen and ($max-nav-mobile-viewport) {
90 90
		clear: both;
91 91
		width: auto;
92 92
	}
......
126 126
	background: rgba(42, 139, 231, 0.8);
127 127
	padding: 0.5rem 2rem;
128 128
	color: white;
129
	@media screen and (max-width: $nav-mobile-limit) {
129
	@media screen and ($max-nav-mobile-viewport) {
130 130
		padding: 0.5rem 0.5rem;
131 131
		position: static;
132 132
		width: auto;
......
134 134
	h2 {
135 135
		font-size: 2rem;
136 136
		color: white;
137
		@media screen and (max-width: $nav-mobile-limit) {
137
		@media screen and ($max-nav-mobile-viewport) {
138 138
			font-size: 1.333rem;
139 139
		}
140 140
	}
......
186 186
div#gauche {
187 187
	width: 15%;
188 188
	text-align: center;
189
	@media screen and (max-width: $nav-mobile-limit) {
189
	@media screen and ($max-nav-mobile-viewport) {
190 190
		width: auto;
191 191
		margin-top: 0;
192 192
	}
......
246 246
	}
247 247
}
248 248

  
249
@media screen and (max-width: $nav-mobile-limit) {
249
@media screen and ($max-nav-mobile-viewport) {
250 250
	body.has-picture nav::after {
251 251
		height: 200px;
252 252
	}
static/saint-denis/_custom.scss
70 70
div#footer-wrapper {
71 71
	background: url(img/footer-fond.png) no-repeat center 0 $footer-background;
72 72
	div.no-mobile {
73
		@media screen and (max-width: $nav-mobile-limit) {
73
		@media screen and ($max-nav-mobile-viewport) {
74 74
			display: none;
75 75
		}
76 76
	}
static/signal-publik/_custom.scss
95 95
			letter-spacing: -1px;
96 96
		}
97 97
	}
98
	@media screen and (min-width: $nav-mobile-limit + 1px) {
98
	@media screen and ($min-nav-desktop-viewport) {
99 99
		display: block;
100 100
		max-width: $width;
101 101
		margin: auto;
......
122 122
}
123 123

  
124 124
div.gru-nav-wrapper {
125
	@media screen and (max-width: $nav-mobile-limit) {
125
	@media screen and ($max-nav-mobile-viewport) {
126 126
		position: fixed;
127 127
		width: 100%;
128 128
		pointer-events: none;
......
200 200
			}
201 201
		}
202 202
	}
203
	@media screen and (max-width: $nav-mobile-limit) {
203
	@media screen and ($max-nav-mobile-viewport) {
204 204
		#columns {
205 205
			padding: 1rem;
206 206
			padding-bottom: 0;
......
313 313
	.liens {
314 314
		float: right;
315 315
	}
316
	@media screen and (max-width: $nav-mobile-limit) {
316
	@media screen and ($max-nav-mobile-viewport) {
317 317
		#footer-wrapper {
318 318
			padding-bottom: 0;
319 319
		}
......
411 411
}
412 412

  
413 413
#columns div#login-page > div.block {
414
	@media screen and (max-width: $nav-mobile-limit) {
414
	@media screen and ($max-nav-mobile-viewport) {
415 415
		background: transparent;
416 416
		> div {
417 417
			padding: 0;
......
585 585
div#gauche, div#rub_service {
586 586
	margin-top: 0;
587 587
	background: white;
588
	@media screen and (max-width: $nav-mobile-limit) {
588
	@media screen and ($max-nav-mobile-viewport) {
589 589
		margin-top: -1rem;
590 590
		margin-left: -1rem;
591 591
		margin-right: -1rem;
......
596 596

  
597 597
div#rub_service.has-sidebox > h2 {
598 598
	padding-left: 0.5rem;
599
	@media screen and (max-width: $nav-mobile-limit) {
599
	@media screen and ($max-nav-mobile-viewport) {
600 600
		display: none;
601 601
	}
602 602
}
......
628 628
		position: absolute;
629 629
		right: 0;
630 630
		top: 0px;
631
		@media screen and (max-width: $nav-mobile-limit) {
631
		@media screen and ($max-nav-mobile-viewport) {
632 632
			position: static;
633 633
		}
634 634
	}
635 635
	div#receipt-intro {
636 636
		padding-top: 1px;
637
		@media screen and (max-width: $nav-mobile-limit) {
637
		@media screen and ($max-nav-mobile-viewport) {
638 638
			padding-top: 0;
639 639
			margin-left: 0;
640 640
			margin-right: 0;
......
643 643
	div#summary,
644 644
	div#evolution-log {
645 645
		padding: 0 1rem;
646
		@media screen and (max-width: $nav-mobile-limit) {
646
		@media screen and ($max-nav-mobile-viewport) {
647 647
			padding: 0;
648 648
		}
649 649
		h2:first-child {
......
749 749
	display: none;
750 750
}
751 751

  
752
@media screen and (max-width: $nav-mobile-limit) {
752
@media screen and ($max-nav-mobile-viewport) {
753 753
	div.cell.map {
754 754
		div.combo-cell-map.leaflet-container {
755 755
			height: calc(100vh - #{$mobile-header-height} - #{$nav-mobile-bottom-bar-height} - 2rem);
static/thonon-agglomeration/_custom.scss
22 22
	text-indent: -9999px;
23 23
}
24 24

  
25
@media screen and (max-width: $nav-mobile-limit) {
25
@media screen and ($max-nav-mobile-viewport) {
26 26
	h1#logo {
27 27
		padding-top: 40px;
28 28
	}
static/vendargues/_custom.scss
21 21

  
22 22
#footer-wrapper {
23 23
	background: $footer-background url(img/tache_jaune.png) 5% 30% no-repeat;
24
	@media screen and (max-width: $nav-mobile-limit) {
24
	@media screen and ($max-nav-mobile-viewport) {
25 25
		background: $footer-background;
26 26
	}
27 27
	a {
28
-