mod-base 1.0.23-beta.4 → 1.0.23-beta.6
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
CHANGED
|
@@ -39,43 +39,44 @@ $contact-us-blue-light: #8498E7;
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@mixin dark-mode(
|
|
42
|
-
$background: $color-charcoal7,
|
|
43
|
-
$foreground: $color-white,
|
|
44
42
|
$accent-color: null,
|
|
45
|
-
$color-
|
|
43
|
+
$background: $color-charcoal7,
|
|
46
44
|
$base-color: null,
|
|
45
|
+
$bbb-img-filter: grayscale(1) invert(.9) brightness(2),
|
|
46
|
+
$color-btn: null,
|
|
47
47
|
$color-btn-text: null,
|
|
48
|
+
$footer-background: $color-charcoal8,
|
|
49
|
+
$foreground: $color-white,
|
|
50
|
+
$form-focus-border-color: $color-charcoal1,
|
|
51
|
+
$hero-content-box-shadow-mobile: null,
|
|
48
52
|
$interactive-text-color: $color-charcoal2,
|
|
49
53
|
$interactive-text-color-hover: darken($interactive-text-color, 10%),
|
|
50
|
-
$bbb-img-filter: grayscale(1) invert(.9) brightness(2),
|
|
51
54
|
$logo-filter: invert(1) hue-rotate(180deg),
|
|
52
|
-
$value-props-background: null,
|
|
53
55
|
$radio-btn-background-color: $background,
|
|
54
|
-
$radio-btn-
|
|
55
|
-
$radio-btn-icon-color: $color-white,
|
|
56
|
-
$radio-btn-border-color: null,
|
|
57
|
-
$radio-btn-icon-background: transparent,
|
|
56
|
+
$radio-btn-border-color: $color-white,
|
|
58
57
|
$radio-btn-checked-background-color: null,
|
|
59
58
|
$radio-btn-checked-border-color: null,
|
|
60
|
-
$radio-btn-checked-icon-color: $color-white,
|
|
61
59
|
$radio-btn-checked-icon-background-color: null,
|
|
60
|
+
$radio-btn-checked-icon-color: $color-white,
|
|
62
61
|
$radio-btn-checked-text-color: $color-white,
|
|
63
|
-
$form-focus-border-color: $color-charcoal1,
|
|
64
62
|
$radio-btn-focus-box-shadow: null,
|
|
65
|
-
$
|
|
63
|
+
$radio-btn-icon-background: transparent,
|
|
64
|
+
$radio-btn-icon-color: $color-white,
|
|
65
|
+
$radio-btn-text-color: $color-white,
|
|
66
|
+
$value-props-background: null
|
|
66
67
|
) {
|
|
67
68
|
// Theme global variables if required to use after including the mixin
|
|
68
69
|
$background-color: $background !global;
|
|
69
|
-
$
|
|
70
|
-
$theme: $accent-color !global;
|
|
70
|
+
$background-img-brightness: brightness(75%) !global;
|
|
71
71
|
$base-color: $base-color !global;
|
|
72
|
-
$
|
|
72
|
+
$bbb-img-filter: $bbb-img-filter;
|
|
73
73
|
$box-shadow-color: rgba($color-black, 60%) !global;
|
|
74
|
-
$background-img-brightness: brightness(85%) !global;
|
|
75
|
-
$img-filter: invert(1) hue-rotate(180deg) !global;
|
|
76
74
|
$button-saturation: saturate(70%) !global;
|
|
77
|
-
$bbb-img-filter: $bbb-img-filter;
|
|
78
75
|
$color-button: $color-btn !global;
|
|
76
|
+
$img-filter: invert(1) hue-rotate(180deg) !global;
|
|
77
|
+
$theme: $accent-color !global;
|
|
78
|
+
$text-color: $foreground !global;
|
|
79
|
+
$value-props-background: $value-props-background;
|
|
79
80
|
|
|
80
81
|
@if ($color-btn != null and $color-btn-text == null) {
|
|
81
82
|
$color-btn-text: btnColorContrast($color-btn, $foreground, $background);
|
|
@@ -83,7 +84,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
83
84
|
|
|
84
85
|
// Most common selectors list
|
|
85
86
|
$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';
|
|
86
|
-
$background-selectors: '.form,.header,.partners,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input
|
|
87
|
+
$background-selectors: '.form,.header,.partners,.guarantee,.information,.modal-content,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr';
|
|
87
88
|
|
|
88
89
|
@media (prefers-color-scheme: dark){
|
|
89
90
|
body[data-color-scheme='system'] {
|
|
@@ -111,6 +112,10 @@ $contact-us-blue-light: #8498E7;
|
|
|
111
112
|
filter: $logo-filter;
|
|
112
113
|
}
|
|
113
114
|
|
|
115
|
+
.form-input-group__icon {
|
|
116
|
+
background-color: transparent;
|
|
117
|
+
}
|
|
118
|
+
|
|
114
119
|
.icon-close,
|
|
115
120
|
.progress-bar__title,
|
|
116
121
|
.header__back-button,
|
|
@@ -192,6 +197,10 @@ $contact-us-blue-light: #8498E7;
|
|
|
192
197
|
+ label {
|
|
193
198
|
color: $form-focus-border-color;
|
|
194
199
|
}
|
|
200
|
+
|
|
201
|
+
~ .form-input-group__icon {
|
|
202
|
+
color: $form-focus-border-color;
|
|
203
|
+
}
|
|
195
204
|
}
|
|
196
205
|
}
|
|
197
206
|
}
|
|
@@ -213,8 +222,10 @@ $contact-us-blue-light: #8498E7;
|
|
|
213
222
|
}
|
|
214
223
|
|
|
215
224
|
.has-error {
|
|
216
|
-
.form-input
|
|
225
|
+
.form-input,
|
|
226
|
+
.form-input:-webkit-autofill {
|
|
217
227
|
border-color: $color-red4;
|
|
228
|
+
color: $color-red4;
|
|
218
229
|
}
|
|
219
230
|
|
|
220
231
|
.form-input-group__icon,
|
|
@@ -253,7 +264,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
253
264
|
@include btnStyles($color-btn, $color-btn-text);
|
|
254
265
|
|
|
255
266
|
.btn__spinner::after {
|
|
256
|
-
border: 4px solid darken($color-btn,
|
|
267
|
+
border: 4px solid darken($color-btn, 5%);
|
|
257
268
|
border-right-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
|
|
258
269
|
border-top-color: btnColorContrast($color-btn, $color-white, $color-charcoal7);
|
|
259
270
|
}
|
|
@@ -338,8 +349,7 @@ $contact-us-blue-light: #8498E7;
|
|
|
338
349
|
|
|
339
350
|
&__links li a,
|
|
340
351
|
&__head-link a {
|
|
341
|
-
|
|
342
|
-
|
|
352
|
+
&,
|
|
343
353
|
&:visited {
|
|
344
354
|
color: $text-color !important;
|
|
345
355
|
}
|
|
@@ -606,6 +616,10 @@ $contact-us-blue-light: #8498E7;
|
|
|
606
616
|
background-color: $background;
|
|
607
617
|
}
|
|
608
618
|
|
|
619
|
+
.hero__content {
|
|
620
|
+
box-shadow: $hero-content-box-shadow-mobile;
|
|
621
|
+
}
|
|
622
|
+
|
|
609
623
|
.form--inverted {
|
|
610
624
|
box-shadow: none;
|
|
611
625
|
}
|