@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,112 @@
1
+ .nv-topnav {
2
+ position: relative;
3
+ width: 100%;
4
+
5
+ @media print {
6
+ display: none;
7
+ }
8
+ }
9
+
10
+ .nv-topnav-title--banner {
11
+ justify-content: center;
12
+ flex: 1;
13
+
14
+ @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
15
+ flex: initial;
16
+ }
17
+ }
18
+
19
+ .nv-topnav-header {
20
+ min-width: 0;
21
+ flex: 1;
22
+
23
+ @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
24
+ &.nv-topnav-header--mobile {
25
+ flex: initial;
26
+ }
27
+ }
28
+
29
+ .vd-nav-item-label {
30
+ font-size: $nv-header-font-size;
31
+ font-weight: $vd-font-weight--bold;
32
+ max-width: none;
33
+ }
34
+
35
+ .vd-nav-item-action {
36
+ display: inline-flex;
37
+ width: auto;
38
+ max-width: 100%;
39
+ }
40
+
41
+ .vd-nav-item-icon {
42
+ font-size: $nv-header-logo-font-size;
43
+ }
44
+
45
+ // Disabled states for main header
46
+ &.vd-nav-item--disabled {
47
+ .vd-nav-item-action {
48
+ opacity: 1;
49
+ }
50
+
51
+ .vd-nav-item-icon {
52
+ opacity: $vd-topbar-item-default-opactiy;
53
+ }
54
+ }
55
+
56
+ &.nv-topnav-header--mobile {
57
+ display: none;
58
+ }
59
+ }
60
+
61
+ .nv-topnav-content {
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: flex-end;
65
+ height: 100%;
66
+ align-self: flex-end;
67
+ margin-left: auto;
68
+ flex: 1;
69
+
70
+ @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
71
+ flex: initial;
72
+ }
73
+ }
74
+
75
+ // ========= Disabled States ========= //
76
+
77
+ .nv-topnav--offline {
78
+ @include nv-striped-background($nv-topnav-offline-colour);
79
+ }
80
+
81
+ .nv-topnav--training {
82
+ @include nv-striped-background($nv-topnav-training-colour);
83
+ }
84
+
85
+ // ========= Responsive Breakpoint Styles ========= //
86
+
87
+ @include vd-viewport-media-max ($vd-breakpoint-large) {
88
+ .nv-topnav-header {
89
+ display: none;
90
+
91
+ &.nv-topnav-header--mobile {
92
+ display: flex;
93
+ position: relative;
94
+
95
+ @include nv-topnav-status-icon(vd-colour(no)) {
96
+ left: 33px;
97
+ top: 10px;
98
+ }
99
+
100
+ // Highlight an error within the current sidebar drawer
101
+ &.nv-topnav-header--nav-error {
102
+ &::after {
103
+ transform: scale(1);
104
+ }
105
+ }
106
+
107
+ .vd-nav-item-icon {
108
+ font-size: $nv-header-logo-font-size--mobile;
109
+ }
110
+ }
111
+ }
112
+ }
@@ -0,0 +1,14 @@
1
+ .nv-user-sale-data-header {
2
+ display: flex;
3
+ justify-content: space-between;
4
+ }
5
+
6
+ .nv-user-sale-data-heading {
7
+ font-weight: $vd-font-weight--bold;
8
+ }
9
+
10
+ .nv-user-sale-data-total {
11
+ font-size: vd-text-size(sub-heading);
12
+ font-weight: vd-text-weight(sub-heading);
13
+ text-align: right;
14
+ }
@@ -0,0 +1,44 @@
1
+ .nv-dialog-drawer-top-banner {
2
+ background: $vd-topbar-background-color;
3
+ height: $vd-topbar-height;
4
+ padding: 0;
5
+ color: $vd-topbar-font-color;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ flex-shrink: 0;
10
+
11
+ font-family: $vd-font-lato;
12
+ font-size: vd-text-size(sub-heading);
13
+ }
14
+
15
+ .nv-dialog-drawer-main {
16
+ display: flex;
17
+ flex-direction: column;
18
+ flex: 1;
19
+ font-family: $vd-font-lato;
20
+ }
21
+
22
+ .nv-dialog-drawer-highlight-icon {
23
+ color: vd-colour(supplementary--text);
24
+ text-align: center;
25
+ font-size: 32px;
26
+ display: block;
27
+ }
28
+
29
+ .nv-dialog-drawer-content {
30
+ display: flex;
31
+ flex-direction: column;
32
+ flex: 1;
33
+ overflow: auto;
34
+ }
35
+
36
+ .nv-dialog-drawer-container {
37
+ display: flex;
38
+ flex-direction: column;
39
+ height: 100%;
40
+ }
41
+
42
+ .nv-dialog-drawer-footer {
43
+ background: vd-colour(background);
44
+ }
@@ -0,0 +1,85 @@
1
+ .nv-notifications--retrieving {
2
+ text-align: center;
3
+ margin-top: $nv-notifications-list-spacing;
4
+ }
5
+
6
+ .nv-notifications-list {
7
+ list-style: none;
8
+ padding: 0;
9
+ margin: 0;
10
+ max-height: calc(100vh - #{$vd-topbar-height})
11
+ }
12
+
13
+ .nv-notifications-list-item {
14
+ padding: $nv-notifications-list-spacing;
15
+ padding-left: $nv-notifications-list-spacing * 2;
16
+ font-size: vd-text-size(body);
17
+ border-bottom: vd-border(framing);
18
+ line-height: $nv-notifications-item-line-height;
19
+ flex-shrink: 0;
20
+
21
+ &.nv-notifications-list-item--read {
22
+ background-color: vd-colour(box);
23
+ }
24
+
25
+ &.nv-notifications-list-item--unread {
26
+ background-color: vd-colour(background);
27
+ }
28
+ }
29
+
30
+ .nv-notifications-list-item-about {
31
+ position: relative;
32
+ word-wrap: break-word;
33
+
34
+ &:before {
35
+ content:'';
36
+ width: 8px;
37
+ height: 8px;
38
+ box-sizing: content-box;
39
+
40
+ color: vd-colour(keyline);
41
+
42
+ border: 1px solid currentColor;
43
+ background-color: currentColor;
44
+ border-radius: 50%;
45
+
46
+ display: block;
47
+
48
+ position: absolute;
49
+ top: $nv-notifications-list-spacing / 2;
50
+ left: -$nv-notifications-list-spacing;
51
+
52
+ .nv-notifications-list-item--read & {
53
+ background-color: transparent;
54
+ }
55
+
56
+ .nv-notifications-list-item--unread & {
57
+ color: vd-colour(do);
58
+ }
59
+ }
60
+ }
61
+
62
+ .nv-notifications-list-item-action {
63
+ font-size: vd-text-size(body);
64
+ margin-top: 20px;
65
+ display: inline-block;
66
+ }
67
+
68
+ .nv-notifications-message-header {
69
+ font-size: vd-text-size(sub-heading);
70
+ }
71
+
72
+ .nv-notifications-message-img {
73
+ max-width: 100%;
74
+ }
75
+
76
+ .nv-dialog-drawer-content--empty {
77
+ padding: $nv-notifications-list-spacing;
78
+ justify-content: center;
79
+ align-items: center;
80
+
81
+ // Reset the justification at a set max height so content can be fully scrolled
82
+ @media only screen and (max-height: $nv-notifications-content-empty-flex-start-height) {
83
+ justify-content: flex-start;
84
+ }
85
+ }
@@ -0,0 +1,44 @@
1
+ $nv-user-dialog-section-border: vd-border(keyline);
2
+
3
+ .nv-user-switch-button {
4
+ width: 100%;
5
+ margin: 0;
6
+ transform: translateY(-50%);
7
+ }
8
+
9
+ .nv-user-dialog-current-user {
10
+ background: vd-colour(background);
11
+ color: vd-colour(text);
12
+ border-bottom: $nv-user-dialog-section-border;
13
+ line-height: initial;
14
+ }
15
+
16
+ .nv-user-dialog-current-user--with-switch-user-button {
17
+ padding-top: 0;
18
+ }
19
+
20
+ .nv-user-display-name {
21
+ overflow: hidden;
22
+ text-overflow: ellipsis;
23
+ width: 100%;
24
+ }
25
+
26
+ .nv-user-account-type {
27
+ text-transform: capitalize;
28
+ margin-right: 10px;
29
+ font-weight: $vd-font-weight--bold;
30
+ }
31
+
32
+ .nv-user-account-email {
33
+ word-wrap: break-word;
34
+ overflow: hidden;
35
+ color: vd-colour(text);
36
+ }
37
+
38
+ .nv-user-dialog-outlet-info {
39
+ font-weight: $vd-font-weight--bold;
40
+ }
41
+
42
+ .nv-user-dialog-content-section {
43
+ border-bottom: $nv-user-dialog-section-border;
44
+ }
@@ -0,0 +1,12 @@
1
+ // Modules
2
+ @import "nv-topnav";
3
+ @import "nv-topnav-title";
4
+ @import "nv-sidenav";
5
+ @import "nv-account-banner";
6
+ @import "nv-notifications-item";
7
+ @import "nv-user-sale-data";
8
+
9
+ // Dialogs
10
+ @import "dialogs/nv-dialog-drawer";
11
+ @import "dialogs/nv-notifications-dialog";
12
+ @import "dialogs/nv-user-dialog";
@@ -0,0 +1,48 @@
1
+ //
2
+ // Generates a striped background with the stripes slanted at 60 deg and alternating between the given color and a
3
+ // darkened equivalent. Stripes are 15px wide.
4
+ //
5
+ @mixin nv-striped-background ($color) {
6
+ background: repeating-linear-gradient(-60deg,
7
+ darken($color, 3),
8
+ darken($color, 3) 15px,
9
+ $color 15px,
10
+ $color 30px);
11
+ }
12
+
13
+ @mixin nv-topnav-status-icon ($_vd-icon-color: vd-colour(do)) {
14
+ &::after {
15
+ content: '';
16
+ transform: scale(0);
17
+ opacity: 1;
18
+
19
+ position: absolute;
20
+ height: 10px;
21
+ width: 10px;
22
+
23
+ box-sizing: content-box;
24
+ background-color: $_vd-icon-color;
25
+ border: 3px solid $vd-topbar-background-color;
26
+ border-radius: 50%;
27
+
28
+ transition: transform 0.2s ease 0s;
29
+
30
+ pointer-events: none;
31
+
32
+ @content;
33
+ }
34
+
35
+ // When either offline or training mode is triggered, the border of the status icon needs to match the new
36
+ // backround color
37
+ .nv-topnav--offline & {
38
+ &::after {
39
+ border-color: $nv-topnav-offline-colour;
40
+ }
41
+ }
42
+
43
+ .nv-topnav--training & {
44
+ &::after {
45
+ border-color: $nv-topnav-training-colour;
46
+ }
47
+ }
48
+ }
@@ -0,0 +1,26 @@
1
+ // Top Navigation
2
+
3
+ $nv-header-font-size: 15px;
4
+ $nv-header-logo-font-size: 42px;
5
+ $nv-header-logo-font-size--mobile: 24px;
6
+
7
+ // Side Navigation
8
+
9
+ $nv-sidenav-base-z-index: $vd-z-index-navigation-base;
10
+ $nv-sidenav-modal-z-index: $vd-modals-z-index + 1;
11
+ $nv-sidenav-modal-close-base-offset: 10px;
12
+ $nv-sidenav-modal-close-right-offset: -($vd-dialog-close-width + $nv-sidenav-modal-close-base-offset);
13
+
14
+ $nv-sidenav-content-box-shadow-offset-x: 1px;
15
+ $nv-sidenav-tabs-mobile-width: 85px;
16
+ $nv-sidenav-drawer-mobile-width: 145px;
17
+
18
+ // Notifications Side Drawer
19
+
20
+ $nv-notifications-list-spacing: 20px;
21
+ $nv-notifications-item-line-height: 18px;
22
+ $nv-notifications-content-empty-flex-start-height: 500px;
23
+
24
+ // Navigation Colours
25
+ $nv-topnav-offline-colour: $vd-colour-charcoal-60;
26
+ $nv-topnav-training-colour: $vd-colour-blue-60;
@@ -0,0 +1,98 @@
1
+ // Non styles
2
+ @import 'global/non-styles';
3
+
4
+ // Base styles
5
+ @import 'global/colour/themes/css-var-theme-generator';
6
+ @import 'global/normalise';
7
+ @import 'global/text/text-helpers';
8
+ @import 'global/colour/colour-helpers';
9
+ @import 'global/placeholders';
10
+ @import 'global/effects/effects';
11
+
12
+ // Viewport Identifier
13
+ @import 'global/viewport/viewport-identifier';
14
+
15
+ // Responsive Grid
16
+ @import '../components/vd-grid/vd-grid';
17
+
18
+ // Behaviours
19
+ @import '../behaviours/vd-align/vd-align';
20
+
21
+ // Common Components
22
+ @import '../components/vd-select/vd-select';
23
+ @import '../components/vd-input/vd-input';
24
+
25
+ // Components
26
+ @import '../components/vd-autocomplete/vd-autocomplete';
27
+ @import '../components/vd-autocomplete-filter/vd-autocomplete-filter';
28
+ @import '../components/vd-action-bar/vd-action-bar';
29
+ @import '../components/vd-avatar/vd-avatar';
30
+ @import '../components/vd-avatar-multi/vd-avatar-multi';
31
+ @import '../components/vd-banner/vd-banner';
32
+ @import '../components/vd-bg/vd-bg';
33
+ @import '../components/vd-body/vd-body';
34
+ @import '../components/vd-btn/vd-btn';
35
+ @import '../components/vd-card/vd-card';
36
+ @import '../components/vd-carousel/vd-carousel';
37
+ @import '../components/vd-checkbox/vd-checkbox';
38
+ @import '../components/vd-datepicker/vd-datepicker';
39
+ @import '../components/vd-dialog/vd-dialog';
40
+ @import '../components/vd-dialog-close/vd-dialog-close';
41
+ @import '../components/vd-dialog-drawer/vd-dialog-drawer';
42
+ @import '../components/vd-dott/vd-dott';
43
+ @import '../components/vd-dropdown/vd-dropdown';
44
+ @import '../components/vd-expandable/vd-expandable';
45
+ @import '../components/vd-feedback/vd-feedback';
46
+ @import '../components/vd-field/vd-field';
47
+ @import '../components/vd-fieldset/vd-fieldset';
48
+ @import '../components/vd-flag/vd-flag';
49
+ @import '../components/vd-flex/vd-flex';
50
+ @import '../components/vd-header/vd-header';
51
+ @import '../components/vd-hero/vd-hero';
52
+ @import '../components/vd-hr/vd-hr';
53
+ @import '../components/vd-input-char-limit/vd-input-char-limit';
54
+ @import '../components/vd-in-page-help/vd-in-page-help';
55
+ @import '../components/vd-link/vd-link';
56
+ @import '../components/vd-lozenge/vd-lozenge';
57
+ @import '../components/vd-lozenge-group/vd-lozenge-group';
58
+ @import '../components/vd-loader/vd-loader';
59
+ @import '../components/vd-main-content/vd-main-content';
60
+ @import '../components/vd-modals-container/vd-modals-container';
61
+ @import '../components/vd-nav-item/vd-nav-item';
62
+ @import '../components/vd-overlay/vd-overlay';
63
+ @import '../components/vd-p/vd-p';
64
+ @import '../components/vd-panel/vd-panel';
65
+ @import '../components/vd-popover/vd-popover';
66
+ @import '../components/vd-multiselect-popover/vd-multiselect-popover';
67
+ @import '../components/vd-popover-list/vd-popover-list';
68
+ @import '../components/vd-promo/vd-promo';
69
+ @import '../components/vd-radio/vd-radio';
70
+ @import '../components/vd-scrollable/vd-scrollable';
71
+ @import '../components/vd-section/vd-section';
72
+ @import '../components/vd-section-back/vd-section-back';
73
+ @import '../components/vd-segcontrol/vd-segcontrol';
74
+ @import '../components/vd-sidebar/vd-sidebar';
75
+ @import '../components/vd-sidebar-drawer/vd-sidebar-drawer';
76
+ @import '../components/vd-sidebar-tabs/vd-sidebar-tabs';
77
+ @import '../components/vd-splash/vd-splash';
78
+ @import '../components/vd-status-icon/vd-status-icon';
79
+ @import '../components/vd-suggestion/vd-suggestion-list';
80
+ @import '../components/vd-switch/vd-switch';
81
+ @import '../components/vd-tabs/vd-tabs';
82
+ @import '../components/vd-table/vd-table';
83
+ @import '../components/vd-text/vd-text';
84
+ @import '../components/vd-toast-notification/vd-toast-notification';
85
+ @import '../components/vd-tooltip/vd-tooltip';
86
+ @import '../components/vd-topbar/vd-topbar';
87
+ @import '../components/vd-visibility/vd-visibility';
88
+ @import '../components/vd-next-stepper/vd-next-stepper';
89
+ @import '../components/vd-settings/vd-settings';
90
+ @import '../components/vd-save/vd-save';
91
+ @import '../components/vd-badges/vd-badges';
92
+
93
+ // Must be last items in the style sheet
94
+ @import 'global/spacing/spacing-helpers';
95
+
96
+ // Navi styles
97
+ // !! NOTE: Please keep @import navi styles AT THE BOTTOM to avoid nav UI issue
98
+ @import 'navi/navi';