@lightspeed/design-system-css 1.2.0 → 1.2.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -1
- package/dist/index.css +151 -77
- package/dist/index.css.map +1 -1
- package/dist/vend-styles.css +151 -77
- 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-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
package/dist/vend-styles.css
CHANGED
@@ -32,13 +32,13 @@
|
|
32
32
|
--vd-colour--keyline: #37353A;
|
33
33
|
--vd-colour--framing-inverse: #E7E5E8;
|
34
34
|
--vd-colour--keyline-inverse: #C9C7CA;
|
35
|
-
--vd-colour--
|
36
|
-
--vd-colour--
|
37
|
-
--vd-colour--
|
38
|
-
--vd-colour--
|
39
|
-
--vd-colour--
|
40
|
-
--vd-colour--
|
41
|
-
--vd-colour--shuttle-
|
35
|
+
--vd-colour--solar: #E6B03D;
|
36
|
+
--vd-colour--mars: #ED6B44;
|
37
|
+
--vd-colour--farout-pink: #DE3CEC;
|
38
|
+
--vd-colour--galaxy: #A02FB6;
|
39
|
+
--vd-colour--deep-purple: #501897;
|
40
|
+
--vd-colour--neptune: #6952F6;
|
41
|
+
--vd-colour--shuttle-grey: #5D5D5D;
|
42
42
|
--vd-colour--nav-top: #0B0B0B;
|
43
43
|
--vd-colour--nav-top-rgb: 11, 11, 11;
|
44
44
|
--vd-colour--nav-side-tabs: #27252A;
|
@@ -93,13 +93,13 @@
|
|
93
93
|
--vd-colour--keyline: #C9C7CA;
|
94
94
|
--vd-colour--framing-inverse: #27252A;
|
95
95
|
--vd-colour--keyline-inverse: #37353A;
|
96
|
-
--vd-colour--
|
97
|
-
--vd-colour--
|
98
|
-
--vd-colour--
|
99
|
-
--vd-colour--
|
100
|
-
--vd-colour--
|
101
|
-
--vd-colour--
|
102
|
-
--vd-colour--shuttle-
|
96
|
+
--vd-colour--solar: #E6B03D;
|
97
|
+
--vd-colour--mars: #ED6B44;
|
98
|
+
--vd-colour--farout-pink: #DE3CEC;
|
99
|
+
--vd-colour--galaxy: #A02FB6;
|
100
|
+
--vd-colour--deep-purple: #501897;
|
101
|
+
--vd-colour--neptune: #6952F6;
|
102
|
+
--vd-colour--shuttle-grey: #5D5D5D;
|
103
103
|
--vd-colour--nav-top: #0B0B0B;
|
104
104
|
--vd-colour--nav-top-rgb: 11, 11, 11;
|
105
105
|
--vd-colour--nav-side-tabs: #E7E5E8;
|
@@ -153,13 +153,13 @@
|
|
153
153
|
--vd-colour--keyline: #37353A;
|
154
154
|
--vd-colour--framing-inverse: #E7E5E8;
|
155
155
|
--vd-colour--keyline-inverse: #C9C7CA;
|
156
|
-
--vd-colour--
|
157
|
-
--vd-colour--
|
158
|
-
--vd-colour--
|
159
|
-
--vd-colour--
|
160
|
-
--vd-colour--
|
161
|
-
--vd-colour--
|
162
|
-
--vd-colour--shuttle-
|
156
|
+
--vd-colour--solar: #E6B03D;
|
157
|
+
--vd-colour--mars: #ED6B44;
|
158
|
+
--vd-colour--farout-pink: #DE3CEC;
|
159
|
+
--vd-colour--galaxy: #A02FB6;
|
160
|
+
--vd-colour--deep-purple: #501897;
|
161
|
+
--vd-colour--neptune: #6952F6;
|
162
|
+
--vd-colour--shuttle-grey: #5D5D5D;
|
163
163
|
--vd-colour--nav-top: #0B0B0B;
|
164
164
|
--vd-colour--nav-top-rgb: 11, 11, 11;
|
165
165
|
--vd-colour--nav-side-tabs: #27252A;
|
@@ -198,7 +198,14 @@ a:link {
|
|
198
198
|
text-decoration: none;
|
199
199
|
}
|
200
200
|
|
201
|
-
a,
|
201
|
+
a,
|
202
|
+
button,
|
203
|
+
input,
|
204
|
+
textarea,
|
205
|
+
select,
|
206
|
+
details,
|
207
|
+
[ng-click],
|
208
|
+
.vd-fast-tap {
|
202
209
|
touch-action: manipulation;
|
203
210
|
}
|
204
211
|
|
@@ -1234,7 +1241,8 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
|
|
1234
1241
|
display: flex;
|
1235
1242
|
align-items: center;
|
1236
1243
|
}
|
1237
|
-
.vd-select-group > .vd-select,
|
1244
|
+
.vd-select-group > .vd-select,
|
1245
|
+
.vd-select-group .vd-select-container {
|
1238
1246
|
width: auto;
|
1239
1247
|
}
|
1240
1248
|
.vd-select-group .vd-input {
|
@@ -1242,13 +1250,16 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
|
|
1242
1250
|
margin-right: 0;
|
1243
1251
|
flex: 1;
|
1244
1252
|
}
|
1245
|
-
.vd-select-group .vd-input,
|
1253
|
+
.vd-select-group .vd-input,
|
1254
|
+
.vd-select-group .vd-select {
|
1246
1255
|
position: relative;
|
1247
1256
|
}
|
1248
|
-
.vd-select-group .vd-input:focus,
|
1257
|
+
.vd-select-group .vd-input:focus,
|
1258
|
+
.vd-select-group .vd-select:focus {
|
1249
1259
|
z-index: 103;
|
1250
1260
|
}
|
1251
|
-
.vd-select-group .vd-input:not(:first-child),
|
1261
|
+
.vd-select-group .vd-input:not(:first-child),
|
1262
|
+
.vd-select-group .vd-select:not(:first-child) {
|
1252
1263
|
border-top-left-radius: 0;
|
1253
1264
|
border-bottom-left-radius: 0;
|
1254
1265
|
margin-left: -2px;
|
@@ -1260,12 +1271,15 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
|
|
1260
1271
|
border-top-left-radius: 0;
|
1261
1272
|
border-bottom-left-radius: 0;
|
1262
1273
|
}
|
1263
|
-
.vd-select-group .vd-input:not(:last-child),
|
1274
|
+
.vd-select-group .vd-input:not(:last-child),
|
1275
|
+
.vd-select-group .vd-select:not(:last-child),
|
1264
1276
|
.vd-select-group .vd-select-container:not(:last-child) .vd-select {
|
1265
1277
|
border-top-right-radius: 0;
|
1266
1278
|
border-bottom-right-radius: 0;
|
1267
1279
|
}
|
1268
|
-
.vd-select-group .vd-input.vd-error,
|
1280
|
+
.vd-select-group .vd-input.vd-error,
|
1281
|
+
.vd-select-group .vd-select.vd-error,
|
1282
|
+
.vd-select-group .vd-select-container:not(:last-child).vd-error {
|
1269
1283
|
z-index: 102;
|
1270
1284
|
}
|
1271
1285
|
|
@@ -1640,25 +1654,25 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
|
|
1640
1654
|
font-weight: 700;
|
1641
1655
|
}
|
1642
1656
|
.vd-avatar--initials.vd-avatar--initials-1 {
|
1643
|
-
background-color: var(--vd-colour--
|
1657
|
+
background-color: var(--vd-colour--farout-pink);
|
1644
1658
|
}
|
1645
1659
|
.vd-avatar--initials.vd-avatar--initials-2 {
|
1646
|
-
background-color: var(--vd-colour--
|
1660
|
+
background-color: var(--vd-colour--mars);
|
1647
1661
|
}
|
1648
1662
|
.vd-avatar--initials.vd-avatar--initials-3 {
|
1649
|
-
background-color: var(--vd-colour--
|
1663
|
+
background-color: var(--vd-colour--solar);
|
1650
1664
|
}
|
1651
1665
|
.vd-avatar--initials.vd-avatar--initials-4 {
|
1652
|
-
background-color: var(--vd-colour--
|
1666
|
+
background-color: var(--vd-colour--galaxy);
|
1653
1667
|
}
|
1654
1668
|
.vd-avatar--initials.vd-avatar--initials-5 {
|
1655
|
-
background-color: var(--vd-colour--
|
1669
|
+
background-color: var(--vd-colour--neptune);
|
1656
1670
|
}
|
1657
1671
|
.vd-avatar--initials.vd-avatar--initials-6 {
|
1658
|
-
background-color: var(--vd-colour--
|
1672
|
+
background-color: var(--vd-colour--deep-purple);
|
1659
1673
|
}
|
1660
1674
|
.vd-avatar--initials.vd-avatar--initials-7 {
|
1661
|
-
background-color: var(--vd-colour--shuttle-
|
1675
|
+
background-color: var(--vd-colour--shuttle-grey);
|
1662
1676
|
}
|
1663
1677
|
|
1664
1678
|
.vd-avatar-multi {
|
@@ -2261,7 +2275,8 @@ a.vd-btn.disabled {
|
|
2261
2275
|
/* When buttons are disabled they don't trigger onMouseOver / onMouseOut events but the event will bubble
|
2262
2276
|
up from child elements. `vd-btn-hover-assist` occupies all of the space within the button so mouse events are
|
2263
2277
|
consistently triggered. */
|
2264
|
-
.vd-btn:disabled:hover > .vd-btn-hover-assist,
|
2278
|
+
.vd-btn:disabled:hover > .vd-btn-hover-assist,
|
2279
|
+
.vd-tab-button:disabled:hover > .vd-btn-hover-assist {
|
2265
2280
|
position: absolute;
|
2266
2281
|
top: 0;
|
2267
2282
|
right: 0;
|
@@ -2674,7 +2689,15 @@ vd-carousel-frame {
|
|
2674
2689
|
color: var(--vd-colour--text);
|
2675
2690
|
font-size: 15px;
|
2676
2691
|
}
|
2677
|
-
.vd-datepicker table,
|
2692
|
+
.vd-datepicker table,
|
2693
|
+
.vd-datepicker caption,
|
2694
|
+
.vd-datepicker tbody,
|
2695
|
+
.vd-datepicker tfoot,
|
2696
|
+
.vd-datepicker thead,
|
2697
|
+
.vd-datepicker tr,
|
2698
|
+
.vd-datepicker th,
|
2699
|
+
.vd-datepicker td,
|
2700
|
+
.vd-datepicker abbr,
|
2678
2701
|
.vd-datepicker-range table,
|
2679
2702
|
.vd-datepicker-range caption,
|
2680
2703
|
.vd-datepicker-range tbody,
|
@@ -3001,10 +3024,12 @@ vd-carousel-frame {
|
|
3001
3024
|
border: none;
|
3002
3025
|
}
|
3003
3026
|
|
3004
|
-
.vd-datepicker-range-no-end .is-startrange .pika-button,
|
3027
|
+
.vd-datepicker-range-no-end .is-startrange .pika-button,
|
3028
|
+
.vd-datepicker-range-no-end .is-endrange .pika-button {
|
3005
3029
|
border: none;
|
3006
3030
|
}
|
3007
|
-
.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button,
|
3031
|
+
.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button,
|
3032
|
+
.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
|
3008
3033
|
background: var(--vd-colour--do-highlight);
|
3009
3034
|
color: var(--vd-colour--text);
|
3010
3035
|
font-weight: normal;
|
@@ -3346,7 +3371,8 @@ vd-carousel-frame {
|
|
3346
3371
|
}
|
3347
3372
|
}
|
3348
3373
|
|
3349
|
-
vd-dott,
|
3374
|
+
vd-dott,
|
3375
|
+
.vd-dott {
|
3350
3376
|
display: inline-block;
|
3351
3377
|
width: 32px;
|
3352
3378
|
height: 32px;
|
@@ -4891,42 +4917,55 @@ vd-dott, .vd-dott {
|
|
4891
4917
|
--vd-section-padding-v: 16px;
|
4892
4918
|
}
|
4893
4919
|
}
|
4894
|
-
vd-section,
|
4920
|
+
vd-section,
|
4921
|
+
.vd-section {
|
4895
4922
|
display: block;
|
4896
4923
|
position: relative;
|
4897
4924
|
font-size: 15px;
|
4898
4925
|
padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
|
4899
4926
|
}
|
4900
|
-
vd-section .vd-section-wrap,
|
4927
|
+
vd-section .vd-section-wrap,
|
4928
|
+
.vd-section .vd-section-wrap {
|
4901
4929
|
display: block;
|
4902
4930
|
margin: 0 auto;
|
4903
4931
|
max-width: 1100px;
|
4904
4932
|
}
|
4905
|
-
vd-section .vd-section-container,
|
4933
|
+
vd-section .vd-section-container,
|
4934
|
+
.vd-section .vd-section-container {
|
4906
4935
|
margin: calc(var(--vd-section-padding-v) * -1) calc(var(--vd-section-padding-h) * -1);
|
4907
4936
|
padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
|
4908
4937
|
}
|
4909
|
-
vd-section vd-section,
|
4938
|
+
vd-section vd-section,
|
4939
|
+
vd-section .vd-section,
|
4940
|
+
.vd-section vd-section,
|
4941
|
+
.vd-section .vd-section {
|
4910
4942
|
padding: var(--vd-section-padding-v) 0;
|
4911
4943
|
}
|
4912
4944
|
@supports not (--a: 0) {
|
4913
|
-
vd-section,
|
4945
|
+
vd-section,
|
4946
|
+
.vd-section {
|
4914
4947
|
padding: 24px 48px;
|
4915
4948
|
}
|
4916
|
-
vd-section .vd-section-container,
|
4949
|
+
vd-section .vd-section-container,
|
4950
|
+
.vd-section .vd-section-container {
|
4917
4951
|
margin: -24px -48px;
|
4918
4952
|
padding: 24px 48px;
|
4919
4953
|
}
|
4920
|
-
vd-section vd-section,
|
4954
|
+
vd-section vd-section,
|
4955
|
+
vd-section .vd-section,
|
4956
|
+
.vd-section vd-section,
|
4957
|
+
.vd-section .vd-section {
|
4921
4958
|
padding: 24px 0;
|
4922
4959
|
}
|
4923
4960
|
}
|
4924
4961
|
|
4925
|
-
.vd-section--secondary,
|
4962
|
+
.vd-section--secondary,
|
4963
|
+
.vd-section--secondary .vd-section-container {
|
4926
4964
|
background-color: var(--vd-colour--framing);
|
4927
4965
|
}
|
4928
4966
|
|
4929
|
-
.vd-section--tertiary,
|
4967
|
+
.vd-section--tertiary,
|
4968
|
+
.vd-section--tertiary .vd-section-container {
|
4930
4969
|
background-color: var(--vd-colour--box);
|
4931
4970
|
}
|
4932
4971
|
|
@@ -4966,7 +5005,8 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
|
|
4966
5005
|
opacity: 0;
|
4967
5006
|
}
|
4968
5007
|
|
4969
|
-
.vd-section--action-bar,
|
5008
|
+
.vd-section--action-bar,
|
5009
|
+
.vd-section--action-bar .vd-section-container {
|
4970
5010
|
background-color: var(--vd-colour--framing);
|
4971
5011
|
}
|
4972
5012
|
.vd-section--action-bar .vd-section-wrap {
|
@@ -5354,7 +5394,9 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
|
|
5354
5394
|
font-size: 12px;
|
5355
5395
|
font-weight: 700;
|
5356
5396
|
}
|
5357
|
-
.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider,
|
5397
|
+
.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider,
|
5398
|
+
.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander,
|
5399
|
+
.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
|
5358
5400
|
display: none;
|
5359
5401
|
}
|
5360
5402
|
.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer {
|
@@ -5382,7 +5424,8 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
|
|
5382
5424
|
.vd-sidebar.vd-sidebar--new .vd-sidebar-tabs .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
|
5383
5425
|
display: none;
|
5384
5426
|
}
|
5385
|
-
.vd-sidebar.vd-sidebar--new .vd-sidebar-expander,
|
5427
|
+
.vd-sidebar.vd-sidebar--new .vd-sidebar-expander,
|
5428
|
+
.vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
|
5386
5429
|
display: block !important;
|
5387
5430
|
}
|
5388
5431
|
|
@@ -5796,46 +5839,66 @@ table {
|
|
5796
5839
|
.vd-table td {
|
5797
5840
|
vertical-align: middle;
|
5798
5841
|
}
|
5799
|
-
.vd-table td,
|
5842
|
+
.vd-table td,
|
5843
|
+
.vd-table th {
|
5800
5844
|
padding: 20px 40px;
|
5801
5845
|
position: relative;
|
5802
5846
|
white-space: normal;
|
5803
5847
|
word-break: break-word;
|
5804
5848
|
}
|
5805
|
-
.vd-table td.vd-tight,
|
5849
|
+
.vd-table td.vd-tight,
|
5850
|
+
.vd-table th.vd-tight {
|
5806
5851
|
white-space: nowrap;
|
5807
5852
|
width: 1%;
|
5808
5853
|
}
|
5809
|
-
.vd-table td.vd-truncate,
|
5854
|
+
.vd-table td.vd-truncate,
|
5855
|
+
.vd-table td.vd-truncate *,
|
5856
|
+
.vd-table th.vd-truncate,
|
5857
|
+
.vd-table th.vd-truncate * {
|
5810
5858
|
text-overflow: ellipsis;
|
5811
5859
|
white-space: nowrap;
|
5812
5860
|
overflow: hidden;
|
5813
5861
|
}
|
5814
|
-
.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l,
|
5862
|
+
.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l,
|
5863
|
+
.vd-table th.vd-sml-pad-h,
|
5864
|
+
.vd-table th.vd-sml-pad-l {
|
5815
5865
|
padding-left: 8px;
|
5816
5866
|
}
|
5817
|
-
.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r,
|
5867
|
+
.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r,
|
5868
|
+
.vd-table th.vd-sml-pad-h,
|
5869
|
+
.vd-table th.vd-sml-pad-r {
|
5818
5870
|
padding-right: 8px;
|
5819
5871
|
}
|
5820
|
-
.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l,
|
5872
|
+
.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l,
|
5873
|
+
.vd-table th.vd-no-pad-h,
|
5874
|
+
.vd-table th.vd-no-pad-l {
|
5821
5875
|
padding-left: 0;
|
5822
5876
|
}
|
5823
|
-
.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r,
|
5877
|
+
.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r,
|
5878
|
+
.vd-table th.vd-no-pad-h,
|
5879
|
+
.vd-table th.vd-no-pad-r {
|
5824
5880
|
padding-right: 0;
|
5825
5881
|
}
|
5826
|
-
.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b,
|
5882
|
+
.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b,
|
5883
|
+
.vd-table th.vd-no-pad-v,
|
5884
|
+
.vd-table th.vd-no-pad-b {
|
5827
5885
|
padding-bottom: 0;
|
5828
5886
|
}
|
5829
|
-
.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t,
|
5887
|
+
.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t,
|
5888
|
+
.vd-table th.vd-no-pad-v,
|
5889
|
+
.vd-table th.vd-no-pad-t {
|
5830
5890
|
padding-top: 0;
|
5831
5891
|
}
|
5832
|
-
.vd-table td.vd-valign-t,
|
5892
|
+
.vd-table td.vd-valign-t,
|
5893
|
+
.vd-table th.vd-valign-t {
|
5833
5894
|
vertical-align: top;
|
5834
5895
|
}
|
5835
|
-
.vd-table td.vd-valign-m,
|
5896
|
+
.vd-table td.vd-valign-m,
|
5897
|
+
.vd-table th.vd-valign-m {
|
5836
5898
|
vertical-align: middle;
|
5837
5899
|
}
|
5838
|
-
.vd-table td.vd-valign-b,
|
5900
|
+
.vd-table td.vd-valign-b,
|
5901
|
+
.vd-table th.vd-valign-b {
|
5839
5902
|
vertical-align: bottom;
|
5840
5903
|
}
|
5841
5904
|
.vd-table.vd-table--data {
|
@@ -7329,21 +7392,21 @@ td.vd-hide-print {
|
|
7329
7392
|
}
|
7330
7393
|
.vd-bar-chart-container .y.axis text {
|
7331
7394
|
font-size: 14px;
|
7332
|
-
fill: #
|
7395
|
+
fill: #76a27b;
|
7333
7396
|
}
|
7334
7397
|
.vd-bar-chart-container .bar {
|
7335
|
-
fill: #
|
7398
|
+
fill: #009d12;
|
7336
7399
|
opacity: 0.15;
|
7337
7400
|
}
|
7338
7401
|
.vd-bar-chart-container .top {
|
7339
|
-
fill: #
|
7402
|
+
fill: #009d12;
|
7340
7403
|
}
|
7341
7404
|
.vd-bar-chart-container .bar-label {
|
7342
7405
|
font-size: 13px;
|
7343
7406
|
fill: #959595;
|
7344
7407
|
}
|
7345
7408
|
.vd-bar-chart-container .bar-chart-background {
|
7346
|
-
fill: #
|
7409
|
+
fill: #f2f2f2;
|
7347
7410
|
}
|
7348
7411
|
|
7349
7412
|
.vd-currency-input-container {
|
@@ -7678,10 +7741,14 @@ td.vd-hide-print {
|
|
7678
7741
|
|
7679
7742
|
/* stylelint-disable vend/use-colour-function */
|
7680
7743
|
/* stylelint-enable vend/use-colour-function */
|
7681
|
-
.vd-line-graph-container .vd-grid.vd-y .domain,
|
7744
|
+
.vd-line-graph-container .vd-grid.vd-y .domain,
|
7745
|
+
.vd-line-graph-container .vd-axis.vd-y .domain,
|
7746
|
+
.vd-line-graph-container .vd-axis.vd-x .domain {
|
7682
7747
|
display: none;
|
7683
7748
|
}
|
7684
|
-
.vd-line-graph-container .vd-grid.vd-y .tick line,
|
7749
|
+
.vd-line-graph-container .vd-grid.vd-y .tick line,
|
7750
|
+
.vd-line-graph-container .vd-axis.vd-y .tick line,
|
7751
|
+
.vd-line-graph-container .vd-axis.vd-x .tick line {
|
7685
7752
|
stroke: var(--vd-colour--framing);
|
7686
7753
|
stroke-width: 1px;
|
7687
7754
|
fill: transparent;
|
@@ -7704,10 +7771,10 @@ td.vd-hide-print {
|
|
7704
7771
|
.vd-line-graph-container .vd-line-with-fill {
|
7705
7772
|
fill: transparent;
|
7706
7773
|
stroke-width: 2px;
|
7707
|
-
stroke: #
|
7774
|
+
stroke: #009d12;
|
7708
7775
|
}
|
7709
7776
|
.vd-line-graph-container .vd-line-fill {
|
7710
|
-
fill: #
|
7777
|
+
fill: #009d12;
|
7711
7778
|
opacity: 0.1;
|
7712
7779
|
stroke-width: 0;
|
7713
7780
|
}
|
@@ -7717,7 +7784,7 @@ td.vd-hide-print {
|
|
7717
7784
|
stroke-width: 2px;
|
7718
7785
|
}
|
7719
7786
|
.vd-line-graph-container .vd-plot-point-with-fill {
|
7720
|
-
fill: #
|
7787
|
+
fill: #009d12;
|
7721
7788
|
stroke: #fff;
|
7722
7789
|
}
|
7723
7790
|
.vd-line-graph-container .vd-plot-point-hidden {
|
@@ -7851,14 +7918,20 @@ td.vd-hide-print {
|
|
7851
7918
|
.vd-modal-inner-container > .vd-g-row {
|
7852
7919
|
width: 100%;
|
7853
7920
|
}
|
7854
|
-
.vd-modal-inner-container .vd-breadcrumb,
|
7921
|
+
.vd-modal-inner-container .vd-breadcrumb,
|
7922
|
+
.vd-modal-inner-container .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content,
|
7923
|
+
.vd-modal-inner-container .vd-dialog-actions {
|
7855
7924
|
margin-left: var(--vd-dialog-spacing);
|
7856
7925
|
margin-right: var(--vd-dialog-spacing);
|
7857
7926
|
}
|
7858
|
-
.vd-modal-inner-container .vd-breadcrumb:first-child,
|
7927
|
+
.vd-modal-inner-container .vd-breadcrumb:first-child,
|
7928
|
+
.vd-modal-inner-container .vd-dialog-header:first-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:first-child,
|
7929
|
+
.vd-modal-inner-container .vd-dialog-actions:first-child {
|
7859
7930
|
margin-top: var(--vd-dialog-spacing);
|
7860
7931
|
}
|
7861
|
-
.vd-modal-inner-container .vd-breadcrumb:last-child,
|
7932
|
+
.vd-modal-inner-container .vd-breadcrumb:last-child,
|
7933
|
+
.vd-modal-inner-container .vd-dialog-header:last-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:last-child,
|
7934
|
+
.vd-modal-inner-container .vd-dialog-actions:last-child {
|
7862
7935
|
margin-bottom: var(--vd-dialog-spacing);
|
7863
7936
|
}
|
7864
7937
|
.vd-modal-inner-container .vd-breadcrumb + .vd-dialog-header, .vd-modal-inner-container .vd-breadcrumb + .vd-modal-content, .vd-modal-inner-container .vd-breadcrumb + .vd-dialog-actions {
|
@@ -7992,7 +8065,8 @@ td.vd-hide-print {
|
|
7992
8065
|
padding-right: 0;
|
7993
8066
|
padding-left: 6px;
|
7994
8067
|
}
|
7995
|
-
.vd-table-list-cell--toggle + .vd-table-list-cell,
|
8068
|
+
.vd-table-list-cell--toggle + .vd-table-list-cell,
|
8069
|
+
.vd-table-list-cell--toggle + .vd-table-list-head-cell {
|
7996
8070
|
padding-left: 0;
|
7997
8071
|
}
|
7998
8072
|
.vd-table-list-cell--toggle .vd-table-list-toggle-icon {
|
package/package.json
CHANGED
@@ -1,34 +1 @@
|
|
1
|
-
{
|
2
|
-
"name": "@lightspeed/design-system-css",
|
3
|
-
"version": "1.2.0",
|
4
|
-
"description": "Lightspeed's Design System in CSS",
|
5
|
-
"author": "Lightspeed Commerce Inc.",
|
6
|
-
"license": "SEE LICENSE IN LICENSE.md",
|
7
|
-
"main": "dist/index.css",
|
8
|
-
"publishConfig": {
|
9
|
-
"access": "public"
|
10
|
-
},
|
11
|
-
"files": [
|
12
|
-
"src",
|
13
|
-
"dist"
|
14
|
-
],
|
15
|
-
"scripts": {
|
16
|
-
"prebuild": "rm -rf dist",
|
17
|
-
"build": "yarn lint && yarn build:css && yarn build:retrocompatibility",
|
18
|
-
"build:css": "sass --load-path=../../node_modules -q src/index.scss:dist/index.css",
|
19
|
-
"build:retrocompatibility": "cp dist/index.css dist/vend-styles.css",
|
20
|
-
"watch": "yarn lint && yarn build:css --watch",
|
21
|
-
"test": "true",
|
22
|
-
"lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
|
23
|
-
},
|
24
|
-
"dependencies": {
|
25
|
-
"@lightspeed/design-system-tokens": "^1.0.0"
|
26
|
-
},
|
27
|
-
"devDependencies": {
|
28
|
-
"@types/node": "^16.11.2",
|
29
|
-
"sass": "~1.45.2",
|
30
|
-
"stylelint": "^13.5.0",
|
31
|
-
"stylelint-scss": "^3.17.2",
|
32
|
-
"ts-node": "^10.3.1"
|
33
|
-
}
|
34
|
-
}
|
1
|
+
{"name":"@lightspeed/design-system-css","version":"1.2.1","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^1.1.0"},"devDependencies":{"@types/node":"^16.11.2","sass":"~1.45.2","stylelint":"^13.5.0","stylelint-scss":"^3.17.2","ts-node":"^10.3.1"}}
|
@@ -1 +1 @@
|
|
1
|
-
$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/'
|
1
|
+
$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/';
|
@@ -1,23 +1,26 @@
|
|
1
|
-
|
2
|
-
const
|
1
|
+
/* eslint-disable func-names */
|
2
|
+
const stylelint = require('stylelint');
|
3
3
|
|
4
|
-
const
|
4
|
+
const ruleName = 'vend/use-colour-function';
|
5
|
+
|
6
|
+
const message = '[VEND] Use the vd-colour SASS function when defining a colour.';
|
5
7
|
const messages = stylelint.utils.ruleMessages(ruleName, {
|
6
8
|
expected() {
|
7
|
-
return message
|
9
|
+
return message;
|
8
10
|
},
|
9
|
-
})
|
11
|
+
});
|
10
12
|
|
11
|
-
module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
13
|
+
module.exports = stylelint.createPlugin(ruleName, function (enabled) {
|
12
14
|
if (!enabled) {
|
13
|
-
return
|
15
|
+
return;
|
14
16
|
}
|
15
17
|
|
16
18
|
// Matches hex, 'rgb', (not -rgb, ignores vend sass functions and values that are prefixed with -) and hsl colours; 'named' colours are
|
17
19
|
// prohibited via the `color-named` rule
|
18
|
-
const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}
|
20
|
+
const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}$/;
|
19
21
|
|
20
|
-
|
22
|
+
// eslint-disable-next-line consistent-return
|
23
|
+
return function (root, result) {
|
21
24
|
// Ensure no named colours are used
|
22
25
|
stylelint.utils.checkAgainstRule(
|
23
26
|
{
|
@@ -25,7 +28,7 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
|
25
28
|
ruleSettings: ['never'],
|
26
29
|
root,
|
27
30
|
},
|
28
|
-
warning => {
|
31
|
+
(warning) => {
|
29
32
|
stylelint.utils.report({
|
30
33
|
message,
|
31
34
|
ruleName,
|
@@ -33,16 +36,16 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
|
33
36
|
node: warning.node,
|
34
37
|
line: warning.line,
|
35
38
|
column: warning.column,
|
36
|
-
})
|
39
|
+
});
|
37
40
|
}
|
38
|
-
)
|
41
|
+
);
|
39
42
|
|
40
|
-
root.walkDecls(function(decl) {
|
41
|
-
const { value, prop } = decl
|
42
|
-
const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER)
|
43
|
+
root.walkDecls(function (decl) {
|
44
|
+
const { value, prop } = decl;
|
45
|
+
const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER);
|
43
46
|
|
44
47
|
if (!isUnsupportedColourValue) {
|
45
|
-
return
|
48
|
+
return;
|
46
49
|
}
|
47
50
|
|
48
51
|
stylelint.utils.report({
|
@@ -51,10 +54,10 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
|
51
54
|
message: messages.expected(`${prop}, ${value}`),
|
52
55
|
node: decl,
|
53
56
|
word: value,
|
54
|
-
})
|
55
|
-
})
|
56
|
-
}
|
57
|
-
})
|
57
|
+
});
|
58
|
+
});
|
59
|
+
};
|
60
|
+
});
|
58
61
|
|
59
|
-
module.exports.ruleName = ruleName
|
60
|
-
module.exports.messages = messages
|
62
|
+
module.exports.ruleName = ruleName;
|
63
|
+
module.exports.messages = messages;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
/* stylelint-disable vend/use-colour-function */
|
2
|
-
$bar-chart-background-fill: #
|
3
|
-
$bar-chart-primary-text-color: #
|
2
|
+
$bar-chart-background-fill: #f2f2f2;
|
3
|
+
$bar-chart-primary-text-color: #76a27b;
|
4
4
|
$bar-chart-secondary-text-color: #959595;
|
5
|
-
$chart-fill: #
|
6
|
-
$chart-line: #
|
5
|
+
$chart-fill: #009d12;
|
6
|
+
$chart-line: #009d12;
|
7
7
|
/* stylelint-enable vend/use-colour-function */
|
8
8
|
|
9
9
|
$bar-chart-primary-text-size: 14px;
|
@@ -12,7 +12,7 @@ $bar-chart-secondary-text-size: 13px;
|
|
12
12
|
.vd-bar-chart-container {
|
13
13
|
font-size: 11px;
|
14
14
|
|
15
|
-
.y.axis .domain{
|
15
|
+
.y.axis .domain {
|
16
16
|
stroke: none;
|
17
17
|
display: none;
|
18
18
|
}
|
@@ -21,20 +21,20 @@ $bar-chart-secondary-text-size: 13px;
|
|
21
21
|
display: none;
|
22
22
|
}
|
23
23
|
|
24
|
-
.y.axis text{
|
24
|
+
.y.axis text {
|
25
25
|
font-size: $bar-chart-primary-text-size;
|
26
26
|
fill: $bar-chart-primary-text-color;
|
27
27
|
}
|
28
28
|
|
29
|
-
.bar{
|
29
|
+
.bar {
|
30
30
|
fill: $chart-fill;
|
31
31
|
opacity: 0.15;
|
32
32
|
}
|
33
|
-
.top{
|
33
|
+
.top {
|
34
34
|
fill: $chart-line;
|
35
35
|
}
|
36
36
|
|
37
|
-
.bar-label{
|
37
|
+
.bar-label {
|
38
38
|
font-size: $bar-chart-secondary-text-size;
|
39
39
|
fill: $bar-chart-secondary-text-color;
|
40
40
|
}
|