@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
@@ -1,3 +1,18 @@
1
+ @mixin vd-sidebar-faux-column-bg($tabs-width, $drawer-width) {
2
+ background: linear-gradient(
3
+ to right,
4
+ $vd-sidebar-tabs-background-color 0,
5
+ $vd-sidebar-tabs-background-color $tabs-width,
6
+ $vd-sidebar-drawer-background-color $tabs-width,
7
+ $vd-sidebar-drawer-background-color $drawer-width
8
+ );
9
+ }
10
+
11
+ // The sidebar contents can be hidden, if so we shouldn't show the sidebar
12
+ .vd-sidebar:empty {
13
+ display: none;
14
+ }
15
+
1
16
  .vd-sidebar {
2
17
  display: flex;
3
18
  position: relative;
@@ -7,4 +22,102 @@
7
22
  box-sizing: border-box;
8
23
  font-family: $vd-font-primary;
9
24
  line-height: normal;
25
+ max-width: $vd-sidebar-width;
26
+
27
+ transform: translateX(0);
28
+ transition: transform 0.2s ease-in-out;
29
+ z-index: $vd-sidebar-base-z-index;
30
+
31
+ .vd-sidebar-modal-close {
32
+ display: none;
33
+ top: $vd-sidebar-modal-close-base-offset;
34
+ right: $vd-sidebar-modal-close-right-offset;
35
+ }
36
+
37
+ .vd-sidebar-tabs {
38
+ height: auto;
39
+ }
40
+
41
+ .vd-sidebar-drawer {
42
+ height: auto;
43
+ }
44
+
45
+ @media print {
46
+ display: none;
47
+ }
48
+
49
+ // Required so banner does not appear over the top of the sidenav when its toggled
50
+ // on smaller devices
51
+ @include vd-viewport-media-max($vd-breakpoint-large) {
52
+ z-index: $vd-z-index-popover-base + 2;
53
+ }
54
+ }
55
+
56
+ .vd-sidebar-content {
57
+ @include vd-sidebar-faux-column-bg(
58
+ $vd-sidebar-tabs-desktop-width,
59
+ $vd-sidebar-drawer-desktop-width
60
+ );
61
+ width: auto;
62
+ overflow-y: auto;
63
+ overflow-x: hidden;
64
+ height: 100%;
65
+ display: flex;
66
+ }
67
+
68
+ .vd-sidebar--pad-drawer {
69
+ padding-right: $vd-sidebar-drawer-desktop-width;
70
+ }
71
+
72
+ // ========= Body Class Sidenav Modal State ========= //
73
+
74
+ .nv-display-sidenav-modal {
75
+ .vd-sidebar {
76
+ z-index: $vd-sidebar-modal-z-index;
77
+
78
+ .vd-sidebar-modal-close {
79
+ display: flex;
80
+ }
81
+ }
82
+ }
83
+
84
+ // ========= Responsive Breakpoint Styles ========= //
85
+
86
+ @include vd-viewport-media-max($vd-breakpoint-large) {
87
+ .vd-sidebar {
88
+ position: absolute;
89
+ left: 0;
90
+ height: 100%;
91
+ transform: translateX(calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x}));
92
+ }
93
+
94
+ .nv-display-sidenav-modal {
95
+ .vd-sidebar {
96
+ transform: translateX(0);
97
+ }
98
+ }
99
+
100
+ .vd-sidebar--pad-drawer {
101
+ padding-right: 0;
102
+ }
103
+ }
104
+
105
+ @include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
106
+ // The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
107
+ // This only applies to the nav at large desktop size
108
+ .vd-sidebar--no-drawer {
109
+ width: $vd-sidebar-tabs-desktop-width;
110
+ }
111
+
112
+ .nv-display-sidenav-modal {
113
+ .vd-sidebar--no-drawer {
114
+ .vd-sidebar-content {
115
+ position: absolute;
116
+ }
117
+
118
+ .vd-sidebar-modal-close {
119
+ right: $vd-sidebar-modal-close-right-offset - $vd-sidebar-drawer-desktop-width;
120
+ }
121
+ }
122
+ }
10
123
  }
@@ -1,6 +1,6 @@
1
1
  $vd-sidebar-drawer-background-color: vd-colour(nav-side-drawer);
2
- $vd-sidebar-drawer-desktop-width: 145px;
2
+ $vd-sidebar-drawer-desktop-width: 176px;
3
3
 
4
- $vd-sidebar-drawer-item-font-size: 14px;
5
- $vd-sidebar-drawer-item-padding-x: 10px;
6
- $vd-sidebar-drawer-item-padding-y: 20px;
4
+ $vd-sidebar-drawer-item-font-size: 15px;
5
+ $vd-sidebar-drawer-item-padding-x: 22px;
6
+ $vd-sidebar-drawer-item-padding-y: 13px;
@@ -5,14 +5,16 @@
5
5
  width: $vd-sidebar-drawer-desktop-width;
6
6
  height: 100%;
7
7
  background-color: $vd-sidebar-drawer-background-color;
8
- border-right: 1px solid vd-colour(framing);
8
+ border-right: 1px solid vd-colour(background);
9
9
  box-sizing: border-box;
10
+ padding-top: $vd-sidebar-drawer-item-font-size;
11
+ padding-bottom: $vd-sidebar-drawer-item-font-size;
10
12
 
11
13
  .vd-nav-item {
12
14
  width: 100%;
13
15
  height: auto;
14
16
  color: vd-colour(text);
15
- font-weight: $vd-font-weight--bold;
17
+ font-weight: $vd-font-weight--regular;
16
18
 
17
19
  &:hover {
18
20
  background: vd-colour(go-highlight);
@@ -24,6 +26,7 @@
24
26
  }
25
27
 
26
28
  .vd-nav-item--active {
29
+ @include vd-sidebar-active-indicator();
27
30
  .vd-nav-item-action {
28
31
  color: vd-colour(go);
29
32
  }
@@ -1,11 +1,20 @@
1
+ @use 'sass:math';
2
+
3
+ $vd-sidebar-tabs-animation-duration: 200ms;
4
+
1
5
  $vd-sidebar-tabs-background-color: vd-colour(nav-side-tabs);
2
6
 
3
- $vd-sidebar-tabs-desktop-width: 85px;
7
+ $vd-sidebar-tabs-desktop-width: 64px;
8
+ $vd-sidebar-tabs-expanded-width: 240px;
4
9
 
5
- $vd-sidebar-tab-height: 75px !default;
10
+ $vd-sidebar-tab-height: 44px !default;
6
11
  $vd-sidebar-tab-font-colour: vd-colour(text) !default;
7
- $vd-sidebar-tab-font-size: 12px !default;
12
+ $vd-sidebar-tab-font-size: 15px !default;
8
13
  $vd-sidebar-tab-icon-font-size: 20px !default;
14
+ $vd-sidebar-tab-padding-x: math.div(
15
+ $vd-sidebar-tabs-desktop-width - $vd-sidebar-tab-icon-font-size,
16
+ 2
17
+ );
9
18
 
10
19
  $vd-sidebar-tab-active-bg-colour: vd-colour(text) !default;
11
20
  $vd-sidebar-tab-active-border-width: 6px !default;
@@ -13,32 +13,31 @@
13
13
  font-size: $vd-sidebar-tab-font-size;
14
14
  color: vd-colour(text);
15
15
 
16
+ padding-top: $vd-sidebar-drawer-item-font-size;
17
+ padding-bottom: $vd-sidebar-drawer-item-font-size;
18
+
19
+ transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
20
+
21
+ overflow: hidden;
22
+
23
+ &.vd-sidebar-tabs--expanded {
24
+ width: $vd-sidebar-tabs-expanded-width;
25
+
26
+ .vd-nav-item-action {
27
+ justify-content: start;
28
+ }
29
+ }
30
+
16
31
  .vd-nav-item {
17
32
  flex-shrink: 0;
18
33
  height: $vd-sidebar-tab-height;
19
- width: 100%;
20
-
21
- // Increase specificity to override colour specific selectors
22
- .vd-nav-item-icon.vd-nav-item-icon {
23
- color: inherit;
24
- }
34
+ transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
25
35
 
26
36
  &:hover {
27
37
  background: vd-colour(background);
28
38
  }
29
39
  }
30
40
 
31
- .vd-nav-item-action {
32
- flex-direction: column;
33
- justify-content: center;
34
- position: relative;
35
- }
36
-
37
- .vd-nav-item--active {
38
- color: vd-colour(do);
39
- background: vd-colour(box);
40
- }
41
-
42
41
  .vd-nav-item--pending {
43
42
  background: vd-colour(background);
44
43
  }
@@ -52,22 +51,38 @@
52
51
  }
53
52
  }
54
53
 
54
+ .vd-nav-item--active {
55
+ color: vd-colour(do);
56
+ background: vd-colour(box);
57
+
58
+ &.vd-nav-item--no-children {
59
+ @include vd-sidebar-active-indicator();
60
+ }
61
+ }
62
+
63
+ .vd-nav-item-action {
64
+ flex-direction: row;
65
+ position: relative;
66
+ justify-content: start;
67
+ }
68
+
55
69
  .vd-nav-item-label {
56
- font-weight: $vd-font-weight--bold;
70
+ white-space: nowrap;
57
71
  }
58
72
 
59
73
  .vd-nav-item-icon {
74
+ flex-shrink: 0;
75
+ text-align: center;
60
76
  font-size: $vd-sidebar-tab-icon-font-size;
61
- }
77
+ min-width: $vd-sidebar-tab-icon-font-size;
78
+ padding-left: $vd-sidebar-tab-padding-x;
79
+ padding-right: $vd-sidebar-tab-padding-x;
62
80
 
63
- @each $_vd-nav-colour-name, $_vd-nav-colour in $vd-nav-item-colours {
64
- .vd-nav-item--#{$_vd-nav-colour-name} {
65
- .vd-nav-item-icon { color: $_vd-nav-colour; }
81
+ transition: padding-right $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
82
+ }
66
83
 
67
- &.vd-nav-item--active,
68
- &.vd-nav-item--pending {
69
- border-color: $_vd-nav-colour;
70
- }
71
- }
84
+ .vd-nav-divider {
85
+ padding-left: $vd-sidebar-tab-padding-x;
86
+ justify-content: flex-start;
72
87
  }
73
88
  }
@@ -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;
@@ -20,7 +20,7 @@
20
20
 
21
21
  &:hover {
22
22
  opacity: 1;
23
- }
23
+ }
24
24
  }
25
25
 
26
26
  .vd-nav-item-icon + .vd-nav-item-label {
@@ -40,6 +40,6 @@
40
40
  }
41
41
 
42
42
  .vd-logo {
43
- padding-left: 34px;
43
+ padding-left: 23px;
44
44
  }
45
45
  }
@@ -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) {
@@ -1,7 +1,7 @@
1
1
  // Base mixins.
2
2
 
3
3
  // Reset container defaults
4
- @mixin vd-reset () {
4
+ @mixin vd-reset() {
5
5
  @include font-smoothing;
6
6
 
7
7
  font-family: $vd-font-lato;
@@ -9,4 +9,3 @@
9
9
  line-height: normal;
10
10
  color: vd-colour(text);
11
11
  }
12
-
@@ -1,7 +1,7 @@
1
1
  // =================================== Responsive Grid =================================== //
2
2
 
3
3
  // Grid Settings
4
- @use "sass:math";
4
+ @use 'sass:math';
5
5
 
6
6
  $vd-grid-columns: 12 !default;
7
7
  $vd-grid-block-max: 8 !default;
@@ -15,7 +15,7 @@ $vd-grid-row-gutter-large: 24px;
15
15
  //
16
16
  // @param {String} $breakpoint - the breakpoint size to attach to the column.
17
17
  //
18
- @mixin vd-grid-columns ($breakpoint) {
18
+ @mixin vd-grid-columns($breakpoint) {
19
19
  @for $i from 1 through $vd-grid-columns {
20
20
  $_vd-column-width: percentage(math.div($i, $vd-grid-columns));
21
21
 
@@ -33,7 +33,7 @@ $vd-grid-row-gutter-large: 24px;
33
33
  //
34
34
  // @param {String} $breakpoint - the breakpoint size to attach to the column.
35
35
  //
36
- @mixin vd-grid-block-columns ($breakpoint) {
36
+ @mixin vd-grid-block-columns($breakpoint) {
37
37
  @for $i from 1 through $vd-grid-block-max {
38
38
  .vd-g-#{$breakpoint}-up-#{$i} {
39
39
  flex-wrap: wrap;
@@ -54,7 +54,7 @@ $vd-grid-row-gutter-large: 24px;
54
54
  //
55
55
  // @param {String} $breakpoint - the breakpoint size to attach to the column.
56
56
  //
57
- @mixin vd-build-grid-columns ($breakpoint) {
57
+ @mixin vd-build-grid-columns($breakpoint) {
58
58
  @include vd-grid-columns($breakpoint);
59
59
  @include vd-grid-block-columns($breakpoint);
60
60
  }
@@ -63,7 +63,7 @@ $vd-grid-row-gutter-large: 24px;
63
63
  //
64
64
  // @mixin vd-build-grid.
65
65
  //
66
- @mixin vd-build-grid () {
66
+ @mixin vd-build-grid() {
67
67
  .vd-g-row {
68
68
  max-width: $vd-section-wrap-max-width;
69
69
  margin-left: auto;
@@ -1,10 +1,10 @@
1
1
  // Layout Spacing; @todo this should be renamed - it has nothing to do with the grid.
2
2
  $vd-grid-unit: 4px;
3
3
 
4
- @function vd-grid-unit ($times:1) {
4
+ @function vd-grid-unit($times: 1) {
5
5
  @return $vd-grid-unit * $times;
6
6
  }
7
7
 
8
- @function vd-grid-gutter ($times:1) {
8
+ @function vd-grid-gutter($times: 1) {
9
9
  @return vd-grid-unit(4) * $times;
10
10
  }
@@ -54,6 +54,7 @@
54
54
  @import '../../components/vd-section/vd-section-ns';
55
55
  @import '../../components/vd-select/vd-select-ns';
56
56
  @import '../../components/vd-section-back/vd-section-back-ns';
57
+ @import '../../components/vd-sidebar/vd-sidebar-ns';
57
58
  @import '../../components/vd-sidebar-drawer/vd-sidebar-drawer-ns';
58
59
  @import '../../components/vd-sidebar-tabs/vd-sidebar-tabs-ns';
59
60
  @import '../../components/vd-status-icon/vd-status-icon-ns';