mod-base 1.0.22 → 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 +244 -168
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%);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.icon-close:hover {
|
|
123
|
+
color: $color-charcoal1;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.step__header,
|
|
127
|
+
.step__supertitle {
|
|
128
|
+
background-color: $theme;
|
|
65
129
|
}
|
|
66
130
|
|
|
67
|
-
.value {
|
|
68
|
-
background
|
|
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,64 +156,61 @@ $contact-us-blue-light: #8498E7;
|
|
|
80
156
|
&--inverted {
|
|
81
157
|
box-shadow: 0 2px 4px $box-shadow-color;
|
|
82
158
|
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.form-group {
|
|
162
|
+
&__label-input {
|
|
163
|
+
z-index: 1;
|
|
164
|
+
}
|
|
83
165
|
|
|
84
|
-
|
|
85
|
-
|
|
166
|
+
&:not(.has-error) {
|
|
167
|
+
.form-group__label-input {
|
|
168
|
+
color: $color-charcoal2;
|
|
86
169
|
z-index: 1;
|
|
87
170
|
}
|
|
88
171
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
172
|
+
.form-input,
|
|
173
|
+
.form-input-group--icon,
|
|
174
|
+
.form-radio label {
|
|
175
|
+
border-color: $color-charcoal2;
|
|
176
|
+
}
|
|
94
177
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
178
|
+
.form-input-group--icon,
|
|
179
|
+
.form-input {
|
|
180
|
+
&:-webkit-autofill,
|
|
181
|
+
&:not(:placeholder-shown),
|
|
182
|
+
&:focus {
|
|
183
|
+
border-color: $form-focus-border-color;
|
|
99
184
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
border-color: $color-charcoal1;
|
|
185
|
+
+ label {
|
|
186
|
+
color: $form-focus-border-color;
|
|
103
187
|
}
|
|
104
188
|
}
|
|
105
189
|
}
|
|
190
|
+
}
|
|
106
191
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
&::after {
|
|
113
|
-
border-bottom-color: $background;
|
|
114
|
-
}
|
|
192
|
+
&__tooltip-message {
|
|
193
|
+
color: $color-ivory6;
|
|
194
|
+
border-color: $color-charcoal5;
|
|
195
|
+
box-shadow: 0 4px 8px rgba($color-ivory6, 10%);
|
|
115
196
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
197
|
+
&::after {
|
|
198
|
+
border-bottom-color: $background;
|
|
199
|
+
}
|
|
119
200
|
|
|
201
|
+
&::before {
|
|
202
|
+
border-bottom-color: $color-charcoal5;
|
|
120
203
|
}
|
|
121
|
-
}
|
|
122
204
|
|
|
123
|
-
&__bbb-logo {
|
|
124
|
-
filter: $bbb-img-filter;
|
|
125
205
|
}
|
|
126
206
|
}
|
|
127
207
|
|
|
128
|
-
.form-input-group__icon {
|
|
129
|
-
color: $color-charcoal2;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
208
|
.has-error {
|
|
133
209
|
.form-input {
|
|
134
210
|
border-color: $color-red4;
|
|
135
211
|
}
|
|
136
212
|
|
|
137
|
-
.form-input-group__icon
|
|
138
|
-
color: $color-red4;
|
|
139
|
-
}
|
|
140
|
-
|
|
213
|
+
.form-input-group__icon,
|
|
141
214
|
.form-group__label-input {
|
|
142
215
|
color: $color-red4;
|
|
143
216
|
}
|
|
@@ -165,14 +238,16 @@ $contact-us-blue-light: #8498E7;
|
|
|
165
238
|
filter: $background-img-brightness;
|
|
166
239
|
}
|
|
167
240
|
|
|
168
|
-
.btn
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
241
|
+
.btn--primary,
|
|
242
|
+
.btn-primary,
|
|
243
|
+
.btn-next,
|
|
244
|
+
.featured-block__btn {
|
|
245
|
+
@include btnStyles($color-btn, $color-btn-text);
|
|
172
246
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
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);
|
|
176
251
|
}
|
|
177
252
|
}
|
|
178
253
|
|
|
@@ -180,7 +255,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
180
255
|
background-color: $color-charcoal8;
|
|
181
256
|
|
|
182
257
|
&__title {
|
|
183
|
-
color: $
|
|
258
|
+
color: $text-color;
|
|
184
259
|
}
|
|
185
260
|
|
|
186
261
|
&__subtitle,
|
|
@@ -193,18 +268,6 @@ $contact-us-blue-light: #8498E7;
|
|
|
193
268
|
}
|
|
194
269
|
}
|
|
195
270
|
|
|
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
271
|
.modal {
|
|
209
272
|
&-backdrop {
|
|
210
273
|
opacity: .8;
|
|
@@ -238,16 +301,14 @@ $contact-us-blue-light: #8498E7;
|
|
|
238
301
|
}
|
|
239
302
|
}
|
|
240
303
|
|
|
241
|
-
.reviews {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
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;
|
|
247
309
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
}
|
|
310
|
+
&__avatar img {
|
|
311
|
+
filter: unset;
|
|
251
312
|
}
|
|
252
313
|
}
|
|
253
314
|
|
|
@@ -257,25 +318,21 @@ $contact-us-blue-light: #8498E7;
|
|
|
257
318
|
}
|
|
258
319
|
|
|
259
320
|
.footer {
|
|
260
|
-
background-color: $
|
|
261
|
-
|
|
262
|
-
&__bbb {
|
|
263
|
-
filter: $bbb-img-filter;
|
|
264
|
-
}
|
|
321
|
+
background-color: $footer-background;
|
|
265
322
|
|
|
266
323
|
&__links,
|
|
267
324
|
&__head-link,
|
|
268
325
|
&__copyright,
|
|
269
326
|
&__captcha-disclosure {
|
|
270
|
-
color: $
|
|
327
|
+
color: $text-color;
|
|
271
328
|
}
|
|
272
329
|
|
|
273
330
|
&__links li a,
|
|
274
331
|
&__head-link a {
|
|
275
|
-
color: $
|
|
332
|
+
color: $text-color !important;
|
|
276
333
|
|
|
277
334
|
&:visited {
|
|
278
|
-
color: $
|
|
335
|
+
color: $text-color !important;
|
|
279
336
|
}
|
|
280
337
|
|
|
281
338
|
&:active,
|
|
@@ -316,13 +373,13 @@ $contact-us-blue-light: #8498E7;
|
|
|
316
373
|
|
|
317
374
|
.form-group {
|
|
318
375
|
label {
|
|
319
|
-
color: $
|
|
376
|
+
color: $text-color;
|
|
320
377
|
}
|
|
321
378
|
}
|
|
322
379
|
|
|
323
380
|
legend {
|
|
324
381
|
border-bottom: 0;
|
|
325
|
-
color: $
|
|
382
|
+
color: $text-color;
|
|
326
383
|
}
|
|
327
384
|
|
|
328
385
|
.field {
|
|
@@ -339,7 +396,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
339
396
|
|
|
340
397
|
&:hover {
|
|
341
398
|
background-color: rgba($color-white, .2);
|
|
342
|
-
border-color: $
|
|
399
|
+
border-color: $text-color;
|
|
343
400
|
}
|
|
344
401
|
|
|
345
402
|
&:focus-within {
|
|
@@ -352,7 +409,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
352
409
|
|
|
353
410
|
&:hover,
|
|
354
411
|
&:focus {
|
|
355
|
-
border-color: $
|
|
412
|
+
border-color: $text-color;
|
|
356
413
|
}
|
|
357
414
|
|
|
358
415
|
&:focus {
|
|
@@ -361,8 +418,8 @@ $contact-us-blue-light: #8498E7;
|
|
|
361
418
|
}
|
|
362
419
|
|
|
363
420
|
.btn-back {
|
|
364
|
-
border-color: $
|
|
365
|
-
color: $
|
|
421
|
+
border-color: $text-color;
|
|
422
|
+
color: $text-color;
|
|
366
423
|
|
|
367
424
|
&:hover,
|
|
368
425
|
&:focus {
|
|
@@ -394,60 +451,42 @@ $contact-us-blue-light: #8498E7;
|
|
|
394
451
|
}
|
|
395
452
|
}
|
|
396
453
|
|
|
454
|
+
.form__bbb-logo,
|
|
455
|
+
.footer__bbb,
|
|
397
456
|
.bbb-logo,
|
|
398
457
|
.header__bbb-logo {
|
|
399
|
-
filter:
|
|
458
|
+
filter: $bbb-img-filter;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.header__back-button {
|
|
462
|
+
border-right-color: $color-charcoal3;
|
|
400
463
|
}
|
|
401
464
|
|
|
402
465
|
.back-btn,
|
|
403
466
|
.btn--back,
|
|
404
467
|
.zip-control__location,
|
|
405
468
|
.zip-control__icon {
|
|
406
|
-
color:
|
|
469
|
+
color: $interactive-text-color;
|
|
407
470
|
|
|
408
471
|
&:hover {
|
|
409
|
-
color: $
|
|
472
|
+
color: $interactive-text-color-hover;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
&:focus {
|
|
476
|
+
outline-color: $color-charcoal2;
|
|
410
477
|
}
|
|
411
478
|
}
|
|
412
479
|
|
|
413
480
|
.zip-control__button {
|
|
414
|
-
&:hover
|
|
481
|
+
&:hover,
|
|
482
|
+
&:focus {
|
|
415
483
|
.zip-control__location,
|
|
416
484
|
.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%);
|
|
485
|
+
color: $interactive-text-color-hover;
|
|
442
486
|
}
|
|
443
|
-
}
|
|
444
|
-
}
|
|
445
487
|
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
a {
|
|
449
|
-
color: $color-charcoal1;
|
|
450
|
-
}
|
|
488
|
+
background-color: rgba($color-charcoal2, 9%);
|
|
489
|
+
outline-color: $color-charcoal2;
|
|
451
490
|
}
|
|
452
491
|
}
|
|
453
492
|
|
|
@@ -472,52 +511,89 @@ $contact-us-blue-light: #8498E7;
|
|
|
472
511
|
}
|
|
473
512
|
}
|
|
474
513
|
|
|
475
|
-
.
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
+
|
|
480
|
-
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;
|
|
481
520
|
|
|
482
521
|
&::before {
|
|
483
|
-
background-color:
|
|
522
|
+
background-color: $radio-btn-checked-background-color;
|
|
523
|
+
border-color: $radio-btn-checked-border-color;
|
|
484
524
|
}
|
|
485
|
-
}
|
|
486
525
|
|
|
487
|
-
&:checked,
|
|
488
|
-
&:hover {
|
|
489
526
|
+ span {
|
|
490
|
-
color: $
|
|
527
|
+
background-color: $radio-btn-checked-icon-background-color;
|
|
528
|
+
|
|
529
|
+
&::before {
|
|
530
|
+
color: $radio-btn-checked-icon-color;
|
|
531
|
+
}
|
|
491
532
|
}
|
|
492
533
|
}
|
|
493
534
|
}
|
|
494
|
-
}
|
|
495
535
|
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
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
|
+
}
|
|
500
558
|
}
|
|
501
559
|
|
|
502
|
-
|
|
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
|
+
|
|
503
571
|
&::before {
|
|
504
|
-
border-
|
|
572
|
+
border-color: $radio-btn-checked-border-color;
|
|
573
|
+
background-color: $radio-btn-checked-background-color;
|
|
505
574
|
}
|
|
506
575
|
}
|
|
507
576
|
}
|
|
508
577
|
}
|
|
509
|
-
}
|
|
510
578
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
579
|
+
.tile {
|
|
580
|
+
&__icon {
|
|
581
|
+
border-radius: 10px;
|
|
582
|
+
padding: 3px;
|
|
583
|
+
}
|
|
515
584
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
585
|
+
&__text {
|
|
586
|
+
&::before {
|
|
587
|
+
border-radius: 10px;
|
|
588
|
+
}
|
|
519
589
|
}
|
|
520
590
|
}
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
@include breakpoint-phone {
|
|
594
|
+
.form--inverted {
|
|
595
|
+
box-shadow: none;
|
|
596
|
+
}
|
|
521
597
|
|
|
522
598
|
&.form-in-progress {
|
|
523
599
|
.hero {
|