mod-base 1.0.21 → 1.0.23-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/styles/templates/_dark-mode.scss +259 -162
package/package.json
CHANGED
|
@@ -10,67 +10,143 @@ $color-button: null;
|
|
|
10
10
|
|
|
11
11
|
$contact-us-blue-light: #8498E7;
|
|
12
12
|
|
|
13
|
-
@
|
|
13
|
+
@function contrastText($base-color, $light-color, $dark-color) {
|
|
14
|
+
$result: $light-color;
|
|
15
|
+
@if (lightness($base-color) > 50) {
|
|
16
|
+
$result: $dark-color;
|
|
17
|
+
}
|
|
18
|
+
@return $result;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin btnStyles($color-btn, $color-btn-text) {
|
|
22
|
+
background-color: $color-btn;
|
|
23
|
+
color: $color-btn-text;
|
|
24
|
+
|
|
25
|
+
.btn__text {
|
|
26
|
+
color: $color-btn-text;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:hover,
|
|
30
|
+
&:active,
|
|
31
|
+
&:focus {
|
|
32
|
+
background-color: darken($color-btn, 10%);
|
|
33
|
+
color: $color-btn-text;
|
|
34
|
+
|
|
35
|
+
.btn__text {
|
|
36
|
+
color: $color-btn-text;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin dark-mode(
|
|
42
|
+
$background: $color-charcoal7,
|
|
43
|
+
$foreground: $color-white,
|
|
44
|
+
$accent-color: null,
|
|
45
|
+
$color-btn: null,
|
|
46
|
+
$color-btn-text: contrastText($color-btn, $foreground, $background),
|
|
47
|
+
$interactive-text-color: $color-charcoal2,
|
|
48
|
+
$interactive-text-color-hover: darken($interactive-text-color, 10%),
|
|
49
|
+
$bbb-img-filter: grayscale(1) invert(.9) brightness(2),
|
|
50
|
+
$logo-filter: invert(1) hue-rotate(180deg),
|
|
51
|
+
$value-props-background: null,
|
|
52
|
+
$radio-btn-background-color: $background,
|
|
53
|
+
$radio-btn-text-color: $color-white,
|
|
54
|
+
$radio-btn-icon-color: $color-white,
|
|
55
|
+
$radio-btn-icon-background: transparent,
|
|
56
|
+
$radio-btn-checked-background-color: null,
|
|
57
|
+
$radio-btn-checked-border-color: null,
|
|
58
|
+
$radio-btn-checked-icon-color: $color-white,
|
|
59
|
+
$radio-btn-checked-icon-background-color: null,
|
|
60
|
+
$radio-btn-checked-text-color: $color-white,
|
|
61
|
+
$form-focus-border-color: $color-charcoal1,
|
|
62
|
+
$radio-btn-focus-box-shadow: null,
|
|
63
|
+
$footer-background: $color-charcoal8
|
|
64
|
+
) {
|
|
14
65
|
// Theme global variables if required to use after including the mixin
|
|
15
66
|
$background-color: $background !global;
|
|
16
67
|
$text-color: $foreground !global;
|
|
17
68
|
$theme: $accent-color !global;
|
|
18
|
-
$value-background:
|
|
19
|
-
$box-shadow-color: rgba($
|
|
20
|
-
$background-img-brightness: brightness(
|
|
21
|
-
$button-saturation: saturate(70%) !global;
|
|
69
|
+
$value-props-background: $value-props-background;
|
|
70
|
+
$box-shadow-color: rgba($color-black, 60%) !global;
|
|
71
|
+
$background-img-brightness: brightness(85%) !global;
|
|
22
72
|
$img-filter: invert(1) hue-rotate(180deg) !global;
|
|
23
|
-
$
|
|
73
|
+
$button-saturation: saturate(70%) !global;
|
|
74
|
+
$bbb-img-filter: $bbb-img-filter;
|
|
24
75
|
$color-button: $color-btn !global;
|
|
25
76
|
|
|
26
77
|
// Most common selectors list
|
|
27
|
-
$selectors: '
|
|
78
|
+
$content-selectors: 'input,.toggle-wrapper,.step__header-title,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,[class^="abandonment__"],.modal-header--close,.modal-phone,legend,[class^="loader__"], table tr';
|
|
79
|
+
$background-selectors: '.form,.header,.partners,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input-group__icon,.form-input:focus,.expand-collapse__icon,.featured-block,table tr';
|
|
28
80
|
|
|
29
81
|
@media (prefers-color-scheme: dark){
|
|
30
|
-
body[data-color-scheme=
|
|
82
|
+
body[data-color-scheme='system'] {
|
|
31
83
|
color-scheme: dark;
|
|
32
84
|
color: $text-color;
|
|
33
85
|
background-color: $background-color;
|
|
34
86
|
|
|
35
|
-
//
|
|
36
|
-
#{$selectors} {
|
|
37
|
-
color: $
|
|
87
|
+
// Change background color of listed selectors
|
|
88
|
+
#{$background-selectors} {
|
|
89
|
+
background-color: $background-color;
|
|
38
90
|
}
|
|
39
91
|
|
|
40
|
-
// Change
|
|
41
|
-
#{$selectors} {
|
|
42
|
-
|
|
92
|
+
// Change text color of listed selectors
|
|
93
|
+
#{$content-selectors} {
|
|
94
|
+
color: $text-color;
|
|
43
95
|
}
|
|
44
96
|
|
|
45
|
-
.
|
|
46
|
-
|
|
97
|
+
.featured-block__image img,
|
|
98
|
+
.featured-block__media img {
|
|
99
|
+
filter: $background-img-brightness;
|
|
47
100
|
}
|
|
48
101
|
|
|
49
|
-
.
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
filter: $img-filter;
|
|
53
|
-
}
|
|
102
|
+
.header__logo img,
|
|
103
|
+
.header__logo svg {
|
|
104
|
+
filter: $logo-filter;
|
|
54
105
|
}
|
|
55
106
|
|
|
107
|
+
.icon-close,
|
|
108
|
+
.progress-bar__title,
|
|
109
|
+
.header__back-button,
|
|
110
|
+
.form-input-group__icon,
|
|
56
111
|
.secure-text,
|
|
57
112
|
.step__secure-text,
|
|
58
113
|
.modal-subtitle {
|
|
59
114
|
color: $color-charcoal2;
|
|
60
115
|
}
|
|
61
116
|
|
|
62
|
-
.
|
|
63
|
-
.
|
|
64
|
-
|
|
117
|
+
.tcpa,
|
|
118
|
+
.tcpa a {
|
|
119
|
+
color: lighten($color-charcoal3, 2%);
|
|
65
120
|
}
|
|
66
121
|
|
|
67
|
-
.
|
|
68
|
-
|
|
122
|
+
.icon-close:hover {
|
|
123
|
+
color: $color-charcoal1;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.step__header,
|
|
127
|
+
.step__supertitle {
|
|
128
|
+
background-color: $theme;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.value-props {
|
|
132
|
+
background: $value-props-background;
|
|
69
133
|
}
|
|
70
134
|
|
|
71
135
|
.progress-bar {
|
|
72
136
|
&__background {
|
|
73
|
-
background-color:
|
|
137
|
+
background-color: $color-charcoal5;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&__fill {
|
|
141
|
+
background-color: $theme;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[class^="expand-collapse"] {
|
|
146
|
+
color: $color-charcoal3;
|
|
147
|
+
|
|
148
|
+
&:hover > * {
|
|
149
|
+
color: $color-charcoal1;
|
|
74
150
|
}
|
|
75
151
|
}
|
|
76
152
|
|
|
@@ -80,60 +156,78 @@ $contact-us-blue-light: #8498E7;
|
|
|
80
156
|
&--inverted {
|
|
81
157
|
box-shadow: 0 2px 4px $box-shadow-color;
|
|
82
158
|
}
|
|
159
|
+
}
|
|
83
160
|
|
|
84
|
-
|
|
161
|
+
.form-group {
|
|
162
|
+
&__label-input {
|
|
163
|
+
z-index: 1;
|
|
164
|
+
}
|
|
85
165
|
|
|
86
|
-
|
|
87
|
-
|
|
166
|
+
&:not(.has-error) {
|
|
167
|
+
.form-group__label-input {
|
|
168
|
+
color: $color-charcoal2;
|
|
88
169
|
z-index: 1;
|
|
89
170
|
}
|
|
90
171
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
172
|
+
.form-input,
|
|
173
|
+
.form-input-group--icon,
|
|
174
|
+
.form-radio label {
|
|
175
|
+
border-color: $color-charcoal2;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.form-input-group--icon,
|
|
179
|
+
.form-input {
|
|
180
|
+
&:-webkit-autofill,
|
|
181
|
+
&:not(:placeholder-shown),
|
|
182
|
+
&:focus {
|
|
183
|
+
border-color: $form-focus-border-color;
|
|
96
184
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
border-color: $color-charcoal1;
|
|
185
|
+
+ label {
|
|
186
|
+
color: $form-focus-border-color;
|
|
100
187
|
}
|
|
101
188
|
}
|
|
102
189
|
}
|
|
190
|
+
}
|
|
103
191
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
&::after {
|
|
110
|
-
border-bottom-color: $background;
|
|
111
|
-
}
|
|
192
|
+
&__tooltip-message {
|
|
193
|
+
color: $color-ivory6;
|
|
194
|
+
border-color: $color-charcoal5;
|
|
195
|
+
box-shadow: 0 4px 8px rgba($color-ivory6, 10%);
|
|
112
196
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
197
|
+
&::after {
|
|
198
|
+
border-bottom-color: $background;
|
|
199
|
+
}
|
|
116
200
|
|
|
201
|
+
&::before {
|
|
202
|
+
border-bottom-color: $color-charcoal5;
|
|
117
203
|
}
|
|
118
|
-
}
|
|
119
204
|
|
|
120
|
-
&__bbb-logo {
|
|
121
|
-
filter: $bbb-img-filter;
|
|
122
205
|
}
|
|
123
206
|
}
|
|
124
207
|
|
|
125
|
-
.form-input-group__icon {
|
|
126
|
-
color: $color-charcoal2;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
208
|
.has-error {
|
|
130
209
|
.form-input {
|
|
131
210
|
border-color: $color-red4;
|
|
132
211
|
}
|
|
133
212
|
|
|
134
|
-
.form-input-group__icon
|
|
213
|
+
.form-input-group__icon,
|
|
214
|
+
.form-group__label-input {
|
|
135
215
|
color: $color-red4;
|
|
136
216
|
}
|
|
217
|
+
|
|
218
|
+
.form-input-group {
|
|
219
|
+
&--includes-label {
|
|
220
|
+
.form-input:focus {
|
|
221
|
+
~ .form-input-group__icon {
|
|
222
|
+
color: $color-red4;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
+ label {
|
|
226
|
+
color: $color-red4;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
137
231
|
}
|
|
138
232
|
|
|
139
233
|
.form-group__error-message {
|
|
@@ -144,14 +238,16 @@ $contact-us-blue-light: #8498E7;
|
|
|
144
238
|
filter: $background-img-brightness;
|
|
145
239
|
}
|
|
146
240
|
|
|
147
|
-
.btn
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
241
|
+
.btn--primary,
|
|
242
|
+
.btn-primary,
|
|
243
|
+
.btn-next,
|
|
244
|
+
.featured-block__btn {
|
|
245
|
+
@include btnStyles($color-btn, $color-btn-text);
|
|
151
246
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
247
|
+
.btn__spinner::after {
|
|
248
|
+
border: 4px solid darken($color-btn, 20%);
|
|
249
|
+
border-right-color: contrastText($color-btn, $color-white, $color-charcoal7);
|
|
250
|
+
border-top-color: contrastText($color-btn, $color-white, $color-charcoal7);
|
|
155
251
|
}
|
|
156
252
|
}
|
|
157
253
|
|
|
@@ -159,7 +255,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
159
255
|
background-color: $color-charcoal8;
|
|
160
256
|
|
|
161
257
|
&__title {
|
|
162
|
-
color: $
|
|
258
|
+
color: $text-color;
|
|
163
259
|
}
|
|
164
260
|
|
|
165
261
|
&__subtitle,
|
|
@@ -172,18 +268,6 @@ $contact-us-blue-light: #8498E7;
|
|
|
172
268
|
}
|
|
173
269
|
}
|
|
174
270
|
|
|
175
|
-
.modal-header--close,
|
|
176
|
-
.modal-phone,
|
|
177
|
-
legend {
|
|
178
|
-
color: $foreground;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.modal-header--close {
|
|
182
|
-
&:hover {
|
|
183
|
-
color: $color-charcoal2;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
|
|
187
271
|
.modal {
|
|
188
272
|
&-backdrop {
|
|
189
273
|
opacity: .8;
|
|
@@ -217,16 +301,14 @@ $contact-us-blue-light: #8498E7;
|
|
|
217
301
|
}
|
|
218
302
|
}
|
|
219
303
|
|
|
220
|
-
.reviews {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
color: $foreground;
|
|
304
|
+
.reviews-card {
|
|
305
|
+
background-color: $background;
|
|
306
|
+
border-color: $color-charcoal4;
|
|
307
|
+
box-shadow: 0px 8px 16px 0px rgba($color-charcoal2, 10%);
|
|
308
|
+
color: $text-color;
|
|
226
309
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
}
|
|
310
|
+
&__avatar img {
|
|
311
|
+
filter: unset;
|
|
230
312
|
}
|
|
231
313
|
}
|
|
232
314
|
|
|
@@ -236,25 +318,21 @@ $contact-us-blue-light: #8498E7;
|
|
|
236
318
|
}
|
|
237
319
|
|
|
238
320
|
.footer {
|
|
239
|
-
background-color: $
|
|
240
|
-
|
|
241
|
-
&__bbb {
|
|
242
|
-
filter: $bbb-img-filter;
|
|
243
|
-
}
|
|
321
|
+
background-color: $footer-background;
|
|
244
322
|
|
|
245
323
|
&__links,
|
|
246
324
|
&__head-link,
|
|
247
325
|
&__copyright,
|
|
248
326
|
&__captcha-disclosure {
|
|
249
|
-
color: $
|
|
327
|
+
color: $text-color;
|
|
250
328
|
}
|
|
251
329
|
|
|
252
330
|
&__links li a,
|
|
253
331
|
&__head-link a {
|
|
254
|
-
color: $
|
|
332
|
+
color: $text-color !important;
|
|
255
333
|
|
|
256
334
|
&:visited {
|
|
257
|
-
color: $
|
|
335
|
+
color: $text-color !important;
|
|
258
336
|
}
|
|
259
337
|
|
|
260
338
|
&:active,
|
|
@@ -295,13 +373,13 @@ $contact-us-blue-light: #8498E7;
|
|
|
295
373
|
|
|
296
374
|
.form-group {
|
|
297
375
|
label {
|
|
298
|
-
color: $
|
|
376
|
+
color: $text-color;
|
|
299
377
|
}
|
|
300
378
|
}
|
|
301
379
|
|
|
302
380
|
legend {
|
|
303
381
|
border-bottom: 0;
|
|
304
|
-
color: $
|
|
382
|
+
color: $text-color;
|
|
305
383
|
}
|
|
306
384
|
|
|
307
385
|
.field {
|
|
@@ -318,7 +396,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
318
396
|
|
|
319
397
|
&:hover {
|
|
320
398
|
background-color: rgba($color-white, .2);
|
|
321
|
-
border-color: $
|
|
399
|
+
border-color: $text-color;
|
|
322
400
|
}
|
|
323
401
|
|
|
324
402
|
&:focus-within {
|
|
@@ -331,7 +409,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
331
409
|
|
|
332
410
|
&:hover,
|
|
333
411
|
&:focus {
|
|
334
|
-
border-color: $
|
|
412
|
+
border-color: $text-color;
|
|
335
413
|
}
|
|
336
414
|
|
|
337
415
|
&:focus {
|
|
@@ -340,8 +418,8 @@ $contact-us-blue-light: #8498E7;
|
|
|
340
418
|
}
|
|
341
419
|
|
|
342
420
|
.btn-back {
|
|
343
|
-
border-color: $
|
|
344
|
-
color: $
|
|
421
|
+
border-color: $text-color;
|
|
422
|
+
color: $text-color;
|
|
345
423
|
|
|
346
424
|
&:hover,
|
|
347
425
|
&:focus {
|
|
@@ -373,60 +451,42 @@ $contact-us-blue-light: #8498E7;
|
|
|
373
451
|
}
|
|
374
452
|
}
|
|
375
453
|
|
|
454
|
+
.form__bbb-logo,
|
|
455
|
+
.footer__bbb,
|
|
376
456
|
.bbb-logo,
|
|
377
457
|
.header__bbb-logo {
|
|
378
|
-
filter:
|
|
458
|
+
filter: $bbb-img-filter;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.header__back-button {
|
|
462
|
+
border-right-color: $color-charcoal3;
|
|
379
463
|
}
|
|
380
464
|
|
|
381
465
|
.back-btn,
|
|
382
466
|
.btn--back,
|
|
383
467
|
.zip-control__location,
|
|
384
468
|
.zip-control__icon {
|
|
385
|
-
color:
|
|
469
|
+
color: $interactive-text-color;
|
|
386
470
|
|
|
387
471
|
&:hover {
|
|
388
|
-
color: $
|
|
472
|
+
color: $interactive-text-color-hover;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
&:focus {
|
|
476
|
+
outline-color: $color-charcoal2;
|
|
389
477
|
}
|
|
390
478
|
}
|
|
391
479
|
|
|
392
480
|
.zip-control__button {
|
|
393
|
-
&:hover
|
|
481
|
+
&:hover,
|
|
482
|
+
&:focus {
|
|
394
483
|
.zip-control__location,
|
|
395
484
|
.zip-control__icon {
|
|
396
|
-
color:
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
.partners {
|
|
402
|
-
&__title,
|
|
403
|
-
&__logo {
|
|
404
|
-
color: $foreground;
|
|
405
|
-
}
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
.featured-block {
|
|
409
|
-
background-color: $background;
|
|
410
|
-
color: $foreground;
|
|
411
|
-
|
|
412
|
-
&__title {
|
|
413
|
-
color: $foreground;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
&__btn {
|
|
417
|
-
background-color: $color-btn;
|
|
418
|
-
|
|
419
|
-
&:hover {
|
|
420
|
-
background-color: darken($color-btn, 5%);
|
|
485
|
+
color: $interactive-text-color-hover;
|
|
421
486
|
}
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
487
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
a {
|
|
428
|
-
color: $color-charcoal1;
|
|
429
|
-
}
|
|
488
|
+
background-color: rgba($color-charcoal2, 9%);
|
|
489
|
+
outline-color: $color-charcoal2;
|
|
430
490
|
}
|
|
431
491
|
}
|
|
432
492
|
|
|
@@ -451,52 +511,89 @@ $contact-us-blue-light: #8498E7;
|
|
|
451
511
|
}
|
|
452
512
|
}
|
|
453
513
|
|
|
454
|
-
.
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
+
|
|
459
|
-
color: $text-color;
|
|
514
|
+
.radio__button {
|
|
515
|
+
label {
|
|
516
|
+
input[type='radio'] {
|
|
517
|
+
&:hover {
|
|
518
|
+
&:not(:checked) + .radio__button-text {
|
|
519
|
+
color: $radio-btn-checked-text-color;
|
|
460
520
|
|
|
461
521
|
&::before {
|
|
462
|
-
background-color:
|
|
522
|
+
background-color: $radio-btn-checked-background-color;
|
|
523
|
+
border-color: $radio-btn-checked-border-color;
|
|
463
524
|
}
|
|
464
|
-
}
|
|
465
525
|
|
|
466
|
-
&:checked,
|
|
467
|
-
&:hover {
|
|
468
526
|
+ span {
|
|
469
|
-
color: $
|
|
527
|
+
background-color: $radio-btn-checked-icon-background-color;
|
|
528
|
+
|
|
529
|
+
&::before {
|
|
530
|
+
color: $radio-btn-checked-icon-color;
|
|
531
|
+
}
|
|
470
532
|
}
|
|
471
533
|
}
|
|
472
534
|
}
|
|
473
|
-
}
|
|
474
535
|
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
536
|
+
&:focus + span::before {
|
|
537
|
+
box-shadow: $radio-btn-focus-box-shadow;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
&:not(:hover,:checked) {
|
|
541
|
+
+ .radio__button-text {
|
|
542
|
+
color: $radio-btn-text-color;
|
|
543
|
+
|
|
544
|
+
&::before {
|
|
545
|
+
background-color: $background;
|
|
546
|
+
border-color: $radio-btn-text-color;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
// Icon
|
|
550
|
+
+ span {
|
|
551
|
+
background-color: $radio-btn-icon-background;
|
|
552
|
+
|
|
553
|
+
&::before {
|
|
554
|
+
color: $radio-btn-icon-color;
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
}
|
|
479
558
|
}
|
|
480
559
|
|
|
481
|
-
|
|
560
|
+
&:checked + .radio__button-text {
|
|
561
|
+
color: $radio-btn-checked-text-color;
|
|
562
|
+
|
|
563
|
+
+ span {
|
|
564
|
+
background-color: $radio-btn-checked-icon-background-color;
|
|
565
|
+
|
|
566
|
+
&::before {
|
|
567
|
+
color: $radio-btn-checked-icon-color;
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
|
|
482
571
|
&::before {
|
|
483
|
-
border-
|
|
572
|
+
border-color: $radio-btn-checked-border-color;
|
|
573
|
+
background-color: $radio-btn-checked-background-color;
|
|
484
574
|
}
|
|
485
575
|
}
|
|
486
576
|
}
|
|
487
577
|
}
|
|
488
|
-
}
|
|
489
578
|
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
579
|
+
.tile {
|
|
580
|
+
&__icon {
|
|
581
|
+
border-radius: 10px;
|
|
582
|
+
padding: 3px;
|
|
583
|
+
}
|
|
494
584
|
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
585
|
+
&__text {
|
|
586
|
+
&::before {
|
|
587
|
+
border-radius: 10px;
|
|
588
|
+
}
|
|
498
589
|
}
|
|
499
590
|
}
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
@include breakpoint-phone {
|
|
594
|
+
.form--inverted {
|
|
595
|
+
box-shadow: none;
|
|
596
|
+
}
|
|
500
597
|
|
|
501
598
|
&.form-in-progress {
|
|
502
599
|
.hero {
|