@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,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
  }
@@ -0,0 +1,14 @@
1
+ .vd-nav-divider {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ height: 25px;
6
+
7
+ &::before {
8
+ content: '';
9
+ display: block;
10
+ height: 1px;
11
+ width: 20px;
12
+ background-color: vd-colour(keyline);
13
+ }
14
+ }
@@ -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
  }
@@ -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
  }
@@ -0,0 +1,95 @@
1
+ /**
2
+ Temporary overrides for feature flag `sidebar_new`.
3
+
4
+ Those overrides bring back the old sidebar styles unless
5
+ the class `vd-sidebar--new` is set.
6
+
7
+ @REMOVEME: When flag `sidebar_new` is fully rolled out
8
+ */
9
+ .vd-sidebar:not(.vd-sidebar--new) {
10
+ .vd-sidebar-tabs {
11
+ width: 85px;
12
+ font-size: 12px;
13
+
14
+ padding-top: 0;
15
+ padding-bottom: 0;
16
+
17
+ .vd-nav-item {
18
+ width: 100%;
19
+ height: 75px;
20
+ }
21
+
22
+ .vd-nav-item--active {
23
+ &::before {
24
+ content: none;
25
+ }
26
+ }
27
+
28
+ .vd-nav-item-action {
29
+ flex-direction: column;
30
+ justify-content: center;
31
+ position: relative;
32
+ }
33
+
34
+ .vd-nav-item-icon {
35
+ width: auto;
36
+ padding-left: 0;
37
+ padding-right: 0;
38
+ }
39
+
40
+ .vd-nav-item-label {
41
+ font-size: 12px;
42
+ font-weight: $vd-font-weight--bold;
43
+ }
44
+
45
+ .vd-nav-divider,
46
+ .vd-sidebar-expander,
47
+ .vd-nav-item-icon--new {
48
+ display: none;
49
+ }
50
+ }
51
+
52
+ .vd-sidebar-drawer {
53
+ width: 155px;
54
+
55
+ padding-top: 0;
56
+ padding-bottom: 0;
57
+
58
+ .vd-nav-item {
59
+ font-weight: $vd-font-weight--bold;
60
+ }
61
+
62
+ .vd-nav-item--active {
63
+ &::before {
64
+ content: none;
65
+ }
66
+ }
67
+
68
+ .vd-nav-item-action {
69
+ padding: 20px 10px;
70
+ }
71
+
72
+ .vd-nav-item-label {
73
+ font-size: 14px;
74
+ }
75
+ }
76
+ }
77
+
78
+ .nv-topnav-container:not(.vd-sidebar--new) {
79
+ .vd-logo {
80
+ padding-left: 34px;
81
+ }
82
+ }
83
+
84
+ .vd-sidebar.vd-sidebar--new {
85
+ .vd-sidebar-tabs {
86
+ .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
87
+ display: none;
88
+ }
89
+ }
90
+
91
+ .vd-sidebar-expander,
92
+ .vd-nav-item-icon--new {
93
+ display: block !important;
94
+ }
95
+ }
@@ -0,0 +1,23 @@
1
+ $vd-sidebar-base-z-index: $vd-z-index-navigation-base;
2
+ $vd-sidebar-modal-z-index: $vd-modals-z-index + 1;
3
+ $vd-sidebar-modal-close-base-offset: 10px;
4
+ $vd-sidebar-modal-close-right-offset: -($vd-dialog-close-width + $vd-sidebar-modal-close-base-offset);
5
+
6
+ $vd-sidebar-content-box-shadow-offset-x: 1px;
7
+ $vd-sidebar-tabs-mobile-width: 85px;
8
+ $vd-sidebar-drawer-mobile-width: 145px;
9
+
10
+ $vd-sidebar-width: 240px;
11
+
12
+ @mixin vd-sidebar-active-indicator() {
13
+ position: relative;
14
+ &::before {
15
+ content: '';
16
+ position: absolute;
17
+ top: 0;
18
+ bottom: 0;
19
+ right: 0;
20
+ width: 4px;
21
+ background-color: vd-colour(go);
22
+ }
23
+ }