@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,68 @@
1
+ $vd-autocomplete-filter-select-border-radius: $vd-border-radius 0 0 $vd-border-radius;
2
+ $vd-autocomplete-filter-select-padding: 12px;
3
+ $vd-autocomplete-filter-selector-container-width: 130px;
4
+ $vd-autocomplete-filter-select-padding-left: 34px;
5
+ $vd-autocomplete-filter-input-border-radius: 0 $vd-border-radius $vd-border-radius 0;
6
+ $vd-autocomplete-filter-icon-margin: 14px;
7
+
8
+ .vd-autocomplete-filter {
9
+ display: block;
10
+
11
+ @include vd-input-error-selectors () {
12
+ vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
13
+ @include vd-input-error-styles();
14
+ }
15
+ }
16
+ }
17
+
18
+ .vd-autocomplete-filter-input-container {
19
+ display: flex;
20
+ align-items: flex-start;
21
+
22
+ .vd-select {
23
+ padding-left: $vd-autocomplete-filter-select-padding-left;
24
+ border-radius: $vd-autocomplete-filter-select-border-radius;
25
+ // Currently the default select / input border is 1px, the aim is to move this to two. At that point the border
26
+ // right of the select in this component would need to be half that so it would look like it shares a border with
27
+ // its neighbour. For now this has no affect as the min measure is 1px. This goes for all of the following border
28
+ // overrides
29
+ border-right: vd-border(framing, $vd-input-border-width / 2);
30
+ transition: none;
31
+ }
32
+
33
+ .vd-lozenge-group {
34
+ border-radius: $vd-autocomplete-filter-input-border-radius;
35
+ border-left: vd-border(framing, $vd-input-border-width / 2);
36
+ }
37
+
38
+ vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
39
+ width: 100%;
40
+ transition: none;
41
+ }
42
+ }
43
+
44
+ .vd-autocomplete-selector-container {
45
+ flex-basis: $vd-autocomplete-filter-selector-container-width;
46
+ flex-shrink: 0;
47
+ }
48
+
49
+ .vd-autocomplete-select-placeholder {
50
+ @include vd-input-states();
51
+ border-right: vd-border(framing, $vd-input-border-width / 2);
52
+ border-radius: $vd-autocomplete-filter-select-border-radius;
53
+ padding: $vd-autocomplete-filter-select-padding;
54
+ padding-left: $vd-autocomplete-filter-select-padding-left;
55
+ text-transform: capitalize;
56
+ }
57
+
58
+ .vd-autocomplete-filter-icon {
59
+ position: absolute;
60
+ z-index: 1;
61
+ margin-left: $vd-autocomplete-filter-icon-margin;
62
+ margin-top: $vd-autocomplete-filter-icon-margin;
63
+ color: vd-colour(supplementary);
64
+ }
65
+
66
+ .vd-autocomplete-filter-button-label {
67
+ text-transform: capitalize;
68
+ }
@@ -0,0 +1,3 @@
1
+ $vd-avatar-size: 76px;
2
+ $vd-avatar-size-sm: 50px;
3
+ $vd-avatar-size-xsm: 35px;
@@ -0,0 +1,78 @@
1
+ .vd-avatar {
2
+ background-color: vd-colour(framing);
3
+ background-repeat: no-repeat;
4
+ background-size: cover;
5
+ background-position: center;
6
+ border-radius: $vd-card-border-radius;
7
+ width: $vd-avatar-size;
8
+ height: $vd-avatar-size;
9
+
10
+ flex: 1;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+
15
+ &.vd-avatar--small {
16
+ width: $vd-avatar-size-sm;
17
+ height: $vd-avatar-size-sm;
18
+ }
19
+
20
+ &.vd-avatar--x-small {
21
+ width: $vd-avatar-size-xsm;
22
+ height: $vd-avatar-size-xsm;
23
+ }
24
+
25
+ &.vd-avatar--deleted-image {
26
+ @include disabled();
27
+ background-color: vd-colour(no);
28
+ }
29
+
30
+ .deleted-state-icon {
31
+ color: vd-colour(box);
32
+ }
33
+ }
34
+
35
+ .vd-avatar--initials {
36
+ @include vd-text(heading);
37
+
38
+ word-wrap: normal;
39
+ word-break: normal;
40
+ color: vd-colour(text-action);
41
+ text-align: center;
42
+
43
+ &.vd-avatar--x-small {
44
+ @include vd-text(label);
45
+ }
46
+
47
+ &.vd-avatar--small {
48
+ @include vd-text(sub-heading);
49
+ }
50
+
51
+ &.vd-avatar--initials-1 {
52
+ background-color: vd-colour(new-york-pink);
53
+ }
54
+
55
+ &.vd-avatar--initials-2 {
56
+ background-color: vd-colour(tacao);
57
+ }
58
+
59
+ &.vd-avatar--initials-3 {
60
+ background-color: vd-colour(golden-sand);
61
+ }
62
+
63
+ &.vd-avatar--initials-4 {
64
+ background-color: vd-colour(gothic);
65
+ }
66
+
67
+ &.vd-avatar--initials-5 {
68
+ background-color: vd-colour(sinbad);
69
+ }
70
+
71
+ &.vd-avatar--initials-6 {
72
+ background-color: vd-colour(lavender-purple);
73
+ }
74
+
75
+ &.vd-avatar--initials-7 {
76
+ background-color: vd-colour(shuttle-gray);
77
+ }
78
+ }
@@ -0,0 +1,4 @@
1
+ $vd-avatar-multi-size: 76px;
2
+ $vd-avatar-multi-size-gap: 4px;
3
+ $vd-avatar-multi-tile-size: ($vd-avatar-multi-size / 2) - ($vd-avatar-multi-size-gap / 2);
4
+ $vd-avatar-multi-tile-placeholder-size: 60px;
@@ -0,0 +1,70 @@
1
+ .vd-avatar-multi {
2
+ width: $vd-avatar-multi-size;
3
+ height: $vd-avatar-multi-size;
4
+ }
5
+
6
+ .vd-avatar-multi-tile {
7
+ box-sizing: border-box;
8
+ border-radius: $vd-border-radius;
9
+ background-repeat: no-repeat;
10
+ background-size: cover;
11
+ background-position: center center;
12
+ background-color: vd-colour(framing);
13
+ position: relative;
14
+
15
+ // Ensure placeholder backgrounds are the same size regardless of tile size
16
+ &[vd-lazy-load*="placeholder.svg"] {
17
+ background-size: $vd-avatar-multi-tile-placeholder-size;
18
+ }
19
+ }
20
+
21
+ .vd-avatar-multi-tile--remainder {
22
+ background-color: vd-colour(keyline);
23
+ }
24
+
25
+ .vd-avatar-multi-count {
26
+ position: absolute;
27
+ top: 50%;
28
+ left: 0;
29
+ width: 100%;
30
+ text-align: center;
31
+ transform: translateY(-50%);
32
+ }
33
+
34
+ // Grid
35
+ @supports (display: grid) {
36
+ .vd-avatar-multi {
37
+ display: grid;
38
+ grid-template-columns: repeat(2, $vd-avatar-multi-tile-size);
39
+ grid-column-gap: $vd-avatar-multi-size-gap;
40
+ row-gap: $vd-avatar-multi-size-gap;
41
+ }
42
+
43
+ // Only one tile
44
+ .vd-avatar-multi-tile {
45
+ &:only-child {
46
+ grid-area: 2 span / 2 span;
47
+ }
48
+
49
+ // Three tiles
50
+ &:first-child:nth-last-child(3) {
51
+ grid-area: 2 span;
52
+ }
53
+ }
54
+ }
55
+
56
+ // Flexbox fallback
57
+ @supports not (display: grid) {
58
+ .vd-avatar-multi {
59
+ display: flex;
60
+ flex-wrap: wrap;
61
+ width: $vd-avatar-multi-size;
62
+ height: $vd-avatar-multi-size;
63
+ }
64
+
65
+ .vd-avatar-multi-tile {
66
+ flex: 1 1 50%;
67
+ border: ($vd-avatar-multi-size-gap / 2) solid vd-colour(box);
68
+ border-radius: 5px;
69
+ }
70
+ }
@@ -0,0 +1 @@
1
+ @import "./vd-id-badge/vd-id-badge";
@@ -0,0 +1,10 @@
1
+ $vd-id-badge-spacing: 16px;
2
+ $vd-id-badge-spacing-sm: 8px;
3
+ $vd-id-badge-spacing-xsm: 8px;
4
+
5
+ $vd-id-badge-image-size: 76px;
6
+ $vd-id-badge-image-size-sm: 50px;
7
+ $vd-id-badge-image-size-xsm: 35px;
8
+
9
+ $vd-id-badge-table-margin: -10px;
10
+ $vd-id-badge-desc-margin: 2px;
@@ -0,0 +1,159 @@
1
+ .vd-badge {
2
+ display: block;
3
+ }
4
+
5
+ .vd-id-badge {
6
+ display: flex;
7
+ align-items: stretch;
8
+ flex-direction: row;
9
+ text-align: left;
10
+ overflow: hidden;
11
+
12
+ .vd-flag-container {
13
+ display: inline-block;
14
+ vertical-align: text-bottom;
15
+ }
16
+
17
+ .vd-id-badge__header-title {
18
+ display: inline;
19
+ }
20
+
21
+ & + .vd-id-badge {
22
+ margin-right: $vd-id-badge-spacing;
23
+ margin-top: $vd-id-badge-spacing;
24
+ }
25
+
26
+ // INTERACTIVE STYLES
27
+
28
+ &.vd-id-badge--interactive-selection {
29
+ @include vd-card();
30
+ cursor: pointer;
31
+
32
+ .vd-id-badge__image {
33
+ border-radius: 0;
34
+ }
35
+
36
+ &:hover, &:active, &:focus {
37
+ outline: none;
38
+ background-color: vd-colour(go-highlight);
39
+ }
40
+ }
41
+
42
+ &.vd-id-badge--current {
43
+ border-color: vd-colour(do);
44
+ }
45
+
46
+ &.vd-id-badge--small {
47
+ .vd-id-badge__content {
48
+ padding: $vd-id-badge-spacing-sm;
49
+ }
50
+
51
+ .vd-id-badge__image {
52
+ min-width: $vd-id-badge-image-size-sm;
53
+ min-height: $vd-id-badge-image-size-sm;
54
+ }
55
+ }
56
+
57
+ &.vd-id-badge--small:not(.vd-id-badge--interactive-selection) {
58
+ .vd-id-badge__image {
59
+ width: $vd-id-badge-image-size-sm;
60
+ height: $vd-id-badge-image-size-sm;
61
+ min-width: auto;
62
+ min-height: auto;
63
+ }
64
+ }
65
+
66
+ &.vd-id-badge--interactive-action {
67
+ cursor: pointer;
68
+
69
+ .vd-id-badge__header-title {
70
+ text-decoration: underline;
71
+ }
72
+
73
+ &:hover, &:active, &:focus {
74
+ outline: none;
75
+
76
+ .vd-id-badge__header-title {
77
+ color: vd-colour(go);
78
+ }
79
+ }
80
+ }
81
+
82
+ // SIZING ADJUSTMENTS
83
+
84
+ &.vd-id-badge--x-small {
85
+ .vd-id-badge__content {
86
+ padding: $vd-id-badge-spacing-xsm;
87
+ }
88
+
89
+ .vd-id-badge__image {
90
+ width: $vd-id-badge-image-size-xsm;
91
+ height: $vd-id-badge-image-size-xsm;
92
+ min-width: auto;
93
+ min-height: auto;
94
+ margin: $vd-id-badge-spacing-xsm 0;
95
+ }
96
+ }
97
+
98
+ &.vd-id-badge--avatar-multi {
99
+ min-width: 0;
100
+
101
+ .vd-id-badge__image {
102
+ width: $vd-id-badge-image-size;
103
+ height: $vd-id-badge-image-size;
104
+ min-width: auto;
105
+ min-height: auto;
106
+ background: transparent;
107
+ align-self: center;
108
+ }
109
+
110
+ .vd-id-badge__content {
111
+ padding-top: 0;
112
+ padding-bottom: 0;
113
+ min-width: 0;
114
+ }
115
+ }
116
+ }
117
+
118
+ .vd-table {
119
+ .vd-id-badge {
120
+ margin-top: $vd-id-badge-table-margin;
121
+ margin-bottom: $vd-id-badge-table-margin;
122
+ }
123
+ }
124
+
125
+ .vd-id-badge__content {
126
+ padding: $vd-id-badge-spacing;
127
+ display: flex;
128
+ flex-direction: column;
129
+ justify-content: center;
130
+ flex: 1;
131
+ word-break: break-word;
132
+ color: vd-colour(text);
133
+ @include vd-text(body);
134
+ }
135
+
136
+ .vd-id-badge__description {
137
+ @include vd-text(supplementary);
138
+ }
139
+
140
+ .vd-id-badge__status {
141
+ @include vd-text(supplementary);
142
+ }
143
+
144
+ .vd-id-badge__image {
145
+ background-color: vd-colour(framing);
146
+ background-repeat: no-repeat;
147
+ background-size: cover;
148
+ background-position: center;
149
+ min-width: $vd-id-badge-image-size;
150
+ min-height: $vd-id-badge-image-size;
151
+ border-radius: $vd-card-border-radius;
152
+ flex-shrink: 0;
153
+ overflow: hidden;
154
+
155
+ .vd-avatar {
156
+ border-radius: 0;
157
+ height: 100%;
158
+ }
159
+ }
@@ -0,0 +1,16 @@
1
+ @mixin vd-banner($primary-colour, $text-colour: vd-colour(text-action), $anchor-colour: vd-colour(text-action)) {
2
+ background-color: $primary-colour;
3
+ color: $text-colour;
4
+ border: none;
5
+ border-left: none;
6
+ border-right: none;
7
+
8
+ .vd-link,
9
+ .vd-link:hover,
10
+ .vd-link:visited,
11
+ .vd-btn--link,
12
+ .vd-btn--link:hover {
13
+ color: $anchor-colour;
14
+ text-decoration: underline;
15
+ }
16
+ }
@@ -0,0 +1,89 @@
1
+ .vd-banner-wrapper {
2
+ display: flex;
3
+ flex: 1;
4
+ justify-content: center;
5
+ align-items: baseline;
6
+ max-width: $vd-section-wrap-max-width;
7
+ margin: 0 auto;
8
+ }
9
+
10
+ .vd-banner-feedback {
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ align-self: stretch;
15
+ position: relative;
16
+ backdrop-filter: brightness(0.9);
17
+
18
+ @supports not (backdrop-filter: brightness(0.9)) {
19
+ &::before {
20
+ content: '';
21
+ background: $vd-colour-black;
22
+ filter: opacity(0.1);
23
+ position: absolute;
24
+ top: 0;
25
+ right: 0;
26
+ bottom: 0;
27
+ left: 0;
28
+ z-index: 0;
29
+ }
30
+
31
+ .vd-feedback-content {
32
+ z-index: 1;
33
+ }
34
+ }
35
+ }
36
+
37
+ .vd-banner-wrapper,
38
+ .vd-banner-feedback {
39
+ padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
40
+
41
+ // Fallback to base padding if browser doesn't support CSS variables
42
+ @supports ( not (--a: 0)) {
43
+ padding: $vd-section-padding-v $vd-section-padding-h;
44
+ }
45
+ }
46
+
47
+ .vd-banner-content {
48
+ display: inline-block;
49
+ }
50
+
51
+ .vd-banner-icon {
52
+ margin-right: vd-grid-unit(2);
53
+ }
54
+
55
+ .vd-banner {
56
+ display: flex;
57
+ font-size: vd-text-size(body);
58
+ justify-content: space-between;
59
+ align-items: center;
60
+ flex-wrap: wrap;
61
+ }
62
+
63
+ .vd-banner--dismissed {
64
+ display: none;
65
+ }
66
+
67
+ .vd-banner--info,
68
+ .vd-banner--activation {
69
+ @include vd-banner(vd-colour(supplementary))
70
+ }
71
+ .vd-banner--negative { @include vd-banner(vd-colour(no)) }
72
+ .vd-banner--success { @include vd-banner(vd-colour(success)) }
73
+
74
+ @include vd-viewport-media-max(medium) {
75
+ .vd-banner-wrapper,
76
+ .vd-banner-feedback {
77
+ box-sizing: border-box;
78
+ flex: 1 0 100%;
79
+ }
80
+ }
81
+
82
+ // Sticky banner which sticks to the top
83
+ .vd-banner--sticky {
84
+ position: sticky;
85
+ width: 100%;
86
+ top: 0;
87
+ left: 0;
88
+ z-index: $vd-z-index-popover-base;
89
+ }
@@ -0,0 +1,4 @@
1
+ .vd-bg--upsell {
2
+ background: vd-colour(background)
3
+ url("#{$vd-images-cdn-path}backgrounds/dashboard-upsell-bg-v1.svg");
4
+ }
@@ -0,0 +1,20 @@
1
+ .vd-body {
2
+ display: flex;
3
+ flex-flow: row wrap;
4
+ // @todo: this should probably be directly on the `body` element
5
+ height: 100vh;
6
+ }
7
+
8
+ .vd-body--no-scroll {
9
+ overflow: hidden;
10
+ }
11
+
12
+ // Use height 100% on iOS as 100vh is the height of the viewport after you've scrolled down the page enough for the
13
+ // browser chrome to hide itself - this never happens as we've moved the overflow from the window to vd-main-content.
14
+ .vd-is-ios {
15
+ &,
16
+ body,
17
+ .vd-body {
18
+ height: 100%;
19
+ }
20
+ }
@@ -0,0 +1,121 @@
1
+
2
+ // =================================== Helper Mixins =================================== //
3
+
4
+ // Helper to apply disabled state styles for buttons.
5
+ //
6
+ // @mixin vd-btn-disabled
7
+ //
8
+ @mixin vd-btn-disabled () {
9
+ &:disabled,
10
+ &.disabled {
11
+ cursor: not-allowed;
12
+
13
+ @include disabled();
14
+ }
15
+ }
16
+
17
+ // Applies a box shadow in the provided primary colour.
18
+ //
19
+ // @mixin vd-btn-shadow
20
+ //
21
+ // @param {String} $_vd-colour-name - the button colour to use for the outline.
22
+ //
23
+ @mixin vd-btn-shadow ($_vd-colour-name) {
24
+ box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread vd-rgba(vd-colour(#{$_vd-colour-name}-rgb), $vd-opacity);
25
+ }
26
+
27
+ // Applies a box shadow with an outline in the provided primary colour.
28
+ //
29
+ // @mixin vd-btn-outline-shadow
30
+ //
31
+ // @param {String} $_vd-colour-name - the button colour to use for the outline.
32
+ //
33
+ @mixin vd-btn-outline-shadow ($_vd-colour-name) {
34
+ $_vd-requested-color: vd-colour(#{$_vd-colour-name}-rgb);
35
+
36
+ box-shadow:
37
+ 0 0 0 $vd-shadow-spread vd-rgba(vd-colour(box-rgb), 0.8),
38
+ 0 0 $vd-shadow-blur #{$vd-shadow-spread+1} vd-rgba($_vd-requested-color, $vd-opacity),
39
+ 0 0 0 #{$vd-shadow-spread+1} vd-rgba($_vd-requested-color, 0.6);
40
+ }
41
+
42
+ // Helper to apply hover, active and focus state styles for buttons.
43
+ //
44
+ // @mixin vd-btn-states
45
+ //
46
+ // @param {String} $_vd-colour-name - the button colour.
47
+ //
48
+ @mixin vd-btn-states ($_vd-colour-name, $_vd-use-default-hover: false) {
49
+ @include vd-hover-when-supported {
50
+ &:hover {
51
+ color: vd-colour(text-action);
52
+ @if ($_vd-use-default-hover) {
53
+ background-color: vd-colour(#{$_vd-colour-name});
54
+ } @else {
55
+ background-color: vd-colour(#{$_vd-colour-name}-lighter);
56
+ }
57
+ }
58
+ }
59
+
60
+ &:active, &.vd-btn--active {
61
+ color: vd-colour(text-action);
62
+ background-color: vd-colour(#{$_vd-colour-name}-darker);
63
+ @include vd-btn-shadow($_vd-colour-name);
64
+ }
65
+
66
+ &:focus {
67
+ @include vd-btn-outline-shadow($_vd-colour-name);
68
+ }
69
+ }
70
+
71
+ // =================================== Main Button Mixin =================================== //
72
+
73
+ // Default buttons that have a solid background.
74
+ //
75
+ // @mixin vd-btn
76
+ //
77
+ // @param {String} $_vd-colour-name - the button colour.
78
+ //
79
+ @mixin vd-btn ($_vd-colour-name) {
80
+ background-color: vd-colour($_vd-colour-name);
81
+ color: vd-colour(text-action);
82
+
83
+ @include vd-btn-states($_vd-colour-name);
84
+ }
85
+
86
+ // =================================== Modifier Button Mixins =================================== //
87
+
88
+ // Buttons which have a transparent background and whose text is the specified primary colour. Their background is
89
+ // filled with the primary colour upon hover.
90
+ //
91
+ // @mixin vd-btn-text
92
+ //
93
+ // @param {String} $_vd-colour-name - the button colour to use.
94
+ //
95
+ @mixin vd-btn-text ($_vd-colour-name) {
96
+ background-color: transparent;
97
+ color: vd-colour($_vd-colour-name);
98
+
99
+ @include vd-btn-states($_vd-colour-name, true);
100
+ }
101
+
102
+ // Buttons which have a transparent background and whose text is the specified primary colour. Their background is
103
+ // filled with the primary colour upon hover and have smaller padding to accommodate icons.
104
+ //
105
+ // @mixin vd-btn-icon
106
+ //
107
+ // @param {String} $_vd-colour-name - the button colour to use.
108
+ //
109
+ @mixin vd-btn-icon ($_vd-colour-name) {
110
+ background-color: transparent;
111
+ padding: $vd-btn-icon-padding;
112
+
113
+ // Button icons with a "go" category have different colour when resting
114
+ @if ($_vd-colour-name == go) {
115
+ color: vd-colour($_vd-colour-name);
116
+ } @else {
117
+ color: vd-colour(supplementary);
118
+ }
119
+
120
+ @include vd-btn-states($_vd-colour-name, true);
121
+ }
@@ -0,0 +1,7 @@
1
+ $vd-btn-group-margin: vd-grid-unit(1);
2
+ $vd-btn-stroke-width: 1px !default;
3
+ $vd-btn-categories: (do, supplementary, no, go);
4
+ $vd-btn-icon-font-size: 18px;
5
+ $vd-btn-padding: vd-grid-unit(3) vd-grid-unit(5);
6
+ // @todo icon padding should be updated when 14px is supported by vd-grid-unit
7
+ $vd-btn-icon-padding: 12px 14px;