@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,291 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+ @import './TableList-ns';
3
+
4
+ // LIST TABLES
5
+ // -----------------------------------------------------------------
6
+
7
+ // TABLE LIST INFO BAR - APPEARS ABOVE THE TABLE
8
+ // -----------------------------------------------------------------
9
+ .vd-table-list-info-bar {
10
+ box-sizing: border-box;
11
+ display: flex;
12
+ padding-top: 6px;
13
+ padding-bottom: 6px;
14
+ border-bottom: 1px solid vd-colour(keyline);
15
+ justify-content: space-between;
16
+ align-items: center;
17
+ min-height: 60px;
18
+ }
19
+
20
+ .vd-table-list-info-bar-actions {
21
+ flex-shrink: 0;
22
+ }
23
+
24
+ // LIST TABLE
25
+ // -----------------------------------------------------------------
26
+ .vd-table-list {
27
+ width: 100%;
28
+ border: 0;
29
+ border-collapse: collapse;
30
+
31
+ // @todo remove once we have box sizing set to border box by default
32
+ * {
33
+ box-sizing: border-box;
34
+ }
35
+ }
36
+
37
+ // LIST TABLE - FIXED LAYOUT
38
+ // -----------------------------------------------------------------
39
+ .vd-table-list--fixed {
40
+ table-layout: fixed;
41
+ }
42
+
43
+ // TABLE CELLS - DEFAULT
44
+ // -----------------------------------------------------------------
45
+ .vd-table-list-cell {
46
+ position: relative;
47
+ vertical-align: baseline;
48
+ text-align: left;
49
+ padding: 22px vd-grid-unit(2) vd-grid-unit(4);
50
+
51
+ &:first-child:not(.vd-table-list-cell--toggle):not(.vd-table-list-cell--info) {
52
+ padding-left: 0;
53
+ }
54
+ }
55
+
56
+ // TABLE CELLS - HEADER
57
+ // -----------------------------------------------------------------
58
+ .vd-table-list-head-cell {
59
+ position: relative;
60
+ height: 56px;
61
+ padding: vd-grid-unit(4) vd-grid-unit(2);
62
+ text-align: left;
63
+ vertical-align: middle;
64
+ white-space: nowrap;
65
+
66
+ &:first-child:not(.vd-table-list-cell--toggle):not(.vd-table-list-cell--info) {
67
+ padding-left: 0;
68
+ }
69
+
70
+ .vd-table-list-row--header-compact & {
71
+ height: auto;
72
+ padding-top: 0;
73
+ }
74
+ }
75
+
76
+ // TABLE CELLS - EXPANDED ROW TOGGLE (A FIRST CHILD CELL)
77
+ // -----------------------------------------------------------------
78
+ .vd-table-list-cell--toggle {
79
+ width: 24px;
80
+ padding-right: 0;
81
+ padding-left: 6px;
82
+
83
+ // Adjacent cell always has the same spacing
84
+ + .vd-table-list-cell, + .vd-table-list-head-cell {
85
+ padding-left: 0;
86
+ }
87
+
88
+ .vd-table-list-toggle-icon {
89
+ position: absolute;
90
+ top: 22px;
91
+ }
92
+ }
93
+
94
+ .vd-table-list-toggle-icon {
95
+ color: vd-colour(supplementary);
96
+ transition: transform 50ms ease-in-out 0s;
97
+ width: 16px;
98
+ height: 16px;
99
+ display: flex;
100
+ justify-content: center;
101
+ flex-shrink: 0;
102
+ }
103
+
104
+ .vd-table-list-toggle-icon--toggled {
105
+ transform: rotate(90deg);
106
+ }
107
+
108
+ // TABLE CELLS - BULK SELECT (A FIRST CHILD CELL)
109
+ // -----------------------------------------------------------------
110
+ .vd-table-list-cell--bulk-select {
111
+ width: 32px;
112
+
113
+ &:not(.vd-table-list-head-cell) > .vd-checkbox {
114
+ position: absolute;
115
+ top: 19px;
116
+ }
117
+ }
118
+
119
+ // TABLE CELLS - PRIMARY ACTION (A LAST CHILD CELL)
120
+ // -----------------------------------------------------------------
121
+ .vd-table-list-cell--action {
122
+ width: 50px;
123
+ padding: 6px vd-grid-unit(1) 6px vd-grid-unit(2);
124
+ }
125
+
126
+ // TABLE CELLS - INFO ROW
127
+ // -----------------------------------------------------------------
128
+ .vd-table-list-cell--info {
129
+ padding: vd-grid-unit(5) vd-grid-unit(6);
130
+ }
131
+
132
+ // TABLE CELLS - BULK ACTION (TRIGGERS POPOVER)
133
+ // -----------------------------------------------------------------
134
+ .vd-table-list-cell--bulk-action {
135
+ padding-top: 6px;
136
+ padding-bottom: 6px;
137
+ }
138
+
139
+ // TABLE CELLS - SORTABLE
140
+ // -----------------------------------------------------------------
141
+ .vd-table-list-cell--sortable {
142
+ cursor: pointer;
143
+ text-decoration: underline;
144
+ }
145
+
146
+ // TABLE CELLS - COMPACT (FOR ACCOMMODATING BADGES)
147
+ // -----------------------------------------------------------------
148
+ .vd-table-list-cell--compact {
149
+ padding: 14px vd-grid-unit(3) vd-grid-unit(3);
150
+ vertical-align: top;
151
+ }
152
+
153
+ // TABLE CELLS - INPUT
154
+ // -----------------------------------------------------------------
155
+ .vd-table-list-cell--input {
156
+ padding: vd-grid-unit(2);
157
+ vertical-align: top;
158
+ }
159
+
160
+ // TABLE ROWS
161
+ // -----------------------------------------------------------------
162
+
163
+ // TABLE ROWS - DEFAULT
164
+ // -----------------------------------------------------------------
165
+ .vd-table-list-row {
166
+ border-bottom: vd-border(framing);
167
+ }
168
+
169
+ // TABLE ROWS - EXPANDABLE ROW
170
+ // -----------------------------------------------------------------
171
+ .vd-table-list-row--expandable {
172
+ &:hover {
173
+ cursor: pointer;
174
+ background-color: vd-colour(go-highlight);
175
+ }
176
+ }
177
+
178
+ // TABLE ROWS - EXPANDED ROW
179
+ // -----------------------------------------------------------------
180
+ .vd-table-list-row--expanded {
181
+ background: vd-colour(box);
182
+ box-shadow: $vd-table-list-expanded-shadow;
183
+
184
+ .vd-table-list-cell:first-child {
185
+ @include vd-table-row-expanded-indicator();
186
+ }
187
+
188
+ // @todo Perhaps not required
189
+ + .vd-table-list-row--expanded-content {
190
+ display: table-row;
191
+ }
192
+ }
193
+
194
+ // TABLE ROWS - ACTIONS ROW (FOR THINGS SUCH AS HIGHLIGHTING ITEMS SELECTED)
195
+ // -----------------------------------------------------------------
196
+ .vd-table-list-row--actions {
197
+ background-color: vd-colour(framing);
198
+ border-bottom: 1px solid vd-colour(keyline);
199
+ }
200
+
201
+ // TABLE ROWS - EXPANDED ROW CONTENT
202
+ // -----------------------------------------------------------------
203
+ .vd-table-list-row--expanded-content {
204
+ display: none; // @todo Perhaps not required
205
+
206
+ > .vd-table-list-cell {
207
+ background: vd-colour(box);
208
+ padding: 0;
209
+
210
+ &:first-child {
211
+ @include vd-table-row-expanded-indicator();
212
+
213
+ &::after {
214
+ content: '';
215
+ pointer-events: none;
216
+ box-shadow: $vd-table-list-expanded-shadow;
217
+ position: absolute;
218
+ left: 0;
219
+ top: 0;
220
+ right: 0;
221
+ bottom: 0;
222
+ z-index: 1;
223
+ }
224
+ }
225
+ }
226
+ }
227
+
228
+ // TABLE ROWS - HEADER ROW
229
+ // -----------------------------------------------------------------
230
+ .vd-table-list-row--header {
231
+ border-bottom-color: vd-colour(keyline);
232
+ }
233
+
234
+ // TABLE ROWS - EXPANDED ROW INNARDS
235
+ // -----------------------------------------------------------------
236
+ .vd-table-list-expanded-container {
237
+ display: flex;
238
+ flex-wrap: wrap;
239
+ }
240
+
241
+ // TABLE ROWS - EXPANDED ROW ADDITIONAL CONTENT
242
+ // -----------------------------------------------------------------
243
+ .vd-table-list-expanded-content {
244
+ flex: 1;
245
+ padding: vd-grid-unit(6) vd-grid-unit(3) vd-grid-unit(6) vd-grid-unit(6);
246
+
247
+ @include vd-viewport-media-max(medium) {
248
+ padding: vd-grid-unit(6) vd-grid-unit(6) vd-grid-unit(3) vd-grid-unit(6);
249
+ }
250
+ }
251
+
252
+ // TABLE ROWS - EXPANDED ROW ACTIONS
253
+ // -----------------------------------------------------------------
254
+ .vd-table-list-expanded-actions {
255
+ flex-basis: 232px;
256
+ display: flex;
257
+ flex-shrink: 0;
258
+ flex-direction: column;
259
+ padding: vd-grid-unit(6) vd-grid-unit(6) vd-grid-unit(6) vd-grid-unit(3);
260
+
261
+ @include vd-viewport-media-max(medium) {
262
+ flex-basis: 100%;
263
+ padding: vd-grid-unit(3) vd-grid-unit(6) vd-grid-unit(3) vd-grid-unit(6);
264
+ }
265
+ }
266
+
267
+ .vd-table-list-expanded-actions-btn {
268
+ display: flex;
269
+ text-align: left;
270
+ align-items: baseline;
271
+ margin-right: auto;
272
+ margin-bottom: vd-grid-unit(3);
273
+ }
274
+
275
+ .vd-table-list-expanded-actions-btn--primary {
276
+ margin-bottom: vd-grid-unit(11);
277
+ }
278
+
279
+ // TABLE ROWS - HELPERS
280
+ // -----------------------------------------------------------------
281
+ // Todo: can be removed once the Customers table is using the Table component
282
+ .vd-table-list-vcenter {
283
+ max-height: $vd-table-list-max-height-for-vcentering;
284
+ position: absolute;
285
+ top: vd-grid-unit(4);
286
+ bottom: vd-grid-unit(4);
287
+ display: flex;
288
+ align-items: center;
289
+ justify-content: center;
290
+ flex-shrink: 0;
291
+ }
@@ -0,0 +1,15 @@
1
+ @mixin vd-table-row-expanded-indicator() {
2
+ &::before {
3
+ content: '';
4
+ top: -1px;
5
+ left: 0;
6
+ width: $vd-table-expanded-box-shadow-width;
7
+ background-color: $vd-colour-table-expanded-border-left;
8
+ bottom: 0;
9
+ z-index: 1;
10
+ position: absolute;
11
+ }
12
+ }
13
+
14
+ $vd-table-list-expanded-shadow: 0 10px 12px -2px vd-colour(shadow);
15
+ $vd-table-list-max-height-for-vcentering: 50px;
@@ -0,0 +1,53 @@
1
+ @import './UpsellPrimary-ns';
2
+
3
+ // If there is only a primary upsell and no secondary, then make the upsell primary fill the
4
+ // page with a white background.
5
+ .vd-upsell-primary:only-child {
6
+ position: absolute;
7
+ top: 0;
8
+ left: 0;
9
+ width: 100%;
10
+ height: 100%;
11
+ background: vd-colour(box);
12
+ }
13
+
14
+ .vd-upsell-primary-background {
15
+ position: absolute;
16
+ width: 100%;
17
+ height: 100%;
18
+ color: vd-colour(box);
19
+ background: vd-colour(box)
20
+ linear-gradient(
21
+ to left,
22
+ vd-colour(box) 50%,
23
+ $vd-upsell-background-colour 50%
24
+ )
25
+ no-repeat;
26
+ }
27
+
28
+ .vd-upsell-primary-background-inner {
29
+ display: block;
30
+ height: 100%;
31
+ margin: 0 auto;
32
+ position: relative;
33
+ max-width: $vd-upsell-background-inner-max-width;
34
+ background: $vd-upsell-background-colour;
35
+ }
36
+
37
+ .vd-upsell-primary-upper {
38
+ position: relative;
39
+ }
40
+
41
+ .vd-upsell-primary-background svg {
42
+ position: absolute;
43
+ height: 100%;
44
+ right: 0;
45
+ }
46
+
47
+ .vd-upsell-primary-content {
48
+ padding: $vd-upsell-content-padding;
49
+ }
50
+
51
+ .vd-upsell-primary-image {
52
+ @include vd-upsell-image-alignment();
53
+ }
@@ -0,0 +1,12 @@
1
+ $vd-upsell-content-padding: vd-grid-unit(11) 0;
2
+
3
+ // @TODO this is yet to be added to our official colours, for now this is being hardcoded until a name
4
+ // and dark mode variant are decided on.
5
+ $vd-upsell-background-colour: #e9f6e8; // stylelint-disable-line vend/use-colour-function
6
+ $vd-upsell-background-inner-max-width: 1100px;
7
+
8
+ @mixin vd-upsell-image-alignment() {
9
+ display: flex;
10
+ align-items: flex-start;
11
+ justify-content: center;
12
+ }
@@ -0,0 +1,30 @@
1
+ @import '../UpsellPrimary/UpsellPrimary-ns';
2
+
3
+ .vd-upsell-secondary-content {
4
+ padding: $vd-upsell-content-padding;
5
+ }
6
+
7
+ .vd-upsell-secondary-features {
8
+ padding: 0;
9
+ margin: 0;
10
+ width: 300px;
11
+ list-style: none;
12
+
13
+ // Horizontally aligns the ✓ icon with the text
14
+ li {
15
+ display: flex;
16
+ }
17
+
18
+ li:not(:first-child) {
19
+ margin-top: vd-grid-unit(4);
20
+ }
21
+ }
22
+
23
+ // Vertically aligns the ✓ icon with the text
24
+ .vd-upsell-secondary-feature-icon {
25
+ margin-top: 2px;
26
+ }
27
+
28
+ .vd-upsell-secondary-image {
29
+ @include vd-upsell-image-alignment();
30
+ }
@@ -0,0 +1,48 @@
1
+ @import '../../../vend.ui/styles/global/non-styles';
2
+
3
+ .vd-video-thumbnail-container {
4
+ position: relative;
5
+ height: 100%;
6
+ .vd-video-play-button-container {
7
+ position: absolute;
8
+ z-index: 3;
9
+ left: 0;
10
+ right: 0;
11
+ top: 0;
12
+ bottom: 0;
13
+ margin: auto;
14
+ .vd-video-play-button {
15
+ background-color: vd-colour(background);
16
+ width: 80px;
17
+ height: 80px;
18
+ border-radius: 50%;
19
+ i {
20
+ transform: translateX(3px);
21
+ }
22
+ }
23
+ .vd-video-play-button:hover {
24
+ background-color: vd-colour(supplementary);
25
+ }
26
+ .vd-video-play-button:active {
27
+ background-color: vd-colour(supplementary);
28
+ }
29
+ }
30
+ .vd-video-thumbnail-image {
31
+ position: absolute;
32
+ top: 0;
33
+ left: 0;
34
+ height: 100%;
35
+ width: 100%;
36
+ object-fit: cover;
37
+ }
38
+ }
39
+
40
+ .vd-video-wrapper {
41
+ width: 100%;
42
+ iframe {
43
+ width: 100%;
44
+ }
45
+ }
46
+ .vd-flex-grow-1 {
47
+ flex-grow: 1;
48
+ }
@@ -0,0 +1,3 @@
1
+ .vd-util-pos-relative {
2
+ position: relative;
3
+ }
@@ -0,0 +1,9 @@
1
+ .vd-util-text-overflow-break-word {
2
+ word-break: break-word; // Deprecated.
3
+ overflow-wrap: break-word;
4
+ }
5
+
6
+ .vd-util-text-overflow-normal {
7
+ word-break: normal; // Deprecated.
8
+ overflow-wrap: normal;
9
+ }
@@ -0,0 +1,39 @@
1
+ // @todo Implement https://github.com/vend/rfcs/blob/ap-use-itcss/2020-09-07%20Trading%20-%20Use%20ITCSS.md
2
+
3
+ @import '../fonts-ui/fonts-ns';
4
+
5
+ // Necessary to access vend.ui variables/mixins
6
+ @import '../vend.ui/styles/global/non-styles';
7
+
8
+ // Vend.ui
9
+ @import '../vend.ui/styles/vend-ui';
10
+
11
+ //
12
+ // Deprecated VEND.UI Styles still in use within Monocle
13
+ //
14
+ // - `vd-flex--row` is used in `Accounting`, `Integrations`, `Products` and `Sales`
15
+ // - `vd-flex--fieldset-row` is used in `Integrations`
16
+ @import '../vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex';
17
+
18
+ // ITCSS Layer: Components
19
+ @import './components//BarChart/BarChart.scss';
20
+ @import './components/CurrencyInput/CurrencyInput';
21
+ @import './components/DatePicker/DatePicker';
22
+ @import './components/FileUpload/FileUpload.scss';
23
+ @import './components/ProgressBar/ProgressBar';
24
+ @import './components/InboundItem/InboundItem';
25
+ @import './components/LineChart/LineChart';
26
+ @import './components/Modal/Modal';
27
+ @import './components/InboundIndicator/InboundIndicator';
28
+ @import './components/PageHeader/PageHeader';
29
+ @import './components/TableList/TableList';
30
+ @import './components/SearchFilters/SearchFilters';
31
+ @import './components/UpsellPrimary/UpsellPrimary';
32
+ @import './components/UpsellSecondary/UpsellSecondary';
33
+ @import './components/CodeInput/CodeInput';
34
+ @import './components/PromotionModal/PromotionModal';
35
+ @import './components/Carousel/Carousel';
36
+ @import './components/VendVideo/VendVideo';
37
+ // ITCSS Layer: Utilities
38
+ @import './utilities/position.scss';
39
+ @import './utilities/text.scss';
@@ -0,0 +1,2 @@
1
+ $vd-settings-explanation-width: 240px;
2
+ $vd-settings-explanation-margin-r: 40px;
@@ -0,0 +1,47 @@
1
+ @import "../../../../styles/global/_non-styles";
2
+ @import "./vd-flex-ns";
3
+
4
+ .vd-flex--settings-explanation {
5
+ min-width: $vd-settings-explanation-width;
6
+ padding-right: 40px;
7
+ }
8
+
9
+ @include vd-viewport-media-max(small) {
10
+ .vd-p {
11
+ .vd-flex--settings-explanation & {
12
+ // Removing the margin bottom of the explanation paragraph, as the field will be covering the vertical spacing.
13
+ margin-bottom: 0;
14
+ }
15
+ }
16
+ }
17
+
18
+ .vd-flex--settings-expanded-content {
19
+ margin-left: 85px !important;
20
+ }
21
+
22
+ .vd-flex--container { flex: 0 0 auto; }
23
+ .vd-flex--fieldset-row { flex-direction: row; }
24
+
25
+ @include vd-viewport-media-max(small) {
26
+ .vd-flex--responsive-column {
27
+ flex-basis: auto;
28
+ margin: 0 0 $vd-section-padding-v 0;
29
+
30
+ &:last-child { margin-bottom: 0; }
31
+ }
32
+
33
+ .vd-flex--settings-explanation {
34
+ flex: initial;
35
+ display: block;
36
+ padding-right: 0;
37
+ }
38
+
39
+ .vd-flex--settings,
40
+ .vd-flex--row { flex-direction: column; }
41
+ }
42
+
43
+ @include vd-viewport-media-max(xsmall) {
44
+ .vd-flex--fieldset-row {
45
+ flex-direction: column;
46
+ }
47
+ }
@@ -0,0 +1,3 @@
1
+ .vd-align-left { text-align: left !important; }
2
+ .vd-align-center { text-align: center !important; }
3
+ .vd-align-right { text-align: right !important; }
@@ -0,0 +1,3 @@
1
+ $vd-action-bar-background-colour: vd-colour(framing);
2
+ $vd-action-bar--inline-padding: vd-grid-unit(2) vd-grid-unit(6);
3
+ $vd-action-bar--min-height: 45px;
@@ -0,0 +1,33 @@
1
+ .vd-action-bar {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: space-between;
5
+ min-height: $vd-action-bar--min-height;
6
+ background-color: $vd-action-bar-background-colour;
7
+
8
+ @include vd-viewport-media-max($vd-breakpoint-small) {
9
+ flex-wrap: wrap;
10
+ }
11
+ }
12
+
13
+ .vd-action-bar-message {
14
+ flex-basis: 100%;
15
+ }
16
+
17
+ .vd-action-bar-actions {
18
+ flex-shrink: 0;
19
+
20
+ .vd-action-bar-message + & {
21
+ padding-left: vd-grid-unit(3);
22
+
23
+ @include vd-viewport-media-max($vd-breakpoint-small) {
24
+ flex-shrink: 1;
25
+ padding-top: vd-grid-unit(3);
26
+ padding-left: 0;
27
+ }
28
+ }
29
+ }
30
+
31
+ .vd-action-bar--inline {
32
+ padding: $vd-action-bar--inline-padding;
33
+ }
@@ -0,0 +1,36 @@
1
+ .vd-autocomplete-input-container {
2
+ position: relative;
3
+ display: flex;
4
+
5
+ @include vd-input-error-selectors() {
6
+ .vd-autocomplete-input {
7
+ @include vd-input-error-styles();
8
+ }
9
+ }
10
+ }
11
+
12
+ .vd-autocomplete-input-typeahead {
13
+ @include vd-input-box-model($vd-input-width: auto);
14
+ @include vd-input-text();
15
+
16
+ position: absolute;
17
+ top: 1px;
18
+ left: 1px;
19
+ opacity: 1;
20
+ color: vd-colour(supplementary--text);
21
+ pointer-events: none;
22
+ user-select: none;
23
+ text-align: left;
24
+
25
+ // Prevent long names from wrapping onto another line
26
+ overflow: hidden;
27
+ white-space: nowrap;
28
+
29
+ .vd-input--icon-left + & {
30
+ padding-left: $vd-input-icon-padding;
31
+ }
32
+ }
33
+
34
+ .vd-autocomplete-input-typeahead-match {
35
+ visibility: hidden;
36
+ }