mod-base 1.0.22 → 1.0.23-beta.2
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 +251 -167
package/package.json
CHANGED
|
@@ -10,67 +10,149 @@ $color-button: null;
|
|
|
10
10
|
|
|
11
11
|
$contact-us-blue-light: #8498E7;
|
|
12
12
|
|
|
13
|
-
@
|
|
13
|
+
@function btnColorContrast($base-color, $light-color, $dark-color) {
|
|
14
|
+
$result: $light-color;
|
|
15
|
+
@if (lightness($base-color) > 45) {
|
|
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
|
+
$base-color: null,
|
|
47
|
+
$color-btn-text: null,
|
|
48
|
+
$interactive-text-color: $color-charcoal2,
|
|
49
|
+
$interactive-text-color-hover: darken($interactive-text-color, 10%),
|
|
50
|
+
$bbb-img-filter: grayscale(1) invert(.9) brightness(2),
|
|
51
|
+
$logo-filter: invert(1) hue-rotate(180deg),
|
|
52
|
+
$value-props-background: null,
|
|
53
|
+
$radio-btn-background-color: $background,
|
|
54
|
+
$radio-btn-text-color: $color-white,
|
|
55
|
+
$radio-btn-icon-color: $color-white,
|
|
56
|
+
$radio-btn-icon-background: transparent,
|
|
57
|
+
$radio-btn-checked-background-color: null,
|
|
58
|
+
$radio-btn-checked-border-color: null,
|
|
59
|
+
$radio-btn-checked-icon-color: $color-white,
|
|
60
|
+
$radio-btn-checked-icon-background-color: null,
|
|
61
|
+
$radio-btn-checked-text-color: $color-white,
|
|
62
|
+
$form-focus-border-color: $color-charcoal1,
|
|
63
|
+
$radio-btn-focus-box-shadow: null,
|
|
64
|
+
$footer-background: $color-charcoal8
|
|
65
|
+
) {
|
|
14
66
|
// Theme global variables if required to use after including the mixin
|
|
15
67
|
$background-color: $background !global;
|
|
16
68
|
$text-color: $foreground !global;
|
|
17
69
|
$theme: $accent-color !global;
|
|
18
|
-
$
|
|
19
|
-
$
|
|
20
|
-
$
|
|
21
|
-
$
|
|
70
|
+
$base-color: $base-color !global;
|
|
71
|
+
$value-props-background: $value-props-background;
|
|
72
|
+
$box-shadow-color: rgba($color-black, 60%) !global;
|
|
73
|
+
$background-img-brightness: brightness(85%) !global;
|
|
22
74
|
$img-filter: invert(1) hue-rotate(180deg) !global;
|
|
23
|
-
$
|
|
75
|
+
$button-saturation: saturate(70%) !global;
|
|
76
|
+
$bbb-img-filter: $bbb-img-filter;
|
|
24
77
|
$color-button: $color-btn !global;
|
|
25
78
|
|
|
79
|
+
@if ($color-btn != null and $color-btn-text == null) {
|
|
80
|
+
$color-btn-text: btnColorContrast($color-btn, $foreground, $background);
|
|
81
|
+
}
|
|
82
|
+
|
|
26
83
|
// Most common selectors list
|
|
27
|
-
$selectors: '
|
|
84
|
+
$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';
|
|
85
|
+
$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
86
|
|
|
29
87
|
@media (prefers-color-scheme: dark){
|
|
30
|
-
body[data-color-scheme=
|
|
88
|
+
body[data-color-scheme='system'] {
|
|
31
89
|
color-scheme: dark;
|
|
32
90
|
color: $text-color;
|
|
33
91
|
background-color: $background-color;
|
|
34
92
|
|
|
35
|
-
//
|
|
36
|
-
#{$selectors} {
|
|
37
|
-
color: $
|
|
93
|
+
// Change background color of listed selectors
|
|
94
|
+
#{$background-selectors} {
|
|
95
|
+
background-color: $background-color;
|
|
38
96
|
}
|
|
39
97
|
|
|
40
|
-
// Change
|
|
41
|
-
#{$selectors} {
|
|
42
|
-
|
|
98
|
+
// Change text color of listed selectors
|
|
99
|
+
#{$content-selectors} {
|
|
100
|
+
color: $text-color;
|
|
43
101
|
}
|
|
44
102
|
|
|
45
|
-
.
|
|
46
|
-
|
|
103
|
+
.featured-block__image img,
|
|
104
|
+
.featured-block__media img {
|
|
105
|
+
filter: $background-img-brightness;
|
|
47
106
|
}
|
|
48
107
|
|
|
49
|
-
.
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
filter: $img-filter;
|
|
53
|
-
}
|
|
108
|
+
.header__logo img,
|
|
109
|
+
.header__logo svg {
|
|
110
|
+
filter: $logo-filter;
|
|
54
111
|
}
|
|
55
112
|
|
|
113
|
+
.icon-close,
|
|
114
|
+
.progress-bar__title,
|
|
115
|
+
.header__back-button,
|
|
116
|
+
.form-input-group__icon,
|
|
56
117
|
.secure-text,
|
|
57
118
|
.step__secure-text,
|
|
58
119
|
.modal-subtitle {
|
|
59
120
|
color: $color-charcoal2;
|
|
60
121
|
}
|
|
61
122
|
|
|
62
|
-
.
|
|
63
|
-
.
|
|
64
|
-
|
|
123
|
+
.tcpa,
|
|
124
|
+
.tcpa a {
|
|
125
|
+
color: lighten($color-charcoal3, 2%);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.icon-close:hover {
|
|
129
|
+
color: $color-charcoal1;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.step__header,
|
|
133
|
+
.step__supertitle {
|
|
134
|
+
background-color: $base-color;
|
|
65
135
|
}
|
|
66
136
|
|
|
67
|
-
.value {
|
|
68
|
-
background
|
|
137
|
+
.value-props {
|
|
138
|
+
background: $value-props-background;
|
|
69
139
|
}
|
|
70
140
|
|
|
71
141
|
.progress-bar {
|
|
72
142
|
&__background {
|
|
73
|
-
background-color:
|
|
143
|
+
background-color: $color-charcoal5;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&__fill {
|
|
147
|
+
background-color: $theme;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
[class^="expand-collapse"] {
|
|
152
|
+
color: $color-charcoal3;
|
|
153
|
+
|
|
154
|
+
&:hover > * {
|
|
155
|
+
color: $color-charcoal1;
|
|
74
156
|
}
|
|
75
157
|
}
|
|
76
158
|
|
|
@@ -80,64 +162,61 @@ $contact-us-blue-light: #8498E7;
|
|
|
80
162
|
&--inverted {
|
|
81
163
|
box-shadow: 0 2px 4px $box-shadow-color;
|
|
82
164
|
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.form-group {
|
|
168
|
+
&__label-input {
|
|
169
|
+
z-index: 1;
|
|
170
|
+
}
|
|
83
171
|
|
|
84
|
-
|
|
85
|
-
|
|
172
|
+
&:not(.has-error) {
|
|
173
|
+
.form-group__label-input {
|
|
174
|
+
color: $color-charcoal2;
|
|
86
175
|
z-index: 1;
|
|
87
176
|
}
|
|
88
177
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
178
|
+
.form-input,
|
|
179
|
+
.form-input-group--icon,
|
|
180
|
+
.form-radio label {
|
|
181
|
+
border-color: $color-charcoal2;
|
|
182
|
+
}
|
|
94
183
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
184
|
+
.form-input-group--icon,
|
|
185
|
+
.form-input {
|
|
186
|
+
&:-webkit-autofill,
|
|
187
|
+
&:not(:placeholder-shown),
|
|
188
|
+
&:focus {
|
|
189
|
+
border-color: $form-focus-border-color;
|
|
99
190
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
border-color: $color-charcoal1;
|
|
191
|
+
+ label {
|
|
192
|
+
color: $form-focus-border-color;
|
|
103
193
|
}
|
|
104
194
|
}
|
|
105
195
|
}
|
|
196
|
+
}
|
|
106
197
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
&::after {
|
|
113
|
-
border-bottom-color: $background;
|
|
114
|
-
}
|
|
198
|
+
&__tooltip-message {
|
|
199
|
+
color: $color-ivory6;
|
|
200
|
+
border-color: $color-charcoal5;
|
|
201
|
+
box-shadow: 0 4px 8px rgba($color-ivory6, 10%);
|
|
115
202
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
203
|
+
&::after {
|
|
204
|
+
border-bottom-color: $background;
|
|
205
|
+
}
|
|
119
206
|
|
|
207
|
+
&::before {
|
|
208
|
+
border-bottom-color: $color-charcoal5;
|
|
120
209
|
}
|
|
121
|
-
}
|
|
122
210
|
|
|
123
|
-
&__bbb-logo {
|
|
124
|
-
filter: $bbb-img-filter;
|
|
125
211
|
}
|
|
126
212
|
}
|
|
127
213
|
|
|
128
|
-
.form-input-group__icon {
|
|
129
|
-
color: $color-charcoal2;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
214
|
.has-error {
|
|
133
215
|
.form-input {
|
|
134
216
|
border-color: $color-red4;
|
|
135
217
|
}
|
|
136
218
|
|
|
137
|
-
.form-input-group__icon
|
|
138
|
-
color: $color-red4;
|
|
139
|
-
}
|
|
140
|
-
|
|
219
|
+
.form-input-group__icon,
|
|
141
220
|
.form-group__label-input {
|
|
142
221
|
color: $color-red4;
|
|
143
222
|
}
|
|
@@ -165,13 +244,17 @@ $contact-us-blue-light: #8498E7;
|
|
|
165
244
|
filter: $background-img-brightness;
|
|
166
245
|
}
|
|
167
246
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
247
|
+
@if $color-btn != null {
|
|
248
|
+
.btn--primary,
|
|
249
|
+
.btn-primary,
|
|
250
|
+
.btn-next,
|
|
251
|
+
.featured-block__btn {
|
|
252
|
+
@include btnStyles($color-btn, $color-btn-text);
|
|
172
253
|
|
|
173
|
-
|
|
174
|
-
|
|
254
|
+
.btn__spinner::after {
|
|
255
|
+
border: 4px solid darken($color-btn, 20%);
|
|
256
|
+
border-right-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
|
|
257
|
+
border-top-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
|
|
175
258
|
}
|
|
176
259
|
}
|
|
177
260
|
}
|
|
@@ -180,7 +263,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
180
263
|
background-color: $color-charcoal8;
|
|
181
264
|
|
|
182
265
|
&__title {
|
|
183
|
-
color: $
|
|
266
|
+
color: $text-color;
|
|
184
267
|
}
|
|
185
268
|
|
|
186
269
|
&__subtitle,
|
|
@@ -193,18 +276,6 @@ $contact-us-blue-light: #8498E7;
|
|
|
193
276
|
}
|
|
194
277
|
}
|
|
195
278
|
|
|
196
|
-
.modal-header--close,
|
|
197
|
-
.modal-phone,
|
|
198
|
-
legend {
|
|
199
|
-
color: $foreground;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.modal-header--close {
|
|
203
|
-
&:hover {
|
|
204
|
-
color: $color-charcoal2;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
|
|
208
279
|
.modal {
|
|
209
280
|
&-backdrop {
|
|
210
281
|
opacity: .8;
|
|
@@ -238,16 +309,14 @@ $contact-us-blue-light: #8498E7;
|
|
|
238
309
|
}
|
|
239
310
|
}
|
|
240
311
|
|
|
241
|
-
.reviews {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
color: $foreground;
|
|
312
|
+
.reviews-card {
|
|
313
|
+
background-color: $background;
|
|
314
|
+
border-color: $color-charcoal4;
|
|
315
|
+
box-shadow: 0px 8px 16px 0px rgba($color-charcoal2, 10%);
|
|
316
|
+
color: $text-color;
|
|
247
317
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
}
|
|
318
|
+
&__avatar img {
|
|
319
|
+
filter: unset;
|
|
251
320
|
}
|
|
252
321
|
}
|
|
253
322
|
|
|
@@ -257,25 +326,21 @@ $contact-us-blue-light: #8498E7;
|
|
|
257
326
|
}
|
|
258
327
|
|
|
259
328
|
.footer {
|
|
260
|
-
background-color: $
|
|
261
|
-
|
|
262
|
-
&__bbb {
|
|
263
|
-
filter: $bbb-img-filter;
|
|
264
|
-
}
|
|
329
|
+
background-color: $footer-background;
|
|
265
330
|
|
|
266
331
|
&__links,
|
|
267
332
|
&__head-link,
|
|
268
333
|
&__copyright,
|
|
269
334
|
&__captcha-disclosure {
|
|
270
|
-
color: $
|
|
335
|
+
color: $text-color;
|
|
271
336
|
}
|
|
272
337
|
|
|
273
338
|
&__links li a,
|
|
274
339
|
&__head-link a {
|
|
275
|
-
color: $
|
|
340
|
+
color: $text-color !important;
|
|
276
341
|
|
|
277
342
|
&:visited {
|
|
278
|
-
color: $
|
|
343
|
+
color: $text-color !important;
|
|
279
344
|
}
|
|
280
345
|
|
|
281
346
|
&:active,
|
|
@@ -316,13 +381,13 @@ $contact-us-blue-light: #8498E7;
|
|
|
316
381
|
|
|
317
382
|
.form-group {
|
|
318
383
|
label {
|
|
319
|
-
color: $
|
|
384
|
+
color: $text-color;
|
|
320
385
|
}
|
|
321
386
|
}
|
|
322
387
|
|
|
323
388
|
legend {
|
|
324
389
|
border-bottom: 0;
|
|
325
|
-
color: $
|
|
390
|
+
color: $text-color;
|
|
326
391
|
}
|
|
327
392
|
|
|
328
393
|
.field {
|
|
@@ -339,7 +404,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
339
404
|
|
|
340
405
|
&:hover {
|
|
341
406
|
background-color: rgba($color-white, .2);
|
|
342
|
-
border-color: $
|
|
407
|
+
border-color: $text-color;
|
|
343
408
|
}
|
|
344
409
|
|
|
345
410
|
&:focus-within {
|
|
@@ -352,7 +417,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
352
417
|
|
|
353
418
|
&:hover,
|
|
354
419
|
&:focus {
|
|
355
|
-
border-color: $
|
|
420
|
+
border-color: $text-color;
|
|
356
421
|
}
|
|
357
422
|
|
|
358
423
|
&:focus {
|
|
@@ -361,8 +426,8 @@ $contact-us-blue-light: #8498E7;
|
|
|
361
426
|
}
|
|
362
427
|
|
|
363
428
|
.btn-back {
|
|
364
|
-
border-color: $
|
|
365
|
-
color: $
|
|
429
|
+
border-color: $text-color;
|
|
430
|
+
color: $text-color;
|
|
366
431
|
|
|
367
432
|
&:hover,
|
|
368
433
|
&:focus {
|
|
@@ -394,60 +459,42 @@ $contact-us-blue-light: #8498E7;
|
|
|
394
459
|
}
|
|
395
460
|
}
|
|
396
461
|
|
|
462
|
+
.form__bbb-logo,
|
|
463
|
+
.footer__bbb,
|
|
397
464
|
.bbb-logo,
|
|
398
465
|
.header__bbb-logo {
|
|
399
|
-
filter:
|
|
466
|
+
filter: $bbb-img-filter;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.header__back-button {
|
|
470
|
+
border-right-color: $color-charcoal3;
|
|
400
471
|
}
|
|
401
472
|
|
|
402
473
|
.back-btn,
|
|
403
474
|
.btn--back,
|
|
404
475
|
.zip-control__location,
|
|
405
476
|
.zip-control__icon {
|
|
406
|
-
color:
|
|
477
|
+
color: $interactive-text-color;
|
|
407
478
|
|
|
408
479
|
&:hover {
|
|
409
|
-
color: $
|
|
480
|
+
color: $interactive-text-color-hover;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
&:focus {
|
|
484
|
+
outline-color: $color-charcoal2;
|
|
410
485
|
}
|
|
411
486
|
}
|
|
412
487
|
|
|
413
488
|
.zip-control__button {
|
|
414
|
-
&:hover
|
|
489
|
+
&:hover,
|
|
490
|
+
&:focus {
|
|
415
491
|
.zip-control__location,
|
|
416
492
|
.zip-control__icon {
|
|
417
|
-
color:
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.partners {
|
|
423
|
-
&__title,
|
|
424
|
-
&__logo {
|
|
425
|
-
color: $foreground;
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
.featured-block {
|
|
430
|
-
background-color: $background;
|
|
431
|
-
color: $foreground;
|
|
432
|
-
|
|
433
|
-
&__title {
|
|
434
|
-
color: $foreground;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
&__btn {
|
|
438
|
-
background-color: $color-btn;
|
|
439
|
-
|
|
440
|
-
&:hover {
|
|
441
|
-
background-color: darken($color-btn, 5%);
|
|
493
|
+
color: $interactive-text-color-hover;
|
|
442
494
|
}
|
|
443
|
-
}
|
|
444
|
-
}
|
|
445
495
|
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
a {
|
|
449
|
-
color: $color-charcoal1;
|
|
450
|
-
}
|
|
496
|
+
background-color: rgba($color-charcoal2, 9%);
|
|
497
|
+
outline-color: $color-charcoal2;
|
|
451
498
|
}
|
|
452
499
|
}
|
|
453
500
|
|
|
@@ -472,52 +519,89 @@ $contact-us-blue-light: #8498E7;
|
|
|
472
519
|
}
|
|
473
520
|
}
|
|
474
521
|
|
|
475
|
-
.
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
+
|
|
480
|
-
color: $text-color;
|
|
522
|
+
.radio__button {
|
|
523
|
+
label {
|
|
524
|
+
input[type='radio'] {
|
|
525
|
+
&:hover {
|
|
526
|
+
&:not(:checked) + .radio__button-text {
|
|
527
|
+
color: $radio-btn-checked-text-color;
|
|
481
528
|
|
|
482
529
|
&::before {
|
|
483
|
-
background-color:
|
|
530
|
+
background-color: $radio-btn-checked-background-color;
|
|
531
|
+
border-color: $radio-btn-checked-border-color;
|
|
484
532
|
}
|
|
485
|
-
}
|
|
486
533
|
|
|
487
|
-
&:checked,
|
|
488
|
-
&:hover {
|
|
489
534
|
+ span {
|
|
490
|
-
color: $
|
|
535
|
+
background-color: $radio-btn-checked-icon-background-color;
|
|
536
|
+
|
|
537
|
+
&::before {
|
|
538
|
+
color: $radio-btn-checked-icon-color;
|
|
539
|
+
}
|
|
491
540
|
}
|
|
492
541
|
}
|
|
493
542
|
}
|
|
494
|
-
}
|
|
495
543
|
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
544
|
+
&:focus + span::before {
|
|
545
|
+
box-shadow: $radio-btn-focus-box-shadow;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
&:not(:hover,:checked) {
|
|
549
|
+
+ .radio__button-text {
|
|
550
|
+
color: $radio-btn-text-color;
|
|
551
|
+
|
|
552
|
+
&::before {
|
|
553
|
+
background-color: $background;
|
|
554
|
+
border-color: $radio-btn-text-color;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
// Icon
|
|
558
|
+
+ span {
|
|
559
|
+
background-color: $radio-btn-icon-background;
|
|
560
|
+
|
|
561
|
+
&::before {
|
|
562
|
+
color: $radio-btn-icon-color;
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
}
|
|
500
566
|
}
|
|
501
567
|
|
|
502
|
-
|
|
568
|
+
&:checked + .radio__button-text {
|
|
569
|
+
color: $radio-btn-checked-text-color;
|
|
570
|
+
|
|
571
|
+
+ span {
|
|
572
|
+
background-color: $radio-btn-checked-icon-background-color;
|
|
573
|
+
|
|
574
|
+
&::before {
|
|
575
|
+
color: $radio-btn-checked-icon-color;
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
|
|
503
579
|
&::before {
|
|
504
|
-
border-
|
|
580
|
+
border-color: $radio-btn-checked-border-color;
|
|
581
|
+
background-color: $radio-btn-checked-background-color;
|
|
505
582
|
}
|
|
506
583
|
}
|
|
507
584
|
}
|
|
508
585
|
}
|
|
509
|
-
}
|
|
510
586
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
587
|
+
.tile {
|
|
588
|
+
&__icon {
|
|
589
|
+
border-radius: 10px;
|
|
590
|
+
padding: 3px;
|
|
591
|
+
}
|
|
515
592
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
593
|
+
&__text {
|
|
594
|
+
&::before {
|
|
595
|
+
border-radius: 10px;
|
|
596
|
+
}
|
|
519
597
|
}
|
|
520
598
|
}
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
@include breakpoint-phone {
|
|
602
|
+
.form--inverted {
|
|
603
|
+
box-shadow: none;
|
|
604
|
+
}
|
|
521
605
|
|
|
522
606
|
&.form-in-progress {
|
|
523
607
|
.hero {
|