@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.
Files changed (103) hide show
  1. package/README.md +2 -39
  2. package/dist/index.css +151 -80
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +151 -80
  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 +2 -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-card/vd-card-ns.scss +0 -1
  32. package/src/vend.ui/components/vd-card/vd-card.scss +0 -4
  33. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -2
  34. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +33 -12
  35. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +2 -2
  36. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +16 -6
  37. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +3 -1
  38. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +13 -13
  39. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
  40. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +1 -1
  41. package/src/vend.ui/components/vd-dott/vd-dott.scss +5 -4
  42. package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +1 -1
  43. package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -2
  44. package/src/vend.ui/components/vd-flex/vd-flex.scss +39 -13
  45. package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +2 -2
  46. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +0 -2
  47. package/src/vend.ui/components/vd-input/vd-input-ns.scss +19 -12
  48. package/src/vend.ui/components/vd-input/vd-input.scss +12 -4
  49. package/src/vend.ui/components/vd-link/vd-link.scss +12 -4
  50. package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
  51. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +22 -7
  52. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
  53. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +1 -1
  54. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  55. package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
  56. package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
  57. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
  58. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
  59. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
  60. package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
  61. package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
  62. package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
  63. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
  64. package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
  65. package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
  66. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  67. package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
  68. package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +5 -2
  69. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +2 -5
  70. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +5 -2
  71. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
  72. package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
  73. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
  74. package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
  75. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
  76. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
  77. package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
  78. package/src/vend.ui/styles/global/_grid.scss +5 -5
  79. package/src/vend.ui/styles/global/_layout.scss +2 -2
  80. package/src/vend.ui/styles/global/_normalise.scss +8 -1
  81. package/src/vend.ui/styles/global/_z-index.scss +0 -8
  82. package/src/vend.ui/styles/global/colour/_base.scss +8 -13
  83. package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
  84. package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
  85. package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
  86. package/src/vend.ui/styles/global/effects/_effects.scss +19 -9
  87. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
  88. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
  89. package/src/vend.ui/styles/global/text/_base.scss +1 -1
  90. package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
  91. package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
  92. package/src/vend.ui/styles/global/text/_text.scss +2 -2
  93. package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
  94. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
  95. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
  96. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
  97. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
  98. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
  99. package/src/vend.ui/styles/navi/_nv-topnav.scss +4 -4
  100. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
  101. package/src/vend.ui/styles/navi/navi.scss +8 -8
  102. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
  103. package/CHANGELOG.md +0 -192
@@ -1,7 +1,16 @@
1
1
  @keyframes vd-checkbox-checked {
2
- 0% { height: 0; width: 0; }
3
- 25% { height: 0; width: $vd-checkbox-tick-width; }
4
- 50% { height: $vd-checkbox-tick-height; width: $vd-checkbox-tick-width; }
2
+ 0% {
3
+ height: 0;
4
+ width: 0;
5
+ }
6
+ 25% {
7
+ height: 0;
8
+ width: $vd-checkbox-tick-width;
9
+ }
10
+ 50% {
11
+ height: $vd-checkbox-tick-height;
12
+ width: $vd-checkbox-tick-width;
13
+ }
5
14
  }
6
15
 
7
16
  /* label-only-checkbox is for when only the checkbox and label should respond to onlick. Not the description aswell. */
@@ -11,8 +20,12 @@
11
20
  position: relative;
12
21
  margin: 0 vd-grid-unit(2);
13
22
 
14
- &:first-child { margin-left: 0 }
15
- &:last-child { margin-right: 0 }
23
+ &:first-child {
24
+ margin-left: 0;
25
+ }
26
+ &:last-child {
27
+ margin-right: 0;
28
+ }
16
29
  }
17
30
 
18
31
  .vd-label-only-checkbox {
@@ -26,10 +39,12 @@
26
39
  flex-direction: column;
27
40
  cursor: pointer;
28
41
 
29
- &:last-child { margin-bottom: 0 }
42
+ &:last-child {
43
+ margin-bottom: 0;
44
+ }
30
45
  }
31
46
 
32
- .vd-label-only-checkbox-container{
47
+ .vd-label-only-checkbox-container {
33
48
  display: flex;
34
49
  }
35
50
 
@@ -46,9 +61,11 @@
46
61
  cursor: pointer;
47
62
  }
48
63
 
49
- .vd-checkbox-label { margin-left: $vd-checkbox-spacing; }
64
+ .vd-checkbox-label {
65
+ margin-left: $vd-checkbox-spacing;
66
+ }
50
67
 
51
- .vd-label-only-checkbox-label {
68
+ .vd-label-only-checkbox-label {
52
69
  margin: auto 0 auto $vd-checkbox-spacing;
53
70
  }
54
71
 
@@ -58,7 +75,9 @@
58
75
  margin-left: $vd-checkbox-length + $vd-checkbox-spacing;
59
76
  }
60
77
 
61
- .vd-checkbox-input { @extend %vd-invisible-checkbox-input; }
78
+ .vd-checkbox-input {
79
+ @extend %vd-invisible-checkbox-input;
80
+ }
62
81
 
63
82
  .vd-checkbox-tick {
64
83
  flex-shrink: 0;
@@ -91,7 +110,7 @@
91
110
 
92
111
  .vd-checkbox-input:hover + .vd-checkbox-tick:after {
93
112
  opacity: 1;
94
- }
113
+ }
95
114
 
96
115
  // Checked
97
116
  .vd-checkbox-input:checked + .vd-checkbox-tick {
@@ -114,7 +133,9 @@
114
133
  cursor: not-allowed;
115
134
  filter: grayscale(100%);
116
135
 
117
- &:hover:not(:checked) + .vd-checkbox-tick:after { opacity: 0; }
136
+ &:hover:not(:checked) + .vd-checkbox-tick:after {
137
+ opacity: 0;
138
+ }
118
139
 
119
140
  ~ .vd-checkbox-label {
120
141
  opacity: $vd-opacity;
@@ -40,7 +40,7 @@ $vd-datepicker-time-input-border-radius: 0 $vd-border-radius $vd-border-radius 0
40
40
 
41
41
  // Mixins
42
42
  @mixin next-prev-arrow-common {
43
- content: " ";
43
+ content: ' ';
44
44
  visibility: visible;
45
45
  position: absolute;
46
46
  width: $vd-datepicker-next-prev-button-icon-size;
@@ -63,7 +63,7 @@ $vd-datepicker-time-input-border-radius: 0 $vd-border-radius $vd-border-radius 0
63
63
 
64
64
  @mixin vd-datepicker-select-arrow-common {
65
65
  position: absolute;
66
- content: " ";
66
+ content: ' ';
67
67
  pointer-events: none;
68
68
  visibility: visible;
69
69
  width: 0;
@@ -1,4 +1,4 @@
1
- @use "sass:math";
1
+ @use 'sass:math';
2
2
 
3
3
  .vd-datepicker-ui {
4
4
  display: block;
@@ -77,7 +77,7 @@
77
77
  }
78
78
 
79
79
  .vd-datepicker-ui {
80
- margin-top: 22px;
80
+ margin-top: 22px;
81
81
  }
82
82
  }
83
83
 
@@ -96,7 +96,15 @@
96
96
  @include vd-reset;
97
97
  font-size: $vd-datepicker-font-size;
98
98
 
99
- table, caption, tbody, tfoot, thead, tr, th, td, abbr {
99
+ table,
100
+ caption,
101
+ tbody,
102
+ tfoot,
103
+ thead,
104
+ tr,
105
+ th,
106
+ td,
107
+ abbr {
100
108
  margin: initial;
101
109
  padding: initial;
102
110
  border: initial;
@@ -112,7 +120,7 @@
112
120
  margin-top: $vd-datepicker-table-spacing * 2;
113
121
 
114
122
  tbody:before {
115
- content: " ";
123
+ content: ' ';
116
124
  display: block;
117
125
  margin-top: $vd-datepicker-table-spacing;
118
126
  }
@@ -311,14 +319,16 @@
311
319
  }
312
320
 
313
321
  .vd-datepicker-range-no-end {
314
- .is-startrange, .is-endrange {
322
+ .is-startrange,
323
+ .is-endrange {
315
324
  .pika-button {
316
325
  border: none;
317
326
  }
318
327
  }
319
328
 
320
329
  .vd-datepicker-end-picker {
321
- .is-startrange, .is-endrange {
330
+ .is-startrange,
331
+ .is-endrange {
322
332
  .pika-button {
323
333
  background: $vd-datepicker-range-colour;
324
334
  color: vd-colour(text);
@@ -7,4 +7,6 @@ $vd-dialog-header-divider-width: 40px;
7
7
  $vd-dialog-container-min-height: 170px;
8
8
  $vd-dialog-container-focus-colour: vd-colour(go);
9
9
  $vd-dialog-container-top-offset: vd-grid-unit(15);
10
- $vd-dialog-container-sizes: ((small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px));
10
+ $vd-dialog-container-sizes: (
11
+ (small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px)
12
+ );
@@ -2,13 +2,13 @@
2
2
  --vd-dialog-spacing: #{$vd-section-padding-h-med};
3
3
  }
4
4
 
5
- @include vd-viewport-media-max (small) {
5
+ @include vd-viewport-media-max(small) {
6
6
  :root {
7
7
  --vd-dialog-spacing: #{$vd-section-padding-h-sml};
8
8
  }
9
9
  }
10
10
 
11
- @include vd-viewport-media-max (xsmall) {
11
+ @include vd-viewport-media-max(xsmall) {
12
12
  :root {
13
13
  --vd-dialog-spacing: #{vd-grid-unit(4)};
14
14
  }
@@ -27,13 +27,13 @@
27
27
  display: flex;
28
28
  align-items: center;
29
29
 
30
- @include vd-viewport-media-max (small) {
30
+ @include vd-viewport-media-max(small) {
31
31
  left: vd-grid-unit(1);
32
32
  right: vd-grid-unit(1);
33
33
  align-items: flex-start;
34
34
  }
35
35
 
36
- @include vd-viewport-media-max (xsmall) {
36
+ @include vd-viewport-media-max(xsmall) {
37
37
  left: vd-grid-unit(0);
38
38
  right: vd-grid-unit(0);
39
39
  }
@@ -51,7 +51,7 @@
51
51
  padding: $vd-section-padding-v-med var(--vd-dialog-spacing);
52
52
  }
53
53
 
54
- @include vd-viewport-media-max (xsmall) {
54
+ @include vd-viewport-media-max(xsmall) {
55
55
  border-top-left-radius: 0;
56
56
  border-top-right-radius: 0;
57
57
  flex: 0 1 auto;
@@ -84,13 +84,13 @@
84
84
  outline: none;
85
85
  }
86
86
 
87
- @include vd-viewport-media-max (small) {
87
+ @include vd-viewport-media-max(small) {
88
88
  max-width: none;
89
89
  width: 100%;
90
90
  margin-top: $vd-dialog-container-top-offset;
91
91
  }
92
92
 
93
- @include vd-viewport-media-max (xsmall) {
93
+ @include vd-viewport-media-max(xsmall) {
94
94
  max-height: none;
95
95
  height: calc(100% - #{$vd-dialog-container-top-offset});
96
96
 
@@ -121,7 +121,7 @@
121
121
  .vd-dialog-header--center {
122
122
  text-align: center;
123
123
 
124
- @include vd-viewport-media-max (xsmall) {
124
+ @include vd-viewport-media-max(xsmall) {
125
125
  text-align: left;
126
126
  }
127
127
  }
@@ -130,7 +130,7 @@
130
130
  font-size: vd-text-size(sub-heading);
131
131
  padding-left: $vd-dialog-header-sub-padding;
132
132
 
133
- @include vd-viewport-media-max (xsmall) {
133
+ @include vd-viewport-media-max(xsmall) {
134
134
  display: block;
135
135
  padding-left: 0;
136
136
  padding-top: $vd-dialog-header-sub-padding;
@@ -170,7 +170,7 @@
170
170
  }
171
171
  }
172
172
 
173
- @include vd-viewport-media-max (xsmall) {
173
+ @include vd-viewport-media-max(xsmall) {
174
174
  -webkit-overflow-scrolling: touch;
175
175
  }
176
176
  }
@@ -185,13 +185,13 @@
185
185
  margin-top: var(--vd-dialog-spacing);
186
186
  }
187
187
 
188
- @include vd-viewport-media-max (xsmall) {
188
+ @include vd-viewport-media-max(xsmall) {
189
189
  text-align: center;
190
190
  }
191
191
  }
192
192
 
193
193
  // Fallback to base padding if browser doesn't support CSS variables
194
- @supports ( not (--a: 0)) {
194
+ @supports (not (--a: 0)) {
195
195
  .vd-dialog .vd-dialog-banner {
196
196
  margin: -(#{$vd-section-padding-h-med});
197
197
  margin-bottom: $vd-section-padding-h-med;
@@ -210,7 +210,7 @@
210
210
  }
211
211
 
212
212
  .vd-dialog-content {
213
- margin: 0 -(#{$vd-section-padding-h-med});
213
+ margin: 0 - (#{$vd-section-padding-h-med});
214
214
  padding: 0 $vd-section-padding-h-med;
215
215
 
216
216
  + .vd-dialog-actions {
@@ -60,7 +60,7 @@
60
60
  }
61
61
  }
62
62
 
63
- @include vd-viewport-media-max ($vd-breakpoint-small) {
63
+ @include vd-viewport-media-max($vd-breakpoint-small) {
64
64
  top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding * 0.5));
65
65
  right: $vd-dialog-close-button-anchor-padding * 0.5;
66
66
  }
@@ -71,7 +71,7 @@
71
71
  top: 10px;
72
72
  left: -$vd-dialog-close-width - 10px;
73
73
 
74
- @include vd-viewport-media-max ($vd-breakpoint-small) {
74
+ @include vd-viewport-media-max($vd-breakpoint-small) {
75
75
  top: 0;
76
76
  right: 0;
77
77
  left: inherit;
@@ -2,7 +2,7 @@
2
2
  position: absolute;
3
3
  right: 0;
4
4
  top: 0;
5
- bottom:0;
5
+ bottom: 0;
6
6
  box-sizing: border-box;
7
7
  width: $vd-dialog-drawer-width;
8
8
  background: vd-colour(box);
@@ -1,10 +1,12 @@
1
- @use "sass:math";
1
+ // stylelint-disable selector-type-no-unknown
2
+ @use 'sass:math';
2
3
 
3
4
  $vd-dott-diameter: 32px;
4
5
  $vd-dott-aperture-diameter: 12px;
5
6
  $vd-dot-border-width: 2px;
6
7
 
7
- vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
8
+ vd-dott,
9
+ .vd-dott {
8
10
  display: inline-block;
9
11
  width: $vd-dott-diameter;
10
12
  height: $vd-dott-diameter;
@@ -34,8 +36,7 @@ vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
34
36
  border-top: $vd-dot-border-width solid vd-colour(go);
35
37
  border-bottom: $vd-dot-border-width solid vd-colour(success);
36
38
  // Second bg-image value, in conjunction with the background-position, ensures the right side border displays correctly
37
- background-image:
38
- linear-gradient(vd-colour(go), vd-colour(success)),
39
+ background-image: linear-gradient(vd-colour(go), vd-colour(success)),
39
40
  linear-gradient(vd-colour(go), vd-colour(success));
40
41
  background-size: $vd-dot-border-width 100%;
41
42
  background-position: 0 0, 100% 0;
@@ -7,7 +7,7 @@
7
7
  }
8
8
 
9
9
  .vd-dropdown-input-container {
10
- @include vd-input-error-selectors () {
10
+ @include vd-input-error-selectors() {
11
11
  .vd-dropdown-input {
12
12
  @include vd-input-error-styles();
13
13
  }
@@ -13,7 +13,6 @@
13
13
  &:visited {
14
14
  color: vd-colour(supplementary--text) !important;
15
15
  }
16
-
17
16
  }
18
17
 
19
18
  .vd-flag-chevron {
@@ -40,7 +39,7 @@
40
39
  color: vd-colour(text-action) !important;
41
40
  }
42
41
 
43
- .vd-flag-chevron{
42
+ .vd-flag-chevron {
44
43
  opacity: 1;
45
44
  }
46
45
  }
@@ -3,19 +3,45 @@
3
3
  flex: 1;
4
4
  }
5
5
 
6
- .vd-flex--row { flex-direction: row; }
7
- .vd-flex--column { flex-direction: column; }
6
+ .vd-flex--row {
7
+ flex-direction: row;
8
+ }
9
+ .vd-flex--column {
10
+ flex-direction: column;
11
+ }
8
12
 
9
- .vd-flex--no-shrink { flex-shrink: 0; }
13
+ .vd-flex--no-shrink {
14
+ flex-shrink: 0;
15
+ }
10
16
 
11
- .vd-flex--justify-start { justify-content: flex-start; }
12
- .vd-flex--justify-end { justify-content: flex-end; }
13
- .vd-flex--justify-between { justify-content: space-between; }
14
- .vd-flex--justify-around { justify-content: space-around; }
15
- .vd-flex--justify-center { justify-content: center; }
17
+ .vd-flex--justify-start {
18
+ justify-content: flex-start;
19
+ }
20
+ .vd-flex--justify-end {
21
+ justify-content: flex-end;
22
+ }
23
+ .vd-flex--justify-between {
24
+ justify-content: space-between;
25
+ }
26
+ .vd-flex--justify-around {
27
+ justify-content: space-around;
28
+ }
29
+ .vd-flex--justify-center {
30
+ justify-content: center;
31
+ }
16
32
 
17
- .vd-flex--align-start { align-items: flex-start; }
18
- .vd-flex--align-end { align-items: flex-end; }
19
- .vd-flex--align-baseline { align-items: baseline; }
20
- .vd-flex--align-center { align-items: center; }
21
- .vd-flex--align-stretch { align-items: stretch; }
33
+ .vd-flex--align-start {
34
+ align-items: flex-start;
35
+ }
36
+ .vd-flex--align-end {
37
+ align-items: flex-end;
38
+ }
39
+ .vd-flex--align-baseline {
40
+ align-items: baseline;
41
+ }
42
+ .vd-flex--align-center {
43
+ align-items: center;
44
+ }
45
+ .vd-flex--align-stretch {
46
+ align-items: stretch;
47
+ }
@@ -13,13 +13,13 @@ $vd-hero-aux-hr-width: 80px !default;
13
13
  $vd-hero-aux-width: 33.33333% !default;
14
14
 
15
15
  // Hero Auxiliary Headline
16
- @mixin vd-text-hero-aux-headline () {
16
+ @mixin vd-text-hero-aux-headline() {
17
17
  @include vd-text(intro);
18
18
  font-weight: $vd-font-weight--bold;
19
19
  }
20
20
 
21
21
  // Hero Headline
22
- @mixin vd-text-hero-headline () {
22
+ @mixin vd-text-hero-headline() {
23
23
  @include vd-heading-reset();
24
24
  @include vd-line-height(42, 35);
25
25
  @include font-smoothing;
@@ -11,7 +11,6 @@
11
11
  }
12
12
 
13
13
  .vd-in-page-help-content {
14
-
15
14
  @include vd-viewport-media-min(medium) {
16
15
  display: flex;
17
16
  flex-flow: row wrap;
@@ -19,7 +18,6 @@
19
18
  }
20
19
 
21
20
  .vd-in-page-help-content-item {
22
-
23
21
  @include vd-viewport-media-min(medium) {
24
22
  flex: 1;
25
23
  }
@@ -1,4 +1,4 @@
1
- @use "sass:math";
1
+ @use 'sass:math';
2
2
 
3
3
  $vd-input-padding: vd-grid-unit(3) !default;
4
4
  $vd-input-icon-padding: 35px;
@@ -11,8 +11,13 @@ $vd-input-message-margin: 8px;
11
11
  // requested number of lines. Specify the exact pixel value to ensure there is not rounding issues between browsers.
12
12
  $vd-textarea-leading: 20;
13
13
  $vd-textarea-unitless-font-size: map-deep-get($_vd-text-definitions, body, size);
14
- $vd-textarea-unitless-line-height: to-fixed(math.div($vd-textarea-leading, $vd-textarea-unitless-font-size), $digits: 5);
15
- $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-textarea-unitless-line-height);
14
+ $vd-textarea-unitless-line-height: to-fixed(
15
+ math.div($vd-textarea-leading, $vd-textarea-unitless-font-size),
16
+ $digits: 5
17
+ );
18
+ $vd-textarea-line-height: vd-px-unit(
19
+ $vd-textarea-unitless-font-size * $vd-textarea-unitless-line-height
20
+ );
16
21
 
17
22
  @mixin vd-input-text() {
18
23
  color: vd-colour(text);
@@ -41,7 +46,7 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
41
46
  }
42
47
  }
43
48
 
44
- @mixin vd-input-box-model ($vd-input-width: 100%) {
49
+ @mixin vd-input-box-model($vd-input-width: 100%) {
45
50
  width: $vd-input-width;
46
51
  margin: 0;
47
52
  padding: 11px 14px; // To get a height of 44px
@@ -49,7 +54,7 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
49
54
  outline: none;
50
55
  }
51
56
 
52
- @mixin vd-input-states () {
57
+ @mixin vd-input-states() {
53
58
  box-shadow: none;
54
59
  background-color: vd-colour(box);
55
60
  border: vd-border(framing, $vd-input-border-width);
@@ -62,20 +67,21 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
62
67
  @include vd-input-error();
63
68
  }
64
69
 
65
- @mixin vd-input-focus () {
66
- &:focus, &.vd-focus {
70
+ @mixin vd-input-focus() {
71
+ &:focus,
72
+ &.vd-focus {
67
73
  border-color: vd-colour(go);
68
74
  box-shadow: 0 0 $vd-shadow-blur vd-colour(go);
69
75
  }
70
76
  }
71
77
 
72
- @mixin vd-input-error () {
73
- @include vd-input-error-selectors () {
78
+ @mixin vd-input-error() {
79
+ @include vd-input-error-selectors() {
74
80
  @include vd-input-error-styles();
75
81
  }
76
82
  }
77
83
 
78
- @mixin vd-input-error-selectors () {
84
+ @mixin vd-input-error-selectors() {
79
85
  // @TODO Deprecate `.vd-input--error`.
80
86
  &.vd-input--error,
81
87
  &.vd-error,
@@ -85,10 +91,11 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
85
91
  }
86
92
  }
87
93
 
88
- @mixin vd-input-error-styles () {
94
+ @mixin vd-input-error-styles() {
89
95
  border-color: vd-colour(no);
90
96
 
91
- &:focus, &.vd-focus {
97
+ &:focus,
98
+ &.vd-focus {
92
99
  box-shadow: 0 0 $vd-shadow-blur vd-colour(no);
93
100
  }
94
101
  }
@@ -13,8 +13,12 @@
13
13
  }
14
14
  }
15
15
 
16
- .vd-input--icon-left { padding-left: $vd-input-icon-padding; }
17
- .vd-input--icon-right { padding-right: $vd-input-icon-padding; }
16
+ .vd-input--icon-left {
17
+ padding-left: $vd-input-icon-padding;
18
+ }
19
+ .vd-input--icon-right {
20
+ padding-right: $vd-input-icon-padding;
21
+ }
18
22
 
19
23
  .vd-input-icon {
20
24
  position: absolute;
@@ -23,8 +27,12 @@
23
27
  pointer-events: none;
24
28
  }
25
29
 
26
- .vd-input-icon--left { left: $vd-input-icon-position-h; }
27
- .vd-input-icon--right { right: $vd-input-icon-position-h; }
30
+ .vd-input-icon--left {
31
+ left: $vd-input-icon-position-h;
32
+ }
33
+ .vd-input-icon--right {
34
+ right: $vd-input-icon-position-h;
35
+ }
28
36
 
29
37
  .vd-input--text-align-right {
30
38
  text-align: right;
@@ -4,13 +4,19 @@
4
4
  cursor: pointer;
5
5
  transition: color $vd-time-s;
6
6
 
7
- &:visited { color: vd-colour(go); }
7
+ &:visited {
8
+ color: vd-colour(go);
9
+ }
8
10
 
9
11
  @include vd-hover-when-supported {
10
- &:hover { text-decoration: underline; }
12
+ &:hover {
13
+ text-decoration: underline;
14
+ }
11
15
  }
12
16
 
13
- &:active { text-decoration: underline;}
17
+ &:active {
18
+ text-decoration: underline;
19
+ }
14
20
  }
15
21
 
16
22
  .vd-link--secondary {
@@ -18,6 +24,8 @@
18
24
  text-decoration: underline !important; // required to override base a:link
19
25
 
20
26
  @include vd-hover-when-supported {
21
- &:hover { color: vd-colour(go) !important; } // required important to override a tag styles set in vd-table
27
+ &:hover {
28
+ color: vd-colour(go) !important;
29
+ } // required important to override a tag styles set in vd-table
22
30
  }
23
31
  }
@@ -53,4 +53,4 @@ $vd-i-bg-margin: vd-grid-unit(2);
53
53
  margin: auto;
54
54
  transform: translate(0, -50%);
55
55
  z-index: 0;
56
- }
56
+ }
@@ -1,9 +1,25 @@
1
1
  @keyframes vd-lozenge-group-already-added {
2
- from { transform: scale3d(1, 1, 1); }
3
- 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
4
- 30%, 50%, 70%, 90% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg); }
5
- 40%, 60%, 80% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg); }
6
- to { transform: scale3d(1, 1, 1); }
2
+ from {
3
+ transform: scale3d(1, 1, 1);
4
+ }
5
+ 10%,
6
+ 20% {
7
+ transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
8
+ }
9
+ 30%,
10
+ 50%,
11
+ 70%,
12
+ 90% {
13
+ transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
14
+ }
15
+ 40%,
16
+ 60%,
17
+ 80% {
18
+ transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
19
+ }
20
+ to {
21
+ transform: scale3d(1, 1, 1);
22
+ }
7
23
  }
8
24
 
9
25
  // Common styles for an input and selected lozenge group. See vd-tag-input and vd-autocomplete-multi.
@@ -27,7 +43,7 @@
27
43
  }
28
44
  }
29
45
 
30
- .vd-lozenge-group-input {
46
+ .vd-lozenge-group-input {
31
47
  @include vd-input-text();
32
48
  @include vd-input-box-model();
33
49
  background-color: transparent;
@@ -35,4 +51,3 @@
35
51
  flex-grow: 1;
36
52
  }
37
53
  }
38
-
@@ -12,7 +12,7 @@ $vd-multiselect-popover-input-icon-padding: vd-grid-unit(6);
12
12
  color: vd-colour(text);
13
13
  }
14
14
 
15
- @include vd-input-error-selectors () {
15
+ @include vd-input-error-selectors() {
16
16
  .vd-multiselect-popover-input {
17
17
  @include vd-input-error-styles();
18
18
  }
@@ -47,7 +47,7 @@
47
47
  margin-right: vd-grid-unit(6);
48
48
  }
49
49
 
50
- @include vd-viewport-media-max (xsmall) {
50
+ @include vd-viewport-media-max(xsmall) {
51
51
  .vd-next-stepper-summary {
52
52
  flex-direction: column;
53
53
  }
@@ -1 +1 @@
1
- $vd-colour-overlay: vd-colour(overlay);
1
+ $vd-colour-overlay: vd-colour(overlay);
@@ -4,5 +4,7 @@
4
4
  margin-top: 0;
5
5
  line-height: 1.5;
6
6
 
7
- &:last-child { margin-bottom: 0; }
7
+ &:last-child {
8
+ margin-bottom: 0;
9
+ }
8
10
  }