0001-scss-add-custom-medias-sass-vars-to-manage-medias-qu.patch
static/includes/_cells.scss | ||
---|---|---|
38 | 38 |
div#right div.block, |
39 | 39 |
.gru-content #right .cell { margin-right: 0; } |
40 | 40 | |
41 |
@media screen and (max-width: $mobile-limit) {
|
|
41 |
@media screen and ($max-mobile-viewport) {
|
|
42 | 42 |
div#left div.block, |
43 | 43 |
.gru-content #left .cell, |
44 | 44 |
div#right div.block, |
... | ... | |
54 | 54 |
& form, & p { |
55 | 55 |
margin: 1em 0.5em; |
56 | 56 |
} |
57 |
@media screen and (max-width: $mobile-limit) {
|
|
57 |
@media screen and ($max-mobile-viewport) {
|
|
58 | 58 |
margin: 0 auto; |
59 | 59 |
} |
60 | 60 |
} |
... | ... | |
614 | 614 |
#registration-blocks.methods3 > .a2-block, |
615 | 615 |
#login-page.methods2 > .block, |
616 | 616 |
#login-page.methods3 > .block { |
617 |
@media screen and (max-width: $mobile-limit) {
|
|
617 |
@media screen and ($max-mobile-viewport) {
|
|
618 | 618 |
width: auto; |
619 | 619 |
float: none; |
620 | 620 |
margin: 0.7em; |
... | ... | |
661 | 661 |
div.family_members { |
662 | 662 |
display: flex; |
663 | 663 |
justify-content: space-between; |
664 |
@media screen and (max-width: $mobile-limit) {
|
|
664 |
@media screen and ($max-mobile-viewport) {
|
|
665 | 665 |
flex-direction: column; |
666 | 666 |
} |
667 | 667 |
} |
668 | 668 |
div.family_adults, div.family_children { |
669 | 669 |
width: 48%; |
670 |
@media screen and (max-width: $mobile-limit) {
|
|
670 |
@media screen and ($max-mobile-viewport) {
|
|
671 | 671 |
width: auto; |
672 | 672 |
} |
673 | 673 |
> div { |
static/includes/_grid.scss | ||
---|---|---|
74 | 74 |
@for $j from 1 through $i { |
75 | 75 |
.grid-#{$j}-#{$i} { |
76 | 76 |
width: calc( #{100*$j/$i+0%} - #{$grid-gutter}); |
77 |
@media screen and (max-width: $mobile-limit) {
|
|
77 |
@media screen and ($max-mobile-viewport) {
|
|
78 | 78 |
@if $i == 4 and $j <= 2 { width: calc(50% - #{$grid-gutter}); } |
79 | 79 |
@else if $i == 4 and $j > 2 { width: calc(100% - #{$grid-gutter}); } |
80 | 80 |
@else if $i == 6 and $j <= 2 { width: calc(#{100/3+0%} - #{$grid-gutter}); } |
static/includes/_layout.scss | ||
---|---|---|
9 | 9 |
$sidebar-min-width: 0 !default; |
10 | 10 |
$sidebar-position: left !default; |
11 | 11 | |
12 |
// custom media queries |
|
13 |
// @media ($max-mobile-viewport) {} |
|
14 |
// @media ($min-desktop-viewport) {} |
|
15 |
$max-mobile-viewport: "max-width: #{$mobile-limit}"; |
|
16 |
$min-desktop-viewport: "min-width: #{$mobile-limit + 1}"; |
|
17 | ||
18 | ||
12 | 19 |
html, body { |
13 | 20 |
margin: 0; |
14 | 21 |
min-height: 100vh; |
... | ... | |
51 | 58 |
& h1 { |
52 | 59 |
margin: 0; |
53 | 60 |
} |
54 |
@media screen and (max-width: $mobile-limit) {
|
|
61 |
@media screen and ($max-mobile-viewport) {
|
|
55 | 62 |
& h1 { |
56 | 63 |
padding-left: $top-logo-width+70px; |
57 | 64 |
background-position: 70px; |
... | ... | |
65 | 72 |
max-width: $width; |
66 | 73 |
margin: 0px auto 0px auto; |
67 | 74 |
padding: 0; |
68 |
@media screen and (max-width: $mobile-limit) {
|
|
75 |
@media screen and ($max-mobile-viewport) {
|
|
69 | 76 |
position: static; |
70 | 77 |
z-index: 0; |
71 | 78 |
} |
... | ... | |
122 | 129 |
} |
123 | 130 |
} |
124 | 131 | |
125 |
@media screen and (max-width: $mobile-limit) {
|
|
132 |
@media screen and ($max-mobile-viewport) {
|
|
126 | 133 |
#columns { |
127 | 134 |
padding: 0 0.7em; |
128 | 135 |
max-width: 100%; |
... | ... | |
171 | 178 |
padding-left: $top-logo-width; |
172 | 179 |
} |
173 | 180 | |
174 |
@media screen and (max-width: $mobile-limit) {
|
|
181 |
@media screen and ($max-mobile-viewport) {
|
|
175 | 182 |
.desktop-only { |
176 | 183 |
display: none; |
177 | 184 |
} |
178 | 185 |
} |
179 | 186 | |
180 |
@media screen and (min-width: $mobile-limit+1px) {
|
|
187 |
@media screen and ($min-desktop-viewport) {
|
|
181 | 188 |
.mobile-only { |
182 | 189 |
display: none; |
183 | 190 |
} |
static/includes/_misc.scss | ||
---|---|---|
18 | 18 |
margin: 0.7em 0.5rem; |
19 | 19 |
} |
20 | 20 | |
21 |
@media screen and (max-width: $mobile-limit) {
|
|
21 |
@media screen and ($max-mobile-viewport) {
|
|
22 | 22 |
img { |
23 | 23 |
max-width: 100%; |
24 | 24 |
} |
... | ... | |
43 | 43 |
white-space: pre; |
44 | 44 |
opacity: 0.9; |
45 | 45 |
pointer-events: none; |
46 |
@media screen and (max-width: $mobile-limit) {
|
|
46 |
@media screen and ($max-mobile-viewport) {
|
|
47 | 47 |
top: auto; |
48 | 48 |
bottom: 3rem; |
49 | 49 |
right: -1rem; |
... | ... | |
74 | 74 |
} |
75 | 75 | |
76 | 76 | |
77 |
@media screen and (max-width: $mobile-limit) {
|
|
77 |
@media screen and ($max-mobile-viewport) {
|
|
78 | 78 |
#welcome-text, |
79 | 79 |
#login-methods { |
80 | 80 |
width: auto; |
... | ... | |
114 | 114 |
height: 3rem; |
115 | 115 |
line-height: 3rem; |
116 | 116 |
} |
117 |
@media screen and (max-width: $mobile-limit) {
|
|
117 |
@media screen and ($max-mobile-viewport) {
|
|
118 | 118 |
border-left: none; |
119 | 119 |
padding-left: 0; |
120 | 120 |
&::after { |
... | ... | |
157 | 157 |
padding: 5px 10px; |
158 | 158 |
border: 1px solid #888; |
159 | 159 |
border-width: 0 1px 1px 1px; |
160 |
@media screen and (max-width: $mobile-limit) {
|
|
160 |
@media screen and ($max-mobile-viewport) {
|
|
161 | 161 |
display: none; |
162 | 162 |
} |
163 | 163 |
} |
... | ... | |
187 | 187 |
} |
188 | 188 | |
189 | 189 |
%top-consent-banner { |
190 |
@media screen and (max-width: $mobile-limit) {
|
|
190 |
@media screen and ($max-mobile-viewport) {
|
|
191 | 191 |
position: absolute; |
192 | 192 |
background: rgba(255, 255, 255, 0.98); |
193 | 193 |
box-shadow: 0 0 8px 1px #333; |
static/includes/_user-info.scss | ||
---|---|---|
12 | 12 |
padding: 0.7em 2em 0.2em 2em; |
13 | 13 |
border: 3px solid $primary-color; |
14 | 14 |
border-width: 0 1px 1px 1px; |
15 |
@media screen and (max-width: $mobile-limit) {
|
|
15 |
@media screen and ($max-mobile-viewport) {
|
|
16 | 16 |
border-right: 0; |
17 | 17 |
right: 0; |
18 | 18 |
max-width: 90%; |
... | ... | |
27 | 27 | |
28 | 28 |
#toplinks span.connected-user { |
29 | 29 |
padding-right: 0.7em; |
30 |
@media screen and (max-width: $mobile-limit) {
|
|
30 |
@media screen and ($max-mobile-viewport) {
|
|
31 | 31 |
padding-right: 0; |
32 | 32 |
} |
33 | 33 |
} |
static/includes/wcs/_bulk.scss | ||
---|---|---|
58 | 58 |
padding: 0; |
59 | 59 |
margin: 0; |
60 | 60 |
list-style: none; |
61 |
@media screen and (max-width: $mobile-limit) {
|
|
61 |
@media screen and ($max-mobile-viewport) {
|
|
62 | 62 |
@include vendor-prefix('column-count', '1'); |
63 | 63 |
} |
64 | 64 |
} |
... | ... | |
132 | 132 | |
133 | 133 | |
134 | 134 | |
135 |
@media screen and (max-width: $mobile-limit) {
|
|
135 |
@media screen and ($max-mobile-viewport) {
|
|
136 | 136 |
// move #gauche on top and tracking code after steps |
137 | 137 |
div#gauche { |
138 | 138 |
float: none; |
... | ... | |
151 | 151 |
} |
152 | 152 |
} |
153 | 153 | |
154 |
@media screen and (max-width: $mobile-limit) {
|
|
154 |
@media screen and ($max-mobile-viewport) {
|
|
155 | 155 |
div#gauche + div#rub_service, |
156 | 156 |
div#rub_service { |
157 | 157 |
width: 100%; |
... | ... | |
405 | 405 |
font-weight: normal; |
406 | 406 |
font-size: smaller; |
407 | 407 |
float: right; |
408 |
@media screen and (max-width: $mobile-limit) {
|
|
408 |
@media screen and ($max-mobile-viewport) {
|
|
409 | 409 |
padding-left: 0; |
410 | 410 |
float: none; |
411 | 411 |
display: block; |
... | ... | |
647 | 647 |
&.folded { |
648 | 648 |
span.disclose-message { |
649 | 649 |
display: inline-block; |
650 |
@media screen and (max-width: $mobile-limit) {
|
|
650 |
@media screen and ($max-mobile-viewport) {
|
|
651 | 651 |
// never displayed on mobile as the small width |
652 | 652 |
// makes clear the relation between title and |
653 | 653 |
// open/close bracket. |
static/includes/wcs/_nearby-form.scss | ||
---|---|---|
40 | 40 |
} |
41 | 41 |
.nearby-form--datetime { |
42 | 42 |
width: 20%; |
43 |
@media screen and (max-width: $mobile-limit) {
|
|
43 |
@media screen and ($max-mobile-viewport) {
|
|
44 | 44 |
width: 30%; |
45 | 45 |
} |
46 | 46 |
} |
static/includes/wcs/_steps.scss | ||
---|---|---|
49 | 49 |
// Steps orientations depend on media-queries & $form-sidebar-position |
50 | 50 |
@mixin desktop-horizontal-steps() { |
51 | 51 |
@if ($form-sidebar-position == top) { |
52 |
@media (min-width: $mobile-limit + 1) {
|
|
52 |
@media ($min-desktop-viewport) {
|
|
53 | 53 |
@content; |
54 | 54 |
} |
55 | 55 |
} |
56 | 56 |
} |
57 | 57 |
@mixin desktop-vertical-steps() { |
58 | 58 |
@if ($form-sidebar-position == left or $form-sidebar-position == right) { |
59 |
@media (min-width: $mobile-limit + 1) {
|
|
59 |
@media ($min-desktop-viewport) {
|
|
60 | 60 |
@content; |
61 | 61 |
} |
62 | 62 |
} |
63 |
- |