@lightspeed/design-system-css 1.1.2 → 1.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. package/README.md +1 -1
  2. package/dist/index.css +382 -240
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +382 -240
  5. package/package.json +1 -34
  6. package/src/images-ui/images-ui-ns.scss +1 -1
  7. package/src/vend-stylelint/use-colour-function.js +25 -22
  8. package/src/vend-styles/components/BarChart/BarChart.scss +9 -9
  9. package/src/vend-styles/components/CodeInput/CodeInput.scss +0 -1
  10. package/src/vend-styles/components/DatePicker/DatePicker.scss +3 -11
  11. package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +1 -1
  12. package/src/vend-styles/components/LineChart/LineChart.scss +5 -4
  13. package/src/vend-styles/components/Modal/Modal.scss +25 -12
  14. package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -2
  15. package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
  16. package/src/vend-styles/components/TableList/TableList.scss +5 -1
  17. package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +1 -6
  18. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +15 -7
  19. package/src/vend.ui/behaviours/vd-align/vd-align.scss +9 -3
  20. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +4 -3
  21. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +7 -7
  22. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
  23. package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -1
  24. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +7 -3
  25. package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +5 -1
  26. package/src/vend.ui/components/vd-banner/vd-banner.scss +8 -4
  27. package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
  28. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +15 -15
  29. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +4 -3
  30. package/src/vend.ui/components/vd-btn/vd-btn.scss +11 -9
  31. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -2
  32. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +33 -12
  33. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +2 -2
  34. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +16 -6
  35. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +3 -1
  36. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +13 -13
  37. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
  38. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +1 -1
  39. package/src/vend.ui/components/vd-dott/vd-dott.scss +5 -4
  40. package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +1 -1
  41. package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -2
  42. package/src/vend.ui/components/vd-flex/vd-flex.scss +39 -13
  43. package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +2 -2
  44. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +0 -2
  45. package/src/vend.ui/components/vd-input/vd-input-ns.scss +19 -12
  46. package/src/vend.ui/components/vd-input/vd-input.scss +12 -4
  47. package/src/vend.ui/components/vd-link/vd-link.scss +12 -4
  48. package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
  49. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +22 -7
  50. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
  51. package/src/vend.ui/components/vd-nav-divider/vd-nav-divider.scss +14 -0
  52. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +1 -1
  53. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  54. package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
  55. package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
  56. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
  57. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
  58. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
  59. package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
  60. package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
  61. package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
  62. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
  63. package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
  64. package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
  65. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  66. package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
  67. package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +95 -0
  68. package/src/vend.ui/components/vd-sidebar/vd-sidebar-ns.scss +23 -0
  69. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +113 -0
  70. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +4 -4
  71. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +5 -2
  72. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +12 -3
  73. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +42 -27
  74. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
  75. package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
  76. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
  77. package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
  78. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
  79. package/src/vend.ui/components/vd-topbar/vd-topbar.scss +2 -2
  80. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
  81. package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
  82. package/src/vend.ui/styles/global/_grid.scss +5 -5
  83. package/src/vend.ui/styles/global/_layout.scss +2 -2
  84. package/src/vend.ui/styles/global/_non-styles.scss +1 -0
  85. package/src/vend.ui/styles/global/_normalise.scss +8 -1
  86. package/src/vend.ui/styles/global/_z-index.scss +0 -8
  87. package/src/vend.ui/styles/global/colour/_base.scss +8 -13
  88. package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
  89. package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
  90. package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
  91. package/src/vend.ui/styles/global/effects/_effects.scss +51 -6
  92. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
  93. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
  94. package/src/vend.ui/styles/global/text/_base.scss +1 -1
  95. package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
  96. package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
  97. package/src/vend.ui/styles/global/text/_text.scss +2 -2
  98. package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
  99. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
  100. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
  101. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
  102. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
  103. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
  104. package/src/vend.ui/styles/navi/_nv-topnav.scss +4 -4
  105. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
  106. package/src/vend.ui/styles/navi/navi.scss +8 -9
  107. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
  108. package/src/vend.ui/styles/navi/non-styles/_variables.scss +0 -11
  109. package/src/vend.ui/styles/vend-ui.scss +2 -0
  110. package/CHANGELOG.md +0 -186
  111. package/src/vend.ui/styles/navi/_nv-sidenav.scss +0 -143
package/package.json CHANGED
@@ -1,34 +1 @@
1
- {
2
- "name": "@lightspeed/design-system-css",
3
- "version": "1.1.2",
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
- "build: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.3.0","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
- const stylelint = require('stylelint')
2
- const ruleName = 'vend/use-colour-function'
1
+ /* eslint-disable func-names */
2
+ const stylelint = require('stylelint');
3
3
 
4
- const message = '[VEND] Use the vd-colour SASS function when defining a colour.'
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
- return function(root, result) {
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: #F2F2F2;
3
- $bar-chart-primary-text-color: #76A27B;
2
+ $bar-chart-background-fill: #f2f2f2;
3
+ $bar-chart-primary-text-color: #76a27b;
4
4
  $bar-chart-secondary-text-color: #959595;
5
- $chart-fill: #009D12;
6
- $chart-line: #009D12;
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
  }
@@ -22,4 +22,3 @@
22
22
  margin-right: vd-grid-unit(3);
23
23
  }
24
24
  }
25
-
@@ -1,4 +1,4 @@
1
- @use "sass:math";
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: #009D12;
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, .vd-axis.vd-y, .vd-axis.vd-x {
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 (small) {
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 (xsmall) {
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 ($vd-breakpoint-medium) {
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 (xsmall) {
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, .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & .vd-modal-content, .vd-dialog-actions {
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, & + .vd-modal-content, & + .vd-dialog-actions {
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, & + .vd-modal-content, & + .vd-dialog-actions {
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, & + .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & + .vd-modal-content, & + .vd-dialog-actions {
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 ($vd-breakpoint-medium) {
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, & ~ .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & ~ .vd-modal-content, & ~ .vd-dialog-actions {
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: ((small 600px) (small-with-sidebar 880px) (medium 720px) (medium-with-sidebar 1000px) (large 1000px));
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: ((small 600px) (small-with-sidebar 600px) (medium 720px) (medium-with-sidebar 720px) (large 1000px));
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
 
@@ -15,7 +15,7 @@
15
15
  padding: 0 var(--vd-dialog-spacing) var(--vd-dialog-spacing);
16
16
  }
17
17
 
18
- @include vd-viewport-media-max (xsmall) {
18
+ @include vd-viewport-media-max(xsmall) {
19
19
  -webkit-overflow-scrolling: touch;
20
20
  }
21
21
  }
@@ -81,7 +81,8 @@
81
81
  padding-left: 6px;
82
82
 
83
83
  // Adjacent cell always has the same spacing
84
- + .vd-table-list-cell, + .vd-table-list-head-cell {
84
+ + .vd-table-list-cell,
85
+ + .vd-table-list-head-cell {
85
86
  padding-left: 0;
86
87
  }
87
88
 
@@ -164,6 +165,9 @@
164
165
  // -----------------------------------------------------------------
165
166
  .vd-table-list-row {
166
167
  border-bottom: vd-border(framing);
168
+ &.vd-table-list-row--active {
169
+ background-color: vd-colour(go-highlight);
170
+ }
167
171
  }
168
172
 
169
173
  // TABLE ROWS - EXPANDABLE ROW
@@ -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 "../../../../styles/global/_non-styles";
2
- @import "./vd-flex-ns";
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 { flex: 0 0 auto; }
23
- .vd-flex--fieldset-row { flex-direction: row; }
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 { margin-bottom: 0; }
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 { flex-direction: column; }
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 { text-align: left !important; }
2
- .vd-align-center { text-align: center !important; }
3
- .vd-align-right { text-align: right !important; }
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 { // stylelint-disable-line selector-type-no-unknown
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 { // stylelint-disable-line selector-type-no-unknown
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(new-york-pink);
52
+ background-color: vd-colour(farout-pink);
53
53
  }
54
54
 
55
55
  &.vd-avatar--initials-2 {
56
- background-color: vd-colour(tacao);
56
+ background-color: vd-colour(mars);
57
57
  }
58
58
 
59
59
  &.vd-avatar--initials-3 {
60
- background-color: vd-colour(golden-sand);
60
+ background-color: vd-colour(solar);
61
61
  }
62
62
 
63
63
  &.vd-avatar--initials-4 {
64
- background-color: vd-colour(gothic);
64
+ background-color: vd-colour(galaxy);
65
65
  }
66
66
 
67
67
  &.vd-avatar--initials-5 {
68
- background-color: vd-colour(sinbad);
68
+ background-color: vd-colour(neptune);
69
69
  }
70
70
 
71
71
  &.vd-avatar--initials-6 {
72
- background-color: vd-colour(lavender-purple);
72
+ background-color: vd-colour(deep-purple);
73
73
  }
74
74
 
75
75
  &.vd-avatar--initials-7 {
76
- background-color: vd-colour(shuttle-gray);
76
+ background-color: vd-colour(shuttle-grey);
77
77
  }
78
78
  }
@@ -13,7 +13,7 @@
13
13
  position: relative;
14
14
 
15
15
  // Ensure placeholder backgrounds are the same size regardless of tile size
16
- &[vd-lazy-load*="placeholder.svg"] {
16
+ &[vd-lazy-load*='placeholder.svg'] {
17
17
  background-size: $vd-avatar-multi-tile-placeholder-size;
18
18
  }
19
19
  }
@@ -1 +1 @@
1
- @import "./vd-id-badge/vd-id-badge";
1
+ @import './vd-id-badge/vd-id-badge';
@@ -33,7 +33,9 @@
33
33
  border-radius: 0;
34
34
  }
35
35
 
36
- &:hover, &:active, &:focus {
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, &:active, &:focus {
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($primary-colour, $text-colour: vd-colour(text-action), $anchor-colour: vd-colour(text-action)) {
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 ( not (--a: 0)) {
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,4 +1,4 @@
1
1
  .vd-bg--upsell {
2
2
  background: vd-colour(background)
3
- url("#{$vd-images-cdn-path}backgrounds/dashboard-upsell-bg-v1.svg");
3
+ url('#{$vd-images-cdn-path}backgrounds/dashboard-upsell-bg-v1.svg');
4
4
  }