@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,232 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+ @import './DatePicker-ns';
3
+
4
+ .vd-datepicker-ui {
5
+ display: block;
6
+ }
7
+
8
+ .vd-datepicker-input-container {
9
+ position: relative; // Added relative positioning to eliminate the need to wrap the date picker in a position relative div.
10
+ .vd-datepicker-input {
11
+ cursor: pointer;
12
+ margin: 0;
13
+ }
14
+ }
15
+
16
+ .vd-datepicker-group {
17
+ display: flex;
18
+ justify-content: space-between;
19
+ margin: -$vd-datepicker-padding;
20
+
21
+ @include vd-viewport-media-max(small) {
22
+ flex-direction: column;
23
+ align-items: center;
24
+ }
25
+ }
26
+
27
+ .vd-datepicker-group-item {
28
+ padding: $vd-datepicker-padding;
29
+
30
+ &:first-child {
31
+ border-right: $vd-datepicker-border;
32
+
33
+ @include vd-viewport-media-max(small) {
34
+ border-right: none;
35
+ border-bottom: $vd-datepicker-border;
36
+ }
37
+ }
38
+
39
+ .vd-datepicker-ui {
40
+ margin-top: 22px;
41
+ }
42
+ }
43
+
44
+ .vd-datepicker-group-footer {
45
+ padding: ($vd-datepicker-padding / 3) $vd-datepicker-padding;
46
+ }
47
+
48
+ .vd-datepicker-group-summary {
49
+ margin: ($vd-datepicker-padding / 3);
50
+ margin-left: 0;
51
+ }
52
+
53
+ .react-datepicker {
54
+ @include vd-reset;
55
+ font-size: $vd-datepicker-font-size;
56
+ position: relative;
57
+ margin-top: 8px;
58
+ }
59
+
60
+ .react-datepicker__current-month {
61
+ display: none;
62
+ }
63
+
64
+ .react-datepicker__header {
65
+ text-align: center;
66
+ }
67
+
68
+ .react-datepicker__navigation {
69
+ position: absolute;
70
+ top: 13px;
71
+ display: inline-block;
72
+ visibility: hidden;
73
+ overflow: hidden;
74
+ width: $vd-datepicker-next-prev-button-width;
75
+ cursor: pointer;
76
+ padding: 3px;
77
+ border-width: 2px;
78
+ }
79
+
80
+ // Left arrow
81
+ .react-datepicker__navigation--previous {
82
+ left: -1px;
83
+
84
+ &:before {
85
+ @include next-prev-arrow-common;
86
+ transform: rotate(225deg);
87
+ }
88
+ }
89
+
90
+ // Right arrow
91
+ .react-datepicker__navigation--next {
92
+ right: -10px;
93
+
94
+ &:before {
95
+ @include next-prev-arrow-common;
96
+ transform: rotate(45deg);
97
+ }
98
+ }
99
+
100
+ .react-datepicker__month {
101
+ margin-top: $vd-datepicker-day-spacing;
102
+ }
103
+
104
+ .react-datepicker__month-dropdown-container,
105
+ .react-datepicker__year-dropdown-container {
106
+ display: inline-block;
107
+ }
108
+
109
+ .react-datepicker__month-select,
110
+ .react-datepicker__year-select {
111
+ @include vd-select;
112
+ @include vd-select-carets;
113
+
114
+ padding-right: 12px;
115
+ }
116
+
117
+ .react-datepicker__month-select {
118
+ width: 115px;
119
+ }
120
+
121
+ .react-datepicker__year-select {
122
+ width: 85px;
123
+ }
124
+
125
+ .react-datepicker__month-dropdown-container {
126
+ margin-right: 5px;
127
+ }
128
+
129
+ .react-datepicker__day-names {
130
+ margin-top: $vd-datepicker-day-spacing * 2;
131
+ }
132
+
133
+ .react-datepicker__day-name {
134
+ &:last-child {
135
+ padding-right: 0;
136
+ }
137
+
138
+ display: inline-block;
139
+ text-align: center;
140
+ width: $vd-datepicker-button-size;
141
+ padding-right: $vd-datepicker-day-spacing / 2;
142
+ text-decoration: underline dotted;
143
+ font-weight: $vd-font-weight--bold;
144
+ }
145
+
146
+ /* Day States */
147
+ .vd-datepicker-day-button {
148
+ box-sizing: border-box;
149
+ padding: 3px;
150
+ background: $vd-datepicker-background;
151
+ width: $vd-datepicker-button-size;
152
+ height: $vd-datepicker-button-size;
153
+ border: none;
154
+ border-radius: $vd-datepicker-button-radius;
155
+ text-align: center;
156
+ line-height: 24px;
157
+ }
158
+
159
+ .react-datepicker__day {
160
+ display: inline-block;
161
+ font-size: $vd-datepicker-font-size;
162
+ padding-right: $vd-datepicker-day-spacing / 2;
163
+ cursor: pointer;
164
+ }
165
+
166
+ .react-datepicker__day--range-start,
167
+ .react-datepicker__day--range-end,
168
+ .react-datepicker__day--selected {
169
+ .vd-datepicker-day-button {
170
+ background: vd-colour(do);
171
+ color: vd-colour(box);
172
+ font-weight: $vd-font-weight--bold;
173
+ border: none;
174
+ }
175
+ }
176
+
177
+ .react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
178
+ .vd-datepicker-day-button:hover {
179
+ background: vd-rgba(vd-colour(do-rgb), 0.35);
180
+ }
181
+ }
182
+
183
+ // Hide dates from previous months
184
+ .react-datepicker__day--outside-month {
185
+ visibility: hidden;
186
+ }
187
+
188
+ // Highlight today
189
+ .react-datepicker__day--today {
190
+ color: vd-colour(do);
191
+ font-weight: $vd-font-weight--bold;
192
+ }
193
+
194
+ // Formatting for days other than the start, end or selected dates
195
+ .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
196
+ background-color: $vd-datepicker-range-colour;
197
+
198
+ .vd-datepicker-day-button {
199
+ background-color: $vd-datepicker-range-colour;
200
+ border-radius: 0;
201
+
202
+ &:hover {
203
+ border-radius: $vd-datepicker-button-radius;
204
+ }
205
+ }
206
+ }
207
+
208
+ .react-datepicker__day--disabled {
209
+ @include disabled;
210
+ pointer-events: none;
211
+ }
212
+
213
+ .react-datepicker__day--range-start {
214
+ background-image: linear-gradient(
215
+ to right,
216
+ transparent 50%,
217
+ $vd-datepicker-range-colour 50%
218
+ );
219
+ }
220
+
221
+ .react-datepicker__day--range-end {
222
+ background-image: linear-gradient(
223
+ to right,
224
+ $vd-datepicker-range-colour 50%,
225
+ transparent 50%
226
+ );
227
+ }
228
+
229
+ // If the start and end date are the same, don't show the gradient
230
+ .react-datepicker__day--range-start.react-datepicker__day--range-end {
231
+ background-image: none;
232
+ }
@@ -0,0 +1,32 @@
1
+ // Date picker general
2
+ $vd-datepicker-font-size: 15px;
3
+ $vd-datepicker-button-colour: vd-colour(do);
4
+ $vd-datepicker-padding: 24px;
5
+ $vd-datepicker-background: vd-colour(box);
6
+ $vd-datepicker-border: vd-border(framing);
7
+
8
+ // Grid
9
+ $vd-datepicker-day-spacing: 10px;
10
+ $vd-datepicker-range-colour: vd-colour(do-highlight);
11
+
12
+ // Button
13
+ $vd-datepicker-button-radius: 50%;
14
+ $vd-datepicker-button-size: 30px;
15
+
16
+ // Button next / prev
17
+ $vd-datepicker-next-prev-button-width: 26px;
18
+ $vd-datepicker-next-prev-button-icon-size: 7px;
19
+ $vd-datepicker-next-prev-arrow-border-enabled: 3px solid vd-colour(text);
20
+ $vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
21
+
22
+ // Mixins
23
+ @mixin next-prev-arrow-common {
24
+ content: " ";
25
+ visibility: visible;
26
+ position: absolute;
27
+ width: $vd-datepicker-next-prev-button-icon-size;
28
+ height: $vd-datepicker-next-prev-button-icon-size;
29
+ border-right: $vd-datepicker-next-prev-arrow-border-enabled;
30
+ border-top: $vd-datepicker-next-prev-arrow-border-enabled;
31
+ box-sizing: initial;
32
+ }
@@ -0,0 +1,8 @@
1
+ .file-upload-hidden-file-input {
2
+ visibility: 'hidden';
3
+ position: absolute;
4
+ top: 0;
5
+ left: 0;
6
+ height: 0;
7
+ width: 0;
8
+ }
@@ -0,0 +1,7 @@
1
+ .p-inbound-indicator-popover {
2
+ min-width: 360px;
3
+ }
4
+
5
+ .inbound-indicator {
6
+ transform: scaleX(-1);
7
+ }
@@ -0,0 +1,3 @@
1
+ .vs-inbound-info-text-section {
2
+ flex-grow: 1;
3
+ }
@@ -0,0 +1,99 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+
3
+ /* stylelint-disable vend/use-colour-function */
4
+ // Should review at some point if it is possible to replace this with a standard colour
5
+ // or if we need to add this to standard colour
6
+ $chart-fill: #009D12;
7
+ $chart-bg: #fafafa;
8
+ /* stylelint-enable vend/use-colour-function */
9
+
10
+
11
+ .vd-line-graph-container {
12
+ .vd-grid.vd-y, .vd-axis.vd-y, .vd-axis.vd-x {
13
+ .domain {
14
+ display: none;
15
+ }
16
+
17
+ .tick line {
18
+ stroke: vd-colour(framing);
19
+ stroke-width: 1px;
20
+ fill: transparent;
21
+ }
22
+ }
23
+
24
+ .vd-grid.vd-grid-filled {
25
+ stroke-dasharray: 4,2;
26
+ }
27
+
28
+ .vd-grid-background {
29
+ fill: $chart-bg;
30
+ stroke: none;
31
+ }
32
+
33
+ .vd-grid-zero-tick {
34
+ stroke: vd-colour(keyline);
35
+ }
36
+
37
+ .vd-line {
38
+ fill: transparent;
39
+ stroke-width: 2px;
40
+ stroke: vd-colour(keyline);
41
+ }
42
+
43
+ .vd-line-with-fill {
44
+ fill: transparent;
45
+ stroke-width: 2px;
46
+ stroke: $chart-fill;
47
+ }
48
+
49
+ .vd-line-fill {
50
+ fill: $chart-fill;
51
+ opacity: 0.1;
52
+ stroke-width: 0;
53
+ }
54
+
55
+ .vd-plot-point {
56
+ fill: vd-colour(do);
57
+ stroke: vd-colour(box);
58
+ stroke-width: 2px;
59
+ }
60
+
61
+ .vd-plot-point-with-fill {
62
+ fill: $chart-fill;
63
+ stroke: $vd-colour-white;
64
+ }
65
+
66
+ .vd-plot-point-hidden {
67
+ stroke: none;
68
+ fill: transparent;
69
+ }
70
+
71
+ .vd-line-wrapper-main {
72
+ .vd-line {
73
+ stroke: vd-colour(supplementary);
74
+ }
75
+ }
76
+
77
+ .vd-line-wrapper-secondary {
78
+ .vd-plot-point {
79
+ stroke: none;
80
+ fill: transparent;
81
+ }
82
+ }
83
+
84
+ .vd-line-label {
85
+ @include vd-text(mini-signpost);
86
+ fill: vd-colour(keyline);
87
+ }
88
+ .vd-axis {
89
+ .tick text {
90
+ @include vd-text(mini-copy);
91
+ fill: vd-colour(text);
92
+ }
93
+ }
94
+ }
95
+
96
+ .vd-chart-popover {
97
+ min-width: 120px;
98
+ pointer-events: none;
99
+ }
@@ -0,0 +1,149 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+ @import './Modal-ns.scss';
3
+
4
+ .vd-modal-container {
5
+ position: relative;
6
+ box-sizing: border-box;
7
+ margin: 0 auto;
8
+ padding: 0;
9
+
10
+ background: vd-colour(box);
11
+ border-radius: $vd-border-radius;
12
+
13
+ width: calc(90% - #{$vd-dialog-close-width});
14
+
15
+ // Enables default click events for the container child elements
16
+ pointer-events: auto;
17
+
18
+ &:focus {
19
+ outline: none;
20
+ }
21
+
22
+ @include vd-viewport-media-max (small) {
23
+ max-width: none;
24
+ width: 100%;
25
+ margin-top: $vd-dialog-container-top-offset;
26
+ }
27
+
28
+ @include vd-viewport-media-max (xsmall) {
29
+ max-height: none;
30
+ height: calc(100% - #{$vd-dialog-container-top-offset});
31
+
32
+ border-radius: 0;
33
+
34
+ margin-left: 0;
35
+ margin-right: 0;
36
+ }
37
+ }
38
+
39
+ @each $_vd-modal-mobile-size in $vd-modal-mobile-sizes {
40
+ .vd-modal--size-#{nth($_vd-modal-mobile-size, 1)} {
41
+ max-width: nth($_vd-modal-mobile-size, 2);
42
+ }
43
+ }
44
+
45
+ @each $_vd-modal-size in $vd-modal-sizes {
46
+ @include vd-viewport-media-min ($vd-breakpoint-medium) {
47
+ .vd-modal--size-#{nth($_vd-modal-size, 1)} {
48
+ max-width: nth($_vd-modal-size, 2);
49
+ }
50
+ }
51
+ }
52
+
53
+ .vd-modal-inner-container {
54
+ display: flex;
55
+ flex-direction: column;
56
+
57
+ min-height: $vd-dialog-container-min-height;
58
+ max-height: calc(95vh - #{$vd-dialog-container-top-offset});
59
+
60
+ @include vd-viewport-media-max (xsmall) {
61
+ max-height: 95%;
62
+ }
63
+
64
+ & > .vd-g-row {
65
+ width: 100%;
66
+ }
67
+
68
+ .vd-breadcrumb, .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & .vd-modal-content, .vd-dialog-actions {
69
+ margin-left: var(--vd-dialog-spacing);
70
+ margin-right: var(--vd-dialog-spacing);
71
+
72
+ &:first-child {
73
+ margin-top: var(--vd-dialog-spacing);
74
+ }
75
+
76
+ &:last-child {
77
+ margin-bottom: var(--vd-dialog-spacing)
78
+ }
79
+ }
80
+
81
+ .vd-breadcrumb {
82
+ & + .vd-dialog-header, & + .vd-modal-content, & + .vd-dialog-actions {
83
+ margin-top: vd-grid-unit(4);
84
+ }
85
+ }
86
+ }
87
+
88
+ .vd-modal-content {
89
+ overflow-y: auto;
90
+ overflow-x: hidden;
91
+
92
+ & + .vd-dialog-actions {
93
+ margin-top: var(--vd-dialog-spacing);
94
+ }
95
+ }
96
+
97
+ .vd-modal-banner {
98
+ width: 100%;
99
+
100
+ & + .vd-dialog-header, & + .vd-modal-content, & + .vd-dialog-actions {
101
+ margin-top: var(--vd-dialog-spacing);
102
+ }
103
+ }
104
+
105
+ .vd-modal-sidebar {
106
+ display: none;
107
+
108
+ & + .vd-breadcrumb, & + .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & + .vd-modal-content, & + .vd-dialog-actions {
109
+ margin-top: var(--vd-dialog-spacing);
110
+ }
111
+
112
+ @include vd-viewport-media-min ($vd-breakpoint-medium) {
113
+ display: block;
114
+ width: $vd-modal-sidebar-size;
115
+ position: absolute;
116
+ top: 0;
117
+ bottom: 0;
118
+ left: 0;
119
+
120
+ & ~ .vd-breadcrumb, & ~ .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & ~ .vd-modal-content, & ~ .vd-dialog-actions {
121
+ margin-left: $vd-modal-sidebar-size;
122
+ padding-left: var(--vd-dialog-spacing);
123
+ }
124
+
125
+ & ~ .vd-modal-banner {
126
+ margin-left: $vd-modal-sidebar-size;
127
+ width: calc(100% - #{$vd-modal-sidebar-size})
128
+ }
129
+ }
130
+ }
131
+
132
+ // Full screen modal
133
+ .vd-modal--size-full-screen {
134
+ display: flex;
135
+ justify-content: center;
136
+ align-items: center;
137
+ width: calc(100vw - var(--vd-dialog-spacing) * 2);
138
+ height: calc(100vh - var(--vd-dialog-spacing) * 2);
139
+ margin: var(--vd-dialog-spacing);
140
+
141
+ .vd-modal-inner-container {
142
+ width: 100%;
143
+ max-width: $vd-modal-full-screen-inner-max-width;
144
+ }
145
+
146
+ .vd-modal-content {
147
+ padding: vd-grid-unit(6);
148
+ }
149
+ }
@@ -0,0 +1,7 @@
1
+ $vd-modal-sizes: ((small 600px) (small-with-sidebar 880px) (medium 720px) (medium-with-sidebar 1000px) (large 1000px));
2
+
3
+ $vd-modal-mobile-sizes: ((small 600px) (small-with-sidebar 600px) (medium 720px) (medium-with-sidebar 720px) (large 1000px));
4
+
5
+ $vd-modal-sidebar-size: 280px;
6
+
7
+ $vd-modal-full-screen-inner-max-width: 1100px;
@@ -0,0 +1,3 @@
1
+ .vs-page-header {
2
+ position: relative;
3
+ }
@@ -0,0 +1,21 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+
3
+ .vs-progress-bar-header {
4
+ text-align: center;
5
+ margin: 10px 0;
6
+ }
7
+
8
+ .vs-progress-bar-container {
9
+ height: 10px;
10
+ width: 100%;
11
+ border-radius: 5px;
12
+ background-color: vd-colour(framing);
13
+ overflow: hidden;
14
+ }
15
+
16
+ .vs-progress-bar {
17
+ height: 100%;
18
+ width: 0%;
19
+ background-color: vd-colour(do);
20
+ transition: width 0.6s ease;
21
+ }
@@ -0,0 +1,44 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+
3
+ .pm-promotion-original-price {
4
+ text-decoration: line-through;
5
+ @include vd-text(supplementary);
6
+ }
7
+
8
+ .pm-promotion-modal-content {
9
+ // @todo this should probably be the default for Modals
10
+ margin: 0 !important;
11
+ // Fix Safari 10
12
+ flex-basis: auto;
13
+
14
+ .vd-scrollable {
15
+ padding: 0 var(--vd-dialog-spacing) var(--vd-dialog-spacing);
16
+ }
17
+
18
+ @include vd-viewport-media-max (xsmall) {
19
+ -webkit-overflow-scrolling: touch;
20
+ }
21
+ }
22
+
23
+ .pm-products-table-actions {
24
+ display: flex;
25
+ justify-content: space-between;
26
+ flex-flow: row wrap;
27
+ box-shadow: inset 0 -1px vd-colour(keyline);
28
+ }
29
+
30
+ .pm-products-search-open {
31
+ display: inline-block;
32
+ position: relative;
33
+ width: 100%;
34
+ }
35
+
36
+ .pm-products-search-close {
37
+ display: inline-flex;
38
+ justify-content: flex-end;
39
+ flex-grow: 1;
40
+ }
41
+
42
+ .pm-products-search-cancel {
43
+ width: 100%;
44
+ }
@@ -0,0 +1,6 @@
1
+ .vd-search-filters-actions {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: flex-end;
5
+ flex-wrap: wrap;
6
+ }