0001-scss-introduce-max-nav-mobile-viewport-min-nav-deskt.patch
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 |
- |