@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,332 @@
1
+ .vd-datepicker-ui {
2
+ display: block;
3
+ }
4
+
5
+ .vd-datepicker-input {
6
+ cursor: pointer;
7
+ }
8
+
9
+ // Spacer is used to offset the height of the no end date checkbox in the end date section
10
+ // That way the datepickers in both start and end date align
11
+ .vd-datepicker-range-no-end-spacer {
12
+ height: $vd-datepicker-range-no-end-height;
13
+ }
14
+
15
+ .vd-datepicker-range-no-end-disabled {
16
+ @include disabled;
17
+ pointer-events: none;
18
+ }
19
+
20
+ .vd-datepicker-range-input-container {
21
+ .vd-datepicker-range-input {
22
+ cursor: pointer;
23
+ margin: 0;
24
+ }
25
+ }
26
+
27
+ .vd-datepicker-data-inputs {
28
+ display: flex;
29
+ width: $vd-datepicker-data-inputs-width;
30
+
31
+ .vd-datepicker-date-input {
32
+ flex: 2;
33
+
34
+ &.vd-has-time-input {
35
+ border-radius: $vd-datepicker-date-input-border-radius;
36
+ }
37
+ }
38
+
39
+ .vd-datepicker-time-input {
40
+ flex: 1;
41
+ border-radius: $vd-datepicker-time-input-border-radius;
42
+ }
43
+
44
+ .vd-datepicker-time-input-containter {
45
+ width: 100px;
46
+ margin-left: -2px;
47
+ .react-datepicker__tab-loop {
48
+ // Hide ReactDatePicker default time picker, only use the input box to change start/end time.
49
+ display: none;
50
+ }
51
+ }
52
+ }
53
+
54
+ .vd-datepicker-group {
55
+ display: flex;
56
+ justify-content: space-between;
57
+ margin: -$vd-datepicker-padding;
58
+
59
+ @include vd-viewport-media-max(small) {
60
+ flex-direction: column;
61
+ align-items: center;
62
+ }
63
+ }
64
+
65
+ .vd-datepicker-group-item {
66
+ padding: $vd-datepicker-padding;
67
+
68
+ &:first-child {
69
+ border-right: $vd-datepicker-border;
70
+
71
+ @include vd-viewport-media-max(small) {
72
+ border-right: none;
73
+ border-bottom: $vd-datepicker-border;
74
+ }
75
+ }
76
+
77
+ .vd-datepicker-ui {
78
+ margin-top: 22px;
79
+ }
80
+ }
81
+
82
+ .vd-datepicker-group-footer {
83
+ padding: ($vd-datepicker-padding / 3) $vd-datepicker-padding;
84
+ }
85
+
86
+ .vd-datepicker-group-summary {
87
+ margin: ($vd-datepicker-padding / 3);
88
+ margin-left: 0;
89
+ }
90
+
91
+ // Common styles for both range and single date pickers
92
+ .vd-datepicker,
93
+ .vd-datepicker-range {
94
+ @include vd-reset;
95
+ font-size: $vd-datepicker-font-size;
96
+
97
+ table, caption, tbody, tfoot, thead, tr, th, td, abbr {
98
+ margin: initial;
99
+ padding: initial;
100
+ border: initial;
101
+ line-height: initial;
102
+ border-collapse: initial;
103
+ background: initial;
104
+ color: initial;
105
+ font-weight: initial;
106
+ text-align: initial;
107
+ }
108
+
109
+ .pika-table {
110
+ margin-top: $vd-datepicker-table-spacing * 2;
111
+
112
+ tbody:before {
113
+ content: " ";
114
+ display: block;
115
+ margin-top: $vd-datepicker-table-spacing;
116
+ }
117
+
118
+ td {
119
+ padding-right: $vd-datepicker-table-spacing / 2;
120
+
121
+ &:last-child {
122
+ padding-right: 0;
123
+ }
124
+ }
125
+
126
+ th {
127
+ padding-right: $vd-datepicker-table-spacing / 2;
128
+
129
+ &:last-child {
130
+ padding-right: 0;
131
+ }
132
+ }
133
+
134
+ abbr {
135
+ font-weight: $vd-font-weight--bold;
136
+ color: vd-colour(text);
137
+ }
138
+ }
139
+
140
+ .pika-title {
141
+ position: relative;
142
+ text-align: center;
143
+
144
+ .pika-label {
145
+ display: inline-block;
146
+ visibility: hidden;
147
+
148
+ &:nth-child(even) {
149
+ &:before {
150
+ @include vd-datepicker-select-arrow-common;
151
+ border-bottom: $vd-datepicker-select-arrow-border;
152
+ right: $vd-datepicker-select-icon-position-right-even;
153
+ }
154
+
155
+ &:after {
156
+ @include vd-datepicker-select-arrow-common;
157
+ border-top: $vd-datepicker-select-arrow-border;
158
+ top: $vd-datepicker-select-icon-position-top;
159
+ right: $vd-datepicker-select-icon-position-right-even;
160
+ }
161
+ }
162
+
163
+ &:nth-child(odd) {
164
+ &:before {
165
+ @include vd-datepicker-select-arrow-common;
166
+ border-bottom: $vd-datepicker-select-arrow-border;
167
+ right: $vd-datepicker-select-icon-position-right-odd;
168
+ }
169
+
170
+ &:after {
171
+ @include vd-datepicker-select-arrow-common;
172
+ border-top: $vd-datepicker-select-arrow-border;
173
+ top: $vd-datepicker-select-icon-position-top;
174
+ right: $vd-datepicker-select-icon-position-right-odd;
175
+ }
176
+ }
177
+ }
178
+
179
+ .pika-select {
180
+ @include vd-select;
181
+ padding-right: 12px;
182
+ visibility: visible;
183
+ }
184
+
185
+ .pika-select-month {
186
+ @include vd-datepicker-select-common;
187
+ width: 110px;
188
+ left: $vd-datepicker-select-horizontal-positioning;
189
+ }
190
+
191
+ .pika-select-year {
192
+ @include vd-datepicker-select-common;
193
+ width: 72px;
194
+ right: $vd-datepicker-select-horizontal-positioning;
195
+ }
196
+
197
+ .pika-prev,
198
+ .pika-next {
199
+ position: absolute;
200
+ overflow: hidden;
201
+ }
202
+
203
+ .pika-prev {
204
+ left: -5px;
205
+ width: $vd-datepicker-next-prev-button-width;
206
+ visibility: hidden;
207
+ cursor: pointer;
208
+
209
+ &:before {
210
+ @include next-prev-arrow-common;
211
+ transform: rotate(225deg);
212
+ }
213
+
214
+ &.is-disabled {
215
+ &:before {
216
+ @include next-prev-arrow-common--disabled;
217
+ }
218
+ }
219
+ }
220
+
221
+ .pika-next {
222
+ right: -5px;
223
+ width: $vd-datepicker-next-prev-button-width;
224
+ visibility: hidden;
225
+ cursor: pointer;
226
+
227
+ &:before {
228
+ @include next-prev-arrow-common;
229
+ transform: rotate(45deg);
230
+ }
231
+
232
+ &.is-disabled {
233
+ &:before {
234
+ @include next-prev-arrow-common--disabled;
235
+ }
236
+ }
237
+ }
238
+ }
239
+
240
+ .is-disabled {
241
+ pointer-events: none;
242
+ }
243
+
244
+ .is-inrange {
245
+ background-color: $vd-datepicker-range-colour;
246
+
247
+ .pika-button {
248
+ background-color: $vd-datepicker-range-colour;
249
+ border-radius: 0;
250
+
251
+ &:hover {
252
+ border-radius: $vd-datepicker-button-radius;
253
+ }
254
+ }
255
+ }
256
+
257
+ .is-startrange {
258
+ background-image: linear-gradient(to right, transparent 50%, $vd-datepicker-range-colour 50%);
259
+ }
260
+
261
+ .is-endrange {
262
+ background-image: linear-gradient(to right, $vd-datepicker-range-colour 50%, transparent 50%);
263
+ }
264
+
265
+ .is-selected.is-startrange.is-endrange {
266
+ background-image: none;
267
+ }
268
+
269
+ td.is-disabled {
270
+ filter: grayscale(100%);
271
+ opacity: $vd-opacity;
272
+ }
273
+
274
+ .pika-button {
275
+ font-size: $vd-datepicker-font-size;
276
+ cursor: pointer;
277
+ background: $vd-datepicker-background;
278
+ width: $vd-datepicker-button-size;
279
+ height: $vd-datepicker-button-size;
280
+ border: none;
281
+ border-radius: $vd-datepicker-button-radius;
282
+ padding: 3px;
283
+ color: vd-colour(text);
284
+
285
+ &:hover {
286
+ background: vd-rgba(vd-colour(do-rgb), $vd-opacity);
287
+ }
288
+ }
289
+
290
+ .is-today .pika-button {
291
+ color: vd-colour(do);
292
+ font-weight: $vd-font-weight--bold;
293
+ }
294
+
295
+ .is-startrange,
296
+ .is-endrange {
297
+ .pika-button {
298
+ border: 2px solid vd-colour(do);
299
+ background: $vd-datepicker-range-colour;
300
+ }
301
+ }
302
+
303
+ .is-selected .pika-button {
304
+ background: vd-colour(do);
305
+ color: vd-colour(text-action);
306
+ font-weight: $vd-font-weight--bold;
307
+ border: none;
308
+ }
309
+ }
310
+
311
+ .vd-datepicker-range-no-end {
312
+ .is-startrange, .is-endrange {
313
+ .pika-button {
314
+ border: none;
315
+ }
316
+ }
317
+
318
+ .vd-datepicker-end-picker {
319
+ .is-startrange, .is-endrange {
320
+ .pika-button {
321
+ background: $vd-datepicker-range-colour;
322
+ color: vd-colour(text);
323
+ font-weight: normal;
324
+ }
325
+ }
326
+ }
327
+ }
328
+
329
+ // this will only affect the single instance date picker
330
+ .vd-datepicker {
331
+ padding-top: $vd-datepicker-select-vertical-positioning;
332
+ }
@@ -0,0 +1,10 @@
1
+ // Dialog Header
2
+ $vd-dialog-header-margin: 10px;
3
+ $vd-dialog-header-sub-padding: 5px;
4
+ $vd-dialog-header-divider-width: 40px;
5
+
6
+ // Dialog Container
7
+ $vd-dialog-container-min-height: 170px;
8
+ $vd-dialog-container-focus-colour: vd-colour(go);
9
+ $vd-dialog-container-top-offset: vd-grid-unit(15);
10
+ $vd-dialog-container-sizes: ((small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px));
@@ -0,0 +1,220 @@
1
+ :root {
2
+ --vd-dialog-spacing: #{$vd-section-padding-h-med};
3
+ }
4
+
5
+ @include vd-viewport-media-max (small) {
6
+ :root {
7
+ --vd-dialog-spacing: #{$vd-section-padding-h-sml};
8
+ }
9
+ }
10
+
11
+ @include vd-viewport-media-max (xsmall) {
12
+ :root {
13
+ --vd-dialog-spacing: #{vd-grid-unit(4)};
14
+ }
15
+ }
16
+
17
+ .vd-dialog {
18
+ position: fixed;
19
+ left: 0;
20
+ right: 0;
21
+ top: 0;
22
+ bottom: 0;
23
+ // This element creates an invisible mask to position the dialog modal. Disable click events so they can fall through
24
+ // to the overlay.
25
+ pointer-events: none;
26
+
27
+ display: flex;
28
+ align-items: center;
29
+
30
+ @include vd-viewport-media-max (small) {
31
+ left: vd-grid-unit(1);
32
+ right: vd-grid-unit(1);
33
+ align-items: flex-start;
34
+ }
35
+
36
+ @include vd-viewport-media-max (xsmall) {
37
+ left: vd-grid-unit(0);
38
+ right: vd-grid-unit(0);
39
+ }
40
+
41
+ // ***** Dialog Banner ***** //
42
+ .vd-dialog-banner {
43
+ display: block;
44
+ margin: calc(var(--vd-dialog-spacing) * -1);
45
+ margin-bottom: var(--vd-dialog-spacing);
46
+ border-top-left-radius: $vd-border-radius;
47
+ border-top-right-radius: $vd-border-radius;
48
+
49
+ .vd-banner-wrapper {
50
+ justify-content: flex-start;
51
+ padding: $vd-section-padding-v-med var(--vd-dialog-spacing);
52
+ }
53
+
54
+ @include vd-viewport-media-max (xsmall) {
55
+ border-top-left-radius: 0;
56
+ border-top-right-radius: 0;
57
+ flex: 0 1 auto;
58
+ }
59
+ }
60
+ }
61
+
62
+ // ***** Dialog Container ***** //
63
+
64
+ // Container Defaults
65
+ .vd-dialog-container {
66
+ position: relative;
67
+ box-sizing: border-box;
68
+ margin: 0 auto;
69
+ padding: var(--vd-dialog-spacing);
70
+
71
+ background: vd-colour(box);
72
+ border-radius: $vd-border-radius;
73
+ display: flex;
74
+ flex-direction: column;
75
+
76
+ min-height: $vd-dialog-container-min-height;
77
+ max-height: calc(95vh - #{$vd-dialog-container-top-offset});
78
+
79
+ width: calc(90% - #{$vd-dialog-close-width});
80
+ // Enables default click events for the container child elements
81
+ pointer-events: auto;
82
+
83
+ &:focus {
84
+ outline: none;
85
+ }
86
+
87
+ @include vd-viewport-media-max (small) {
88
+ max-width: none;
89
+ width: 100%;
90
+ margin-top: $vd-dialog-container-top-offset;
91
+ }
92
+
93
+ @include vd-viewport-media-max (xsmall) {
94
+ max-height: none;
95
+ height: calc(100% - #{$vd-dialog-container-top-offset});
96
+
97
+ border-radius: 0;
98
+
99
+ margin-left: 0;
100
+ margin-right: 0;
101
+ }
102
+ }
103
+
104
+ // Dialog Container Size Modifiers
105
+ @each $_vd-dialog-container-size in $vd-dialog-container-sizes {
106
+ .vd-dialog-container--size-#{nth($_vd-dialog-container-size, 1)} {
107
+ max-width: nth($_vd-dialog-container-size, 2);
108
+ }
109
+ }
110
+
111
+ // ***** Dialog Header ***** //
112
+
113
+ .vd-dialog-header {
114
+ display: flex;
115
+ flex-direction: column;
116
+ flex-shrink: 0;
117
+
118
+ margin-bottom: var(--vd-dialog-spacing);
119
+ }
120
+
121
+ .vd-dialog-header--center {
122
+ text-align: center;
123
+
124
+ @include vd-viewport-media-max (xsmall) {
125
+ text-align: left;
126
+ }
127
+ }
128
+
129
+ .vd-dialog-header-sub {
130
+ font-size: vd-text-size(sub-heading);
131
+ padding-left: $vd-dialog-header-sub-padding;
132
+
133
+ @include vd-viewport-media-max (xsmall) {
134
+ display: block;
135
+ padding-left: 0;
136
+ padding-top: $vd-dialog-header-sub-padding;
137
+ }
138
+ }
139
+
140
+ .vd-dialog-header-meta {
141
+ font-size: vd-text-size(supplementary);
142
+ margin-top: $vd-dialog-header-margin;
143
+ font-weight: normal;
144
+ }
145
+
146
+ .vd-dialog-header-divider {
147
+ width: $vd-dialog-header-divider-width;
148
+ margin: ($vd-dialog-header-margin * 2) auto 0;
149
+ border: none;
150
+ border-top: 1px solid vd-colour(keyline);
151
+ }
152
+
153
+ // ***** Dialog Content ***** //
154
+
155
+ .vd-dialog-content {
156
+ overflow-y: auto;
157
+ overflow-x: hidden;
158
+
159
+ // Push out content so overflow scrollbars are flush against edge but still maintains padding
160
+ margin: 0 calc(var(--vd-dialog-spacing) * -1);
161
+ padding: 0 var(--vd-dialog-spacing);
162
+
163
+ &.vd-scrollable-container {
164
+ // Fix Safari 10
165
+ flex-basis: auto;
166
+
167
+ .vd-scrollable {
168
+ margin: 0 calc(var(--vd-dialog-spacing) * -1);
169
+ padding: 0 var(--vd-dialog-spacing);
170
+ }
171
+ }
172
+
173
+ @include vd-viewport-media-max (xsmall) {
174
+ -webkit-overflow-scrolling: touch;
175
+ }
176
+ }
177
+
178
+ // ***** Dialog Actions (footer) ***** //
179
+
180
+ .vd-dialog-actions {
181
+ text-align: right;
182
+ flex-shrink: 0;
183
+
184
+ .vd-dialog-content + & {
185
+ margin-top: var(--vd-dialog-spacing);
186
+ }
187
+
188
+ @include vd-viewport-media-max (xsmall) {
189
+ text-align: center;
190
+ }
191
+ }
192
+
193
+ // Fallback to base padding if browser doesn't support CSS variables
194
+ @supports ( not (--a: 0)) {
195
+ .vd-dialog .vd-dialog-banner {
196
+ margin: -(#{$vd-section-padding-h-med});
197
+ margin-bottom: $vd-section-padding-h-med;
198
+
199
+ .vd-banner-wrapper {
200
+ padding: $vd-section-padding-v-med $vd-section-padding-h-med;
201
+ }
202
+ }
203
+
204
+ .vd-dialog-container {
205
+ padding: $vd-section-padding-h-med;
206
+ }
207
+
208
+ .vd-dialog-header {
209
+ margin-bottom: $vd-section-padding-h-med;
210
+ }
211
+
212
+ .vd-dialog-content {
213
+ margin: 0 -(#{$vd-section-padding-h-med});
214
+ padding: 0 $vd-section-padding-h-med;
215
+
216
+ + .vd-dialog-actions {
217
+ margin-top: $vd-section-padding-h-med;
218
+ }
219
+ }
220
+ }
@@ -0,0 +1,8 @@
1
+ // Dialog Close Button
2
+ $vd-dialog-close-width: 50px;
3
+ $vd-dialog-close-border-radius: 50%;
4
+ $vd-dialog-close-font-size: 20px;
5
+ $vd-dialog-close-focus-border-colour: vd-colour(go);
6
+ $vd-dialog-close-text-font-size: 12px;
7
+ $vd-dialog-close-text-padding: 5px;
8
+ $vd-dialog-close-button-anchor-padding: 10px;
@@ -0,0 +1,117 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+
3
+ // Dialog Close Button Defaults
4
+ .vd-dialog-close {
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ position: absolute;
9
+ top: 0;
10
+ right: -($vd-dialog-close-width + $vd-dialog-close-button-anchor-padding);
11
+ cursor: pointer;
12
+ font-size: $vd-dialog-close-font-size;
13
+ width: $vd-dialog-close-width;
14
+ height: $vd-dialog-close-width;
15
+
16
+ .vd-dialog-close-button {
17
+ width: 100%;
18
+ height: 100%;
19
+ box-sizing: border-box;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ background: vd-colour(box);
24
+ border-radius: $vd-dialog-close-border-radius;
25
+ color: vd-colour(supplementary--text);
26
+ padding: $vd-dialog-close-button-anchor-padding;
27
+ text-decoration: none;
28
+ border: 0;
29
+ font-size: inherit;
30
+ appearance: none;
31
+ cursor: pointer;
32
+ }
33
+
34
+ .vd-dialog-close-icon {
35
+ opacity: 0.5;
36
+ }
37
+
38
+ &:hover {
39
+ .vd-dialog-close-icon {
40
+ opacity: 1;
41
+ }
42
+ }
43
+
44
+ &:focus {
45
+ outline: 0;
46
+ box-shadow: 0 0 3px 1px $vd-dialog-close-focus-border-colour;
47
+ }
48
+
49
+ .vd-modal--size-full-screen & {
50
+ top: vd-spacer(4);
51
+ right: vd-spacer(4);
52
+
53
+ .vd-dialog-close-button {
54
+ background-color: vd-colour(supplementary);
55
+ color: vd-colour(box);
56
+ }
57
+
58
+ .vd-dialog-close-icon {
59
+ opacity: 1;
60
+ }
61
+ }
62
+
63
+ @include vd-viewport-media-max ($vd-breakpoint-small) {
64
+ top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding / 2));
65
+ right: $vd-dialog-close-button-anchor-padding / 2;
66
+ }
67
+ }
68
+
69
+ // Dialog Close Button 'Drawer' Modifier
70
+ .vd-dialog-close--drawer {
71
+ top: 10px;
72
+ left: -$vd-dialog-close-width - 10px;
73
+
74
+ @include vd-viewport-media-max ($vd-breakpoint-small) {
75
+ top: 0;
76
+ right: 0;
77
+ left: inherit;
78
+ }
79
+ }
80
+
81
+ .vd-dialog-close-label {
82
+ position: absolute;
83
+ top: $vd-dialog-close-width;
84
+ padding: $vd-dialog-close-text-padding 0;
85
+ margin: 0;
86
+ width: 100%;
87
+ left: 0;
88
+ text-align: center;
89
+ color: $vd-colour-white;
90
+ font-size: $vd-dialog-close-text-font-size;
91
+
92
+ .vd-modal--size-full-screen & {
93
+ color: vd-colour(supplementary);
94
+ font-weight: bold;
95
+ }
96
+
97
+ @include vd-viewport-media-max(small) {
98
+ display: none;
99
+ }
100
+ }
101
+
102
+ // Dialog Close Button 'Inverse' Modifier
103
+ .vd-dialog-close--inverse {
104
+ .vd-dialog-close-button {
105
+ background: vd-colour(supplementary);
106
+ color: vd-colour(text-action);
107
+ }
108
+
109
+ .vd-dialog-close-icon {
110
+ opacity: 1;
111
+ }
112
+
113
+ .vd-dialog-close-label {
114
+ color: vd-colour(text);
115
+ opacity: 0.5;
116
+ }
117
+ }
@@ -0,0 +1 @@
1
+ $vd-dialog-drawer-width: 350px;
@@ -0,0 +1,22 @@
1
+ .vd-dialog-drawer-container {
2
+ position: absolute;
3
+ right: 0;
4
+ top: 0;
5
+ bottom:0;
6
+ box-sizing: border-box;
7
+ width: $vd-dialog-drawer-width;
8
+ background: vd-colour(box);
9
+ display: flex;
10
+ flex-direction: column;
11
+ // Enables default click events for the container child elements
12
+ pointer-events: auto;
13
+
14
+ &:focus {
15
+ outline: 1px solid $vd-dialog-container-focus-colour;
16
+ }
17
+
18
+ @include vd-viewport-media-max(xsmall) {
19
+ width: 100%;
20
+ min-width: inherit;
21
+ }
22
+ }