@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,141 @@
1
+ @import "text-definitions";
2
+
3
+ @mixin font-smoothing {
4
+ font-synthesis: none;
5
+ text-rendering: optimizeLegibility;
6
+ -webkit-font-smoothing: antialiased;
7
+ -moz-osx-font-smoothing: grayscale;
8
+ }
9
+
10
+ // Heading Reset - Ensure correct styling continue for H<1..6>'s
11
+ @mixin vd-heading-reset ($color: vd-colour(text)) {
12
+ word-break: break-word;
13
+ font-weight: $vd-font-weight--bold;
14
+ margin: 0;
15
+ color: $color;
16
+ }
17
+
18
+ // Line Heights - Determine a proportionate line height calculated from a design based 'leading' value and the
19
+ // required font size.
20
+ @mixin vd-line-height ($leading, $font-size) {
21
+ line-height: ($leading / $font-size)
22
+ }
23
+
24
+ // Intro
25
+ @mixin vd-text-intro () {
26
+ @include vd-text(intro);
27
+ }
28
+
29
+ /// Clip a single line of text with an ellipsis.
30
+ ///
31
+ /// @mixin vb-text-ellipsis
32
+ ///
33
+ @mixin vd-text-ellipsis {
34
+ overflow: hidden;
35
+ text-overflow: ellipsis;
36
+ white-space: nowrap;
37
+ word-break: break-word;
38
+ }
39
+
40
+ /// Line clamp to the provided number of lines.
41
+ ///
42
+ /// @mixin vd-text-clamp
43
+ ///
44
+ @mixin vd-text-clamp ($lines: 2) {
45
+ // Autoprefixer removes out-of-date vendor prefixes
46
+ // These old prefixes below are required for line clamping to work.
47
+ // Use autoprefixer control comments so these rules are ignored
48
+ /* autoprefixer: off */
49
+ display: -webkit-box;
50
+ -webkit-line-clamp: $lines;
51
+ -webkit-box-orient: vertical;
52
+ overflow: hidden;
53
+ text-overflow: ellipsis;
54
+ word-break: break-word;
55
+ /* autoprefixer: on */
56
+ }
57
+
58
+ /// Creates the css rules for the given text definition
59
+ ///
60
+ /// @mixin vd-text
61
+ ///
62
+ /// @param {String} $name - The required text; e.g. grand, heading, body
63
+ ///
64
+ @mixin vd-text ($name, $color: text) {
65
+ @if (map-has-key($_vd-text-definitions, $name)) {
66
+ $_vd-requested-type-styles: map-get($_vd-text-definitions, $name);
67
+ $_size: map-get($_vd-requested-type-styles, 'size');
68
+
69
+ @include font-smoothing;
70
+ // Resets to ensure <h#> and <p> elements will have the same margins and text colour
71
+ word-break: break-word;
72
+
73
+ margin: 0;
74
+
75
+ @each $property, $value in $_vd-requested-type-styles {
76
+ @if ($property == 'leading') {
77
+ @include vd-line-height($value, $_size);
78
+ }
79
+
80
+ @else if ($property == 'casing') {
81
+ text-transform: $value;
82
+ }
83
+
84
+ @else if ($property == 'tracking') {
85
+ letter-spacing: $value / 10 * 1em;
86
+ }
87
+
88
+ @else if ($property == 'size') {
89
+ font-size: $value * 1px;
90
+ }
91
+
92
+ @else {
93
+ #{$property}: $value;
94
+ }
95
+ }
96
+ } @else {
97
+ @warn "[text mixin] The specified text name (#{$name}) does not exist.";
98
+ }
99
+ }
100
+
101
+ /// Truncate a given element to its contents
102
+ ///
103
+ /// @mixin vd-truncate
104
+ ///
105
+ @mixin vd-truncate() {
106
+ overflow: hidden;
107
+ text-overflow: ellipsis;
108
+ white-space: nowrap;
109
+ }
110
+
111
+ /// Get the font size for a named text definition
112
+ ///
113
+ /// @function vd-text-size
114
+
115
+ /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
116
+ /// @return {Number} - The font size of the requested requested text definition.
117
+ ///
118
+ @function vd-text-size ($_vd-text-name) {
119
+ @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
120
+ @return map-deep-get($_vd-text-definitions, $_vd-text-name,size) * 1px;
121
+ } @else {
122
+ @error "[text-functions] The specified text definition (#{$_vd-text-name}) does not exist.";
123
+ @return null;
124
+ }
125
+ }
126
+
127
+ /// Get the font size for a named text definition
128
+ ///
129
+ /// @function vd-text-weight
130
+
131
+ /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
132
+ /// @return {Number} - The font weight of the requested text definition.
133
+ ///
134
+ @function vd-text-weight ($_vd-text-name) {
135
+ @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
136
+ @return map-deep-get($_vd-text-definitions, $_vd-text-name, font-weight);
137
+ } @else {
138
+ @error "[text-functions] The specified text definition (#{$_vd-text-name}) does not exist.";
139
+ @return null;
140
+ }
141
+ }
@@ -0,0 +1,3 @@
1
+ // Text Module Non-styles
2
+ @import "base";
3
+ @import "text-mixins";
@@ -0,0 +1,84 @@
1
+ /// Add px unit to the provided value.
2
+ ///
3
+ /// @function vd-px-unit
4
+ /// @param {Number} $_value - Number to add 'px'
5
+ /// @return {Number} - Number with px unit
6
+ @function vd-px-unit ($_value) {
7
+ @return $_value * 1px;
8
+ }
9
+
10
+ /// Remove the unit of a length.
11
+ ///
12
+ /// @param {Number} $number - Number to remove unit from
13
+ /// @return {Number} - Unitless number
14
+ @function strip-unit($number) {
15
+ @if type-of($number) == 'number' and not unitless($number) {
16
+ @return $number / ($number * 0 + 1);
17
+ }
18
+
19
+ @return $number;
20
+ }
21
+
22
+ /// toFixed() function for Sass. See http://www.sassmeister.com/gist/9832501.
23
+ ///
24
+ /// @function to-fixed
25
+ /// @param {Number} $float - Number to format
26
+ /// @param {Number} $digits [2] - Number of digits to leave
27
+ /// @return {Number}
28
+ @function to-fixed($float, $digits: 2) {
29
+ $sass-precision: 5;
30
+
31
+ $pow: pow(10, $digits);
32
+ @return round($float * $pow) / $pow;
33
+ }
34
+
35
+ /// Power function
36
+ ///
37
+ /// @function pow
38
+ /// @param {Number} $x
39
+ /// @param {Number} $n
40
+ /// @return {Number}
41
+ @function pow($x, $n) {
42
+ $ret: 1;
43
+
44
+ @if $n >= 0 {
45
+ @for $i from 1 through $n {
46
+ $ret: $ret * $x;
47
+ }
48
+ } @else {
49
+ @for $i from $n to 0 {
50
+ $ret: $ret / $x;
51
+ }
52
+ }
53
+
54
+ @return $ret;
55
+ }
56
+
57
+ /// Map deep get
58
+ ///
59
+ /// @function map-deep-get
60
+ /// @param {Map} $map - Map
61
+ /// @param {Arglist} $keys - Key chain
62
+ /// @return {*} - Desired value
63
+ @function map-deep-get($map, $keys...) {
64
+ @each $key in $keys {
65
+ $map: map-get($map, $key);
66
+ }
67
+ @return $map;
68
+ }
69
+
70
+ /// Get viewport width
71
+ ///
72
+ /// @function get-viewport-px-width
73
+ /// @param {String} $viewport-size - Viewport size key, SMALL, MEDIUM etc
74
+ /// @param {String} $viewport-range - Viewport range, either min or max
75
+ /// @return {String} - Width of viewport at requested viewport size and range
76
+ @function get-viewport-px-width($viewport-size, $viewport-range) {
77
+ $_viewportWidth: map-deep-get($vd-viewport, 'ranges', $viewport-size, 'range', $viewport-range);
78
+
79
+ @if ($_viewportWidth != null) {
80
+ @return vd-px-unit($_viewportWidth);
81
+ } @else {
82
+ @return null;
83
+ }
84
+ }
@@ -0,0 +1,37 @@
1
+ $vd-viewport: (
2
+ "identifier": (
3
+ "id": "vd-viewport-identifier",
4
+ "pseudoElement": "before",
5
+ "IEContentProp": "vd-content"
6
+ ),
7
+ "ranges": (
8
+ "xsmall": (
9
+ "range": (
10
+ "max": 480
11
+ )
12
+ ),
13
+ "small": (
14
+ "range": (
15
+ "min": 481,
16
+ "max": 768
17
+ )
18
+ ),
19
+ "medium": (
20
+ "range": (
21
+ "min": 769,
22
+ "max": 1000
23
+ )
24
+ ),
25
+ "large": (
26
+ "range": (
27
+ "min": 1001,
28
+ "max": 1200
29
+ )
30
+ ),
31
+ "xlarge": (
32
+ "range": (
33
+ "min": 1201
34
+ )
35
+ )
36
+ )
37
+ );
@@ -0,0 +1,37 @@
1
+ // Viewport identifier
2
+ //
3
+ // Use this element in conjuction with the vdWindowDelegateService to determine the
4
+ // current viewport. Element is added to the DOM by the service if not already present. See _viewport-data.scss for
5
+ // interpolated values.
6
+ ##{map-get($vd-viewport-identifier-map, 'id')} {
7
+ position: absolute;
8
+ z-index: -1;
9
+
10
+ top: 0;
11
+ left: 0;
12
+
13
+ width: 0;
14
+ height: 0;
15
+
16
+ visibility: hidden;
17
+ overflow: hidden;
18
+
19
+ &::#{map-get($vd-viewport-identifier-map, 'pseudoElement')} {
20
+ visibility: hidden;
21
+ }
22
+
23
+ // Iterate through the viewport ranges map and generate the pseudo element content
24
+ @each $_vd-viewport in map-keys($vd-viewport-ranges-map) {
25
+ $_vd-viewport-content: quote($_vd-viewport);
26
+
27
+ @include vd-viewport-media-only ($_vd-viewport) {
28
+ &::#{map-get($vd-viewport-identifier-map, 'pseudoElement')} {
29
+ content: $_vd-viewport-content;
30
+ }
31
+
32
+ // Proprietary property name. Support for window getComputedStyle pseudo-element is only >= IE11. For older IE's
33
+ // we can use element.getCurrentStyle('vd-content').
34
+ #{map-get($vd-viewport-identifier-map, 'IEContentProp')}: $_vd-viewport-content;
35
+ }
36
+ }
37
+ }
@@ -0,0 +1,157 @@
1
+ /// Range based content control; between a min and max width.
2
+ ///
3
+ /// @mixin vd-viewport-media-only
4
+ ///
5
+ /// @param {String|Map} $_viewport
6
+ /// The viewport range key (such as xsmall, large) or a map consisting of the custom min and max sizes.
7
+ /// The custom min or max sizes can also be passed a viewport range key.
8
+ ///
9
+ /// @example
10
+ /// @include vd-viewport-media-only(medium) {
11
+ /// background-color: #C0FFEE;
12
+ /// }
13
+ ///
14
+ /// @include vd-viewport-media-only((min: 100px, max: 200px)) {
15
+ /// background-color: #BAFF1E;
16
+ /// }
17
+ ///
18
+ /// @include vd-viewport-media-only((min: small, max: medium)) {
19
+ /// background-color: #0FF1CE;
20
+ /// }
21
+ ///
22
+ /// @include vd-viewport-media-only((min: 250px, max: large)) {
23
+ /// background-color: #FACADE;
24
+ /// }
25
+ ///
26
+ @mixin vd-viewport-media-only ($_viewport) {
27
+ $_viewport-min-width: null;
28
+ $_viewport-max-width: null;
29
+
30
+ @if (type-of($_viewport) == 'string') {
31
+ // Known viewport range provided, e.g. xsmall
32
+ $_viewport-min-width: get-viewport-px-width($_viewport, "min");
33
+ $_viewport-max-width: get-viewport-px-width($_viewport, "max");
34
+ } @else if (type-of($_viewport) == 'map') {
35
+ // Custom min and max range values provided
36
+ @if (map-has-key($_viewport, 'min') and map-has-key($_viewport, 'max')) {
37
+ $_custom-min: map-get($_viewport, 'min');
38
+ $_custom-max: map-get($_viewport, 'max');
39
+
40
+ // Determine if we have a valid number with a css measurement unit
41
+ @if (type-of($_custom-min) == 'number' and unitless($_custom-min)) {
42
+ @error '[vd-viewport-media-only] Unitless min range value provided.';
43
+ }
44
+
45
+ @if (type-of($_custom-max) == 'number' and unitless($_custom-max)) {
46
+ @error '[vd-viewport-media-only] Unitless max range value provided.';
47
+ }
48
+
49
+ // Determine if a named viewport has been provided for the min and max widths
50
+ @if (type-of($_custom-min) == 'string') {
51
+ $_custom-min: get-viewport-px-width($_custom-min, "min");
52
+ }
53
+
54
+ @if (type-of($_custom-max) == 'string') {
55
+ $_custom-max: get-viewport-px-width($_custom-max, "max");
56
+ }
57
+
58
+ $_viewport-min-width: $_custom-min;
59
+ $_viewport-max-width: $_custom-max;
60
+ } @else {
61
+ @error '[vd-viewport-media-only] Missing min or max range value.';
62
+ }
63
+ }
64
+
65
+ $_viewport-media-range: "(min-width: #{$_viewport-min-width}) and (max-width: #{$_viewport-max-width})";
66
+
67
+ @if ($_viewport-min-width == null) {
68
+ $_viewport-media-range: "(max-width: #{$_viewport-max-width})";
69
+ }
70
+
71
+ @if ($_viewport-max-width == null) {
72
+ $_viewport-media-range: "(min-width: #{$_viewport-min-width})";
73
+ }
74
+
75
+ @media #{$vd-viewport-screen} and #{$_viewport-media-range} {
76
+ @content;
77
+ }
78
+ }
79
+
80
+ /// Ascending content control.
81
+ ///
82
+ /// @mixin vd-viewport-media-min
83
+ ///
84
+ /// @param {String|Number} $_viewport-range-min
85
+ /// The viewport range key to be used to obtain the min width from (such as large), or a specific number and a
86
+ /// css measurement unit.
87
+ ///
88
+ /// @example
89
+ /// @include vd-viewport-media-min (large) {
90
+ /// background-color: #C0FFEE;
91
+ /// }
92
+ ///
93
+ /// @include vd-viewport-media-min (250px) {
94
+ /// background-color: #C0FFEE;
95
+ /// }
96
+ ///
97
+ @mixin vd-viewport-media-min ($_viewport-range-min) {
98
+ $_media-min-width: null;
99
+ $_viewport-media-range: null;
100
+
101
+ @if (type-of($_viewport-range-min) == 'string') {
102
+ $_media-min-width: get-viewport-px-width($_viewport-range-min, "min");
103
+ @if ($_media-min-width == null) {
104
+ @error '[vd-viewport-media-min] Specified viewport range does not have a min range value. Use vd-viewport-media-max instead.';
105
+ }
106
+ } @else {
107
+ @if (unitless($_viewport-range-min)) {
108
+ @error '[vd-viewport-media-min] Unitless range value provided.';
109
+ }
110
+
111
+ $_media-min-width: $_viewport-range-min;
112
+ }
113
+
114
+ @media #{$vd-viewport-screen} and
115
+ (min-width: $_media-min-width) {
116
+ @content;
117
+ }
118
+ }
119
+
120
+ /// Descending content control.
121
+ ///
122
+ /// @mixin vd-viewport-media-max
123
+ ///
124
+ /// @param {String|Number} $_viewport-range-max
125
+ /// The viewport range key to be used to obtain the max width from (such as large), or a specific number and a
126
+ /// css measurement unit.
127
+ ///
128
+ /// @example
129
+ /// @include vd-viewport-media-max (large) {
130
+ /// background-color: #C0FFEE;
131
+ /// }
132
+ ///
133
+ /// @include vd-viewport-media-max (250px) {
134
+ /// background-color: #C0FFEE;
135
+ /// }
136
+ @mixin vd-viewport-media-max ($_viewport-range-max) {
137
+ $_media-max-width: null;
138
+ $_viewport-media-range: null;
139
+
140
+ @if (type-of($_viewport-range-max) == 'string') {
141
+ $_media-max-width: get-viewport-px-width($_viewport-range-max, "max");
142
+ @if ($_media-max-width == null) {
143
+ @error '[vd-viewport-media-max] Specified viewport range does not have a max range value. Use vd-viewport-media-min instead.';
144
+ }
145
+ } @else {
146
+ @if (unitless($_viewport-range-max)) {
147
+ @error '[vd-viewport-media-max] Unitless range value provided.';
148
+ }
149
+
150
+ $_media-max-width: $_viewport-range-max;
151
+ }
152
+
153
+ @media #{$vd-viewport-screen} and
154
+ (max-width: $_media-max-width) {
155
+ @content;
156
+ }
157
+ }
@@ -0,0 +1,18 @@
1
+ // Viewport Screen
2
+ $vd-viewport-screen: "only screen";
3
+
4
+ // Viewport Breakpoints - @todo Remove these !defaults.
5
+ $vd-breakpoint-xsmall: get-viewport-px-width('xsmall', 'max') !default;
6
+ $vd-breakpoint-small-min: get-viewport-px-width('small', 'min') !default;
7
+ $vd-breakpoint-small: get-viewport-px-width('small', 'max') !default;
8
+ $vd-breakpoint-medium-min: get-viewport-px-width('medium', 'min') !default;
9
+ $vd-breakpoint-medium: get-viewport-px-width('medium', 'max') !default;
10
+ $vd-breakpoint-large-min: get-viewport-px-width('large', 'min') !default;
11
+ $vd-breakpoint-large: get-viewport-px-width('large', 'max') !default;
12
+ $vd-breakpoint-xlarge-min: get-viewport-px-width('xlarge', 'min') !default;
13
+
14
+ // Viewport Identifier
15
+ $vd-viewport-identifier-map: map-get($vd-viewport, 'identifier');
16
+
17
+ // Viewport Ranges
18
+ $vd-viewport-ranges-map: map-get($vd-viewport, 'ranges');
@@ -0,0 +1,2 @@
1
+ @import 'non-styles/variables';
2
+ @import 'non-styles/mixins';
@@ -0,0 +1,12 @@
1
+ .nv-account-banner {
2
+ display: block;
3
+
4
+ .vd-banner-content {
5
+ display: inline-flex;
6
+ }
7
+ }
8
+
9
+ .nv-account-banner-action {
10
+ flex-shrink: 0;
11
+ margin-left: vd-grid-unit(6);
12
+ }
@@ -0,0 +1,15 @@
1
+ .nv-notifications-item {
2
+ position: relative;
3
+
4
+ @include nv-topnav-status-icon() {
5
+ top: 15px;
6
+ right: 12px;
7
+ transform: scale(0);
8
+ }
9
+ }
10
+
11
+ .nv-notifications-item--active {
12
+ &::after {
13
+ transform: scale(1);
14
+ }
15
+ }
@@ -0,0 +1,143 @@
1
+ @mixin nv-sidenav-faux-column-bg($tabs-width, $drawer-width) {
2
+ background: linear-gradient(
3
+ to right,
4
+ $vd-sidebar-tabs-background-color 0,
5
+ $vd-sidebar-tabs-background-color $tabs-width,
6
+ $vd-sidebar-drawer-background-color $tabs-width,
7
+ $vd-sidebar-drawer-background-color $drawer-width
8
+ );
9
+ }
10
+
11
+ // The sidebar contents can be hidden, if so we shouldn't show the sidebar
12
+ .vd-sidebar:empty {
13
+ display: none;
14
+ }
15
+
16
+ .nv-sidenav {
17
+ transform: translateX(0);
18
+ transition: transform 0.2s ease-in-out;
19
+ display: block;
20
+ height: calc(100% - #{$vd-topbar-height});
21
+ z-index: $nv-sidenav-base-z-index;
22
+
23
+ .nv-sidenav-modal-close {
24
+ display: none;
25
+ top: $nv-sidenav-modal-close-base-offset;
26
+ right: $nv-sidenav-modal-close-right-offset;
27
+ }
28
+
29
+ .vd-sidebar-tabs {
30
+ box-shadow: none;
31
+ height: auto;
32
+ }
33
+
34
+ .vd-sidebar-drawer {
35
+ border-right: none;
36
+ height: auto;
37
+ }
38
+
39
+ @media print {
40
+ display: none;
41
+ }
42
+
43
+ @supports (height: min-content) {
44
+ .vd-sidebar-tabs,
45
+ .vd-sidebar-drawer {
46
+ height: min-content;
47
+ }
48
+ }
49
+
50
+ // Required so banner does not appear over the top of the sidenav when its toggled
51
+ // on smaller devices
52
+ @include vd-viewport-media-max($vd-breakpoint-large) {
53
+ z-index: $vd-z-index-popover-base + 2;
54
+ }
55
+ }
56
+
57
+ .nv-sidenav-content {
58
+ @include nv-sidenav-faux-column-bg(
59
+ $vd-sidebar-tabs-desktop-width,
60
+ $vd-sidebar-drawer-desktop-width
61
+ );
62
+ width: auto;
63
+ overflow-y: auto;
64
+ overflow-x: hidden;
65
+ height: 100%;
66
+ display: flex;
67
+ box-shadow: $nv-sidenav-content-box-shadow-offset-x 0 0 0 vd-colour(framing);
68
+ }
69
+
70
+ .nv-sidenav--pad-drawer {
71
+ padding-right: $vd-sidebar-drawer-desktop-width;
72
+ }
73
+
74
+ // ========= Body Class Sidenav Modal State ========= //
75
+
76
+ .nv-display-sidenav-modal {
77
+ .nv-sidenav {
78
+ z-index: $nv-sidenav-modal-z-index;
79
+
80
+ .nv-sidenav-modal-close {
81
+ display: flex;
82
+ }
83
+ }
84
+ }
85
+
86
+ // ========= Responsive Breakpoint Styles ========= //
87
+
88
+ @include vd-viewport-media-max($vd-breakpoint-large) {
89
+ .nv-sidenav {
90
+ position: absolute;
91
+ left: 0;
92
+ height: 100%;
93
+ transform: translateX(
94
+ calc(-100% - #{$nv-sidenav-content-box-shadow-offset-x})
95
+ );
96
+
97
+ .nv-sidenav-content {
98
+ @include nv-sidenav-faux-column-bg(
99
+ $nv-sidenav-tabs-mobile-width,
100
+ $nv-sidenav-drawer-mobile-width
101
+ );
102
+ }
103
+
104
+ .vd-sidebar-tabs {
105
+ width: $nv-sidenav-tabs-mobile-width;
106
+ }
107
+
108
+ .vd-sidebar-drawer {
109
+ width: $nv-sidenav-drawer-mobile-width;
110
+ }
111
+ }
112
+
113
+ .nv-display-sidenav-modal {
114
+ .nv-sidenav {
115
+ transform: translateX(0);
116
+ }
117
+ }
118
+
119
+ .nv-sidenav--pad-drawer {
120
+ padding-right: 0;
121
+ }
122
+ }
123
+
124
+ @include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
125
+ // The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
126
+ // This only applies to the nav at large desktop size
127
+ .nv-sidenav--no-drawer {
128
+ width: $vd-sidebar-tabs-desktop-width;
129
+ }
130
+
131
+ .nv-display-sidenav-modal {
132
+ .nv-sidenav--no-drawer {
133
+ .nv-sidenav-content {
134
+ position: absolute;
135
+ }
136
+
137
+ .nv-sidenav-modal-close {
138
+ right: $nv-sidenav-modal-close-right-offset -
139
+ $vd-sidebar-drawer-desktop-width;
140
+ }
141
+ }
142
+ }
143
+ }
@@ -0,0 +1,24 @@
1
+ .nv-topnav-title {
2
+ display: flex;
3
+ align-items: center;
4
+ height: 100%;
5
+ flex-shrink: 0;
6
+ font-size: vd-text-size(body);
7
+ font-weight: $vd-font-weight--bold;
8
+ }
9
+
10
+ .nv-topnav-title-shorthand {
11
+ display: none;
12
+ }
13
+
14
+ // ========= Responsive Breakpoint Styles ========= //
15
+
16
+ @include vd-viewport-media-max ($vd-breakpoint-medium) {
17
+ .nv-topnav-title-shorthand {
18
+ display: inline;
19
+ }
20
+
21
+ .nv-topnav-title-full {
22
+ display: none;
23
+ }
24
+ }