@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,10 @@
1
+ .vd-sidebar {
2
+ display: flex;
3
+ position: relative;
4
+
5
+ flex-shrink: 0;
6
+ height: calc(100% - #{$vd-topbar-height});
7
+ box-sizing: border-box;
8
+ font-family: $vd-font-primary;
9
+ line-height: normal;
10
+ }
@@ -0,0 +1,6 @@
1
+ $vd-sidebar-drawer-background-color: vd-colour(nav-side-drawer);
2
+ $vd-sidebar-drawer-desktop-width: 145px;
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;
@@ -0,0 +1,47 @@
1
+ .vd-sidebar-drawer {
2
+ display: flex;
3
+ flex-direction: column;
4
+ flex-shrink: 0;
5
+ width: $vd-sidebar-drawer-desktop-width;
6
+ height: 100%;
7
+ background-color: $vd-sidebar-drawer-background-color;
8
+ border-right: 1px solid vd-colour(framing);
9
+ box-sizing: border-box;
10
+
11
+ .vd-nav-item {
12
+ width: 100%;
13
+ height: auto;
14
+ color: vd-colour(text);
15
+ font-weight: $vd-font-weight--bold;
16
+
17
+ &:hover {
18
+ background: vd-colour(go-highlight);
19
+ }
20
+ }
21
+
22
+ .vd-nav-item-action {
23
+ padding: $vd-sidebar-drawer-item-padding-y $vd-sidebar-drawer-item-padding-x;
24
+ }
25
+
26
+ .vd-nav-item--active {
27
+ color: vd-colour(go);
28
+ }
29
+
30
+ .vd-nav-item--pending {
31
+ color: vd-colour(supplementary--text);
32
+ }
33
+
34
+ // @todo Make this a mixin for all disabled things.
35
+ .vd-nav-item--disabled {
36
+ opacity: 0.35;
37
+ filter: grayscale(100%);
38
+
39
+ &:hover {
40
+ background-color: inherit;
41
+ }
42
+ }
43
+
44
+ .vd-nav-item-label {
45
+ font-size: $vd-sidebar-drawer-item-font-size;
46
+ }
47
+ }
@@ -0,0 +1,15 @@
1
+ $vd-sidebar-tabs-background-color: vd-colour(nav-side-tabs);
2
+
3
+ $vd-sidebar-tabs-desktop-width: 85px;
4
+
5
+ $vd-sidebar-tab-height: 75px !default;
6
+ $vd-sidebar-tab-font-colour: vd-colour(text) !default;
7
+ $vd-sidebar-tab-font-size: 12px !default;
8
+ $vd-sidebar-tab-icon-font-size: 20px !default;
9
+
10
+ $vd-sidebar-tab-active-bg-colour: vd-colour(text) !default;
11
+ $vd-sidebar-tab-active-border-width: 6px !default;
12
+
13
+ $vd-sidebar-tab-chevron-position-top: 25px;
14
+ $vd-sidebar-tab-chevron-position-right: 8px;
15
+ $vd-sidebar-tab-chevron-opacity: 0.4;
@@ -0,0 +1,73 @@
1
+ .vd-sidebar-tabs {
2
+ display: flex;
3
+ flex-direction: column;
4
+ flex-shrink: 0;
5
+ z-index: $vd-z-index-content-base + 1;
6
+
7
+ box-sizing: border-box;
8
+ width: $vd-sidebar-tabs-desktop-width;
9
+ height: 100%;
10
+
11
+ background-color: $vd-sidebar-tabs-background-color;
12
+
13
+ font-size: $vd-sidebar-tab-font-size;
14
+ color: vd-colour(text);
15
+
16
+ .vd-nav-item {
17
+ flex-shrink: 0;
18
+ 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
+ }
25
+
26
+ &:hover {
27
+ background: vd-colour(background);
28
+ }
29
+ }
30
+
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
+ .vd-nav-item--pending {
43
+ background: vd-colour(background);
44
+ }
45
+
46
+ .vd-nav-item--disabled {
47
+ opacity: 0.35;
48
+ filter: grayscale(100%);
49
+
50
+ &:hover {
51
+ background-color: inherit;
52
+ }
53
+ }
54
+
55
+ .vd-nav-item-label {
56
+ font-weight: $vd-font-weight--bold;
57
+ }
58
+
59
+ .vd-nav-item-icon {
60
+ font-size: $vd-sidebar-tab-icon-font-size;
61
+ }
62
+
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; }
66
+
67
+ &.vd-nav-item--active,
68
+ &.vd-nav-item--pending {
69
+ border-color: $_vd-nav-colour;
70
+ }
71
+ }
72
+ }
73
+ }
@@ -0,0 +1,47 @@
1
+ .vd-splash-fullscreen-container {
2
+ border: 20px solid $vd-colour-overlay;
3
+ box-sizing: border-box;
4
+ display: block;
5
+ position: fixed;
6
+ top: 0;
7
+ bottom: 0;
8
+ left: 0;
9
+ right: 0;
10
+
11
+ @include vd-viewport-media-max(xsmall) {
12
+ border-width: 10px;
13
+ }
14
+ }
15
+
16
+ .vd-splash-fullscreen {
17
+ width: 100%;
18
+ height: 100%;
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ background: vd-colour(box);
23
+ overflow: auto;
24
+ @include vd-fade-in;
25
+
26
+ .vd-dialog-close {
27
+ top: 10px;
28
+ right: 20px;
29
+ z-index: $vd-z-index-content-base;
30
+ }
31
+ }
32
+
33
+ .vd-splash-fullscreen-content {
34
+ display: flex;
35
+ flex-direction: column;
36
+ margin: auto;
37
+ padding: vd-grid-unit(5);
38
+ }
39
+
40
+ .vd-scrollable-container .vd-splash-fullscreen-content {
41
+ padding: 0;
42
+ height: 100%;
43
+ }
44
+
45
+ .vd-splash-fullscreen-content .vd-scrollable-container .vd-scrollable {
46
+ padding: vd-grid-unit(5); // put the padding on the scrollable container instead
47
+ }
@@ -0,0 +1 @@
1
+ $vd-status-icon-size: 8px;
@@ -0,0 +1,12 @@
1
+ .vd-status-icon {
2
+ border-radius: 50%;
3
+ background-color: vd-colour(do);
4
+ width: $vd-status-icon-size;
5
+ height: $vd-status-icon-size;
6
+ display: inline-block;
7
+ vertical-align: middle;
8
+ }
9
+
10
+ .vd-status-icon--negative {
11
+ background-color: vd-colour(no);
12
+ }
@@ -0,0 +1,5 @@
1
+ @import "../vd-popover/vd-popover-ns";
2
+ @import "../vd-popover-list/vd-popover-list-ns";
3
+
4
+ $vd-suggestion-list-footer-height: 60px;
5
+ $vd-suggestion-list-footer-shadow-height: 5px;
@@ -0,0 +1,76 @@
1
+ .vd-suggestions-popover {
2
+ .vd-popover-content {
3
+ // There is a bug in Safari where max-height is broken when used with flex-direction: column. As a workaround we
4
+ // set the flex-direction to row and set .vd-suggestion-list-container to width:100%.
5
+ // See https://github.com/philipwalton/flexbugs/issues/188 for more details.
6
+ flex-direction: row;
7
+
8
+ // Prevent default scroll setting
9
+ overflow-y: hidden;
10
+ }
11
+ }
12
+
13
+ .vd-suggestion-badge {
14
+ margin-top: -$vd-id-badge-spacing-sm;
15
+ margin-bottom: -$vd-id-badge-spacing-sm;
16
+ }
17
+
18
+ .vd-suggestion-list-container {
19
+ display: flex;
20
+ flex-direction: column;
21
+ width: 100%;
22
+
23
+ .vd-scrollable-goatee {
24
+ bottom: $vd-suggestion-list-footer-height;
25
+ }
26
+
27
+ .vd-suggestion-list--with-footer {
28
+ .vd-scrollable {
29
+ padding-bottom: $vd-suggestion-list-footer-height;
30
+ }
31
+ }
32
+ }
33
+
34
+ .vd-suggestion--footer {
35
+ position: absolute;
36
+ bottom: 0;
37
+ left: 0;
38
+ right: 0;
39
+ height: $vd-suggestion-list-footer-height;
40
+ box-sizing: border-box;
41
+ background-color: vd-colour(box);
42
+ border-top: vd-border(framing);
43
+ }
44
+
45
+ .vd-suggestion-query-container {
46
+ display: flex;
47
+ white-space: nowrap;
48
+ align-items: center;
49
+ }
50
+
51
+ .vd-suggestion-query-container--center {
52
+ justify-content: center;
53
+ }
54
+
55
+ .vd-suggestion-query {
56
+ white-space: nowrap;
57
+ text-overflow: ellipsis;
58
+ overflow: hidden;
59
+ min-width: 0;
60
+ }
61
+
62
+ .vd-suggestion--footer-clear {
63
+ display: flex;
64
+ flex-direction: row;
65
+ justify-content: space-between;
66
+ align-items: center;
67
+ }
68
+
69
+ .vd-suggestion-clear {
70
+ margin-right: -$vd-popover-list-item-spacing !important;
71
+
72
+ &.vd-suggestion-clear--active {
73
+ color: vd-colour(text-action);
74
+ background-color: vd-colour(supplementary-lighter);
75
+ }
76
+ }
@@ -0,0 +1,8 @@
1
+ $trackWidthBig: vd-grid-unit(17);
2
+ $trackHeightBig: vd-grid-unit(9);
3
+
4
+ $trackWidthSmall: vd-grid-unit(13);
5
+ $trackHeightSmall: vd-grid-unit(7);
6
+
7
+ $knobWidthBig: $trackHeightBig;
8
+ $knobWidthSmall: $trackHeightSmall;
@@ -0,0 +1,117 @@
1
+ .vd-switch {
2
+ display: inline-block;
3
+ position: relative;
4
+ }
5
+
6
+ .vd-switch-input {
7
+ @extend %vd-invisible-checkbox-input;
8
+
9
+ @include vd-btn-disabled();
10
+
11
+ &:disabled {
12
+ opacity: 0;
13
+ }
14
+ }
15
+
16
+ .vd-switch-track {
17
+ position: relative;
18
+ display: inline-block;
19
+ vertical-align: middle;
20
+ width: $trackWidthBig;
21
+ height: $trackHeightBig;
22
+ border-radius: vd-grid-unit(9);
23
+ box-sizing: border-box;
24
+ border: 2px solid vd-colour(do);
25
+ background-color: vd-colour(box);
26
+ transition: background-color $vd-time-m ease-in-out;
27
+
28
+ .vd-switch--small & {
29
+ width: $trackWidthSmall;
30
+ height: $trackHeightSmall;
31
+ }
32
+ }
33
+
34
+ .vd-switch-icon {
35
+ box-sizing: border-box;
36
+ display: inline-block;
37
+ position: absolute;
38
+ color: vd-colour(text-action);
39
+ top: 8px;
40
+ left: 10px;
41
+ opacity: 0;
42
+ transition: opacity $vd-time-m ease-in-out;
43
+
44
+ .vd-switch--small & {
45
+ top: 6px;
46
+ left: 7px;
47
+ font-size: vd-text-size(supplementary);
48
+ }
49
+ }
50
+
51
+ .vd-cross-icon {
52
+ box-sizing: border-box;
53
+ display: inline-block;
54
+ position: absolute;
55
+ top: 8px;
56
+ left: 41px;
57
+ color: vd-colour(do);
58
+ opacity: 1;
59
+ transition: opacity 0.54s ease-in-out;
60
+
61
+ .vd-switch--small & {
62
+ top: 6px;
63
+ left: 31px;
64
+ font-size: vd-text-size(supplementary);
65
+ }
66
+ }
67
+
68
+ .vd-switch-track-knob {
69
+ float: left;
70
+ border-radius: inherit;
71
+ box-sizing: border-box;
72
+ border: 2px solid vd-colour(do);
73
+ background-color: vd-colour(box);
74
+ pointer-events: none;
75
+ width: $knobWidthBig;
76
+ height: $knobWidthBig;
77
+ margin-top: vd-grid-unit(-0.5);
78
+ margin-left: vd-grid-unit(-0.5);
79
+ transition: transform $vd-time-m cubic-bezier(0.54, 1.85, 0.5, 1);
80
+
81
+ .vd-switch--small & {
82
+ width: $knobWidthSmall;
83
+ height: $knobWidthSmall;
84
+ }
85
+ }
86
+
87
+ // Checked
88
+ .vd-switch-input:checked + .vd-switch-track {
89
+ background-color: vd-colour(do);
90
+
91
+ .vd-switch-icon {
92
+ opacity: 1;
93
+ }
94
+
95
+ .vd-cross-icon {
96
+ opacity: 0;
97
+ }
98
+
99
+ .vd-switch-track-knob {
100
+ transform: translate3d($trackWidthBig - $knobWidthBig, 0, 0);
101
+
102
+ .vd-switch--small & {
103
+ transform: translate3d($trackWidthSmall - $knobWidthSmall, 0, 0);
104
+ }
105
+ }
106
+ }
107
+
108
+ // Focus
109
+ .vd-switch-input:focus + .vd-switch-track {
110
+ box-shadow: 0 0 5px 2px vd-colour(go);
111
+ }
112
+
113
+ // Disabled
114
+ .vd-switch-input:disabled + .vd-switch-track {
115
+ cursor: not-allowed;
116
+ @include disabled();
117
+ }
@@ -0,0 +1,13 @@
1
+ $vd-colour-table-tr-hover-background: vd-colour(go-highlight);
2
+ $vd-colour-table-tr-error-background: vd-colour(no-highlight);
3
+ $vd-colour-table-expanded-border-left: vd-colour(do);
4
+
5
+ // Compact tables are deprecated, since subtext size has changed globally
6
+ // we now have a local variable for compact tables until its replaced with normal tables
7
+ // in all projects
8
+ $vd-table-compact-font-size: 13px;
9
+
10
+ // Expanded tables
11
+ $vd-table-expanded-box-shadow-width: 4px;
12
+ $vd-nested-reporting-table-container-offset: $vd-table-expanded-box-shadow-width - 1px;
13
+ $vd-nested-reporting-table-indent-padding: 40px;
@@ -0,0 +1,251 @@
1
+ table { border-collapse: collapse; }
2
+
3
+ .vd-table {
4
+ width: 100%;
5
+ font-size: vd-text-size(body);
6
+ border: 0;
7
+
8
+ thead {
9
+ @include vd-text(label);
10
+
11
+ th {
12
+ text-align: left;
13
+ padding: vd-grid-unit(4) vd-grid-unit(10) vd-grid-unit(4);
14
+ }
15
+
16
+ tr { border-color: vd-colour(keyline); }
17
+ }
18
+
19
+ tr {
20
+ border-bottom: vd-border(framing);
21
+
22
+ .vd-clickable {
23
+ display: block;
24
+ }
25
+
26
+ &.vd-disabled {
27
+ opacity: 0.5;
28
+ pointer-events: none;
29
+ }
30
+
31
+ // Can be used for row's which display loading spinners, or 'no results' type content.
32
+ @include vd-hover-when-supported {
33
+ &.vd-inactive:hover { background-color: inherit; }
34
+ }
35
+
36
+ &.vd-error {
37
+ transition: background-color $vd-time-m ease-in-out;
38
+ background-color: $vd-colour-table-tr-error-background;
39
+ }
40
+
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; }
45
+
46
+ &.vd-border-t { border-top: vd-border(framing); }
47
+ &.vd-border-b { border-bottom: vd-border(framing); }
48
+
49
+ &.vd-med-pad-t,
50
+ &.vd-med-pad-v {
51
+ td { padding-top: vd-grid-unit(2); }
52
+ }
53
+
54
+ &.vd-med-pad-b,
55
+ &.vd-med-pad-v {
56
+ td { padding-bottom: vd-grid-unit(2); }
57
+ }
58
+
59
+ &.vd-sml-pad-t,
60
+ &.vd-sml-pad-v {
61
+ td { padding-top: vd-grid-unit(1); }
62
+ }
63
+
64
+ &.vd-sml-pad-b,
65
+ &.vd-sml-pad-v {
66
+ td { padding-bottom: vd-grid-unit(1); }
67
+ }
68
+
69
+ &.vd-valign-t td { vertical-align: top; }
70
+ &.vd-valign-m td { vertical-align: middle; }
71
+ &.vd-valign-b td { vertical-align: bottom; }
72
+
73
+ &.vd-expandable {
74
+ @include vd-hover-when-supported {
75
+ &:hover:not(.vd-expandable--nt) {
76
+ cursor: pointer;
77
+ background-color: $vd-colour-table-tr-hover-background;
78
+ }
79
+ }
80
+
81
+ & + tr:not(.vd-expandable),
82
+ &.vd-expandable--expanded {
83
+ background: vd-colour(box);
84
+
85
+ > td:first-child {
86
+ &::before {
87
+ content: '';
88
+ top: -1px;
89
+ left: 0;
90
+ width: $vd-table-expanded-box-shadow-width;
91
+ background-color: $vd-colour-table-expanded-border-left;
92
+ bottom: 0;
93
+ z-index: 1;
94
+ position: absolute;
95
+ }
96
+ }
97
+ }
98
+
99
+ & + tr:not(.vd-expandable) { display: none; }
100
+ &.vd-expandable--expanded + tr { display: table-row; }
101
+ }
102
+ }
103
+
104
+ td { vertical-align: middle; }
105
+
106
+ td, th {
107
+ padding: vd-grid-unit(5) vd-grid-unit(10);
108
+ position: relative;
109
+ white-space: normal;
110
+ word-break: break-word;
111
+
112
+ &.vd-tight {
113
+ white-space: nowrap;
114
+ width: 1%;
115
+ }
116
+
117
+ &.vd-truncate {
118
+ // Star selector is required for truncating text inside a cell wrapped in another tag: a, strong, span, etc...
119
+ &, * {
120
+ text-overflow: ellipsis;
121
+ white-space: nowrap;
122
+ overflow: hidden;
123
+ }
124
+ }
125
+
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; }
132
+
133
+ &.vd-valign-t { vertical-align: top; }
134
+ &.vd-valign-m { vertical-align: middle; }
135
+ &.vd-valign-b { vertical-align: bottom; }
136
+ }
137
+
138
+ &.vd-table--data {
139
+ border: vd-border(framing);
140
+ tr { background-color: vd-colour(box); }
141
+ }
142
+ }
143
+
144
+ // Compact table
145
+ // Note: Compact tables are deprecated
146
+ .vd-table--compact {
147
+ thead {
148
+ th { padding: vd-grid-unit(4) vd-grid-unit(2); }
149
+ }
150
+
151
+ td {
152
+ padding: vd-grid-unit(4) vd-grid-unit(2);
153
+ font-size: $vd-table-compact-font-size;
154
+ }
155
+ }
156
+
157
+ .vd-table--fixed {
158
+ table-layout: fixed;
159
+
160
+ td {
161
+ white-space: normal;
162
+ word-break: break-word;
163
+ }
164
+ }
165
+
166
+ // Report table
167
+
168
+ // Reset the td padding on nested report tables
169
+ // 3px is to offset the expanded highlight bar
170
+ .vd-table .vd-table-nested-report-container {
171
+ padding: 0 0 0 $vd-nested-reporting-table-container-offset;
172
+ }
173
+
174
+ // Reset the td padding on nested expanded tables
175
+ // Used for tight alignment of nested tables
176
+ .vd-table .vd-table-expanded-td-reset {
177
+ padding: 0 0 0 $vd-table-expanded-box-shadow-width;
178
+ }
179
+
180
+ .vd-table--report {
181
+ border: vd-border(framing);
182
+
183
+ > thead {
184
+ th {
185
+ padding: vd-grid-unit(4) vd-grid-unit(4);
186
+ background-color: vd-colour(box);
187
+ }
188
+
189
+ tr {
190
+ border: vd-border(framing);
191
+ }
192
+ }
193
+
194
+ // Limiting the selector to the first level of tr
195
+ // Doing this so if we have a nested table these styles would not apply
196
+ > tbody > tr {
197
+ border-bottom: none;
198
+
199
+ &:nth-child(odd) {
200
+ background-color: vd-colour(background);
201
+ }
202
+
203
+ &:nth-child(even) {
204
+ background-color: vd-colour(box);
205
+ }
206
+
207
+ > td {
208
+ padding: vd-grid-unit(4) vd-grid-unit(4);
209
+ }
210
+ }
211
+
212
+ > tfoot > tr > td {
213
+ padding: vd-grid-unit(4);
214
+ }
215
+
216
+ // Report table with expandable content
217
+ &.vd-table--expandable > tbody > tr {
218
+ &:nth-child(4n+3) {
219
+ background-color: vd-colour(box);
220
+ }
221
+ }
222
+
223
+ &.vd-table--report--nested {
224
+ &.vd-table {
225
+ margin-bottom: 0;
226
+ }
227
+
228
+ border-left: none;
229
+ border-right: none;
230
+
231
+ > tbody > tr {
232
+ &:nth-child(odd) {
233
+ background-color: vd-colour(background);
234
+ }
235
+
236
+ &:nth-child(even) {
237
+ background-color: vd-colour(box);
238
+ }
239
+ }
240
+
241
+ > tbody > tr > td:first-child {
242
+ padding-left: vd-grid-unit(4) - $vd-nested-reporting-table-container-offset;
243
+ }
244
+ }
245
+
246
+ &.vd-table--report--nested--indented {
247
+ > tbody > tr > td:first-child {
248
+ padding-left: (vd-grid-unit(4) - $vd-nested-reporting-table-container-offset) + $vd-nested-reporting-table-indent-padding;
249
+ }
250
+ }
251
+ }
@@ -0,0 +1,3 @@
1
+ $vd-tab-font-size: 15px;
2
+ $vd-tab-font-size--large: 18px;
3
+ $vd-tab-spacing: 30px;