@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.
Files changed (101) hide show
  1. package/README.md +1 -1
  2. package/dist/index.css +151 -77
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +151 -77
  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-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-next-stepper/vd-next-stepper.scss +1 -1
  52. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  53. package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
  54. package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
  55. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
  56. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
  57. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
  58. package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
  59. package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
  60. package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
  61. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
  62. package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
  63. package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
  64. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  65. package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
  66. package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +5 -2
  67. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +2 -5
  68. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +5 -2
  69. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
  70. package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
  71. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
  72. package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
  73. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
  74. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
  75. package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
  76. package/src/vend.ui/styles/global/_grid.scss +5 -5
  77. package/src/vend.ui/styles/global/_layout.scss +2 -2
  78. package/src/vend.ui/styles/global/_normalise.scss +8 -1
  79. package/src/vend.ui/styles/global/_z-index.scss +0 -8
  80. package/src/vend.ui/styles/global/colour/_base.scss +8 -13
  81. package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
  82. package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
  83. package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
  84. package/src/vend.ui/styles/global/effects/_effects.scss +19 -9
  85. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
  86. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
  87. package/src/vend.ui/styles/global/text/_base.scss +1 -1
  88. package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
  89. package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
  90. package/src/vend.ui/styles/global/text/_text.scss +2 -2
  91. package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
  92. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
  93. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
  94. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
  95. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
  96. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
  97. package/src/vend.ui/styles/navi/_nv-topnav.scss +4 -4
  98. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
  99. package/src/vend.ui/styles/navi/navi.scss +8 -8
  100. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
  101. package/CHANGELOG.md +0 -192
@@ -116,7 +116,9 @@
116
116
  transform: rotate(45deg);
117
117
 
118
118
  // If there is a vd-action-bar present and the beak is at the bottom it should be the same colour as the action bar
119
- .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:not(:empty) ~ & {
119
+ .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top
120
+ .vd-popover-actions:not(:empty)
121
+ ~ & {
120
122
  background-color: $vd-action-bar-background-colour;
121
123
  }
122
124
 
@@ -1,7 +1,9 @@
1
1
  $vd-popover-list-spacing: vd-grid-unit(2);
2
2
  $vd-popover-list-item-spacing: vd-grid-unit(4);
3
3
 
4
- @mixin vd-popover-list-item ($_vd-popover-item-padding: $vd-popover-list-item-spacing $vd-popover-spacing) {
4
+ @mixin vd-popover-list-item(
5
+ $_vd-popover-item-padding: $vd-popover-list-item-spacing $vd-popover-spacing
6
+ ) {
5
7
  color: currentColor;
6
8
  text-decoration: none;
7
9
  transition-duration: $vd-time-s;
@@ -139,8 +139,7 @@
139
139
 
140
140
  .vd-popover-list-separator {
141
141
  @extend .vd-hr;
142
- margin: $vd-popover-list-spacing
143
- ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
142
+ margin: $vd-popover-list-spacing ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
144
143
  width: inherit;
145
144
  }
146
145
 
@@ -2,7 +2,7 @@ $vd-promos-spacing: vd-grid-unit(3) !default;
2
2
  $vd-promo-image-container-min-height: 100px !default;
3
3
 
4
4
  // Promo Headline
5
- @mixin vd-promo-headline () {
5
+ @mixin vd-promo-headline() {
6
6
  @include vd-heading-reset();
7
7
  @include vd-line-height(30, 24);
8
8
  @include font-smoothing;
@@ -1,4 +1,3 @@
1
-
2
1
  // Promo
3
2
  .vd-promo {
4
3
  display: flex;
@@ -1,7 +1,13 @@
1
1
  @keyframes vd-radio-checked {
2
- 0% { transform: scale(0); }
3
- 33% { transform: scale(1.8); }
4
- 66% { transform: scale(1); }
2
+ 0% {
3
+ transform: scale(0);
4
+ }
5
+ 33% {
6
+ transform: scale(1.8);
7
+ }
8
+ 66% {
9
+ transform: scale(1);
10
+ }
5
11
  }
6
12
 
7
13
  .vd-radio {
@@ -9,8 +15,12 @@
9
15
  position: relative;
10
16
  padding: 0 vd-grid-unit(1);
11
17
 
12
- &:first-child { padding-left: 0 }
13
- &:last-child { padding-right: 0 }
18
+ &:first-child {
19
+ padding-left: 0;
20
+ }
21
+ &:last-child {
22
+ padding-right: 0;
23
+ }
14
24
  }
15
25
 
16
26
  .vd-radio-container {
@@ -20,7 +30,9 @@
20
30
  flex-direction: column;
21
31
  cursor: pointer;
22
32
 
23
- &:last-child { padding-bottom: 0 }
33
+ &:last-child {
34
+ padding-bottom: 0;
35
+ }
24
36
  }
25
37
 
26
38
  .vd-radio-input-container {
@@ -28,7 +40,9 @@
28
40
  align-items: center;
29
41
  }
30
42
 
31
- .vd-radio-label { padding-left: vd-grid-unit(3); }
43
+ .vd-radio-label {
44
+ padding-left: vd-grid-unit(3);
45
+ }
32
46
 
33
47
  .vd-radio-description {
34
48
  @include vd-text(supplementary);
@@ -40,7 +54,9 @@
40
54
  opacity: $vd-opacity;
41
55
  }
42
56
 
43
- .vd-radio-input { @extend %vd-invisible-checkbox-input; }
57
+ .vd-radio-input {
58
+ @extend %vd-invisible-checkbox-input;
59
+ }
44
60
 
45
61
  .vd-radio-tick {
46
62
  flex-shrink: 0;
@@ -85,7 +101,9 @@
85
101
  }
86
102
  }
87
103
 
88
- .vd-radio-input:hover + .vd-radio-tick:after { opacity: 1; }
104
+ .vd-radio-input:hover + .vd-radio-tick:after {
105
+ opacity: 1;
106
+ }
89
107
 
90
108
  // Checked
91
109
  .vd-radio-input:checked + .vd-radio-tick {
@@ -108,7 +126,9 @@
108
126
  cursor: not-allowed;
109
127
  filter: grayscale(100%);
110
128
 
111
- &:hover + .vd-radio-tick:after { opacity: 0; }
129
+ &:hover + .vd-radio-tick:after {
130
+ opacity: 0;
131
+ }
112
132
  &:hover:checked + .vd-radio-tick:after {
113
133
  opacity: 1;
114
134
  background-color: vd-colour(box);
@@ -1,3 +1,4 @@
1
+ // stylelint-disable selector-type-no-unknown
1
2
  :root {
2
3
  --vd-section-padding-h: #{$vd-section-padding-h};
3
4
  --vd-section-padding-v: #{$vd-section-padding-v};
@@ -17,7 +18,8 @@
17
18
  }
18
19
  }
19
20
 
20
- vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
21
+ vd-section,
22
+ .vd-section {
21
23
  display: block;
22
24
  position: relative;
23
25
  font-size: vd-text-size(body);
@@ -35,12 +37,13 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
35
37
  }
36
38
 
37
39
  // Nested sections
38
- vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
40
+ vd-section,
41
+ .vd-section {
39
42
  padding: var(--vd-section-padding-v) 0;
40
43
  }
41
44
 
42
45
  // Fallback to base padding if browser doesn't support CSS variables
43
- @supports ( not (--a: 0)) {
46
+ @supports (not (--a: 0)) {
44
47
  padding: $vd-section-padding-v $vd-section-padding-h;
45
48
 
46
49
  .vd-section-container {
@@ -48,25 +51,34 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
48
51
  padding: $vd-section-padding-v $vd-section-padding-h;
49
52
  }
50
53
 
51
- vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
54
+ vd-section,
55
+ .vd-section {
52
56
  padding: $vd-section-padding-v 0;
53
57
  }
54
58
  }
55
59
  }
56
60
 
57
61
  .vd-section--secondary {
58
- &, .vd-section-container { background-color: vd-colour(framing); }
62
+ &,
63
+ .vd-section-container {
64
+ background-color: vd-colour(framing);
65
+ }
59
66
  }
60
67
 
61
- .vd-section--tertiary {
62
- &, .vd-section-container { background-color: vd-colour(box); }
68
+ .vd-section--tertiary {
69
+ &,
70
+ .vd-section-container {
71
+ background-color: vd-colour(box);
72
+ }
63
73
  }
64
74
 
65
75
  .vd-section--panel {
66
76
  border-bottom: vd-border(keyline);
67
77
  margin: 0 $vd-section--panel-margin-h;
68
78
 
69
- &:last-child { border-bottom: none; }
79
+ &:last-child {
80
+ border-bottom: none;
81
+ }
70
82
  }
71
83
 
72
84
  .vd-section--fixed {
@@ -90,7 +102,10 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
90
102
  }
91
103
 
92
104
  .vd-section--action-bar {
93
- &, .vd-section-container { background-color: vd-colour(framing); }
105
+ &,
106
+ .vd-section-container {
107
+ background-color: vd-colour(framing);
108
+ }
94
109
 
95
110
  .vd-section-wrap {
96
111
  min-height: $vd-section--action-bar-min-height;
@@ -98,7 +113,7 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
98
113
  justify-content: space-between;
99
114
  align-items: center;
100
115
 
101
- @include vd-viewport-media-max ($vd-breakpoint-small) {
116
+ @include vd-viewport-media-max($vd-breakpoint-small) {
102
117
  flex-wrap: wrap;
103
118
  }
104
119
  }
@@ -107,7 +122,7 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
107
122
  .vd-section--action-bar-about {
108
123
  padding-right: $vd-section--action-bar-spacing;
109
124
 
110
- @include vd-viewport-media-max ($vd-breakpoint-small) {
125
+ @include vd-viewport-media-max($vd-breakpoint-small) {
111
126
  flex-basis: 100%;
112
127
  padding: 0 0 $vd-section--action-bar-spacing 0;
113
128
  }
@@ -78,5 +78,7 @@
78
78
  width: 100%;
79
79
  margin-left: vd-grid-unit(5);
80
80
 
81
- &:first-of-type { margin-left: 0; }
81
+ &:first-of-type {
82
+ margin-left: 0;
83
+ }
82
84
  }
@@ -3,7 +3,8 @@
3
3
  align-items: center;
4
4
 
5
5
  // @todo remove vd-select-container when vd-select-input is deprecated
6
- > .vd-select, .vd-select-container {
6
+ > .vd-select,
7
+ .vd-select-container {
7
8
  width: auto;
8
9
  }
9
10
 
@@ -13,7 +14,8 @@
13
14
  flex: 1;
14
15
  }
15
16
 
16
- .vd-input, .vd-select {
17
+ .vd-input,
18
+ .vd-select {
17
19
  position: relative;
18
20
 
19
21
  &:focus {
@@ -21,7 +23,8 @@
21
23
  }
22
24
  }
23
25
 
24
- .vd-input:not(:first-child), .vd-select:not(:first-child) {
26
+ .vd-input:not(:first-child),
27
+ .vd-select:not(:first-child) {
25
28
  @include remove-border-radius-left();
26
29
  margin-left: -$vd-input-border-width;
27
30
  }
@@ -34,12 +37,15 @@
34
37
  }
35
38
  }
36
39
 
37
- .vd-input:not(:last-child), .vd-select:not(:last-child),
40
+ .vd-input:not(:last-child),
41
+ .vd-select:not(:last-child),
38
42
  .vd-select-container:not(:last-child) .vd-select {
39
43
  @include remove-border-radius-right();
40
44
  }
41
45
 
42
- .vd-input, .vd-select, .vd-select-container:not(:last-child) {
46
+ .vd-input,
47
+ .vd-select,
48
+ .vd-select-container:not(:last-child) {
43
49
  &.vd-error {
44
50
  z-index: $vd-select-input-group-with-error-zindex;
45
51
  }
@@ -2,7 +2,8 @@
2
2
  display: inline-block;
3
3
  position: relative;
4
4
 
5
- &::before, &::after {
5
+ &::before,
6
+ &::after {
6
7
  display: none;
7
8
  }
8
9
 
@@ -22,5 +22,5 @@
22
22
  @include vd-select-carets;
23
23
  }
24
24
 
25
- @import "vd-select-group";
26
- @import "vd-select-inline";
25
+ @import 'vd-select-group';
26
+ @import 'vd-select-inline';
@@ -1,7 +1,7 @@
1
1
  .vd-grid-settings-item {
2
2
  padding-right: $vd-settings-padding;
3
3
 
4
- @include vd-viewport-media-max ($vd-breakpoint-small) {
4
+ @include vd-viewport-media-max($vd-breakpoint-small) {
5
5
  padding-right: 0;
6
6
  padding-bottom: $vd-settings-padding;
7
7
  }
@@ -42,7 +42,9 @@
42
42
  font-weight: $vd-font-weight--bold;
43
43
  }
44
44
 
45
- .vd-nav-divider, .vd-sidebar-expander, .vd-nav-item-icon--new {
45
+ .vd-nav-divider,
46
+ .vd-sidebar-expander,
47
+ .vd-nav-item-icon--new {
46
48
  display: none;
47
49
  }
48
50
  }
@@ -86,7 +88,8 @@
86
88
  }
87
89
  }
88
90
 
89
- .vd-sidebar-expander, .vd-nav-item-icon--new {
91
+ .vd-sidebar-expander,
92
+ .vd-nav-item-icon--new {
90
93
  display: block !important;
91
94
  }
92
95
  }
@@ -88,9 +88,7 @@
88
88
  position: absolute;
89
89
  left: 0;
90
90
  height: 100%;
91
- transform: translateX(
92
- calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x})
93
- );
91
+ transform: translateX(calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x}));
94
92
  }
95
93
 
96
94
  .nv-display-sidenav-modal {
@@ -118,8 +116,7 @@
118
116
  }
119
117
 
120
118
  .vd-sidebar-modal-close {
121
- right: $vd-sidebar-modal-close-right-offset -
122
- $vd-sidebar-drawer-desktop-width;
119
+ right: $vd-sidebar-modal-close-right-offset - $vd-sidebar-drawer-desktop-width;
123
120
  }
124
121
  }
125
122
  }
@@ -1,4 +1,4 @@
1
- @use "sass:math";
1
+ @use 'sass:math';
2
2
 
3
3
  $vd-sidebar-tabs-animation-duration: 200ms;
4
4
 
@@ -11,7 +11,10 @@ $vd-sidebar-tab-height: 44px !default;
11
11
  $vd-sidebar-tab-font-colour: vd-colour(text) !default;
12
12
  $vd-sidebar-tab-font-size: 15px !default;
13
13
  $vd-sidebar-tab-icon-font-size: 20px !default;
14
- $vd-sidebar-tab-padding-x: math.div($vd-sidebar-tabs-desktop-width - $vd-sidebar-tab-icon-font-size, 2);
14
+ $vd-sidebar-tab-padding-x: math.div(
15
+ $vd-sidebar-tabs-desktop-width - $vd-sidebar-tab-icon-font-size,
16
+ 2
17
+ );
15
18
 
16
19
  $vd-sidebar-tab-active-bg-colour: vd-colour(text) !default;
17
20
  $vd-sidebar-tab-active-border-width: 6px !default;
@@ -1,5 +1,5 @@
1
- @import "../vd-popover/vd-popover-ns";
2
- @import "../vd-popover-list/vd-popover-list-ns";
1
+ @import '../vd-popover/vd-popover-ns';
2
+ @import '../vd-popover-list/vd-popover-list-ns';
3
3
 
4
4
  $vd-suggestion-list-footer-height: 60px;
5
5
  $vd-suggestion-list-footer-shadow-height: 5px;
@@ -1,4 +1,6 @@
1
- table { border-collapse: collapse; }
1
+ table {
2
+ border-collapse: collapse;
3
+ }
2
4
 
3
5
  .vd-table {
4
6
  width: 100%;
@@ -13,7 +15,9 @@ table { border-collapse: collapse; }
13
15
  padding: vd-grid-unit(4) vd-grid-unit(10) vd-grid-unit(4);
14
16
  }
15
17
 
16
- tr { border-color: vd-colour(keyline); }
18
+ tr {
19
+ border-color: vd-colour(keyline);
20
+ }
17
21
  }
18
22
 
19
23
  tr {
@@ -30,7 +34,9 @@ table { border-collapse: collapse; }
30
34
 
31
35
  // Can be used for row's which display loading spinners, or 'no results' type content.
32
36
  @include vd-hover-when-supported {
33
- &.vd-inactive:hover { background-color: inherit; }
37
+ &.vd-inactive:hover {
38
+ background-color: inherit;
39
+ }
34
40
  }
35
41
 
36
42
  &.vd-error {
@@ -38,37 +44,63 @@ table { border-collapse: collapse; }
38
44
  background-color: $vd-colour-table-tr-error-background;
39
45
  }
40
46
 
41
- &.vd-no-border-b { border-bottom: none; }
42
- &.vd-no-border-t { border-top: none; }
43
- &.vd-no-border-l { border-left: none; }
44
- &.vd-no-border-r { border-right: none; }
47
+ &.vd-no-border-b {
48
+ border-bottom: none;
49
+ }
50
+ &.vd-no-border-t {
51
+ border-top: none;
52
+ }
53
+ &.vd-no-border-l {
54
+ border-left: none;
55
+ }
56
+ &.vd-no-border-r {
57
+ border-right: none;
58
+ }
45
59
 
46
- &.vd-border-t { border-top: vd-border(framing); }
47
- &.vd-border-b { border-bottom: vd-border(framing); }
60
+ &.vd-border-t {
61
+ border-top: vd-border(framing);
62
+ }
63
+ &.vd-border-b {
64
+ border-bottom: vd-border(framing);
65
+ }
48
66
 
49
67
  &.vd-med-pad-t,
50
68
  &.vd-med-pad-v {
51
- td { padding-top: vd-grid-unit(2); }
69
+ td {
70
+ padding-top: vd-grid-unit(2);
71
+ }
52
72
  }
53
73
 
54
74
  &.vd-med-pad-b,
55
75
  &.vd-med-pad-v {
56
- td { padding-bottom: vd-grid-unit(2); }
76
+ td {
77
+ padding-bottom: vd-grid-unit(2);
78
+ }
57
79
  }
58
80
 
59
81
  &.vd-sml-pad-t,
60
82
  &.vd-sml-pad-v {
61
- td { padding-top: vd-grid-unit(1); }
83
+ td {
84
+ padding-top: vd-grid-unit(1);
85
+ }
62
86
  }
63
87
 
64
88
  &.vd-sml-pad-b,
65
89
  &.vd-sml-pad-v {
66
- td { padding-bottom: vd-grid-unit(1); }
90
+ td {
91
+ padding-bottom: vd-grid-unit(1);
92
+ }
67
93
  }
68
94
 
69
- &.vd-valign-t td { vertical-align: top; }
70
- &.vd-valign-m td { vertical-align: middle; }
71
- &.vd-valign-b td { vertical-align: bottom; }
95
+ &.vd-valign-t td {
96
+ vertical-align: top;
97
+ }
98
+ &.vd-valign-m td {
99
+ vertical-align: middle;
100
+ }
101
+ &.vd-valign-b td {
102
+ vertical-align: bottom;
103
+ }
72
104
 
73
105
  &.vd-expandable {
74
106
  @include vd-hover-when-supported {
@@ -96,14 +128,21 @@ table { border-collapse: collapse; }
96
128
  }
97
129
  }
98
130
 
99
- & + tr:not(.vd-expandable) { display: none; }
100
- &.vd-expandable--expanded + tr { display: table-row; }
131
+ & + tr:not(.vd-expandable) {
132
+ display: none;
133
+ }
134
+ &.vd-expandable--expanded + tr {
135
+ display: table-row;
136
+ }
101
137
  }
102
138
  }
103
139
 
104
- td { vertical-align: middle; }
140
+ td {
141
+ vertical-align: middle;
142
+ }
105
143
 
106
- td, th {
144
+ td,
145
+ th {
107
146
  padding: vd-grid-unit(5) vd-grid-unit(10);
108
147
  position: relative;
109
148
  white-space: normal;
@@ -116,28 +155,55 @@ table { border-collapse: collapse; }
116
155
 
117
156
  &.vd-truncate {
118
157
  // Star selector is required for truncating text inside a cell wrapped in another tag: a, strong, span, etc...
119
- &, * {
158
+ &,
159
+ * {
120
160
  text-overflow: ellipsis;
121
161
  white-space: nowrap;
122
162
  overflow: hidden;
123
163
  }
124
164
  }
125
165
 
126
- &.vd-sml-pad-h, &.vd-sml-pad-l { padding-left: vd-grid-unit(2); }
127
- &.vd-sml-pad-h, &.vd-sml-pad-r { padding-right: vd-grid-unit(2); }
128
- &.vd-no-pad-h, &.vd-no-pad-l { padding-left: 0; }
129
- &.vd-no-pad-h, &.vd-no-pad-r { padding-right: 0; }
130
- &.vd-no-pad-v, &.vd-no-pad-b { padding-bottom: 0; }
131
- &.vd-no-pad-v, &.vd-no-pad-t { padding-top: 0; }
166
+ &.vd-sml-pad-h,
167
+ &.vd-sml-pad-l {
168
+ padding-left: vd-grid-unit(2);
169
+ }
170
+ &.vd-sml-pad-h,
171
+ &.vd-sml-pad-r {
172
+ padding-right: vd-grid-unit(2);
173
+ }
174
+ &.vd-no-pad-h,
175
+ &.vd-no-pad-l {
176
+ padding-left: 0;
177
+ }
178
+ &.vd-no-pad-h,
179
+ &.vd-no-pad-r {
180
+ padding-right: 0;
181
+ }
182
+ &.vd-no-pad-v,
183
+ &.vd-no-pad-b {
184
+ padding-bottom: 0;
185
+ }
186
+ &.vd-no-pad-v,
187
+ &.vd-no-pad-t {
188
+ padding-top: 0;
189
+ }
132
190
 
133
- &.vd-valign-t { vertical-align: top; }
134
- &.vd-valign-m { vertical-align: middle; }
135
- &.vd-valign-b { vertical-align: bottom; }
191
+ &.vd-valign-t {
192
+ vertical-align: top;
193
+ }
194
+ &.vd-valign-m {
195
+ vertical-align: middle;
196
+ }
197
+ &.vd-valign-b {
198
+ vertical-align: bottom;
199
+ }
136
200
  }
137
201
 
138
202
  &.vd-table--data {
139
203
  border: vd-border(framing);
140
- tr { background-color: vd-colour(box); }
204
+ tr {
205
+ background-color: vd-colour(box);
206
+ }
141
207
  }
142
208
  }
143
209
 
@@ -145,7 +211,9 @@ table { border-collapse: collapse; }
145
211
  // Note: Compact tables are deprecated
146
212
  .vd-table--compact {
147
213
  thead {
148
- th { padding: vd-grid-unit(4) vd-grid-unit(2); }
214
+ th {
215
+ padding: vd-grid-unit(4) vd-grid-unit(2);
216
+ }
149
217
  }
150
218
 
151
219
  td {
@@ -238,7 +306,8 @@ table { border-collapse: collapse; }
238
306
 
239
307
  &.vd-table--report--nested--indented {
240
308
  > tbody > tr > td:first-child {
241
- padding-left: (vd-grid-unit(4) - $vd-nested-reporting-table-container-offset) + $vd-nested-reporting-table-indent-padding;
309
+ padding-left: (vd-grid-unit(4) - $vd-nested-reporting-table-container-offset) +
310
+ $vd-nested-reporting-table-indent-padding;
242
311
  }
243
312
  }
244
313
  }
@@ -24,10 +24,9 @@
24
24
 
25
25
  @include vd-hover-when-supported {
26
26
  &:hover:not(.vd-tab--disabled) .vd-tab-button {
27
- @include vd-active-tab()
27
+ @include vd-active-tab();
28
28
  }
29
29
 
30
-
31
30
  &:hover:not(.vd-tab--active) .vd-tab-button {
32
31
  cursor: pointer;
33
32
  }
@@ -1,12 +1,20 @@
1
- .vd-text--secondary { color: vd-colour(supplementary--text); }
2
- .vd-text--success { color: vd-colour(do); }
3
- .vd-text--negative { color: vd-colour(no); }
4
- .vd-text--disabled {
1
+ .vd-text--secondary {
2
+ color: vd-colour(supplementary--text);
3
+ }
4
+ .vd-text--success {
5
+ color: vd-colour(do);
6
+ }
7
+ .vd-text--negative {
8
+ color: vd-colour(no);
9
+ }
10
+ .vd-text--disabled {
5
11
  color: vd-colour(text);
6
12
  opacity: 0.35;
7
13
  }
8
14
 
9
- .vd-text--sub { font-size: vd-text-size(supplementary); }
15
+ .vd-text--sub {
16
+ font-size: vd-text-size(supplementary);
17
+ }
10
18
 
11
19
  .vd-text--intro {
12
20
  @include vd-text-intro;
@@ -30,7 +30,8 @@
30
30
  width: calc(100% - #{$vd-toast-notification-offset});
31
31
  max-width: vd-grid-unit(170);
32
32
  margin: 0 auto;
33
- padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-r $vd-toast-notification-padding-v $vd-toast-notification-padding-l;
33
+ padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-r
34
+ $vd-toast-notification-padding-v $vd-toast-notification-padding-l;
34
35
 
35
36
  border-radius: $vd-border-radius;
36
37
  box-sizing: border-box;
@@ -6,10 +6,16 @@
6
6
  #{$selector} {
7
7
  display: block !important;
8
8
  }
9
- table#{$selector} { display: table !important; }
10
- tr#{$selector} { display: table-row !important; }
9
+ table#{$selector} {
10
+ display: table !important;
11
+ }
12
+ tr#{$selector} {
13
+ display: table-row !important;
14
+ }
11
15
  th#{$selector},
12
- td#{$selector} { display: table-cell !important; }
16
+ td#{$selector} {
17
+ display: table-cell !important;
18
+ }
13
19
  }
14
20
 
15
21
  @mixin responsive-invisibility($selector) {