@lightspeed/design-system-css 1.2.0 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -39
- package/dist/index.css +151 -80
- package/dist/index.css.map +1 -1
- package/dist/vend-styles.css +151 -80
- package/package.json +1 -34
- package/src/images-ui/images-ui-ns.scss +1 -1
- package/src/vend-stylelint/use-colour-function.js +25 -22
- package/src/vend-styles/components/BarChart/BarChart.scss +9 -9
- package/src/vend-styles/components/CodeInput/CodeInput.scss +0 -1
- package/src/vend-styles/components/DatePicker/DatePicker.scss +3 -11
- package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +1 -1
- package/src/vend-styles/components/LineChart/LineChart.scss +5 -4
- package/src/vend-styles/components/Modal/Modal.scss +25 -12
- package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -2
- package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
- package/src/vend-styles/components/TableList/TableList.scss +2 -1
- package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +1 -6
- package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +15 -7
- package/src/vend.ui/behaviours/vd-align/vd-align.scss +9 -3
- package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +4 -3
- package/src/vend.ui/components/vd-avatar/vd-avatar.scss +7 -7
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
- package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -1
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +7 -3
- package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +5 -1
- package/src/vend.ui/components/vd-banner/vd-banner.scss +8 -4
- package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
- package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +15 -15
- package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +4 -3
- package/src/vend.ui/components/vd-btn/vd-btn.scss +11 -9
- package/src/vend.ui/components/vd-card/vd-card-ns.scss +0 -1
- package/src/vend.ui/components/vd-card/vd-card.scss +0 -4
- package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -2
- package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +33 -12
- package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +2 -2
- package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +16 -6
- package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +3 -1
- package/src/vend.ui/components/vd-dialog/vd-dialog.scss +13 -13
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
- package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +1 -1
- package/src/vend.ui/components/vd-dott/vd-dott.scss +5 -4
- package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +1 -1
- package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -2
- package/src/vend.ui/components/vd-flex/vd-flex.scss +39 -13
- package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +2 -2
- package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +0 -2
- package/src/vend.ui/components/vd-input/vd-input-ns.scss +19 -12
- package/src/vend.ui/components/vd-input/vd-input.scss +12 -4
- package/src/vend.ui/components/vd-link/vd-link.scss +12 -4
- package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
- package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +22 -7
- 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 +1 -1
- package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
- package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
- package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
- package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
- package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
- package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
- package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
- package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
- package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
- package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
- package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
- package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
- package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
- package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
- package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +5 -2
- package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +2 -5
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +5 -2
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
- package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
- package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
- package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
- package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
- package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
- package/src/vend.ui/styles/global/_grid.scss +5 -5
- package/src/vend.ui/styles/global/_layout.scss +2 -2
- package/src/vend.ui/styles/global/_normalise.scss +8 -1
- package/src/vend.ui/styles/global/_z-index.scss +0 -8
- package/src/vend.ui/styles/global/colour/_base.scss +8 -13
- package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
- package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
- package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
- package/src/vend.ui/styles/global/effects/_effects.scss +19 -9
- package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
- package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
- package/src/vend.ui/styles/global/text/_base.scss +1 -1
- package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
- package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
- package/src/vend.ui/styles/global/text/_text.scss +2 -2
- package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
- package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
- package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
- package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
- package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
- package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
- package/src/vend.ui/styles/navi/_nv-topnav.scss +4 -4
- package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
- package/src/vend.ui/styles/navi/navi.scss +8 -8
- package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
- package/CHANGELOG.md +0 -192
@@ -1,4 +1,4 @@
|
|
1
|
-
@use
|
1
|
+
@use 'sass:math';
|
2
2
|
|
3
3
|
@import '../../../vend.ui/styles/global/non-styles';
|
4
4
|
@import './DatePicker-ns';
|
@@ -213,19 +213,11 @@
|
|
213
213
|
}
|
214
214
|
|
215
215
|
.react-datepicker__day--range-start {
|
216
|
-
background-image: linear-gradient(
|
217
|
-
to right,
|
218
|
-
transparent 50%,
|
219
|
-
$vd-datepicker-range-colour 50%
|
220
|
-
);
|
216
|
+
background-image: linear-gradient(to right, transparent 50%, $vd-datepicker-range-colour 50%);
|
221
217
|
}
|
222
218
|
|
223
219
|
.react-datepicker__day--range-end {
|
224
|
-
background-image: linear-gradient(
|
225
|
-
to right,
|
226
|
-
$vd-datepicker-range-colour 50%,
|
227
|
-
transparent 50%
|
228
|
-
);
|
220
|
+
background-image: linear-gradient(to right, $vd-datepicker-range-colour 50%, transparent 50%);
|
229
221
|
}
|
230
222
|
|
231
223
|
// If the start and end date are the same, don't show the gradient
|
@@ -21,7 +21,7 @@ $vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
|
|
21
21
|
|
22
22
|
// Mixins
|
23
23
|
@mixin next-prev-arrow-common {
|
24
|
-
content:
|
24
|
+
content: ' ';
|
25
25
|
visibility: visible;
|
26
26
|
position: absolute;
|
27
27
|
width: $vd-datepicker-next-prev-button-icon-size;
|
@@ -3,13 +3,14 @@
|
|
3
3
|
/* stylelint-disable vend/use-colour-function */
|
4
4
|
// Should review at some point if it is possible to replace this with a standard colour
|
5
5
|
// or if we need to add this to standard colour
|
6
|
-
$chart-fill: #
|
6
|
+
$chart-fill: #009d12;
|
7
7
|
$chart-bg: #fafafa;
|
8
8
|
/* stylelint-enable vend/use-colour-function */
|
9
9
|
|
10
|
-
|
11
10
|
.vd-line-graph-container {
|
12
|
-
.vd-grid.vd-y,
|
11
|
+
.vd-grid.vd-y,
|
12
|
+
.vd-axis.vd-y,
|
13
|
+
.vd-axis.vd-x {
|
13
14
|
.domain {
|
14
15
|
display: none;
|
15
16
|
}
|
@@ -22,7 +23,7 @@ $chart-bg: #fafafa;
|
|
22
23
|
}
|
23
24
|
|
24
25
|
.vd-grid.vd-grid-filled {
|
25
|
-
stroke-dasharray: 4,2;
|
26
|
+
stroke-dasharray: 4, 2;
|
26
27
|
}
|
27
28
|
|
28
29
|
.vd-grid-background {
|
@@ -19,13 +19,13 @@
|
|
19
19
|
outline: none;
|
20
20
|
}
|
21
21
|
|
22
|
-
@include vd-viewport-media-max
|
22
|
+
@include vd-viewport-media-max(small) {
|
23
23
|
max-width: none;
|
24
24
|
width: 100%;
|
25
25
|
margin-top: $vd-dialog-container-top-offset;
|
26
26
|
}
|
27
27
|
|
28
|
-
@include vd-viewport-media-max
|
28
|
+
@include vd-viewport-media-max(xsmall) {
|
29
29
|
max-height: none;
|
30
30
|
height: calc(100% - #{$vd-dialog-container-top-offset});
|
31
31
|
|
@@ -43,7 +43,7 @@
|
|
43
43
|
}
|
44
44
|
|
45
45
|
@each $_vd-modal-size in $vd-modal-sizes {
|
46
|
-
@include vd-viewport-media-min
|
46
|
+
@include vd-viewport-media-min($vd-breakpoint-medium) {
|
47
47
|
.vd-modal--size-#{nth($_vd-modal-size, 1)} {
|
48
48
|
max-width: nth($_vd-modal-size, 2);
|
49
49
|
}
|
@@ -57,7 +57,7 @@
|
|
57
57
|
min-height: $vd-dialog-container-min-height;
|
58
58
|
max-height: calc(95vh - #{$vd-dialog-container-top-offset});
|
59
59
|
|
60
|
-
@include vd-viewport-media-max
|
60
|
+
@include vd-viewport-media-max(xsmall) {
|
61
61
|
max-height: 95%;
|
62
62
|
}
|
63
63
|
|
@@ -65,7 +65,10 @@
|
|
65
65
|
width: 100%;
|
66
66
|
}
|
67
67
|
|
68
|
-
.vd-breadcrumb,
|
68
|
+
.vd-breadcrumb,
|
69
|
+
.vd-dialog-header,
|
70
|
+
.vd-modal-container:not(.vd-modal--size-full-screen) & .vd-modal-content,
|
71
|
+
.vd-dialog-actions {
|
69
72
|
margin-left: var(--vd-dialog-spacing);
|
70
73
|
margin-right: var(--vd-dialog-spacing);
|
71
74
|
|
@@ -74,12 +77,14 @@
|
|
74
77
|
}
|
75
78
|
|
76
79
|
&:last-child {
|
77
|
-
margin-bottom: var(--vd-dialog-spacing)
|
80
|
+
margin-bottom: var(--vd-dialog-spacing);
|
78
81
|
}
|
79
82
|
}
|
80
83
|
|
81
84
|
.vd-breadcrumb {
|
82
|
-
& + .vd-dialog-header,
|
85
|
+
& + .vd-dialog-header,
|
86
|
+
& + .vd-modal-content,
|
87
|
+
& + .vd-dialog-actions {
|
83
88
|
margin-top: vd-grid-unit(4);
|
84
89
|
}
|
85
90
|
}
|
@@ -97,7 +102,9 @@
|
|
97
102
|
.vd-modal-banner {
|
98
103
|
width: 100%;
|
99
104
|
|
100
|
-
& + .vd-dialog-header,
|
105
|
+
& + .vd-dialog-header,
|
106
|
+
& + .vd-modal-content,
|
107
|
+
& + .vd-dialog-actions {
|
101
108
|
margin-top: var(--vd-dialog-spacing);
|
102
109
|
}
|
103
110
|
}
|
@@ -105,11 +112,14 @@
|
|
105
112
|
.vd-modal-sidebar {
|
106
113
|
display: none;
|
107
114
|
|
108
|
-
& + .vd-breadcrumb,
|
115
|
+
& + .vd-breadcrumb,
|
116
|
+
& + .vd-dialog-header,
|
117
|
+
.vd-modal-container:not(.vd-modal--size-full-screen) & + .vd-modal-content,
|
118
|
+
& + .vd-dialog-actions {
|
109
119
|
margin-top: var(--vd-dialog-spacing);
|
110
120
|
}
|
111
121
|
|
112
|
-
@include vd-viewport-media-min
|
122
|
+
@include vd-viewport-media-min($vd-breakpoint-medium) {
|
113
123
|
display: block;
|
114
124
|
width: $vd-modal-sidebar-size;
|
115
125
|
position: absolute;
|
@@ -117,14 +127,17 @@
|
|
117
127
|
bottom: 0;
|
118
128
|
left: 0;
|
119
129
|
|
120
|
-
& ~ .vd-breadcrumb,
|
130
|
+
& ~ .vd-breadcrumb,
|
131
|
+
& ~ .vd-dialog-header,
|
132
|
+
.vd-modal-container:not(.vd-modal--size-full-screen) & ~ .vd-modal-content,
|
133
|
+
& ~ .vd-dialog-actions {
|
121
134
|
margin-left: $vd-modal-sidebar-size;
|
122
135
|
padding-left: var(--vd-dialog-spacing);
|
123
136
|
}
|
124
137
|
|
125
138
|
& ~ .vd-modal-banner {
|
126
139
|
margin-left: $vd-modal-sidebar-size;
|
127
|
-
width: calc(100% - #{$vd-modal-sidebar-size})
|
140
|
+
width: calc(100% - #{$vd-modal-sidebar-size});
|
128
141
|
}
|
129
142
|
}
|
130
143
|
}
|
@@ -1,6 +1,11 @@
|
|
1
|
-
$vd-modal-sizes: (
|
1
|
+
$vd-modal-sizes: (
|
2
|
+
(small 600px) (small-with-sidebar 880px) (medium 720px) (medium-with-sidebar 1000px)
|
3
|
+
(large 1000px)
|
4
|
+
);
|
2
5
|
|
3
|
-
$vd-modal-mobile-sizes: (
|
6
|
+
$vd-modal-mobile-sizes: (
|
7
|
+
(small 600px) (small-with-sidebar 600px) (medium 720px) (medium-with-sidebar 720px) (large 1000px)
|
8
|
+
);
|
4
9
|
|
5
10
|
$vd-modal-sidebar-size: 280px;
|
6
11
|
|
@@ -17,12 +17,7 @@
|
|
17
17
|
height: 100%;
|
18
18
|
color: vd-colour(box);
|
19
19
|
background: vd-colour(box)
|
20
|
-
linear-gradient(
|
21
|
-
to left,
|
22
|
-
vd-colour(box) 50%,
|
23
|
-
$vd-upsell-background-colour 50%
|
24
|
-
)
|
25
|
-
no-repeat;
|
20
|
+
linear-gradient(to left, vd-colour(box) 50%, $vd-upsell-background-colour 50%) no-repeat;
|
26
21
|
}
|
27
22
|
|
28
23
|
.vd-upsell-primary-background-inner {
|
@@ -1,5 +1,5 @@
|
|
1
|
-
@import
|
2
|
-
@import
|
1
|
+
@import '../../../../styles/global/_non-styles';
|
2
|
+
@import './vd-flex-ns';
|
3
3
|
|
4
4
|
.vd-flex--settings-explanation {
|
5
5
|
min-width: $vd-settings-explanation-width;
|
@@ -19,15 +19,21 @@
|
|
19
19
|
margin-left: 85px !important;
|
20
20
|
}
|
21
21
|
|
22
|
-
.vd-flex--container
|
23
|
-
|
22
|
+
.vd-flex--container {
|
23
|
+
flex: 0 0 auto;
|
24
|
+
}
|
25
|
+
.vd-flex--fieldset-row {
|
26
|
+
flex-direction: row;
|
27
|
+
}
|
24
28
|
|
25
29
|
@include vd-viewport-media-max(small) {
|
26
30
|
.vd-flex--responsive-column {
|
27
31
|
flex-basis: auto;
|
28
32
|
margin: 0 0 $vd-section-padding-v 0;
|
29
33
|
|
30
|
-
&:last-child {
|
34
|
+
&:last-child {
|
35
|
+
margin-bottom: 0;
|
36
|
+
}
|
31
37
|
}
|
32
38
|
|
33
39
|
.vd-flex--settings-explanation {
|
@@ -37,11 +43,13 @@
|
|
37
43
|
}
|
38
44
|
|
39
45
|
.vd-flex--settings,
|
40
|
-
.vd-flex--row {
|
46
|
+
.vd-flex--row {
|
47
|
+
flex-direction: column;
|
48
|
+
}
|
41
49
|
}
|
42
50
|
|
43
51
|
@include vd-viewport-media-max(xsmall) {
|
44
|
-
.vd-flex--fieldset-row
|
52
|
+
.vd-flex--fieldset-row {
|
45
53
|
flex-direction: column;
|
46
54
|
}
|
47
55
|
}
|
@@ -1,3 +1,9 @@
|
|
1
|
-
.vd-align-left
|
2
|
-
|
3
|
-
|
1
|
+
.vd-align-left {
|
2
|
+
text-align: left !important;
|
3
|
+
}
|
4
|
+
.vd-align-center {
|
5
|
+
text-align: center !important;
|
6
|
+
}
|
7
|
+
.vd-align-right {
|
8
|
+
text-align: right !important;
|
9
|
+
}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
// stylelint-disable selector-type-no-unknown
|
1
2
|
$vd-autocomplete-filter-select-border-radius: $vd-border-radius 0 0 $vd-border-radius;
|
2
3
|
$vd-autocomplete-filter-select-padding: 12px;
|
3
4
|
$vd-autocomplete-filter-selector-container-width: 130px;
|
@@ -8,8 +9,8 @@ $vd-autocomplete-filter-icon-margin: 14px;
|
|
8
9
|
.vd-autocomplete-filter {
|
9
10
|
display: block;
|
10
11
|
|
11
|
-
@include vd-input-error-selectors
|
12
|
-
vd-autocomplete-multi {
|
12
|
+
@include vd-input-error-selectors() {
|
13
|
+
vd-autocomplete-multi {
|
13
14
|
@include vd-input-error-styles();
|
14
15
|
}
|
15
16
|
}
|
@@ -35,7 +36,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
|
|
35
36
|
border-left: vd-border(framing, $vd-input-border-width * 0.5);
|
36
37
|
}
|
37
38
|
|
38
|
-
vd-autocomplete-multi {
|
39
|
+
vd-autocomplete-multi {
|
39
40
|
width: 100%;
|
40
41
|
transition: none;
|
41
42
|
}
|
@@ -49,30 +49,30 @@
|
|
49
49
|
}
|
50
50
|
|
51
51
|
&.vd-avatar--initials-1 {
|
52
|
-
background-color: vd-colour(
|
52
|
+
background-color: vd-colour(farout-pink);
|
53
53
|
}
|
54
54
|
|
55
55
|
&.vd-avatar--initials-2 {
|
56
|
-
background-color: vd-colour(
|
56
|
+
background-color: vd-colour(mars);
|
57
57
|
}
|
58
58
|
|
59
59
|
&.vd-avatar--initials-3 {
|
60
|
-
background-color: vd-colour(
|
60
|
+
background-color: vd-colour(solar);
|
61
61
|
}
|
62
62
|
|
63
63
|
&.vd-avatar--initials-4 {
|
64
|
-
background-color: vd-colour(
|
64
|
+
background-color: vd-colour(galaxy);
|
65
65
|
}
|
66
66
|
|
67
67
|
&.vd-avatar--initials-5 {
|
68
|
-
background-color: vd-colour(
|
68
|
+
background-color: vd-colour(neptune);
|
69
69
|
}
|
70
70
|
|
71
71
|
&.vd-avatar--initials-6 {
|
72
|
-
background-color: vd-colour(
|
72
|
+
background-color: vd-colour(deep-purple);
|
73
73
|
}
|
74
74
|
|
75
75
|
&.vd-avatar--initials-7 {
|
76
|
-
background-color: vd-colour(shuttle-
|
76
|
+
background-color: vd-colour(shuttle-grey);
|
77
77
|
}
|
78
78
|
}
|
@@ -1 +1 @@
|
|
1
|
-
@import
|
1
|
+
@import './vd-id-badge/vd-id-badge';
|
@@ -33,7 +33,9 @@
|
|
33
33
|
border-radius: 0;
|
34
34
|
}
|
35
35
|
|
36
|
-
&:hover,
|
36
|
+
&:hover,
|
37
|
+
&:active,
|
38
|
+
&:focus {
|
37
39
|
outline: none;
|
38
40
|
background-color: vd-colour(go-highlight);
|
39
41
|
}
|
@@ -70,7 +72,9 @@
|
|
70
72
|
text-decoration: underline;
|
71
73
|
}
|
72
74
|
|
73
|
-
&:hover,
|
75
|
+
&:hover,
|
76
|
+
&:active,
|
77
|
+
&:focus {
|
74
78
|
outline: none;
|
75
79
|
|
76
80
|
.vd-id-badge__header-title {
|
@@ -79,7 +83,7 @@
|
|
79
83
|
}
|
80
84
|
}
|
81
85
|
|
82
|
-
// SIZING ADJUSTMENTS
|
86
|
+
// SIZING ADJUSTMENTS
|
83
87
|
|
84
88
|
&.vd-id-badge--x-small {
|
85
89
|
.vd-id-badge__content {
|
@@ -1,4 +1,8 @@
|
|
1
|
-
@mixin vd-banner(
|
1
|
+
@mixin vd-banner(
|
2
|
+
$primary-colour,
|
3
|
+
$text-colour: vd-colour(text-action),
|
4
|
+
$anchor-colour: vd-colour(text-action)
|
5
|
+
) {
|
2
6
|
background-color: $primary-colour;
|
3
7
|
color: $text-colour;
|
4
8
|
border: none;
|
@@ -39,7 +39,7 @@
|
|
39
39
|
padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
|
40
40
|
|
41
41
|
// Fallback to base padding if browser doesn't support CSS variables
|
42
|
-
@supports (
|
42
|
+
@supports (not (--a: 0)) {
|
43
43
|
padding: $vd-section-padding-v $vd-section-padding-h;
|
44
44
|
}
|
45
45
|
}
|
@@ -66,10 +66,14 @@
|
|
66
66
|
|
67
67
|
.vd-banner--info,
|
68
68
|
.vd-banner--activation {
|
69
|
-
@include vd-banner(vd-colour(supplementary))
|
69
|
+
@include vd-banner(vd-colour(supplementary));
|
70
|
+
}
|
71
|
+
.vd-banner--negative {
|
72
|
+
@include vd-banner(vd-colour(no));
|
73
|
+
}
|
74
|
+
.vd-banner--success {
|
75
|
+
@include vd-banner(vd-colour(success));
|
70
76
|
}
|
71
|
-
.vd-banner--negative { @include vd-banner(vd-colour(no)) }
|
72
|
-
.vd-banner--success { @include vd-banner(vd-colour(success)) }
|
73
77
|
|
74
78
|
@include vd-viewport-media-max(medium) {
|
75
79
|
.vd-banner-wrapper,
|
@@ -1,11 +1,10 @@
|
|
1
|
-
|
2
1
|
// =================================== Helper Mixins =================================== //
|
3
2
|
|
4
3
|
// Helper to apply disabled state styles for buttons.
|
5
4
|
//
|
6
5
|
// @mixin vd-btn-disabled
|
7
6
|
//
|
8
|
-
@mixin vd-btn-disabled
|
7
|
+
@mixin vd-btn-disabled() {
|
9
8
|
&:disabled,
|
10
9
|
&.disabled {
|
11
10
|
cursor: not-allowed;
|
@@ -20,8 +19,9 @@
|
|
20
19
|
//
|
21
20
|
// @param {String} $_vd-colour-name - the button colour to use for the outline.
|
22
21
|
//
|
23
|
-
@mixin vd-btn-shadow
|
24
|
-
box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread
|
22
|
+
@mixin vd-btn-shadow($_vd-colour-name) {
|
23
|
+
box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread
|
24
|
+
vd-rgba(vd-colour(#{$_vd-colour-name}-rgb), $vd-opacity);
|
25
25
|
}
|
26
26
|
|
27
27
|
// Applies a box shadow with an outline in the provided primary colour.
|
@@ -30,13 +30,12 @@
|
|
30
30
|
//
|
31
31
|
// @param {String} $_vd-colour-name - the button colour to use for the outline.
|
32
32
|
//
|
33
|
-
@mixin vd-btn-outline-shadow
|
33
|
+
@mixin vd-btn-outline-shadow($_vd-colour-name) {
|
34
34
|
$_vd-requested-color: vd-colour(#{$_vd-colour-name}-rgb);
|
35
35
|
|
36
|
-
box-shadow:
|
37
|
-
0 0
|
38
|
-
0 0
|
39
|
-
0 0 0 #{$vd-shadow-spread+1} vd-rgba($_vd-requested-color, 0.6);
|
36
|
+
box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(vd-colour(box-rgb), 0.8),
|
37
|
+
0 0 $vd-shadow-blur #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, $vd-opacity),
|
38
|
+
0 0 0 #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, 0.6);
|
40
39
|
}
|
41
40
|
|
42
41
|
// Helper to apply hover, active and focus state styles for buttons.
|
@@ -45,7 +44,7 @@
|
|
45
44
|
//
|
46
45
|
// @param {String} $_vd-colour-name - the button colour.
|
47
46
|
//
|
48
|
-
@mixin vd-btn-states
|
47
|
+
@mixin vd-btn-states($_vd-colour-name, $_vd-use-default-hover: false) {
|
49
48
|
@include vd-hover-when-supported {
|
50
49
|
&:hover {
|
51
50
|
color: vd-colour(text-action);
|
@@ -57,13 +56,14 @@
|
|
57
56
|
}
|
58
57
|
}
|
59
58
|
|
60
|
-
&:active,
|
59
|
+
&:active,
|
60
|
+
&.vd-btn--active {
|
61
61
|
color: vd-colour(text-action);
|
62
62
|
background-color: vd-colour(#{$_vd-colour-name}-darker);
|
63
63
|
@include vd-btn-shadow($_vd-colour-name);
|
64
64
|
}
|
65
65
|
|
66
|
-
&:focus
|
66
|
+
&:focus {
|
67
67
|
@include vd-btn-outline-shadow($_vd-colour-name);
|
68
68
|
}
|
69
69
|
}
|
@@ -76,7 +76,7 @@
|
|
76
76
|
//
|
77
77
|
// @param {String} $_vd-colour-name - the button colour.
|
78
78
|
//
|
79
|
-
@mixin vd-btn
|
79
|
+
@mixin vd-btn($_vd-colour-name) {
|
80
80
|
background-color: vd-colour($_vd-colour-name);
|
81
81
|
color: vd-colour(text-action);
|
82
82
|
|
@@ -92,7 +92,7 @@
|
|
92
92
|
//
|
93
93
|
// @param {String} $_vd-colour-name - the button colour to use.
|
94
94
|
//
|
95
|
-
@mixin vd-btn-text
|
95
|
+
@mixin vd-btn-text($_vd-colour-name) {
|
96
96
|
background-color: transparent;
|
97
97
|
color: vd-colour($_vd-colour-name);
|
98
98
|
|
@@ -106,7 +106,7 @@
|
|
106
106
|
//
|
107
107
|
// @param {String} $_vd-colour-name - the button colour to use.
|
108
108
|
//
|
109
|
-
@mixin vd-btn-icon
|
109
|
+
@mixin vd-btn-icon($_vd-colour-name) {
|
110
110
|
background-color: transparent;
|
111
111
|
padding: $vd-btn-icon-padding;
|
112
112
|
|
@@ -28,12 +28,12 @@
|
|
28
28
|
|
29
29
|
@include vd-btn-disabled();
|
30
30
|
|
31
|
-
&:focus
|
31
|
+
&:focus {
|
32
32
|
border-color: vd-colour(go);
|
33
33
|
@include vd-btn-shadow(go);
|
34
34
|
}
|
35
35
|
|
36
|
-
&:hover
|
36
|
+
&:hover {
|
37
37
|
border-color: vd-colour(go-lighter);
|
38
38
|
@include vd-btn-shadow(go);
|
39
39
|
}
|
@@ -48,7 +48,8 @@
|
|
48
48
|
.vd-btn-panel--selected {
|
49
49
|
border-color: vd-colour(do);
|
50
50
|
|
51
|
-
&:focus,
|
51
|
+
&:focus,
|
52
|
+
&:hover {
|
52
53
|
border-color: vd-colour(do-lighter);
|
53
54
|
@include vd-btn-shadow(do);
|
54
55
|
}
|
@@ -59,7 +59,8 @@ a.vd-btn {
|
|
59
59
|
text-align: left;
|
60
60
|
text-decoration: underline;
|
61
61
|
|
62
|
-
&:hover,
|
62
|
+
&:hover,
|
63
|
+
&:focus {
|
63
64
|
color: vd-colour(go);
|
64
65
|
}
|
65
66
|
}
|
@@ -101,12 +102,13 @@ a.vd-btn {
|
|
101
102
|
/* When buttons are disabled they don't trigger onMouseOver / onMouseOut events but the event will bubble
|
102
103
|
up from child elements. `vd-btn-hover-assist` occupies all of the space within the button so mouse events are
|
103
104
|
consistently triggered. */
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
105
|
+
.vd-btn,
|
106
|
+
.vd-tab-button {
|
107
|
+
&:disabled:hover > .vd-btn-hover-assist {
|
108
|
+
position: absolute;
|
109
|
+
top: 0;
|
110
|
+
right: 0;
|
111
|
+
bottom: 0;
|
112
|
+
left: 0;
|
112
113
|
}
|
114
|
+
}
|
@@ -1,4 +1,5 @@
|
|
1
|
-
|
1
|
+
// stylelint-disable selector-type-no-unknown
|
2
|
+
vd-carousel {
|
2
3
|
display: flex;
|
3
4
|
flex-direction: column;
|
4
5
|
}
|
@@ -36,7 +37,7 @@ vd-carousel { // stylelint-disable-line selector-type-no-unknown
|
|
36
37
|
}
|
37
38
|
}
|
38
39
|
|
39
|
-
vd-carousel-frame {
|
40
|
+
vd-carousel-frame {
|
40
41
|
display: flex;
|
41
42
|
flex: 1 0 100%;
|
42
43
|
order: 2;
|