@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,76 @@
1
+ @mixin vd-active-tab {
2
+ border-bottom-color: vd-colour(do);
3
+ color: vd-colour(do);
4
+ }
5
+
6
+ .vd-tabs {
7
+ display: block;
8
+ padding: 0;
9
+ margin: 0;
10
+ box-shadow: inset 0 -1px vd-colour(keyline);
11
+ }
12
+
13
+ .vd-tab {
14
+ display: inline-block;
15
+ color: var(--vd-colour--text);
16
+
17
+ & + .vd-tab {
18
+ margin-left: $vd-tab-spacing;
19
+ }
20
+
21
+ &.vd-tab--active .vd-tab-button {
22
+ @include vd-active-tab();
23
+ }
24
+
25
+ @include vd-hover-when-supported {
26
+ &:hover:not(.vd-tab--disabled) .vd-tab-button {
27
+ @include vd-active-tab()
28
+ }
29
+
30
+
31
+ &:hover:not(.vd-tab--active) .vd-tab-button {
32
+ cursor: pointer;
33
+ }
34
+ }
35
+
36
+ &.vd-tab--disabled .vd-tab-button {
37
+ @include disabled();
38
+
39
+ @include vd-hover-when-supported {
40
+ &:hover {
41
+ cursor: not-allowed;
42
+ }
43
+ }
44
+ }
45
+ }
46
+
47
+ .vd-tab-button {
48
+ display: flex;
49
+ box-sizing: border-box;
50
+ align-items: center;
51
+ border: none;
52
+ background-color: transparent;
53
+ height: vd-grid-unit(12);
54
+ padding: 0;
55
+ border-bottom: 4px solid transparent;
56
+ color: inherit;
57
+ font-family: $vd-font-primary;
58
+ font-size: $vd-tab-font-size;
59
+ font-weight: $vd-font-weight--regular;
60
+ outline: none;
61
+ transition: background $vd-time-s;
62
+ }
63
+
64
+ // ========= Component Modifiers ========= //
65
+ .vd-tabs--no-border {
66
+ box-shadow: none;
67
+ }
68
+
69
+ .vd-tabs--large {
70
+ .vd-tab {
71
+ .vd-tab-button {
72
+ font-size: $vd-tab-font-size--large;
73
+ border-bottom-width: 5px;
74
+ }
75
+ }
76
+ }
@@ -0,0 +1,18 @@
1
+ .vd-text--secondary { color: vd-colour(supplementary--text); }
2
+ .vd-text--success { color: vd-colour(do); }
3
+ .vd-text--negative { color: vd-colour(no); }
4
+ .vd-text--disabled {
5
+ color: vd-colour(text);
6
+ opacity: 0.35;
7
+ }
8
+
9
+ .vd-text--sub { font-size: vd-text-size(supplementary); }
10
+
11
+ .vd-text--intro {
12
+ @include vd-text-intro;
13
+ }
14
+
15
+ // used when redering api data, honour line breaks so user entered data looks correct
16
+ .vd-text--honour-line-break {
17
+ white-space: pre-line;
18
+ }
@@ -0,0 +1,3 @@
1
+ $vd-toast-notification-padding-v: vd-grid-unit(6);
2
+ $vd-toast-notification-padding-h: vd-grid-unit(10);
3
+ $vd-toast-notification-offset: vd-grid-unit(5);
@@ -0,0 +1,58 @@
1
+ .vd-toast-notification-container {
2
+ @include vd-reset;
3
+
4
+ position: fixed;
5
+ right: 0;
6
+ left: 0;
7
+ top: 0;
8
+ z-index: $vd-toast-notification-z-index;
9
+
10
+ display: block;
11
+
12
+ opacity: 0;
13
+ transform: translateY(-100%);
14
+ transition: transform ease-in-out $vd-time-m, opacity ease-in-out $vd-time-m;
15
+ pointer-events: none;
16
+
17
+ &.vd-visible {
18
+ transform: translateY($vd-toast-notification-offset / 2);
19
+ opacity: 1;
20
+ }
21
+ }
22
+
23
+ .vd-toast-notification {
24
+ position: relative;
25
+
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+
30
+ width: calc(100% - #{$vd-toast-notification-offset});
31
+ max-width: vd-grid-unit(170);
32
+ margin: 0 auto;
33
+ padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-h;
34
+
35
+ border-radius: $vd-border-radius;
36
+ box-sizing: border-box;
37
+ color: vd-colour(text-action);
38
+ text-align: center;
39
+
40
+ transition: opacity ease-in-out $vd-time-m;
41
+ pointer-events: auto;
42
+ }
43
+
44
+ .vd-toast-notification-dismiss {
45
+ position: absolute;
46
+ right: 0;
47
+ top: 0;
48
+ width: $vd-toast-notification-padding-h;
49
+ height: 100%;
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+
54
+ &:hover { cursor: pointer; }
55
+ }
56
+
57
+ .vd-toast-notification--success { background-color: vd-colour(success); }
58
+ .vd-toast-notification--negative { background-color: vd-colour(no); }
@@ -0,0 +1 @@
1
+ $vd-tooltip-spacing: 8px;
@@ -0,0 +1,15 @@
1
+ .vd-popover--tooltip {
2
+ border-color: vd-colour(framing-inverse);
3
+ background-color: vd-colour(box-inverse);
4
+ color: vd-colour(text-inverse);
5
+
6
+ .vd-popover-content {
7
+ background-color: vd-colour(box-inverse);
8
+ padding: $vd-tooltip-spacing;
9
+ }
10
+
11
+ .vd-popover-beak {
12
+ background-color: vd-colour(box-inverse);
13
+ border-color: vd-colour(framing-inverse);
14
+ }
15
+ }
@@ -0,0 +1,10 @@
1
+ $vd-topbar-height: 50px;
2
+ $vd-topbar-background-color: vd-colour(nav-top);
3
+
4
+ $vd-topbar-font-size: 14px;
5
+ $vd-topbar-font-color: vd-colour(text-nav);
6
+
7
+ $vd-topbar-item-side-padding: vd-grid-unit(5);
8
+ $vd-topbar-item-label-margin-left: 10px;
9
+ $vd-topbar-item-default-opactiy: 0.5 !default;
10
+ $vd-topbar-item-label-max-width: 150px;
@@ -0,0 +1,36 @@
1
+ .vd-topbar {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: space-between;
5
+
6
+ flex: 1 100%;
7
+ height: $vd-topbar-height;
8
+
9
+ box-sizing: border-box;
10
+ background-color: $vd-topbar-background-color;
11
+
12
+ font-family: $vd-font-primary;
13
+ font-size: $vd-topbar-font-size;
14
+ line-height: normal;
15
+ color: $vd-topbar-font-color;
16
+
17
+ .vd-nav-item-action {
18
+ padding: 0 $vd-topbar-item-side-padding;
19
+ opacity: $vd-topbar-item-default-opactiy;
20
+
21
+ &:hover {
22
+ opacity: 1;
23
+ }
24
+ }
25
+
26
+ .vd-nav-item-icon + .vd-nav-item-label {
27
+ margin-left: $vd-topbar-item-label-margin-left;
28
+ }
29
+
30
+ .vd-nav-item-label {
31
+ max-width: $vd-topbar-item-label-max-width;
32
+ white-space: nowrap;
33
+ text-overflow: ellipsis;
34
+ overflow: hidden;
35
+ }
36
+ }
@@ -0,0 +1,73 @@
1
+ // Visibility Helpers
2
+ // @todo inline visbility helper classes
3
+
4
+ // Show all the things
5
+ @mixin responsive-visibility($selector) {
6
+ #{$selector} {
7
+ display: block !important;
8
+ }
9
+ table#{$selector} { display: table !important; }
10
+ tr#{$selector} { display: table-row !important; }
11
+ th#{$selector},
12
+ td#{$selector} { display: table-cell !important; }
13
+ }
14
+
15
+ @mixin responsive-invisibility($selector) {
16
+ #{$selector} {
17
+ display: none !important;
18
+ }
19
+
20
+ // When using table-layout:fixed with responsive tables where we may hide columns, just using display:none will leave
21
+ // us with less columns but subsequent expanded rows with colspan will still be referencing the original table column
22
+ // count. With this solution we set the visibility as collaped but the column count remains intact. Therefore all
23
+ // subsequent expanded rows will remain at the same table width.
24
+ th#{$selector},
25
+ td#{$selector} {
26
+ display: table-cell !important;
27
+ white-space: nowrap !important;
28
+ visibility: collapse !important;
29
+ width: 0 !important;
30
+ }
31
+ }
32
+
33
+ // Responsive Visibile Helpers
34
+ @include vd-viewport-media-max(xsmall) {
35
+ @include responsive-visibility('.vd-show-mobile');
36
+ }
37
+
38
+ @include vd-viewport-media-max(small) {
39
+ @include responsive-visibility('.vd-show-tablet-portrait');
40
+ }
41
+
42
+ @include vd-viewport-media-max(small) {
43
+ @include responsive-visibility('.vd-show-tablet-landscape');
44
+ }
45
+
46
+ @include vd-viewport-media-max(large) {
47
+ @include responsive-visibility('.vd-show-desktop');
48
+ }
49
+
50
+ // Responsive Invisibility Helpers
51
+ @include vd-viewport-media-max(xsmall) {
52
+ @include responsive-invisibility('.vd-hide-mobile');
53
+ }
54
+
55
+ @include vd-viewport-media-max(small) {
56
+ @include responsive-invisibility('.vd-hide-tablet-portrait');
57
+ }
58
+
59
+ @include vd-viewport-media-max(medium) {
60
+ @include responsive-invisibility('.vd-hide-tablet-landscape');
61
+ }
62
+
63
+ @include vd-viewport-media-min(large) {
64
+ @include responsive-invisibility('.vd-hide-desktop');
65
+ }
66
+
67
+ // Print Helpers
68
+ @include responsive-invisibility('.vd-show-print');
69
+
70
+ @media print {
71
+ @include responsive-visibility('.vd-show-print');
72
+ @include responsive-invisibility('.vd-hide-print');
73
+ }
@@ -0,0 +1,12 @@
1
+ // Base mixins.
2
+
3
+ // Reset container defaults
4
+ @mixin vd-reset () {
5
+ @include font-smoothing;
6
+
7
+ font-family: $vd-font-lato;
8
+ font-size: vd-text-size(body);
9
+ line-height: normal;
10
+ color: vd-colour(text);
11
+ }
12
+
@@ -0,0 +1,17 @@
1
+ @mixin vd-disabled() {
2
+ &:disabled,
3
+ &.disabled,
4
+ &:disabled:hover,
5
+ &[disabled] {
6
+ cursor: default;
7
+ pointer-events: none;
8
+
9
+ @content;
10
+ }
11
+ }
12
+
13
+ @mixin vd-enabled() {
14
+ &:not(:disabled) {
15
+ @content;
16
+ }
17
+ }
@@ -0,0 +1,102 @@
1
+ // =================================== Responsive Grid =================================== //
2
+
3
+ // Grid Settings
4
+ $vd-grid-columns: 12 !default;
5
+ $vd-grid-block-max: 8 !default;
6
+
7
+ // Optional Grid Gutters; see vd-grid.scss
8
+ $vd-grid-row-gutter-large: 24px;
9
+
10
+ // Generates columns for the grid.
11
+ //
12
+ // @mixin vd-grid-columns
13
+ //
14
+ // @param {String} $breakpoint - the breakpoint size to attach to the column.
15
+ //
16
+ @mixin vd-grid-columns ($breakpoint) {
17
+ @for $i from 1 through $vd-grid-columns {
18
+ $_vd-column-width: percentage($i / $vd-grid-columns);
19
+
20
+ .vd-g-#{$breakpoint}-#{$i} {
21
+ flex: 0 0 $_vd-column-width;
22
+ max-width: $_vd-column-width;
23
+ }
24
+ }
25
+ }
26
+
27
+ // Allow's the size of columns to be defined on the parent row. vd-g-#{$breakpoint}-up-#{$i}, where
28
+ // {breakpoint} can be s, m or l and {i} is the number of columns to display per row.
29
+ //
30
+ // @mixin vd-grid-block-columns
31
+ //
32
+ // @param {String} $breakpoint - the breakpoint size to attach to the column.
33
+ //
34
+ @mixin vd-grid-block-columns ($breakpoint) {
35
+ @for $i from 1 through $vd-grid-block-max {
36
+ .vd-g-#{$breakpoint}-up-#{$i} {
37
+ flex-wrap: wrap;
38
+
39
+ > .vd-g-col {
40
+ $_vd-block-column-width: percentage(1 / $i);
41
+
42
+ flex: 0 0 $_vd-block-column-width;
43
+ max-width: $_vd-block-column-width;
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+ // Shortcut to generate columns and block columns.
50
+ //
51
+ // @mixin vd-build-grid-columns
52
+ //
53
+ // @param {String} $breakpoint - the breakpoint size to attach to the column.
54
+ //
55
+ @mixin vd-build-grid-columns ($breakpoint) {
56
+ @include vd-grid-columns($breakpoint);
57
+ @include vd-grid-block-columns($breakpoint);
58
+ }
59
+
60
+ // Build it and they will come.
61
+ //
62
+ // @mixin vd-build-grid.
63
+ //
64
+ @mixin vd-build-grid () {
65
+ .vd-g-row {
66
+ max-width: $vd-section-wrap-max-width;
67
+ margin-left: auto;
68
+ margin-right: auto;
69
+ display: flex;
70
+ flex-flow: row wrap;
71
+
72
+ // Nested Row's
73
+ & & {
74
+ max-width: none;
75
+ }
76
+ }
77
+
78
+ .vd-g-col {
79
+ flex: 1 1 0;
80
+ min-width: 0;
81
+ box-sizing: border-box;
82
+ }
83
+
84
+ // Build the columns
85
+ @include vd-build-grid-columns('s');
86
+
87
+ @include vd-viewport-media-max(xsmall) {
88
+ @include vd-build-grid-columns('xs');
89
+ }
90
+
91
+ @include vd-viewport-media-min(medium) {
92
+ @include vd-build-grid-columns('m');
93
+ }
94
+
95
+ @include vd-viewport-media-min(large) {
96
+ @include vd-build-grid-columns('l');
97
+ }
98
+
99
+ @include vd-viewport-media-min(xlarge) {
100
+ @include vd-build-grid-columns('xl');
101
+ }
102
+ }
@@ -0,0 +1,36 @@
1
+ @mixin remove-border-radius-left() {
2
+ border-top-left-radius: 0;
3
+ border-bottom-left-radius: 0;
4
+ }
5
+
6
+ @mixin remove-border-radius-right() {
7
+ border-top-right-radius: 0;
8
+ border-bottom-right-radius: 0;
9
+ }
10
+
11
+ @mixin vd-shadow() {
12
+ position: relative;
13
+
14
+ &::after {
15
+ position: absolute;
16
+ z-index: -2;
17
+ top: 3em;
18
+ left: 1em;
19
+ right: 1em;
20
+ content: '';
21
+ bottom: 0;
22
+ box-shadow: 0 0.1em 4em 0 vd-colour(shadow);
23
+ }
24
+ }
25
+
26
+ @mixin disabled() {
27
+ opacity: $vd-opacity;
28
+ filter: grayscale(100%);
29
+ }
30
+
31
+ // Only applies hover styles if the device is capable of doing so. Prevents hover states from sticking on touch only devices
32
+ @mixin vd-hover-when-supported() {
33
+ @media (hover: hover) {
34
+ @content;
35
+ }
36
+ }
@@ -0,0 +1,10 @@
1
+ // Layout Spacing; @todo this should be renamed - it has nothing to do with the grid.
2
+ $vd-grid-unit: 4px;
3
+
4
+ @function vd-grid-unit ($times:1) {
5
+ @return $vd-grid-unit * $times;
6
+ }
7
+
8
+ @function vd-grid-gutter ($times:1) {
9
+ @return vd-grid-unit(4) * $times;
10
+ }
@@ -0,0 +1,14 @@
1
+ // Borders
2
+ $vd-border-radius: 4px;
3
+ $vd-border-colour: vd-colour(framing);
4
+ $vd-border-types: (keyline, keyline-inverse, framing, framing-inverse);
5
+
6
+ // Opacity and Shadows
7
+ $vd-opacity: 0.35;
8
+ $vd-shadow-blur: 3px !default;
9
+ $vd-shadow-spread: 2px !default;
10
+ $vd-box-shadow: 0 6px 10px vd-colour(shadow);
11
+
12
+ // TODO: These shouldn't be in here... They should be declared in vend-nav.
13
+ $vd-top-nav-height: 50px;
14
+ $vd-nav-width: 230px;
@@ -0,0 +1,72 @@
1
+ //
2
+ // PLEASE READ THIS COMMENT BEFORE MODIFYING!!!
3
+ // ============================================
4
+ // This file defines the root dependencies for every stylesheet. This file should only include variables, mixins,
5
+ // functions, etc. BUT NO ACTUAL CLASS DECLARATIONS as it may be imported multiple times in the same page. For example,
6
+ // `font-faces` is not included here as it would create duplicated code if included multiple times.
7
+ // ============================================
8
+ //
9
+ @import '../../../images-ui/images-ui-ns';
10
+
11
+ // Global non-style variables, mixins and functions.
12
+
13
+ @import 'utils/functions';
14
+
15
+ @import 'viewport/viewport-data';
16
+ @import 'viewport/viewport-ranges';
17
+ @import 'viewport/viewport-media-mixins';
18
+
19
+ @import 'colour/colour';
20
+ @import 'effects/effects-ns';
21
+ @import 'text/text';
22
+ @import 'spacing/spacing';
23
+ @import 'spacing/spacing-functions';
24
+ @import 'grid';
25
+ @import 'z-index';
26
+ @import 'layout';
27
+ @import 'base-mixins';
28
+ @import 'button-mixins';
29
+ @import '../../components/vd-btn/vd-btn-mixins';
30
+ @import 'helper-mixins';
31
+ @import 'misc';
32
+
33
+ // Component non-style variables, mixins and functions.
34
+ @import '../../components/vd-action-bar/vd-action-bar-ns';
35
+ @import '../../components/vd-btn/vd-btn-ns';
36
+ @import '../../components/vd-banner/vd-banner-ns';
37
+ @import '../../components/vd-card/vd-card-ns';
38
+ @import '../../components/vd-checkbox/vd-checkbox-ns';
39
+ @import '../../components/vd-datepicker/vd-datepicker-ns';
40
+ @import '../../components/vd-dialog/vd-dialog-ns';
41
+ @import '../../components/vd-dialog-close/vd-dialog-close-ns';
42
+ @import '../../components/vd-dialog-drawer/vd-dialog-drawer-ns';
43
+ @import '../../components/vd-badges/vd-id-badge/vd-id-badge-ns';
44
+ @import '../../components/vd-avatar/vd-avatar-ns';
45
+ @import '../../components/vd-avatar-multi/vd-avatar-multi-ns';
46
+ @import '../../components/vd-flag/vd-flag-ns';
47
+ @import '../../components/vd-field/vd-field-ns';
48
+ @import '../../components/vd-input/vd-input-ns';
49
+ @import '../../components/vd-popover/vd-popover-ns';
50
+ @import '../../components/vd-overlay/vd-overlay-ns';
51
+ @import '../../components/vd-popover-list/vd-popover-list-ns';
52
+ @import '../../components/vd-radio/vd-radio-ns';
53
+ @import '../../components/vd-scrollable/vd-scrollable-ns';
54
+ @import '../../components/vd-section/vd-section-ns';
55
+ @import '../../components/vd-select/vd-select-ns';
56
+ @import '../../components/vd-section-back/vd-section-back-ns';
57
+ @import '../../components/vd-sidebar-drawer/vd-sidebar-drawer-ns';
58
+ @import '../../components/vd-sidebar-tabs/vd-sidebar-tabs-ns';
59
+ @import '../../components/vd-status-icon/vd-status-icon-ns';
60
+ @import '../../components/vd-suggestion/vd-suggestion-list-ns';
61
+ @import '../../components/vd-switch/vd-switch-ns';
62
+ @import '../../components/vd-table/vd-table-ns';
63
+ @import '../../components/vd-tabs/vd-tabs-ns';
64
+ @import '../../components/vd-toast-notification/vd-toast-notification-ns';
65
+ @import '../../components/vd-tooltip/vd-tooltip-ns';
66
+ @import '../../components/vd-topbar/vd-topbar-ns';
67
+ @import '../../components/vd-hero/vd-hero-ns';
68
+ @import '../../components/vd-promo/vd-promo-ns';
69
+ @import '../../components/vd-settings/vd-settings-ns';
70
+
71
+ // Navi non-style variables and mixins
72
+ @import '../navi/non-styles';
@@ -0,0 +1,16 @@
1
+ body {
2
+ @include vd-reset();
3
+
4
+ padding: 0;
5
+ margin: 0;
6
+ background-color: vd-colour(background);
7
+ }
8
+
9
+ a:link {
10
+ text-decoration: none;
11
+ }
12
+
13
+ // Enables fast-tap optimisation in iOS Safari when page is zoomed
14
+ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
15
+ touch-action: manipulation;
16
+ }
@@ -0,0 +1,11 @@
1
+ %vd-invisible-checkbox-input {
2
+ position: absolute;
3
+ width: 100%;
4
+ height: 100%;
5
+ left: 0;
6
+ top: 0;
7
+ opacity: 0;
8
+ margin: 0;
9
+ z-index: $vd-z-index-content-base + 1;
10
+ cursor: pointer;
11
+ }
@@ -0,0 +1,40 @@
1
+ // =================================== [100] Content ======================================================== //
2
+
3
+ // Any content with an explicit position
4
+ $vd-z-index-content-base: 100 !default;
5
+
6
+
7
+
8
+ // =================================== [200] Navigation ===================================================== //
9
+
10
+ // Top navigation, side navigation and level 2 actions (fixed action bars)
11
+ $vd-z-index-navigation-base: $vd-z-index-content-base * 2 !default;
12
+
13
+
14
+
15
+ // =================================== [300] Popovers ======================================================= //
16
+
17
+ // Search results, drop downs, selects, tooltips, date pickers, etc
18
+ $vd-z-index-popover-base: $vd-z-index-content-base * 3 !default;
19
+
20
+ $vd-popover-z-index: $vd-z-index-popover-base !default;
21
+
22
+
23
+
24
+ // =================================== [400] Modals ========================================================= //
25
+
26
+ // Splashes, dialogs, etc
27
+ $vd-z-index-modal-base: $vd-z-index-content-base * 4 !default;
28
+
29
+ $vd-modals-z-index: $vd-z-index-modal-base + 10 !default; // 410
30
+
31
+ $vd-popover-inside-modal-z-index: $vd-modals-z-index + 10 !default; // 420
32
+
33
+
34
+
35
+ // =================================== [500] Toasts ========================================================= //
36
+
37
+ // Toast notifications etc
38
+ $vd-z-index-toast-base: $vd-z-index-content-base * 5 !default;
39
+
40
+ $vd-toast-notification-z-index: $vd-z-index-toast-base !default;