@lightspeed/design-system-css 28.0.0 → 29.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.css +420 -420
- package/dist/index.css.map +1 -1
- package/dist/vend-styles.css +420 -420
- package/package.json +1 -1
- package/src/vend-styles/components/Carousel/Carousel.scss +3 -3
- package/src/vend-styles/components/DataTable/DataTable.scss +7 -7
- package/src/vend-styles/components/DatePicker/DatePicker.scss +4 -4
- package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +5 -5
- package/src/vend-styles/components/LineChart/LineChart.scss +8 -8
- package/src/vend-styles/components/Modal/Modal.scss +1 -1
- package/src/vend-styles/components/ProgressBar/ProgressBar.scss +2 -2
- package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
- package/src/vend-styles/components/TableList/TableList.scss +9 -9
- package/src/vend-styles/components/TableList/_TableList-ns.scss +1 -1
- package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +4 -4
- package/src/vend-styles/components/VendVideo/VendVideo.scss +3 -3
- package/src/vend-styles/utilities/sticky.scss +2 -2
- package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +1 -1
- package/src/vend.ui/components/vd-autocomplete/vd-autocomplete.scss +1 -1
- package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +1 -1
- package/src/vend.ui/components/vd-avatar/vd-avatar.scss +4 -4
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +3 -3
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +5 -5
- package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +2 -2
- package/src/vend.ui/components/vd-banner/vd-banner.scss +3 -3
- package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
- package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +13 -13
- package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +8 -8
- package/src/vend.ui/components/vd-btn/vd-btn.scss +1 -1
- package/src/vend.ui/components/vd-card/vd-card-ns.scss +1 -1
- package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -3
- package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +7 -7
- package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +6 -6
- package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +8 -8
- package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +1 -1
- package/src/vend.ui/components/vd-dialog/vd-dialog.scss +2 -2
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss +1 -1
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +8 -8
- package/src/vend.ui/components/vd-dott/vd-dott.scss +7 -7
- package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss +1 -1
- package/src/vend.ui/components/vd-flag/vd-flag.scss +4 -4
- package/src/vend.ui/components/vd-header/vd-header.scss +1 -1
- package/src/vend.ui/components/vd-hero/vd-hero.scss +4 -4
- package/src/vend.ui/components/vd-hr/vd-hr.scss +1 -1
- package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +1 -1
- package/src/vend.ui/components/vd-input/vd-input-ns.scss +7 -7
- package/src/vend.ui/components/vd-input/vd-input.scss +2 -2
- package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss +1 -1
- package/src/vend.ui/components/vd-link/vd-link.scss +3 -3
- package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
- package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +6 -6
- package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +2 -2
- package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
- package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +2 -2
- package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
- package/src/vend.ui/components/vd-panel/vd-panel.scss +2 -2
- package/src/vend.ui/components/vd-password/vd-password.scss +1 -1
- package/src/vend.ui/components/vd-popover/vd-popover.scss +4 -4
- package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +6 -6
- package/src/vend.ui/components/vd-radio/vd-radio.scss +7 -7
- package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +1 -1
- package/src/vend.ui/components/vd-section/vd-section.scss +3 -3
- package/src/vend.ui/components/vd-section-back/vd-section-back.scss +2 -2
- package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +7 -7
- package/src/vend.ui/components/vd-select/vd-select-inline.scss +1 -1
- package/src/vend.ui/components/vd-select/vd-select-ns.scss +1 -1
- package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
- package/src/vend.ui/components/vd-splash/vd-splash.scss +1 -1
- package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss +2 -2
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss +3 -3
- package/src/vend.ui/components/vd-switch/vd-switch.scss +8 -8
- package/src/vend.ui/components/vd-table/vd-table-ns.scss +2 -2
- package/src/vend.ui/components/vd-table/vd-table.scss +8 -8
- package/src/vend.ui/components/vd-tabs/vd-tabs.scss +4 -4
- package/src/vend.ui/components/vd-text/vd-text.scss +4 -4
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +3 -3
- package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss +6 -6
- package/src/vend.ui/styles/global/_base-mixins.scss +1 -1
- package/src/vend.ui/styles/global/_helper-mixins.scss +1 -1
- package/src/vend.ui/styles/global/_misc.scss +2 -2
- package/src/vend.ui/styles/global/_normalise.scss +1 -1
- package/src/vend.ui/styles/global/colour/_colour-functions.scss +72 -16
- package/src/vend.ui/styles/global/colour/_colour-helpers.scss +2 -2
- package/src/vend.ui/styles/global/effects/_effects.scss +1 -1
- package/src/vend.ui/styles/global/text/_text-mixins.scss +1 -1
@@ -4,11 +4,11 @@
|
|
4
4
|
@include vd-text(label);
|
5
5
|
|
6
6
|
align-items: center;
|
7
|
-
background-color:
|
7
|
+
background-color: hs-color(bg-neutral-top);
|
8
8
|
border-radius: $vd-border-radius;
|
9
9
|
border: 2px solid hs-color(border-neutral-soft);
|
10
10
|
box-sizing: border-box;
|
11
|
-
color:
|
11
|
+
color: hs-color(fg-neutral-default);
|
12
12
|
cursor: pointer;
|
13
13
|
display: flex;
|
14
14
|
flex-direction: column;
|
@@ -29,33 +29,33 @@
|
|
29
29
|
@include vd-btn-disabled();
|
30
30
|
|
31
31
|
&:focus {
|
32
|
-
border-color:
|
32
|
+
border-color: hs-color(fg-go-default);
|
33
33
|
@include vd-btn-shadow(go);
|
34
34
|
}
|
35
35
|
|
36
36
|
&:hover {
|
37
|
-
border-color:
|
37
|
+
border-color: hs-color(bg-go-soft);
|
38
38
|
@include vd-btn-shadow(go);
|
39
39
|
}
|
40
40
|
|
41
41
|
&:active {
|
42
|
-
background-color: vd-rgba(
|
42
|
+
background-color: vd-rgba(hs-color(bg-neutral-top), 0.2);
|
43
43
|
}
|
44
44
|
}
|
45
45
|
|
46
46
|
// =================================== Selected Modifier =================================== //
|
47
47
|
|
48
48
|
.vd-btn-panel--selected {
|
49
|
-
border-color:
|
49
|
+
border-color: hs-color(fg-go-default);
|
50
50
|
|
51
51
|
&:focus,
|
52
52
|
&:hover {
|
53
|
-
border-color:
|
53
|
+
border-color: hs-color(bg-go-soft);
|
54
54
|
@include vd-btn-shadow(do);
|
55
55
|
}
|
56
56
|
|
57
57
|
&:active {
|
58
|
-
border-color:
|
58
|
+
border-color: hs-color(bg-go-strong);
|
59
59
|
}
|
60
60
|
}
|
61
61
|
|
@@ -84,7 +84,7 @@ vd-carousel-frame {
|
|
84
84
|
display: flex;
|
85
85
|
flex-direction: row;
|
86
86
|
justify-content: space-between;
|
87
|
-
background-color:
|
87
|
+
background-color: hs-color(bg-neutral-top);
|
88
88
|
height: 72px;
|
89
89
|
}
|
90
90
|
|
@@ -112,10 +112,10 @@ vd-carousel-frame {
|
|
112
112
|
width: 8px;
|
113
113
|
height: 8px;
|
114
114
|
border-radius: 50%;
|
115
|
-
background-color:
|
115
|
+
background-color: hs-color(border-neutral-strong);
|
116
116
|
}
|
117
117
|
}
|
118
118
|
|
119
119
|
.vd-carousel-paginator-indicator--active::before {
|
120
|
-
background-color:
|
120
|
+
background-color: hs-color(bg-go-default);
|
121
121
|
}
|
@@ -81,7 +81,7 @@
|
|
81
81
|
position: relative;
|
82
82
|
height: $vd-checkbox-length;
|
83
83
|
width: $vd-checkbox-length;
|
84
|
-
background-color:
|
84
|
+
background-color: hs-color(bg-neutral-top);
|
85
85
|
border: 1px solid hs-color(border-neutral-soft);
|
86
86
|
border-radius: $vd-border-radius;
|
87
87
|
box-sizing: border-box;
|
@@ -93,7 +93,7 @@
|
|
93
93
|
position: absolute;
|
94
94
|
border-right: $vd-checkbox-tick-thickness solid hs-color(border-neutral-soft);
|
95
95
|
border-top: $vd-checkbox-tick-thickness solid hs-color(border-neutral-soft);
|
96
|
-
border-color:
|
96
|
+
border-color: hs-color(border-neutral-soft);
|
97
97
|
transform: scaleX(-1) rotate(180deg + -45deg);
|
98
98
|
transform-origin: left top;
|
99
99
|
height: $vd-checkbox-tick-height;
|
@@ -116,13 +116,13 @@
|
|
116
116
|
// Checked
|
117
117
|
.vd-checkbox-input:checked + .vd-checkbox-tick {
|
118
118
|
transition: background-color $vd-time-l;
|
119
|
-
background-color:
|
120
|
-
border-color:
|
119
|
+
background-color: hs-color(bg-go-default);
|
120
|
+
border-color: hs-color(fg-go-default);
|
121
121
|
|
122
122
|
&:after {
|
123
123
|
opacity: 1;
|
124
124
|
animation: vd-checkbox-checked $vd-time-l;
|
125
|
-
border-color:
|
125
|
+
border-color: hs-color(fg-neutral-ondark-default);
|
126
126
|
box-sizing: content-box;
|
127
127
|
backface-visibility: hidden;
|
128
128
|
}
|
@@ -150,11 +150,11 @@
|
|
150
150
|
|
151
151
|
// Mixed state
|
152
152
|
.vd-checkbox--mixed .vd-checkbox-tick {
|
153
|
-
border: 2px solid
|
153
|
+
border: 2px solid hs-color(fg-go-default);
|
154
154
|
}
|
155
155
|
|
156
156
|
.vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
|
157
|
-
background-color:
|
157
|
+
background-color: hs-color(bg-go-default);
|
158
158
|
border: none;
|
159
159
|
top: 9px;
|
160
160
|
left: 6px;
|
@@ -1,8 +1,8 @@
|
|
1
1
|
// Date picker general
|
2
2
|
$vd-datepicker-font-size: 15px;
|
3
|
-
$vd-datepicker-button-colour:
|
3
|
+
$vd-datepicker-button-colour: hs-color(bg-go-default);
|
4
4
|
$vd-datepicker-padding: 24px;
|
5
|
-
$vd-datepicker-background:
|
5
|
+
$vd-datepicker-background: hs-color(bg-neutral-top);
|
6
6
|
$vd-datepicker-border: 1px solid hs-color(border-neutral-soft);
|
7
7
|
|
8
8
|
// Date picker no end date
|
@@ -10,7 +10,7 @@ $vd-datepicker-range-no-end-height: 32px;
|
|
10
10
|
|
11
11
|
// Table
|
12
12
|
$vd-datepicker-table-spacing: 10px;
|
13
|
-
$vd-datepicker-range-colour:
|
13
|
+
$vd-datepicker-range-colour: hs-color(bg-go-highlight-default);
|
14
14
|
|
15
15
|
// Button
|
16
16
|
$vd-datepicker-button-radius: 50%;
|
@@ -19,8 +19,8 @@ $vd-datepicker-button-size: 30px;
|
|
19
19
|
// Button next / prev
|
20
20
|
$vd-datepicker-next-prev-button-width: 26px;
|
21
21
|
$vd-datepicker-next-prev-button-icon-size: 7px;
|
22
|
-
$vd-datepicker-next-prev-arrow-border-enabled: 3px solid
|
23
|
-
$vd-datepicker-next-prev-arrow-border-disabled: 3px solid
|
22
|
+
$vd-datepicker-next-prev-arrow-border-enabled: 3px solid hs-color(fg-neutral-default);
|
23
|
+
$vd-datepicker-next-prev-arrow-border-disabled: 3px solid hs-color(border-neutral-soft);
|
24
24
|
|
25
25
|
// Select
|
26
26
|
$vd-datepicker-select-horizontal-positioning: 29px;
|
@@ -31,7 +31,7 @@ $vd-datepicker-select-icon-position-top: 10px;
|
|
31
31
|
$vd-datepicker-select-icon-position-right-even: 37px;
|
32
32
|
$vd-datepicker-select-icon-position-right-odd: 110px;
|
33
33
|
$vd-datepicker-select-icon-border-width: 4px;
|
34
|
-
$vd-datepicker-select-arrow-border: 5px solid
|
34
|
+
$vd-datepicker-select-arrow-border: 5px solid hs-color(fg-neutral-default);
|
35
35
|
|
36
36
|
// inputs
|
37
37
|
$vd-datepicker-data-inputs-width: 245px;
|
@@ -143,7 +143,7 @@
|
|
143
143
|
|
144
144
|
abbr {
|
145
145
|
font-weight: $vd-font-weight--bold;
|
146
|
-
color:
|
146
|
+
color: hs-color(fg-neutral-default);
|
147
147
|
}
|
148
148
|
}
|
149
149
|
|
@@ -290,29 +290,29 @@
|
|
290
290
|
border: none;
|
291
291
|
border-radius: $vd-datepicker-button-radius;
|
292
292
|
padding: 3px;
|
293
|
-
color:
|
293
|
+
color: hs-color(fg-neutral-default);
|
294
294
|
|
295
295
|
&:hover {
|
296
|
-
background: vd-rgba(
|
296
|
+
background: vd-rgba(hs-color(bg-go-default), $vd-opacity);
|
297
297
|
}
|
298
298
|
}
|
299
299
|
|
300
300
|
.is-today .pika-button {
|
301
|
-
color:
|
301
|
+
color: hs-color(fg-go-default);
|
302
302
|
font-weight: $vd-font-weight--bold;
|
303
303
|
}
|
304
304
|
|
305
305
|
.is-startrange,
|
306
306
|
.is-endrange {
|
307
307
|
.pika-button {
|
308
|
-
border: 2px solid
|
308
|
+
border: 2px solid hs-color(fg-go-default);
|
309
309
|
background: $vd-datepicker-range-colour;
|
310
310
|
}
|
311
311
|
}
|
312
312
|
|
313
313
|
.is-selected .pika-button {
|
314
|
-
background:
|
315
|
-
color:
|
314
|
+
background: hs-color(bg-go-default);
|
315
|
+
color: hs-color(fg-neutral-ondark-default);
|
316
316
|
font-weight: $vd-font-weight--bold;
|
317
317
|
border: none;
|
318
318
|
}
|
@@ -331,7 +331,7 @@
|
|
331
331
|
.is-endrange {
|
332
332
|
.pika-button {
|
333
333
|
background: $vd-datepicker-range-colour;
|
334
|
-
color:
|
334
|
+
color: hs-color(fg-neutral-default);
|
335
335
|
font-weight: normal;
|
336
336
|
}
|
337
337
|
}
|
@@ -5,7 +5,7 @@ $vd-dialog-header-divider-width: 40px;
|
|
5
5
|
|
6
6
|
// Dialog Container
|
7
7
|
$vd-dialog-container-min-height: 170px;
|
8
|
-
$vd-dialog-container-focus-colour:
|
8
|
+
$vd-dialog-container-focus-colour: hs-color(fg-go-default);
|
9
9
|
$vd-dialog-container-top-offset: vd-grid-unit(15);
|
10
10
|
$vd-dialog-container-sizes: (
|
11
11
|
(small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px)
|
@@ -68,7 +68,7 @@
|
|
68
68
|
margin: 0 auto;
|
69
69
|
padding: var(--vd-dialog-spacing);
|
70
70
|
|
71
|
-
background:
|
71
|
+
background: hs-color(bg-neutral-top);
|
72
72
|
border-radius: $vd-border-radius;
|
73
73
|
display: flex;
|
74
74
|
flex-direction: column;
|
@@ -147,7 +147,7 @@
|
|
147
147
|
width: $vd-dialog-header-divider-width;
|
148
148
|
margin: ($vd-dialog-header-margin * 2) auto 0;
|
149
149
|
border: none;
|
150
|
-
border-top: 1px solid
|
150
|
+
border-top: 1px solid hs-color(border-neutral-strong);
|
151
151
|
}
|
152
152
|
|
153
153
|
// ***** Dialog Content ***** //
|
@@ -2,7 +2,7 @@
|
|
2
2
|
$vd-dialog-close-width: 50px;
|
3
3
|
$vd-dialog-close-border-radius: 50%;
|
4
4
|
$vd-dialog-close-font-size: 20px;
|
5
|
-
$vd-dialog-close-focus-border-colour:
|
5
|
+
$vd-dialog-close-focus-border-colour: hs-color(fg-go-default);
|
6
6
|
$vd-dialog-close-text-font-size: 12px;
|
7
7
|
$vd-dialog-close-text-padding: 5px;
|
8
8
|
$vd-dialog-close-button-anchor-padding: 10px;
|
@@ -20,9 +20,9 @@
|
|
20
20
|
display: flex;
|
21
21
|
align-items: center;
|
22
22
|
justify-content: center;
|
23
|
-
background:
|
23
|
+
background: hs-color(bg-neutral-top);
|
24
24
|
border-radius: $vd-dialog-close-border-radius;
|
25
|
-
color:
|
25
|
+
color: hs-color(fg-supplementary-default);
|
26
26
|
padding: $vd-dialog-close-button-anchor-padding;
|
27
27
|
text-decoration: none;
|
28
28
|
border: 0;
|
@@ -51,8 +51,8 @@
|
|
51
51
|
right: vd-spacer(4);
|
52
52
|
|
53
53
|
.vd-dialog-close-button {
|
54
|
-
background-color:
|
55
|
-
color:
|
54
|
+
background-color: hs-color(bg-supplementary-default);
|
55
|
+
color: hs-color(bg-neutral-top);
|
56
56
|
}
|
57
57
|
|
58
58
|
.vd-dialog-close-icon {
|
@@ -90,7 +90,7 @@
|
|
90
90
|
font-size: $vd-dialog-close-text-font-size;
|
91
91
|
|
92
92
|
.vd-modal--size-full-screen & {
|
93
|
-
color:
|
93
|
+
color: hs-color(bg-supplementary-default);
|
94
94
|
font-weight: bold;
|
95
95
|
}
|
96
96
|
|
@@ -102,8 +102,8 @@
|
|
102
102
|
// Dialog Close Button 'Inverse' Modifier
|
103
103
|
.vd-dialog-close--inverse {
|
104
104
|
.vd-dialog-close-button {
|
105
|
-
background:
|
106
|
-
color:
|
105
|
+
background: hs-color(bg-supplementary-default);
|
106
|
+
color: hs-color(fg-neutral-ondark-default);
|
107
107
|
}
|
108
108
|
|
109
109
|
.vd-dialog-close-icon {
|
@@ -111,7 +111,7 @@
|
|
111
111
|
}
|
112
112
|
|
113
113
|
.vd-dialog-close-label {
|
114
|
-
color:
|
114
|
+
color: hs-color(fg-neutral-default);
|
115
115
|
opacity: 0.5;
|
116
116
|
}
|
117
117
|
}
|
@@ -23,23 +23,23 @@ vd-dott,
|
|
23
23
|
}
|
24
24
|
|
25
25
|
.vd-dott-gradient-start {
|
26
|
-
stop-color:
|
26
|
+
stop-color: hs-color(fg-go-default);
|
27
27
|
}
|
28
28
|
|
29
29
|
.vd-dott-gradient-stop {
|
30
|
-
stop-color:
|
30
|
+
stop-color: hs-color(fg-success-default);
|
31
31
|
}
|
32
32
|
|
33
33
|
.vd-dott-border:not(.vd-input--error):not(.vd-error) {
|
34
34
|
// Overide existing borders before applying patchy border styles ourselves
|
35
35
|
border: initial;
|
36
|
-
border-top: $vd-dot-border-width solid
|
37
|
-
border-bottom: $vd-dot-border-width solid
|
36
|
+
border-top: $vd-dot-border-width solid hs-color(fg-go-default);
|
37
|
+
border-bottom: $vd-dot-border-width solid hs-color(fg-success-default);
|
38
38
|
// Second bg-image value, in conjunction with the background-position, ensures the right side border displays correctly
|
39
|
-
background-image: linear-gradient(
|
40
|
-
linear-gradient(
|
39
|
+
background-image: linear-gradient(hs-color(fg-go-default), hs-color(fg-success-default)),
|
40
|
+
linear-gradient(hs-color(fg-go-default), hs-color(fg-success-default));
|
41
41
|
background-size: $vd-dot-border-width 100%;
|
42
42
|
background-position: 0 0, 100% 0;
|
43
43
|
background-repeat: no-repeat;
|
44
|
-
box-shadow: 0 0 4px 0
|
44
|
+
box-shadow: 0 0 4px 0 hs-color(fg-go-default);
|
45
45
|
}
|
@@ -2,7 +2,7 @@
|
|
2
2
|
@include vd-text(mini-signpost);
|
3
3
|
|
4
4
|
padding: vd-grid-unit(1) vd-grid-unit(2);
|
5
|
-
background-color:
|
5
|
+
background-color: hs-color(border-neutral-soft);
|
6
6
|
border-radius: $vd-border-radius;
|
7
7
|
display: inline-block;
|
8
8
|
vertical-align: text-top;
|
@@ -11,7 +11,7 @@
|
|
11
11
|
&,
|
12
12
|
&:link,
|
13
13
|
&:visited {
|
14
|
-
color:
|
14
|
+
color: hs-color(fg-supplementary-default) !important;
|
15
15
|
}
|
16
16
|
}
|
17
17
|
|
@@ -31,12 +31,12 @@
|
|
31
31
|
|
32
32
|
.vd-flag--negative,
|
33
33
|
.vd-flag--warning {
|
34
|
-
background-color:
|
34
|
+
background-color: hs-color(bg-no-default);
|
35
35
|
|
36
36
|
&,
|
37
37
|
&:link,
|
38
38
|
&:visited {
|
39
|
-
color:
|
39
|
+
color: hs-color(fg-neutral-ondark-default) !important;
|
40
40
|
}
|
41
41
|
|
42
42
|
.vd-flag-chevron {
|
@@ -18,7 +18,7 @@
|
|
18
18
|
text-align: center;
|
19
19
|
padding: $vd-hero-paddding-vertical $vd-hero-padding-horizontal;
|
20
20
|
box-sizing: border-box;
|
21
|
-
background-color:
|
21
|
+
background-color: hs-color(bg-neutral-top);
|
22
22
|
|
23
23
|
.vd-hero-container & {
|
24
24
|
@include vd-viewport-media-max(medium) {
|
@@ -65,10 +65,10 @@
|
|
65
65
|
padding: vd-grid-unit(5);
|
66
66
|
box-sizing: border-box;
|
67
67
|
|
68
|
-
background-color:
|
68
|
+
background-color: hs-color(bg-neutral-inverted-top);
|
69
69
|
|
70
70
|
font-family: $vd-font-lato;
|
71
|
-
color:
|
71
|
+
color: hs-color(fg-neutral-inverted-default);
|
72
72
|
text-align: center;
|
73
73
|
font-size: vd-text-size(body);
|
74
74
|
|
@@ -109,6 +109,6 @@
|
|
109
109
|
}
|
110
110
|
|
111
111
|
.vd-hero-aux-footer {
|
112
|
-
color:
|
112
|
+
color: hs-color(border-neutral-strong);
|
113
113
|
margin-top: $vd-hero-aux-content-margin;
|
114
114
|
}
|
@@ -20,14 +20,14 @@ $vd-textarea-line-height: vd-px-unit(
|
|
20
20
|
);
|
21
21
|
|
22
22
|
@mixin vd-input-text() {
|
23
|
-
color:
|
23
|
+
color: hs-color(fg-neutral-default);
|
24
24
|
font-family: $vd-font-primary;
|
25
25
|
font-weight: $vd-font-weight--regular;
|
26
26
|
font-size: vd-text-size(body);
|
27
27
|
word-break: normal;
|
28
28
|
|
29
29
|
&::placeholder {
|
30
|
-
color:
|
30
|
+
color: hs-color(bg-supplementary-default);
|
31
31
|
opacity: 1;
|
32
32
|
}
|
33
33
|
|
@@ -56,7 +56,7 @@ $vd-textarea-line-height: vd-px-unit(
|
|
56
56
|
|
57
57
|
@mixin vd-input-states() {
|
58
58
|
box-shadow: none;
|
59
|
-
background-color:
|
59
|
+
background-color: hs-color(bg-neutral-top);
|
60
60
|
border: $vd-input-border-width solid hs-color(border-neutral-soft);
|
61
61
|
border-radius: $vd-border-radius;
|
62
62
|
|
@@ -70,8 +70,8 @@ $vd-textarea-line-height: vd-px-unit(
|
|
70
70
|
@mixin vd-input-focus() {
|
71
71
|
&:focus,
|
72
72
|
&.vd-focus {
|
73
|
-
border-color:
|
74
|
-
box-shadow: 0 0 $vd-shadow-blur
|
73
|
+
border-color: hs-color(fg-go-default);
|
74
|
+
box-shadow: 0 0 $vd-shadow-blur hs-color(fg-go-default);
|
75
75
|
}
|
76
76
|
}
|
77
77
|
|
@@ -92,11 +92,11 @@ $vd-textarea-line-height: vd-px-unit(
|
|
92
92
|
}
|
93
93
|
|
94
94
|
@mixin vd-input-error-styles() {
|
95
|
-
border-color:
|
95
|
+
border-color: hs-color(fg-no-default);
|
96
96
|
|
97
97
|
&:focus,
|
98
98
|
&.vd-focus {
|
99
|
-
box-shadow: 0 0 $vd-shadow-blur
|
99
|
+
box-shadow: 0 0 $vd-shadow-blur hs-color(fg-no-default);
|
100
100
|
}
|
101
101
|
}
|
102
102
|
|
@@ -5,7 +5,7 @@
|
|
5
5
|
.vd-input-error-message-section {
|
6
6
|
display: block;
|
7
7
|
margin-top: $vd-input-message-margin;
|
8
|
-
color:
|
8
|
+
color: hs-color(fg-no-default);
|
9
9
|
font-size: vd-text-size(supplementary);
|
10
10
|
|
11
11
|
.vd-input-error-message-text {
|
@@ -23,7 +23,7 @@
|
|
23
23
|
.vd-input-icon {
|
24
24
|
position: absolute;
|
25
25
|
top: 14px;
|
26
|
-
color:
|
26
|
+
color: hs-color(fg-supplementary-default);
|
27
27
|
pointer-events: none;
|
28
28
|
}
|
29
29
|
|
@@ -1,11 +1,11 @@
|
|
1
1
|
.vd-link {
|
2
|
-
color:
|
2
|
+
color: hs-color(fg-go-default);
|
3
3
|
text-decoration: none;
|
4
4
|
cursor: pointer;
|
5
5
|
transition: color $vd-time-s;
|
6
6
|
|
7
7
|
&:visited {
|
8
|
-
color:
|
8
|
+
color: hs-color(fg-go-default);
|
9
9
|
}
|
10
10
|
|
11
11
|
@include vd-hover-when-supported {
|
@@ -25,7 +25,7 @@
|
|
25
25
|
|
26
26
|
@include vd-hover-when-supported {
|
27
27
|
&:hover {
|
28
|
-
color:
|
28
|
+
color: hs-color(fg-go-default) !important;
|
29
29
|
} // required important to override a tag styles set in vd-table
|
30
30
|
}
|
31
31
|
}
|
@@ -10,7 +10,7 @@ $vd-i-bg-margin: vd-grid-unit(2);
|
|
10
10
|
width: $vd-loader-m;
|
11
11
|
height: $vd-loader-m;
|
12
12
|
border-radius: 50%;
|
13
|
-
border: $vd-loader-border solid
|
13
|
+
border: $vd-loader-border solid hs-color(fg-go-default);
|
14
14
|
border-left-color: transparent;
|
15
15
|
@include vd-slow-rotate;
|
16
16
|
|
@@ -2,8 +2,8 @@
|
|
2
2
|
@include vd-text(body);
|
3
3
|
|
4
4
|
padding: 6px 10px;
|
5
|
-
color:
|
6
|
-
background-color:
|
5
|
+
color: hs-color(fg-supplementary-default);
|
6
|
+
background-color: hs-color(border-neutral-soft);
|
7
7
|
border-radius: $vd-border-radius;
|
8
8
|
display: inline-block;
|
9
9
|
margin-right: vd-grid-unit(1);
|
@@ -24,9 +24,9 @@
|
|
24
24
|
}
|
25
25
|
|
26
26
|
.vd-lozenge--interactive {
|
27
|
-
color:
|
27
|
+
color: hs-color(fg-neutral-ondark-default);
|
28
28
|
|
29
|
-
background-color:
|
29
|
+
background-color: hs-color(bg-supplementary-default);
|
30
30
|
}
|
31
31
|
|
32
32
|
.vd-lozenge--disabled {
|
@@ -35,6 +35,6 @@
|
|
35
35
|
}
|
36
36
|
|
37
37
|
.vd-lozenge--marked {
|
38
|
-
background-color:
|
39
|
-
color:
|
38
|
+
background-color: hs-color(bg-no-default);
|
39
|
+
color: hs-color(fg-neutral-ondark-default);
|
40
40
|
}
|
@@ -32,8 +32,8 @@
|
|
32
32
|
@include vd-input-states();
|
33
33
|
|
34
34
|
&:focus-within {
|
35
|
-
border-color:
|
36
|
-
box-shadow: 0 0 $vd-shadow-blur
|
35
|
+
border-color: hs-color(fg-go-default);
|
36
|
+
box-shadow: 0 0 $vd-shadow-blur hs-color(fg-go-default);
|
37
37
|
}
|
38
38
|
|
39
39
|
.vd-lozenge {
|
@@ -1,11 +1,11 @@
|
|
1
1
|
.vd-next-stepper {
|
2
2
|
display: block;
|
3
3
|
padding: vd-grid-unit(6);
|
4
|
-
background-color:
|
4
|
+
background-color: hs-color(bg-neutral-top);
|
5
5
|
border: 1px solid hs-color(border-neutral-soft);
|
6
6
|
|
7
7
|
&.vd-next-stepper--on-box {
|
8
|
-
background-color:
|
8
|
+
background-color: hs-color(bg-neutral-backdrop);
|
9
9
|
border-color: transparent;
|
10
10
|
}
|
11
11
|
}
|
@@ -1 +1 @@
|
|
1
|
-
$vd-colour-overlay:
|
1
|
+
$vd-colour-overlay: hs-color(overlay-dark-default);
|
@@ -1,9 +1,9 @@
|
|
1
1
|
.vd-panel {
|
2
2
|
display: block;
|
3
|
-
background-color:
|
3
|
+
background-color: hs-color(bg-neutral-top);
|
4
4
|
margin: 0 #{-$vd-section--panel-margin-h};
|
5
5
|
}
|
6
6
|
|
7
7
|
.vd-panel--dark {
|
8
|
-
background-color:
|
8
|
+
background-color: hs-color(bg-neutral-backdrop);
|
9
9
|
}
|