@lightspeed/design-system-css 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (216) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/LICENSE.md +24 -0
  3. package/README.md +70 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +9 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/themes/types.d.ts +54 -0
  8. package/dist/themes/types.js +16 -0
  9. package/dist/themes/types.js.map +1 -0
  10. package/dist/themes/xseries/dark.d.ts +68 -0
  11. package/dist/themes/xseries/dark.js +84 -0
  12. package/dist/themes/xseries/dark.js.map +1 -0
  13. package/dist/themes/xseries/light.d.ts +68 -0
  14. package/dist/themes/xseries/light.js +84 -0
  15. package/dist/themes/xseries/light.js.map +1 -0
  16. package/dist/vend-styles.css +6643 -0
  17. package/package.json +34 -0
  18. package/src/fonts-ui/fonts-ns.scss +14 -0
  19. package/src/images-ui/images-ui-ns.scss +1 -0
  20. package/src/index.ts +9 -0
  21. package/src/themes/themeToScss.ts +67 -0
  22. package/src/themes/types.ts +68 -0
  23. package/src/themes/xseries/dark.ts +90 -0
  24. package/src/themes/xseries/light.ts +89 -0
  25. package/src/vend-stylelint/use-colour-function.js +60 -0
  26. package/src/vend-styles/components/BarChart/BarChart.scss +45 -0
  27. package/src/vend-styles/components/Carousel/Carousel.scss +114 -0
  28. package/src/vend-styles/components/CodeInput/CodeInput.scss +25 -0
  29. package/src/vend-styles/components/CurrencyInput/CurrencyInput.scss +4 -0
  30. package/src/vend-styles/components/DatePicker/DatePicker.scss +232 -0
  31. package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +32 -0
  32. package/src/vend-styles/components/FileUpload/FileUpload.scss +8 -0
  33. package/src/vend-styles/components/InboundIndicator/InboundIndicator.scss +7 -0
  34. package/src/vend-styles/components/InboundItem/InboundItem.scss +3 -0
  35. package/src/vend-styles/components/LineChart/LineChart.scss +99 -0
  36. package/src/vend-styles/components/Modal/Modal.scss +149 -0
  37. package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -0
  38. package/src/vend-styles/components/PageHeader/_PageHeader.scss +3 -0
  39. package/src/vend-styles/components/ProgressBar/ProgressBar.scss +21 -0
  40. package/src/vend-styles/components/PromotionModal/PromotionModal.scss +44 -0
  41. package/src/vend-styles/components/SearchFilters/SearchFilters.scss +6 -0
  42. package/src/vend-styles/components/TableList/TableList.scss +291 -0
  43. package/src/vend-styles/components/TableList/_TableList-ns.scss +15 -0
  44. package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +53 -0
  45. package/src/vend-styles/components/UpsellPrimary/_UpsellPrimary-ns.scss +12 -0
  46. package/src/vend-styles/components/UpsellSecondary/UpsellSecondary.scss +30 -0
  47. package/src/vend-styles/components/VendVideo/VendVideo.scss +48 -0
  48. package/src/vend-styles/utilities/position.scss +3 -0
  49. package/src/vend-styles/utilities/text.scss +9 -0
  50. package/src/vend-styles/vend-styles.scss +39 -0
  51. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex-ns.scss +2 -0
  52. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +47 -0
  53. package/src/vend.ui/behaviours/vd-align/vd-align.scss +3 -0
  54. package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +3 -0
  55. package/src/vend.ui/components/vd-action-bar/vd-action-bar.scss +33 -0
  56. package/src/vend.ui/components/vd-autocomplete/vd-autocomplete.scss +36 -0
  57. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +68 -0
  58. package/src/vend.ui/components/vd-avatar/vd-avatar-ns.scss +3 -0
  59. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +78 -0
  60. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi-ns.scss +4 -0
  61. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +70 -0
  62. package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -0
  63. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge-ns.scss +10 -0
  64. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +159 -0
  65. package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +16 -0
  66. package/src/vend.ui/components/vd-banner/vd-banner.scss +89 -0
  67. package/src/vend.ui/components/vd-bg/vd-bg.scss +4 -0
  68. package/src/vend.ui/components/vd-body/vd-body.scss +20 -0
  69. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +121 -0
  70. package/src/vend.ui/components/vd-btn/_vd-btn-ns.scss +7 -0
  71. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +74 -0
  72. package/src/vend.ui/components/vd-btn/vd-btn.scss +112 -0
  73. package/src/vend.ui/components/vd-card/vd-card-ns.scss +9 -0
  74. package/src/vend.ui/components/vd-card/vd-card.scss +11 -0
  75. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +120 -0
  76. package/src/vend.ui/components/vd-checkbox/vd-checkbox-ns.scss +7 -0
  77. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +158 -0
  78. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +74 -0
  79. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +332 -0
  80. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +10 -0
  81. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +220 -0
  82. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss +8 -0
  83. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +117 -0
  84. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer-ns.scss +1 -0
  85. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +22 -0
  86. package/src/vend.ui/components/vd-dott/vd-dott.scss +41 -0
  87. package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +15 -0
  88. package/src/vend.ui/components/vd-expandable/vd-expandable.scss +11 -0
  89. package/src/vend.ui/components/vd-feedback/vd-feedback.scss +23 -0
  90. package/src/vend.ui/components/vd-field/vd-field-ns.scss +4 -0
  91. package/src/vend.ui/components/vd-field/vd-field.scss +59 -0
  92. package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss +19 -0
  93. package/src/vend.ui/components/vd-flag/vd-flag-ns.scss +1 -0
  94. package/src/vend.ui/components/vd-flag/vd-flag.scss +46 -0
  95. package/src/vend.ui/components/vd-flex/vd-flex.scss +21 -0
  96. package/src/vend.ui/components/vd-grid/vd-grid.scss +26 -0
  97. package/src/vend.ui/components/vd-header/vd-header.scss +34 -0
  98. package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +28 -0
  99. package/src/vend.ui/components/vd-hero/vd-hero.scss +114 -0
  100. package/src/vend.ui/components/vd-hr/vd-hr.scss +14 -0
  101. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +61 -0
  102. package/src/vend.ui/components/vd-input/vd-input-ns.scss +99 -0
  103. package/src/vend.ui/components/vd-input/vd-input.scss +49 -0
  104. package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss +8 -0
  105. package/src/vend.ui/components/vd-link/vd-link.scss +23 -0
  106. package/src/vend.ui/components/vd-loader/vd-loader.scss +56 -0
  107. package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +40 -0
  108. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +38 -0
  109. package/src/vend.ui/components/vd-main-content/vd-main-content.scss +39 -0
  110. package/src/vend.ui/components/vd-modals-container/vd-modals-container.scss +5 -0
  111. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +32 -0
  112. package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss +30 -0
  113. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +62 -0
  114. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -0
  115. package/src/vend.ui/components/vd-overlay/vd-overlay.scss +19 -0
  116. package/src/vend.ui/components/vd-p/vd-p.scss +8 -0
  117. package/src/vend.ui/components/vd-panel/vd-panel.scss +9 -0
  118. package/src/vend.ui/components/vd-popover/vd-popover-ns.scss +5 -0
  119. package/src/vend.ui/components/vd-popover/vd-popover.scss +180 -0
  120. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +16 -0
  121. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +128 -0
  122. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +12 -0
  123. package/src/vend.ui/components/vd-promo/vd-promo.scss +86 -0
  124. package/src/vend.ui/components/vd-radio/vd-radio-ns.scss +7 -0
  125. package/src/vend.ui/components/vd-radio/vd-radio.scss +130 -0
  126. package/src/vend.ui/components/vd-save/vd-save.scss +4 -0
  127. package/src/vend.ui/components/vd-scrollable/vd-scrollable-ns.scss +2 -0
  128. package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +54 -0
  129. package/src/vend.ui/components/vd-section/vd-section-ns.scss +17 -0
  130. package/src/vend.ui/components/vd-section/vd-section.scss +118 -0
  131. package/src/vend.ui/components/vd-section-back/vd-section-back-ns.scss +3 -0
  132. package/src/vend.ui/components/vd-section-back/vd-section-back.scss +34 -0
  133. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +82 -0
  134. package/src/vend.ui/components/vd-select/vd-select-group.scss +47 -0
  135. package/src/vend.ui/components/vd-select/vd-select-inline.scss +40 -0
  136. package/src/vend.ui/components/vd-select/vd-select-ns.scss +17 -0
  137. package/src/vend.ui/components/vd-select/vd-select.scss +26 -0
  138. package/src/vend.ui/components/vd-settings/vd-settings-ns.scss +1 -0
  139. package/src/vend.ui/components/vd-settings/vd-settings.scss +8 -0
  140. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +10 -0
  141. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +6 -0
  142. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +47 -0
  143. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +15 -0
  144. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +73 -0
  145. package/src/vend.ui/components/vd-splash/vd-splash.scss +47 -0
  146. package/src/vend.ui/components/vd-status-icon/vd-status-icon-ns.scss +1 -0
  147. package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss +12 -0
  148. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +5 -0
  149. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss +76 -0
  150. package/src/vend.ui/components/vd-switch/vd-switch-ns.scss +8 -0
  151. package/src/vend.ui/components/vd-switch/vd-switch.scss +117 -0
  152. package/src/vend.ui/components/vd-table/vd-table-ns.scss +13 -0
  153. package/src/vend.ui/components/vd-table/vd-table.scss +251 -0
  154. package/src/vend.ui/components/vd-tabs/_vd-tabs-ns.scss +3 -0
  155. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +76 -0
  156. package/src/vend.ui/components/vd-text/vd-text.scss +18 -0
  157. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification-ns.scss +3 -0
  158. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +58 -0
  159. package/src/vend.ui/components/vd-tooltip/vd-tooltip-ns.scss +1 -0
  160. package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss +15 -0
  161. package/src/vend.ui/components/vd-topbar/vd-topbar-ns.scss +10 -0
  162. package/src/vend.ui/components/vd-topbar/vd-topbar.scss +36 -0
  163. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +73 -0
  164. package/src/vend.ui/fonts/fira-mono-regular.woff2 +0 -0
  165. package/src/vend.ui/fonts/lato-black.woff2 +0 -0
  166. package/src/vend.ui/fonts/lato-bold.woff2 +0 -0
  167. package/src/vend.ui/fonts/lato-regular.woff2 +0 -0
  168. package/src/vend.ui/styles/global/_base-mixins.scss +12 -0
  169. package/src/vend.ui/styles/global/_button-mixins.scss +17 -0
  170. package/src/vend.ui/styles/global/_grid.scss +102 -0
  171. package/src/vend.ui/styles/global/_helper-mixins.scss +36 -0
  172. package/src/vend.ui/styles/global/_layout.scss +10 -0
  173. package/src/vend.ui/styles/global/_misc.scss +14 -0
  174. package/src/vend.ui/styles/global/_non-styles.scss +72 -0
  175. package/src/vend.ui/styles/global/_normalise.scss +16 -0
  176. package/src/vend.ui/styles/global/_placeholders.scss +11 -0
  177. package/src/vend.ui/styles/global/_z-index.scss +40 -0
  178. package/src/vend.ui/styles/global/colour/_base.scss +105 -0
  179. package/src/vend.ui/styles/global/colour/_colour-functions.scss +76 -0
  180. package/src/vend.ui/styles/global/colour/_colour-helpers.scss +7 -0
  181. package/src/vend.ui/styles/global/colour/_colour.scss +5 -0
  182. package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss +12 -0
  183. package/src/vend.ui/styles/global/colour/themes/_css-var-theme-generator.scss +1 -0
  184. package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss +81 -0
  185. package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss +5 -0
  186. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss +53 -0
  187. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss +53 -0
  188. package/src/vend.ui/styles/global/effects/_effects-ns.scss +13 -0
  189. package/src/vend.ui/styles/global/effects/_effects.scss +22 -0
  190. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +12 -0
  191. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +24 -0
  192. package/src/vend.ui/styles/global/spacing/_spacing.scss +4 -0
  193. package/src/vend.ui/styles/global/text/_base.scss +6 -0
  194. package/src/vend.ui/styles/global/text/_text-definitions.scss +65 -0
  195. package/src/vend.ui/styles/global/text/_text-helpers.scss +17 -0
  196. package/src/vend.ui/styles/global/text/_text-mixins.scss +141 -0
  197. package/src/vend.ui/styles/global/text/_text.scss +3 -0
  198. package/src/vend.ui/styles/global/utils/_functions.scss +84 -0
  199. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +37 -0
  200. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +37 -0
  201. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +157 -0
  202. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +18 -0
  203. package/src/vend.ui/styles/navi/_non-styles.scss +2 -0
  204. package/src/vend.ui/styles/navi/_nv-account-banner.scss +12 -0
  205. package/src/vend.ui/styles/navi/_nv-notifications-item.scss +15 -0
  206. package/src/vend.ui/styles/navi/_nv-sidenav.scss +143 -0
  207. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +24 -0
  208. package/src/vend.ui/styles/navi/_nv-topnav.scss +112 -0
  209. package/src/vend.ui/styles/navi/_nv-user-sale-data.scss +14 -0
  210. package/src/vend.ui/styles/navi/dialogs/_nv-dialog-drawer.scss +44 -0
  211. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +85 -0
  212. package/src/vend.ui/styles/navi/dialogs/_nv-user-dialog.scss +44 -0
  213. package/src/vend.ui/styles/navi/navi.scss +12 -0
  214. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +48 -0
  215. package/src/vend.ui/styles/navi/non-styles/_variables.scss +26 -0
  216. package/src/vend.ui/styles/vend-ui.scss +98 -0
@@ -0,0 +1,12 @@
1
+ $vd-promos-spacing: vd-grid-unit(3) !default;
2
+ $vd-promo-image-container-min-height: 100px !default;
3
+
4
+ // Promo Headline
5
+ @mixin vd-promo-headline () {
6
+ @include vd-heading-reset();
7
+ @include vd-line-height(30, 24);
8
+ @include font-smoothing;
9
+
10
+ font-family: $vd-font-lato;
11
+ font-size: vd-text-size(heading);
12
+ }
@@ -0,0 +1,86 @@
1
+
2
+ // Promo
3
+ .vd-promo {
4
+ display: flex;
5
+ flex-direction: column;
6
+ align-items: center;
7
+ justify-content: center;
8
+
9
+ box-sizing: border-box;
10
+ padding: $vd-promos-spacing;
11
+ text-align: center;
12
+ font-family: $vd-font-lato;
13
+ }
14
+
15
+ .vd-promo-headline {
16
+ @include vd-promo-headline;
17
+ margin: $vd-promos-spacing 0;
18
+ }
19
+
20
+ .vd-promo-image-container {
21
+ display: flex;
22
+ justify-content: center;
23
+ align-items: center;
24
+ min-height: $vd-promo-image-container-min-height;
25
+ }
26
+
27
+ .vd-promo-image {
28
+ max-width: 100%;
29
+ height: auto;
30
+ }
31
+
32
+ .vd-promo-intro {
33
+ @include vd-line-height(25, 15);
34
+ font-size: vd-text-size(body);
35
+ margin: 0;
36
+ }
37
+
38
+ .vd-promo-actions {
39
+ margin-top: vd-grid-unit(4);
40
+ display: flex;
41
+ justify-content: space-between;
42
+ }
43
+
44
+ // Promo Full Width
45
+ .vd-promo--full {
46
+ flex-basis: 100%;
47
+ justify-content: flex-start;
48
+ flex-direction: row;
49
+
50
+ text-align: left;
51
+
52
+ @include vd-viewport-media-max(small) {
53
+ flex-direction: column;
54
+ justify-content: center;
55
+
56
+ text-align: center;
57
+ }
58
+
59
+ .vd-promo-content {
60
+ padding: 0 vd-grid-unit(5);
61
+ align-self: center;
62
+ }
63
+
64
+ .vd-promo-headline {
65
+ margin-top: 0;
66
+
67
+ @include vd-viewport-media-max(small) {
68
+ margin: $vd-promos-spacing 0;
69
+ }
70
+ }
71
+
72
+ .vd-promo-image-container {
73
+ flex-shrink: 0;
74
+ }
75
+ }
76
+
77
+ // Promo Greyscale
78
+ .vd-promo--disabled {
79
+ filter: grayscale(100%);
80
+ opacity: 0.35;
81
+ }
82
+
83
+ // Promo Image Restrained
84
+ .vd-promo-image--restrained {
85
+ width: 110px;
86
+ }
@@ -0,0 +1,7 @@
1
+ $vd-radio-length: vd-grid-unit(5);
2
+ $vd-radio-tick-length: 6px;
3
+ $vd-radio-tick-position: $vd-radio-tick-length - 1;
4
+
5
+ $vd-radio-length--large: 26px;
6
+ $vd-radio-tick-length--large: 10px;
7
+ $vd-radio-tick-position--large: 6px;
@@ -0,0 +1,130 @@
1
+ @keyframes vd-radio-checked {
2
+ 0% { transform: scale(0); }
3
+ 33% { transform: scale(1.8); }
4
+ 66% { transform: scale(1); }
5
+ }
6
+
7
+ .vd-radio {
8
+ display: inline-block;
9
+ position: relative;
10
+ padding: 0 vd-grid-unit(1);
11
+
12
+ &:first-child { padding-left: 0 }
13
+ &:last-child { padding-right: 0 }
14
+ }
15
+
16
+ .vd-radio-container {
17
+ padding-bottom: vd-grid-unit(3);
18
+ display: flex;
19
+ align-items: flex-start;
20
+ flex-direction: column;
21
+ cursor: pointer;
22
+
23
+ &:last-child { padding-bottom: 0 }
24
+ }
25
+
26
+ .vd-radio-input-container {
27
+ display: flex;
28
+ align-items: center;
29
+ }
30
+
31
+ .vd-radio-label { padding-left: vd-grid-unit(3); }
32
+
33
+ .vd-radio-description {
34
+ @include vd-text(supplementary);
35
+ padding-top: vd-grid-unit(2);
36
+ padding-left: $vd-radio-length + vd-grid-unit(3);
37
+ }
38
+
39
+ .vd-radio-description--disabled {
40
+ opacity: $vd-opacity;
41
+ }
42
+
43
+ .vd-radio-input { @extend %vd-invisible-checkbox-input; }
44
+
45
+ .vd-radio-tick {
46
+ flex-shrink: 0;
47
+ display: inline-block;
48
+ position: relative;
49
+ height: $vd-radio-length;
50
+ width: $vd-radio-length;
51
+ border-radius: 50%;
52
+ background-color: vd-colour(box);
53
+ border: vd-border(framing, 2px);
54
+ box-sizing: border-box;
55
+
56
+ &:after {
57
+ content: '';
58
+ display: block;
59
+ position: absolute;
60
+ height: $vd-radio-tick-length;
61
+ width: $vd-radio-tick-length;
62
+ border-radius: 50%;
63
+ background-color: vd-colour(framing);
64
+ opacity: 0;
65
+ left: $vd-radio-tick-position;
66
+ top: $vd-radio-tick-position;
67
+ transition: opacity $vd-time-s;
68
+ }
69
+ }
70
+
71
+ .vd-radio--large {
72
+ .vd-radio-tick {
73
+ height: $vd-radio-length--large;
74
+ width: $vd-radio-length--large;
75
+
76
+ &:after {
77
+ height: $vd-radio-tick-length--large;
78
+ width: $vd-radio-tick-length--large;
79
+ left: $vd-radio-tick-position--large;
80
+ top: $vd-radio-tick-position--large;
81
+ }
82
+ }
83
+ .vd-radio-description {
84
+ padding-left: $vd-radio-length--large + vd-grid-unit(3);
85
+ }
86
+ }
87
+
88
+ .vd-radio-input:hover + .vd-radio-tick:after { opacity: 1; }
89
+
90
+ // Checked
91
+ .vd-radio-input:checked + .vd-radio-tick {
92
+ transition: background-color $vd-time-l;
93
+ background-color: vd-colour(do);
94
+ border-color: vd-colour(do);
95
+
96
+ &:after {
97
+ opacity: 1;
98
+ animation: vd-radio-checked $vd-time-l;
99
+ background-color: vd-colour(text-action);
100
+ box-sizing: content-box;
101
+ backface-visibility: hidden;
102
+ }
103
+ }
104
+
105
+ // Disabled
106
+ .vd-radio.vd-disabled .vd-radio-input,
107
+ .vd-radio-input:disabled {
108
+ cursor: not-allowed;
109
+ filter: grayscale(100%);
110
+
111
+ &:hover + .vd-radio-tick:after { opacity: 0; }
112
+ &:hover:checked + .vd-radio-tick:after {
113
+ opacity: 1;
114
+ background-color: vd-colour(box);
115
+ }
116
+
117
+ ~ .vd-radio-label {
118
+ opacity: $vd-opacity;
119
+ }
120
+
121
+ &:checked ~ .vd-radio-tick {
122
+ filter: grayscale(100%);
123
+ opacity: $vd-opacity;
124
+ }
125
+ }
126
+
127
+ // Focus
128
+ .vd-radio:focus-within {
129
+ box-shadow: 0 0 5px 2px vd-colour(go);
130
+ }
@@ -0,0 +1,4 @@
1
+ .vd-save {
2
+ display: block;
3
+ flex-shrink: 0;
4
+ }
@@ -0,0 +1,2 @@
1
+ $vd-scrollable-indicator-height: 30px;
2
+ $vd-scrollable-indicator-width: 90%;
@@ -0,0 +1,54 @@
1
+ .vd-scrollable-container {
2
+ // Fixes overflow in a full screen splash modal
3
+ max-height: 100%;
4
+ position: relative;
5
+ display: flex;
6
+ flex-direction: column;
7
+ flex: 1;
8
+ // Fixes up overflow issues in Firefox
9
+ min-height: 0;
10
+ }
11
+
12
+ .vd-scrollable {
13
+ overflow-y: auto;
14
+ flex: 1;
15
+ }
16
+
17
+ .vd-scrollable-indicator {
18
+ opacity: 0;
19
+ position: absolute;
20
+ height: $vd-scrollable-indicator-height;
21
+ width: $vd-scrollable-indicator-width;
22
+ margin: 0 (-$vd-scrollable-indicator-width / 2);
23
+ left: 50%;
24
+ z-index: $vd-z-index-content-base;
25
+ user-select: none;
26
+ pointer-events: none;
27
+ overflow: hidden;
28
+ transition: opacity 50ms ease 0s;
29
+
30
+ &::before {
31
+ content: '';
32
+ box-shadow: 0 0 $vd-scrollable-indicator-height vd-colour(shadow);
33
+ border-radius: 100%;
34
+ width: 100%;
35
+ height: 100%;
36
+ position: absolute;
37
+ }
38
+ }
39
+
40
+ .vd-scrollable-monobrow {
41
+ top: 0;
42
+
43
+ &::before {
44
+ transform: translateY(-100%);
45
+ }
46
+ }
47
+
48
+ .vd-scrollable-goatee {
49
+ bottom: 0;
50
+
51
+ &::before {
52
+ transform: translateY(100%);
53
+ }
54
+ }
@@ -0,0 +1,17 @@
1
+ // vd section
2
+ $vd-section-wrap-max-width: 1100px !default;
3
+
4
+ $vd-section-padding-h: vd-grid-unit(12);
5
+ $vd-section-padding-v: vd-grid-unit(6);
6
+
7
+ $vd-section-padding-h-med: vd-grid-unit(8);
8
+ $vd-section-padding-v-med: vd-grid-unit(4);
9
+
10
+ $vd-section-padding-h-sml: vd-grid-unit(6);
11
+ $vd-section-padding-v-sml: vd-grid-unit(4);
12
+
13
+ $vd-section--panel-margin-h: vd-grid-unit(6);
14
+
15
+ // Action bars
16
+ $vd-section--action-bar-min-height: 45px;
17
+ $vd-section--action-bar-spacing: vd-grid-unit(6);
@@ -0,0 +1,118 @@
1
+ :root {
2
+ --vd-section-padding-h: #{$vd-section-padding-h};
3
+ --vd-section-padding-v: #{$vd-section-padding-v};
4
+ }
5
+
6
+ @include vd-viewport-media-max(medium) {
7
+ :root {
8
+ --vd-section-padding-h: #{$vd-section-padding-h-med};
9
+ --vd-section-padding-v: #{$vd-section-padding-v-med};
10
+ }
11
+ }
12
+
13
+ @include vd-viewport-media-max(small) {
14
+ :root {
15
+ --vd-section-padding-h: #{$vd-section-padding-h-sml};
16
+ --vd-section-padding-v: #{$vd-section-padding-v-sml};
17
+ }
18
+ }
19
+
20
+ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
21
+ display: block;
22
+ position: relative;
23
+ font-size: vd-text-size(body);
24
+ padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
25
+
26
+ .vd-section-wrap {
27
+ display: block;
28
+ margin: 0 auto;
29
+ max-width: $vd-section-wrap-max-width;
30
+ }
31
+
32
+ .vd-section-container {
33
+ margin: calc(var(--vd-section-padding-v) * -1) calc(var(--vd-section-padding-h) * -1);
34
+ padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
35
+ }
36
+
37
+ // Nested sections
38
+ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
39
+ padding: var(--vd-section-padding-v) 0;
40
+ }
41
+
42
+ // Fallback to base padding if browser doesn't support CSS variables
43
+ @supports ( not (--a: 0)) {
44
+ padding: $vd-section-padding-v $vd-section-padding-h;
45
+
46
+ .vd-section-container {
47
+ margin: -#{$vd-section-padding-v} -#{$vd-section-padding-h};
48
+ padding: $vd-section-padding-v $vd-section-padding-h;
49
+ }
50
+
51
+ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
52
+ padding: $vd-section-padding-v 0;
53
+ }
54
+ }
55
+ }
56
+
57
+ .vd-section--secondary {
58
+ &, .vd-section-container { background-color: vd-colour(framing); }
59
+ }
60
+
61
+ .vd-section--tertiary {
62
+ &, .vd-section-container { background-color: vd-colour(box); }
63
+ }
64
+
65
+ .vd-section--panel {
66
+ border-bottom: vd-border(keyline);
67
+ margin: 0 $vd-section--panel-margin-h;
68
+
69
+ &:last-child { border-bottom: none; }
70
+ }
71
+
72
+ .vd-section--fixed {
73
+ @include vd-shadow();
74
+
75
+ &::after {
76
+ @include vd-fade-in($vd-time-s);
77
+
78
+ bottom: 4px;
79
+ height: 40px;
80
+ border-radius: 100%;
81
+ top: auto;
82
+ opacity: 0;
83
+ }
84
+
85
+ position: fixed;
86
+ top: $vd-top-nav-height;
87
+ right: 0;
88
+ z-index: $vd-z-index-navigation-base;
89
+ box-sizing: border-box;
90
+ }
91
+
92
+ .vd-section--action-bar {
93
+ &, .vd-section-container { background-color: vd-colour(framing); }
94
+
95
+ .vd-section-wrap {
96
+ min-height: $vd-section--action-bar-min-height;
97
+ display: flex;
98
+ justify-content: space-between;
99
+ align-items: center;
100
+
101
+ @include vd-viewport-media-max ($vd-breakpoint-small) {
102
+ flex-wrap: wrap;
103
+ }
104
+ }
105
+ }
106
+
107
+ .vd-section--action-bar-about {
108
+ padding-right: $vd-section--action-bar-spacing;
109
+
110
+ @include vd-viewport-media-max ($vd-breakpoint-small) {
111
+ flex-basis: 100%;
112
+ padding: 0 0 $vd-section--action-bar-spacing 0;
113
+ }
114
+ }
115
+
116
+ .vd-section--action-bar-actions {
117
+ display: flex;
118
+ }
@@ -0,0 +1,3 @@
1
+ $vd-section-back-height: 20px;
2
+ $vd-section-back-width: 20px;
3
+ $vd-section-back-icon-font-size: 24px;
@@ -0,0 +1,34 @@
1
+ .vd-section-back {
2
+ border-radius: $vd-section-back-height / 2;
3
+ background-color: transparent;
4
+ cursor: pointer;
5
+ position: absolute;
6
+ left: -33px;
7
+ top: 12px;
8
+
9
+ .vd-section-back-icon {
10
+ display: block;
11
+ color: vd-colour(keyline);
12
+ font-size: $vd-section-back-icon-font-size;
13
+ transition: all $vd-time-s;
14
+ transition-property: margin-left, padding-right, color;
15
+ }
16
+
17
+ &:hover {
18
+ .vd-section-back-icon {
19
+ margin-left: -2px;
20
+ padding-right: 2px;
21
+ color: vd-colour(do);
22
+ }
23
+ }
24
+
25
+ @include vd-viewport-media-max(medium) {
26
+ position: relative;
27
+ left: 0;
28
+
29
+ .vd-section-back-icon {
30
+ display: inline-block;
31
+ vertical-align: text-top;
32
+ }
33
+ }
34
+ }
@@ -0,0 +1,82 @@
1
+ .vd-segcontrol {
2
+ &:first-of-type .vd-segcontrol-button {
3
+ border-left: vd-border(framing, $vd-input-border-width);
4
+ border-radius: $vd-border-radius 0 0 $vd-border-radius;
5
+ }
6
+
7
+ &:last-of-type .vd-segcontrol-button {
8
+ border-radius: 0 $vd-border-radius $vd-border-radius 0;
9
+ border-right: vd-border(framing, $vd-input-border-width);
10
+ }
11
+
12
+ position: relative;
13
+ display: flex;
14
+ text-align: center;
15
+ font-weight: normal;
16
+ }
17
+
18
+ .vd-segcontrol--stretched {
19
+ width: 100%;
20
+ }
21
+
22
+ .vd-segcontrol--selected {
23
+ .vd-segcontrol-button {
24
+ border-color: vd-colour(do) !important;
25
+ z-index: 3;
26
+ }
27
+ }
28
+
29
+ .vd-segcontrol:not(.vd-segcontrol--selected):not(.vd-segcontrol--disabled):hover {
30
+ .vd-segcontrol-input:not(:disabled) ~ .vd-segcontrol-button {
31
+ z-index: 2;
32
+ border-color: vd-colour(keyline);
33
+ cursor: pointer;
34
+ }
35
+ }
36
+
37
+ .vd-segcontrol + .vd-segcontrol .vd-segcontrol-button {
38
+ margin-left: -$vd-input-border-width;
39
+ }
40
+
41
+ .vd-segcontrol-button {
42
+ display: flex;
43
+ flex-direction: column;
44
+ justify-content: flex-start;
45
+ align-items: center;
46
+ background-color: vd-colour(box);
47
+ padding: $vd-input-padding vd-grid-unit(5);
48
+ border: vd-border(framing, $vd-input-border-width);
49
+ color: vd-colour(text);
50
+ width: 100%;
51
+ transition-duration: $vd-time-s;
52
+ transition-property: background, border;
53
+ }
54
+
55
+ .vd-segcontrol-input {
56
+ visibility: hidden;
57
+ position: absolute;
58
+
59
+ &:checked + .vd-segcontrol-button {
60
+ color: vd-colour(text);
61
+ }
62
+
63
+ &:disabled + .vd-segcontrol-button {
64
+ @include disabled();
65
+
66
+ cursor: default;
67
+ pointer-events: none;
68
+ }
69
+ }
70
+
71
+ // Putting this at the bottom, so wins specificity wars.
72
+ .vd-segcontrol:active .vd-segcontrol-input + .vd-segcontrol-button {
73
+ background-color: vd-rgba(vd-colour(box-rgb), 0.2);
74
+ box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread vd-rgba(vd-colour(box-rgb), $vd-opacity);
75
+ }
76
+
77
+ .vd-segcontrol--panel {
78
+ width: 100%;
79
+ margin-left: vd-grid-unit(5);
80
+
81
+ &:first-of-type { margin-left: 0; }
82
+ }
@@ -0,0 +1,47 @@
1
+ .vd-select-group {
2
+ display: flex;
3
+ align-items: center;
4
+
5
+ // @todo remove vd-select-container when vd-select-input is deprecated
6
+ > .vd-select, .vd-select-container {
7
+ width: auto;
8
+ }
9
+
10
+ .vd-input {
11
+ margin-left: 0;
12
+ margin-right: 0;
13
+ flex: 1;
14
+ }
15
+
16
+ .vd-input, .vd-select {
17
+ position: relative;
18
+
19
+ &:focus {
20
+ z-index: $vd-select-input-group-focused-zindex;
21
+ }
22
+ }
23
+
24
+ .vd-input:not(:first-child), .vd-select:not(:first-child) {
25
+ @include remove-border-radius-left();
26
+ margin-left: -$vd-input-border-width;
27
+ }
28
+
29
+ .vd-select-container:not(:first-child) {
30
+ margin-left: -$vd-input-border-width;
31
+
32
+ .vd-select {
33
+ @include remove-border-radius-left();
34
+ }
35
+ }
36
+
37
+ .vd-input:not(:last-child), .vd-select:not(:last-child),
38
+ .vd-select-container:not(:last-child) .vd-select {
39
+ @include remove-border-radius-right();
40
+ }
41
+
42
+ .vd-input, .vd-select, .vd-select-container:not(:last-child) {
43
+ &.vd-error {
44
+ z-index: $vd-select-input-group-with-error-zindex;
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,40 @@
1
+ .vd-select-container--inline {
2
+ display: inline-block;
3
+ position: relative;
4
+
5
+ &::before, &::after {
6
+ display: none;
7
+ }
8
+
9
+ .vd-select {
10
+ position: absolute;
11
+ top: 0;
12
+ left: 0;
13
+ width: 100%;
14
+ line-height: inherit;
15
+ opacity: 0;
16
+ z-index: 1;
17
+ cursor: pointer;
18
+ }
19
+ }
20
+
21
+ .vd-select-inline {
22
+ display: inline-flex;
23
+ align-self: baseline;
24
+ }
25
+
26
+ .vd-select-inline--placeholder {
27
+ color: vd-colour(supplementary);
28
+ }
29
+
30
+ .vd-select-inline-text {
31
+ pointer-events: none;
32
+ text-decoration: underline;
33
+ }
34
+
35
+ .vd-select-inline-chevron {
36
+ font-size: 0.5em;
37
+ padding-left: 0.1em;
38
+ align-self: center;
39
+ pointer-events: none;
40
+ }
@@ -0,0 +1,17 @@
1
+ $vd-select-input-group-focused-zindex: $vd-z-index-content-base + 3;
2
+ $vd-select-input-group-with-error-zindex: $vd-select-input-group-focused-zindex - 1;
3
+
4
+ @mixin vd-select() {
5
+ @include vd-input-text();
6
+ @include vd-input-box-model();
7
+ @include vd-input-states();
8
+ appearance: none;
9
+ padding-right: 3 * $vd-input-padding;
10
+ }
11
+
12
+ @mixin vd-select-carets() {
13
+ background-repeat: no-repeat;
14
+ background-size: 10px 23px;
15
+ background-position: calc(100% - 10px) 10px;
16
+ background-image: vd-colour(select-arrows-bg);
17
+ }
@@ -0,0 +1,26 @@
1
+ // ⚠️ @warning This vd-select-container will be deprecated in an upcoming release. It was originally needed as it
2
+ // allowed us to show select chevrons with pseudo elements, but this is now achieved with inline svgs set on
3
+ // `.vd-select` directly.
4
+ .vd-select-container {
5
+ display: block;
6
+ position: relative;
7
+
8
+ // @todo This can be removed once we fully deprecate vd-select in favour of vd-select-input, since the vd-error class
9
+ // can just be added to the input.
10
+ &.vd-error {
11
+ .vd-select {
12
+ border-color: vd-colour(no);
13
+ &:focus {
14
+ box-shadow: 0 0 $vd-shadow-blur vd-colour(no);
15
+ }
16
+ }
17
+ }
18
+ }
19
+
20
+ .vd-select {
21
+ @include vd-select;
22
+ @include vd-select-carets;
23
+ }
24
+
25
+ @import "vd-select-group";
26
+ @import "vd-select-inline";
@@ -0,0 +1 @@
1
+ $vd-settings-padding: 40px;
@@ -0,0 +1,8 @@
1
+ .vd-grid-settings-item {
2
+ padding-right: $vd-settings-padding;
3
+
4
+ @include vd-viewport-media-max ($vd-breakpoint-small) {
5
+ padding-right: 0;
6
+ padding-bottom: $vd-settings-padding;
7
+ }
8
+ }