@lightspeed/design-system-css 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +12 -0
- package/LICENSE.md +24 -0
- package/README.md +70 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +9 -0
- package/dist/index.js.map +1 -0
- package/dist/themes/types.d.ts +54 -0
- package/dist/themes/types.js +16 -0
- package/dist/themes/types.js.map +1 -0
- package/dist/themes/xseries/dark.d.ts +68 -0
- package/dist/themes/xseries/dark.js +84 -0
- package/dist/themes/xseries/dark.js.map +1 -0
- package/dist/themes/xseries/light.d.ts +68 -0
- package/dist/themes/xseries/light.js +84 -0
- package/dist/themes/xseries/light.js.map +1 -0
- package/dist/vend-styles.css +6643 -0
- package/package.json +34 -0
- package/src/fonts-ui/fonts-ns.scss +14 -0
- package/src/images-ui/images-ui-ns.scss +1 -0
- package/src/index.ts +9 -0
- package/src/themes/themeToScss.ts +67 -0
- package/src/themes/types.ts +68 -0
- package/src/themes/xseries/dark.ts +90 -0
- package/src/themes/xseries/light.ts +89 -0
- package/src/vend-stylelint/use-colour-function.js +60 -0
- package/src/vend-styles/components/BarChart/BarChart.scss +45 -0
- package/src/vend-styles/components/Carousel/Carousel.scss +114 -0
- package/src/vend-styles/components/CodeInput/CodeInput.scss +25 -0
- package/src/vend-styles/components/CurrencyInput/CurrencyInput.scss +4 -0
- package/src/vend-styles/components/DatePicker/DatePicker.scss +232 -0
- package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +32 -0
- package/src/vend-styles/components/FileUpload/FileUpload.scss +8 -0
- package/src/vend-styles/components/InboundIndicator/InboundIndicator.scss +7 -0
- package/src/vend-styles/components/InboundItem/InboundItem.scss +3 -0
- package/src/vend-styles/components/LineChart/LineChart.scss +99 -0
- package/src/vend-styles/components/Modal/Modal.scss +149 -0
- package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -0
- package/src/vend-styles/components/PageHeader/_PageHeader.scss +3 -0
- package/src/vend-styles/components/ProgressBar/ProgressBar.scss +21 -0
- package/src/vend-styles/components/PromotionModal/PromotionModal.scss +44 -0
- package/src/vend-styles/components/SearchFilters/SearchFilters.scss +6 -0
- package/src/vend-styles/components/TableList/TableList.scss +291 -0
- package/src/vend-styles/components/TableList/_TableList-ns.scss +15 -0
- package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +53 -0
- package/src/vend-styles/components/UpsellPrimary/_UpsellPrimary-ns.scss +12 -0
- package/src/vend-styles/components/UpsellSecondary/UpsellSecondary.scss +30 -0
- package/src/vend-styles/components/VendVideo/VendVideo.scss +48 -0
- package/src/vend-styles/utilities/position.scss +3 -0
- package/src/vend-styles/utilities/text.scss +9 -0
- package/src/vend-styles/vend-styles.scss +39 -0
- package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex-ns.scss +2 -0
- package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +47 -0
- package/src/vend.ui/behaviours/vd-align/vd-align.scss +3 -0
- package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +3 -0
- package/src/vend.ui/components/vd-action-bar/vd-action-bar.scss +33 -0
- package/src/vend.ui/components/vd-autocomplete/vd-autocomplete.scss +36 -0
- package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +68 -0
- package/src/vend.ui/components/vd-avatar/vd-avatar-ns.scss +3 -0
- package/src/vend.ui/components/vd-avatar/vd-avatar.scss +78 -0
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi-ns.scss +4 -0
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +70 -0
- package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -0
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge-ns.scss +10 -0
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +159 -0
- package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +16 -0
- package/src/vend.ui/components/vd-banner/vd-banner.scss +89 -0
- package/src/vend.ui/components/vd-bg/vd-bg.scss +4 -0
- package/src/vend.ui/components/vd-body/vd-body.scss +20 -0
- package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +121 -0
- package/src/vend.ui/components/vd-btn/_vd-btn-ns.scss +7 -0
- package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +74 -0
- package/src/vend.ui/components/vd-btn/vd-btn.scss +112 -0
- package/src/vend.ui/components/vd-card/vd-card-ns.scss +9 -0
- package/src/vend.ui/components/vd-card/vd-card.scss +11 -0
- package/src/vend.ui/components/vd-carousel/vd-carousel.scss +120 -0
- package/src/vend.ui/components/vd-checkbox/vd-checkbox-ns.scss +7 -0
- package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +158 -0
- package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +74 -0
- package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +332 -0
- package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +10 -0
- package/src/vend.ui/components/vd-dialog/vd-dialog.scss +220 -0
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss +8 -0
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +117 -0
- package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer-ns.scss +1 -0
- package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +22 -0
- package/src/vend.ui/components/vd-dott/vd-dott.scss +41 -0
- package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +15 -0
- package/src/vend.ui/components/vd-expandable/vd-expandable.scss +11 -0
- package/src/vend.ui/components/vd-feedback/vd-feedback.scss +23 -0
- package/src/vend.ui/components/vd-field/vd-field-ns.scss +4 -0
- package/src/vend.ui/components/vd-field/vd-field.scss +59 -0
- package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss +19 -0
- package/src/vend.ui/components/vd-flag/vd-flag-ns.scss +1 -0
- package/src/vend.ui/components/vd-flag/vd-flag.scss +46 -0
- package/src/vend.ui/components/vd-flex/vd-flex.scss +21 -0
- package/src/vend.ui/components/vd-grid/vd-grid.scss +26 -0
- package/src/vend.ui/components/vd-header/vd-header.scss +34 -0
- package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +28 -0
- package/src/vend.ui/components/vd-hero/vd-hero.scss +114 -0
- package/src/vend.ui/components/vd-hr/vd-hr.scss +14 -0
- package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +61 -0
- package/src/vend.ui/components/vd-input/vd-input-ns.scss +99 -0
- package/src/vend.ui/components/vd-input/vd-input.scss +49 -0
- package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss +8 -0
- package/src/vend.ui/components/vd-link/vd-link.scss +23 -0
- package/src/vend.ui/components/vd-loader/vd-loader.scss +56 -0
- package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +40 -0
- package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +38 -0
- package/src/vend.ui/components/vd-main-content/vd-main-content.scss +39 -0
- package/src/vend.ui/components/vd-modals-container/vd-modals-container.scss +5 -0
- package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +32 -0
- package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss +30 -0
- package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +62 -0
- package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -0
- package/src/vend.ui/components/vd-overlay/vd-overlay.scss +19 -0
- package/src/vend.ui/components/vd-p/vd-p.scss +8 -0
- package/src/vend.ui/components/vd-panel/vd-panel.scss +9 -0
- package/src/vend.ui/components/vd-popover/vd-popover-ns.scss +5 -0
- package/src/vend.ui/components/vd-popover/vd-popover.scss +180 -0
- package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +16 -0
- package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +128 -0
- package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +12 -0
- package/src/vend.ui/components/vd-promo/vd-promo.scss +86 -0
- package/src/vend.ui/components/vd-radio/vd-radio-ns.scss +7 -0
- package/src/vend.ui/components/vd-radio/vd-radio.scss +130 -0
- package/src/vend.ui/components/vd-save/vd-save.scss +4 -0
- package/src/vend.ui/components/vd-scrollable/vd-scrollable-ns.scss +2 -0
- package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +54 -0
- package/src/vend.ui/components/vd-section/vd-section-ns.scss +17 -0
- package/src/vend.ui/components/vd-section/vd-section.scss +118 -0
- package/src/vend.ui/components/vd-section-back/vd-section-back-ns.scss +3 -0
- package/src/vend.ui/components/vd-section-back/vd-section-back.scss +34 -0
- package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +82 -0
- package/src/vend.ui/components/vd-select/vd-select-group.scss +47 -0
- package/src/vend.ui/components/vd-select/vd-select-inline.scss +40 -0
- package/src/vend.ui/components/vd-select/vd-select-ns.scss +17 -0
- package/src/vend.ui/components/vd-select/vd-select.scss +26 -0
- package/src/vend.ui/components/vd-settings/vd-settings-ns.scss +1 -0
- package/src/vend.ui/components/vd-settings/vd-settings.scss +8 -0
- package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +10 -0
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +6 -0
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +47 -0
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +15 -0
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +73 -0
- package/src/vend.ui/components/vd-splash/vd-splash.scss +47 -0
- package/src/vend.ui/components/vd-status-icon/vd-status-icon-ns.scss +1 -0
- package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss +12 -0
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +5 -0
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss +76 -0
- package/src/vend.ui/components/vd-switch/vd-switch-ns.scss +8 -0
- package/src/vend.ui/components/vd-switch/vd-switch.scss +117 -0
- package/src/vend.ui/components/vd-table/vd-table-ns.scss +13 -0
- package/src/vend.ui/components/vd-table/vd-table.scss +251 -0
- package/src/vend.ui/components/vd-tabs/_vd-tabs-ns.scss +3 -0
- package/src/vend.ui/components/vd-tabs/vd-tabs.scss +76 -0
- package/src/vend.ui/components/vd-text/vd-text.scss +18 -0
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification-ns.scss +3 -0
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +58 -0
- package/src/vend.ui/components/vd-tooltip/vd-tooltip-ns.scss +1 -0
- package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss +15 -0
- package/src/vend.ui/components/vd-topbar/vd-topbar-ns.scss +10 -0
- package/src/vend.ui/components/vd-topbar/vd-topbar.scss +36 -0
- package/src/vend.ui/components/vd-visibility/vd-visibility.scss +73 -0
- package/src/vend.ui/fonts/fira-mono-regular.woff2 +0 -0
- package/src/vend.ui/fonts/lato-black.woff2 +0 -0
- package/src/vend.ui/fonts/lato-bold.woff2 +0 -0
- package/src/vend.ui/fonts/lato-regular.woff2 +0 -0
- package/src/vend.ui/styles/global/_base-mixins.scss +12 -0
- package/src/vend.ui/styles/global/_button-mixins.scss +17 -0
- package/src/vend.ui/styles/global/_grid.scss +102 -0
- package/src/vend.ui/styles/global/_helper-mixins.scss +36 -0
- package/src/vend.ui/styles/global/_layout.scss +10 -0
- package/src/vend.ui/styles/global/_misc.scss +14 -0
- package/src/vend.ui/styles/global/_non-styles.scss +72 -0
- package/src/vend.ui/styles/global/_normalise.scss +16 -0
- package/src/vend.ui/styles/global/_placeholders.scss +11 -0
- package/src/vend.ui/styles/global/_z-index.scss +40 -0
- package/src/vend.ui/styles/global/colour/_base.scss +105 -0
- package/src/vend.ui/styles/global/colour/_colour-functions.scss +76 -0
- package/src/vend.ui/styles/global/colour/_colour-helpers.scss +7 -0
- package/src/vend.ui/styles/global/colour/_colour.scss +5 -0
- package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss +12 -0
- package/src/vend.ui/styles/global/colour/themes/_css-var-theme-generator.scss +1 -0
- package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss +81 -0
- package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss +5 -0
- package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss +53 -0
- package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss +53 -0
- package/src/vend.ui/styles/global/effects/_effects-ns.scss +13 -0
- package/src/vend.ui/styles/global/effects/_effects.scss +22 -0
- package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +12 -0
- package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +24 -0
- package/src/vend.ui/styles/global/spacing/_spacing.scss +4 -0
- package/src/vend.ui/styles/global/text/_base.scss +6 -0
- package/src/vend.ui/styles/global/text/_text-definitions.scss +65 -0
- package/src/vend.ui/styles/global/text/_text-helpers.scss +17 -0
- package/src/vend.ui/styles/global/text/_text-mixins.scss +141 -0
- package/src/vend.ui/styles/global/text/_text.scss +3 -0
- package/src/vend.ui/styles/global/utils/_functions.scss +84 -0
- package/src/vend.ui/styles/global/viewport/_viewport-data.scss +37 -0
- package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +37 -0
- package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +157 -0
- package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +18 -0
- package/src/vend.ui/styles/navi/_non-styles.scss +2 -0
- package/src/vend.ui/styles/navi/_nv-account-banner.scss +12 -0
- package/src/vend.ui/styles/navi/_nv-notifications-item.scss +15 -0
- package/src/vend.ui/styles/navi/_nv-sidenav.scss +143 -0
- package/src/vend.ui/styles/navi/_nv-topnav-title.scss +24 -0
- package/src/vend.ui/styles/navi/_nv-topnav.scss +112 -0
- package/src/vend.ui/styles/navi/_nv-user-sale-data.scss +14 -0
- package/src/vend.ui/styles/navi/dialogs/_nv-dialog-drawer.scss +44 -0
- package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +85 -0
- package/src/vend.ui/styles/navi/dialogs/_nv-user-dialog.scss +44 -0
- package/src/vend.ui/styles/navi/navi.scss +12 -0
- package/src/vend.ui/styles/navi/non-styles/_mixins.scss +48 -0
- package/src/vend.ui/styles/navi/non-styles/_variables.scss +26 -0
- package/src/vend.ui/styles/vend-ui.scss +98 -0
@@ -0,0 +1,41 @@
|
|
1
|
+
$vd-dott-diameter: 32px;
|
2
|
+
$vd-dott-aperture-diameter: 12px;
|
3
|
+
$vd-dot-border-width: 2px;
|
4
|
+
|
5
|
+
vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
|
6
|
+
display: inline-block;
|
7
|
+
width: $vd-dott-diameter;
|
8
|
+
height: $vd-dott-diameter;
|
9
|
+
|
10
|
+
will-change: transform;
|
11
|
+
animation: vd-rotate 3s infinite linear;
|
12
|
+
}
|
13
|
+
|
14
|
+
.vd-dott-mask {
|
15
|
+
stroke: $vd-colour-white;
|
16
|
+
// Define stroke width as the difference between aperture diameter and full diameter, expressed as % of full diameter
|
17
|
+
stroke-width: ($vd-dott-diameter - $vd-dott-aperture-diameter) / $vd-dott-diameter * 100%;
|
18
|
+
}
|
19
|
+
|
20
|
+
.vd-dott-gradient-start {
|
21
|
+
stop-color: vd-colour(go);
|
22
|
+
}
|
23
|
+
|
24
|
+
.vd-dott-gradient-stop {
|
25
|
+
stop-color: vd-colour(success);
|
26
|
+
}
|
27
|
+
|
28
|
+
.vd-dott-border:not(.vd-input--error):not(.vd-error) {
|
29
|
+
// Overide existing borders before applying patchy border styles ourselves
|
30
|
+
border: initial;
|
31
|
+
border-top: $vd-dot-border-width solid vd-colour(go);
|
32
|
+
border-bottom: $vd-dot-border-width solid vd-colour(success);
|
33
|
+
// Second bg-image value, in conjunction with the background-position, ensures the right side border displays correctly
|
34
|
+
background-image:
|
35
|
+
linear-gradient(vd-colour(go), vd-colour(success)),
|
36
|
+
linear-gradient(vd-colour(go), vd-colour(success));
|
37
|
+
background-size: $vd-dot-border-width 100%;
|
38
|
+
background-position: 0 0, 100% 0;
|
39
|
+
background-repeat: no-repeat;
|
40
|
+
box-shadow: 0 0 4px 0 vd-colour(go);
|
41
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
.vd-feedback-button-container {
|
2
|
+
margin-left: vd-grid-unit(2);
|
3
|
+
}
|
4
|
+
|
5
|
+
.vd-feedback-capture {
|
6
|
+
resize: none;
|
7
|
+
height: 100px;
|
8
|
+
}
|
9
|
+
|
10
|
+
.vd-feedback-button {
|
11
|
+
cursor: pointer;
|
12
|
+
display: inline;
|
13
|
+
margin-left: vd-grid-unit(6);
|
14
|
+
white-space: nowrap;
|
15
|
+
}
|
16
|
+
|
17
|
+
.vd-feedback-button-icon {
|
18
|
+
margin-right: vd-grid-unit(2);
|
19
|
+
}
|
20
|
+
|
21
|
+
.vd-feedback-thankyou {
|
22
|
+
width: 100%;
|
23
|
+
}
|
@@ -0,0 +1,59 @@
|
|
1
|
+
.vd-field {
|
2
|
+
margin-bottom: $vd-field-margin;
|
3
|
+
font-size: vd-text-size(body);
|
4
|
+
flex: 1;
|
5
|
+
|
6
|
+
&:last-child {
|
7
|
+
margin-bottom: 0;
|
8
|
+
}
|
9
|
+
|
10
|
+
.vd-fieldset & {
|
11
|
+
margin-bottom: $vd-fieldset-field-margin-bottom;
|
12
|
+
|
13
|
+
&:not(:last-child) {
|
14
|
+
margin-right: $vd-fieldset-field-margin-right;
|
15
|
+
|
16
|
+
@include vd-viewport-media-max(xsmall) {
|
17
|
+
margin-right: 0;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
&:only-child {
|
22
|
+
margin-bottom: $vd-fieldset-field-margin-bottom;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
.vd-label {
|
28
|
+
@include vd-text(label);
|
29
|
+
display: inline-block;
|
30
|
+
margin-bottom: vd-spacer(1);
|
31
|
+
}
|
32
|
+
|
33
|
+
.vd-value {
|
34
|
+
position: relative;
|
35
|
+
}
|
36
|
+
|
37
|
+
.vd-field--short {
|
38
|
+
max-width: $vd-field-short-max-width;
|
39
|
+
margin-right: $vd-field-margin;
|
40
|
+
|
41
|
+
&:last-of-type {
|
42
|
+
margin-right: 0;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
@include vd-viewport-media-max(small) {
|
47
|
+
.vd-field {
|
48
|
+
margin-top: $vd-field-margin;
|
49
|
+
|
50
|
+
.vd-fieldset & {
|
51
|
+
margin-top: inherit;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
.vd-field--short {
|
56
|
+
max-width: initial;
|
57
|
+
margin-right: 0;
|
58
|
+
}
|
59
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
.vd-fieldset {
|
2
|
+
border: 0;
|
3
|
+
padding: 0;
|
4
|
+
margin: 0;
|
5
|
+
min-width: 0;
|
6
|
+
|
7
|
+
+ .vd-fieldset {
|
8
|
+
margin-top: $vd-section-padding-v;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
.vd-legend {
|
13
|
+
padding: 0 0 vd-grid-unit(2);
|
14
|
+
margin: 0 0 vd-grid-unit(4);
|
15
|
+
font-size: 16px;
|
16
|
+
font-weight: $vd-font-weight--bold;
|
17
|
+
border-bottom: 1px solid vd-colour(keyline);
|
18
|
+
width: 100%;
|
19
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
$vd-font-size--flag: 10px !default;
|
@@ -0,0 +1,46 @@
|
|
1
|
+
.vd-flag {
|
2
|
+
@include vd-text(mini-signpost);
|
3
|
+
|
4
|
+
padding: vd-grid-unit(1) vd-grid-unit(2);
|
5
|
+
background-color: vd-colour(framing);
|
6
|
+
border-radius: $vd-border-radius;
|
7
|
+
display: inline-block;
|
8
|
+
vertical-align: text-top;
|
9
|
+
overflow: hidden;
|
10
|
+
|
11
|
+
&,
|
12
|
+
&:link,
|
13
|
+
&:visited {
|
14
|
+
color: vd-colour(supplementary--text) !important;
|
15
|
+
}
|
16
|
+
|
17
|
+
}
|
18
|
+
|
19
|
+
.vd-flag-chevron {
|
20
|
+
border-width: 1px 1px 0 0;
|
21
|
+
border-style: solid;
|
22
|
+
display: inline-block;
|
23
|
+
width: 14px;
|
24
|
+
height: 14px;
|
25
|
+
transform: rotate(59deg) skew(27deg);
|
26
|
+
margin: -2px 3px -4px -3px;
|
27
|
+
opacity: 0.5;
|
28
|
+
// Hacks to ensure anti-aliasing
|
29
|
+
backface-visibility: hidden; // Chrome
|
30
|
+
outline: 1px solid transparent; // Firefox
|
31
|
+
}
|
32
|
+
|
33
|
+
.vd-flag--negative,
|
34
|
+
.vd-flag--warning {
|
35
|
+
background-color: vd-colour(no);
|
36
|
+
|
37
|
+
&,
|
38
|
+
&:link,
|
39
|
+
&:visited {
|
40
|
+
color: vd-colour(text-action) !important;
|
41
|
+
}
|
42
|
+
|
43
|
+
.vd-flag-chevron{
|
44
|
+
opacity: 1;
|
45
|
+
}
|
46
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
.vd-flex {
|
2
|
+
display: flex;
|
3
|
+
flex: 1;
|
4
|
+
}
|
5
|
+
|
6
|
+
.vd-flex--row { flex-direction: row; }
|
7
|
+
.vd-flex--column { flex-direction: column; }
|
8
|
+
|
9
|
+
.vd-flex--no-shrink { flex-shrink: 0 }
|
10
|
+
|
11
|
+
.vd-flex--justify-start { justify-content: flex-start; }
|
12
|
+
.vd-flex--justify-end { justify-content: flex-end; }
|
13
|
+
.vd-flex--justify-between { justify-content: space-between; }
|
14
|
+
.vd-flex--justify-around { justify-content: space-around; }
|
15
|
+
.vd-flex--justify-center { justify-content: center; }
|
16
|
+
|
17
|
+
.vd-flex--align-start { align-items: flex-start; }
|
18
|
+
.vd-flex--align-end { align-items: flex-end; }
|
19
|
+
.vd-flex--align-baseline { align-items: baseline; }
|
20
|
+
.vd-flex--align-center { align-items: center; }
|
21
|
+
.vd-flex--align-stretch { align-items: stretch; }
|
@@ -0,0 +1,26 @@
|
|
1
|
+
@include vd-build-grid();
|
2
|
+
|
3
|
+
// Large gutter; @todo deprecate since it has inconsistent vertical spacing
|
4
|
+
.vd-g-row--gutter-l {
|
5
|
+
margin: -($vd-grid-row-gutter-large / 2);
|
6
|
+
max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
|
7
|
+
|
8
|
+
> .vd-g-col {
|
9
|
+
padding: $vd-grid-row-gutter-large / 2;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
.vd-g-row--gutter {
|
14
|
+
margin-left: -($vd-grid-row-gutter-large / 2);
|
15
|
+
margin-right: -($vd-grid-row-gutter-large / 2);
|
16
|
+
margin-bottom: -($vd-grid-row-gutter-large / 2);
|
17
|
+
max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
|
18
|
+
|
19
|
+
+ .vd-g-row--gutter {
|
20
|
+
margin-top: ($vd-grid-row-gutter-large / 2);
|
21
|
+
}
|
22
|
+
|
23
|
+
> .vd-g-col {
|
24
|
+
padding: 0 ($vd-grid-row-gutter-large / 2) ($vd-grid-row-gutter-large / 2);
|
25
|
+
}
|
26
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
.vd-header {
|
2
|
+
display: block;
|
3
|
+
font-weight: vd-text-weight(heading);
|
4
|
+
color: vd-colour(text);
|
5
|
+
margin: 0;
|
6
|
+
}
|
7
|
+
|
8
|
+
.vd-header--page {
|
9
|
+
font-size: vd-text-size(hero);
|
10
|
+
position: relative;
|
11
|
+
}
|
12
|
+
|
13
|
+
.vd-header--subpage {
|
14
|
+
font-size: vd-text-size(heading);
|
15
|
+
}
|
16
|
+
|
17
|
+
.vd-header--section {
|
18
|
+
font-size: vd-text-size(sub-heading);
|
19
|
+
margin-bottom: vd-grid-unit(1);
|
20
|
+
}
|
21
|
+
|
22
|
+
.vd-header--settings {
|
23
|
+
font-size: vd-text-size(sub-heading);
|
24
|
+
margin-bottom: vd-grid-unit(5);
|
25
|
+
|
26
|
+
@include vd-viewport-media-max(small) {
|
27
|
+
margin-bottom: vd-grid-unit(3);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
.vd-header--dialog {
|
32
|
+
font-size: vd-text-size(heading);
|
33
|
+
word-break: break-word;
|
34
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
$vd-hero-padding-horizontal: vd-grid-unit(5) !default;
|
2
|
+
$vd-hero-paddding-vertical: vd-grid-unit(12) !default;
|
3
|
+
$vd-hero-items-margin-vertical: vd-grid-unit(5) !default;
|
4
|
+
|
5
|
+
$vd-hero-content-max-width: 80% !default;
|
6
|
+
$vd-hero-content-min-width: 300px !default;
|
7
|
+
$vd-hero-headline-max-width: 90% !default;
|
8
|
+
|
9
|
+
$vd-hero-aux-content-margin: vd-grid-unit(3) !default;
|
10
|
+
$vd-hero-aux-headline-max-width: 90% !default;
|
11
|
+
$vd-hero-aux-content-max-width: 90% !default;
|
12
|
+
$vd-hero-aux-hr-width: 80px !default;
|
13
|
+
$vd-hero-aux-width: 33.33333% !default;
|
14
|
+
|
15
|
+
// Hero Auxiliary Headline
|
16
|
+
@mixin vd-text-hero-aux-headline () {
|
17
|
+
@include vd-text(intro);
|
18
|
+
font-weight: $vd-font-weight--bold;
|
19
|
+
}
|
20
|
+
|
21
|
+
// Hero Headline
|
22
|
+
@mixin vd-text-hero-headline () {
|
23
|
+
@include vd-heading-reset();
|
24
|
+
@include vd-line-height(42, 35);
|
25
|
+
@include font-smoothing;
|
26
|
+
|
27
|
+
font-size: vd-text-size(hero);
|
28
|
+
}
|
@@ -0,0 +1,114 @@
|
|
1
|
+
.vd-hero-container {
|
2
|
+
display: flex;
|
3
|
+
|
4
|
+
@include vd-viewport-media-max(medium) {
|
5
|
+
flex-wrap: wrap;
|
6
|
+
}
|
7
|
+
}
|
8
|
+
|
9
|
+
// Hero
|
10
|
+
.vd-hero {
|
11
|
+
display: flex;
|
12
|
+
flex: 1;
|
13
|
+
flex-direction: column;
|
14
|
+
justify-content: center;
|
15
|
+
align-items: center;
|
16
|
+
|
17
|
+
font-family: $vd-font-lato;
|
18
|
+
text-align: center;
|
19
|
+
padding: $vd-hero-paddding-vertical $vd-hero-padding-horizontal;
|
20
|
+
box-sizing: border-box;
|
21
|
+
background-color: vd-colour(box);
|
22
|
+
|
23
|
+
.vd-hero-container & {
|
24
|
+
@include vd-viewport-media-max(medium) {
|
25
|
+
flex-basis: 100%;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
.vd-hero--transparent {
|
31
|
+
background-color: initial;
|
32
|
+
}
|
33
|
+
|
34
|
+
.vd-hero-content {
|
35
|
+
max-width: $vd-hero-content-max-width;
|
36
|
+
min-width: $vd-hero-content-min-width;
|
37
|
+
|
38
|
+
@include vd-viewport-media-max(xsmall) {
|
39
|
+
min-width: initial;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
.vd-hero-headline {
|
44
|
+
@include vd-text-hero-headline;
|
45
|
+
max-width: $vd-hero-headline-max-width;
|
46
|
+
margin-bottom: $vd-hero-items-margin-vertical;
|
47
|
+
}
|
48
|
+
|
49
|
+
.vd-hero-intro {
|
50
|
+
@include vd-text-intro;
|
51
|
+
margin: 0;
|
52
|
+
}
|
53
|
+
|
54
|
+
.vd-hero-button {
|
55
|
+
margin: $vd-hero-items-margin-vertical 0 0;
|
56
|
+
}
|
57
|
+
|
58
|
+
// Hero Auxiliary
|
59
|
+
.vd-hero-aux {
|
60
|
+
flex: 1;
|
61
|
+
display: flex;
|
62
|
+
flex-direction: column;
|
63
|
+
justify-content: center;
|
64
|
+
|
65
|
+
padding: vd-grid-unit(5);
|
66
|
+
box-sizing: border-box;
|
67
|
+
|
68
|
+
background-color: vd-colour(box-inverse);
|
69
|
+
|
70
|
+
font-family: $vd-font-lato;
|
71
|
+
color: vd-colour(text-inverse);
|
72
|
+
text-align: center;
|
73
|
+
font-size: vd-text-size(body);
|
74
|
+
|
75
|
+
.vd-hero-container & {
|
76
|
+
flex: 0 0 $vd-hero-aux-width;
|
77
|
+
|
78
|
+
@include vd-viewport-media-max(medium) {
|
79
|
+
flex: 1;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
.vd-hero-aux-headline {
|
85
|
+
@include vd-text-hero-aux-headline;
|
86
|
+
margin-left: auto;
|
87
|
+
margin-right: auto;
|
88
|
+
max-width: $vd-hero-aux-headline-max-width;
|
89
|
+
}
|
90
|
+
|
91
|
+
.vd-hero-aux-hr {
|
92
|
+
margin: $vd-hero-aux-content-margin auto;
|
93
|
+
|
94
|
+
border-top: 1px solid currentColor;
|
95
|
+
border-right: none;
|
96
|
+
border-bottom: none;
|
97
|
+
border-left: none;
|
98
|
+
|
99
|
+
width: $vd-hero-aux-hr-width;
|
100
|
+
}
|
101
|
+
|
102
|
+
.vd-hero-aux-content {
|
103
|
+
@include font-smoothing;
|
104
|
+
@include vd-line-height(24, 15);
|
105
|
+
|
106
|
+
font-size: vd-text-size(body);
|
107
|
+
max-width: $vd-hero-aux-content-max-width;
|
108
|
+
margin: 0 auto;
|
109
|
+
}
|
110
|
+
|
111
|
+
.vd-hero-aux-footer {
|
112
|
+
color: vd-colour(keyline);
|
113
|
+
margin-top: $vd-hero-aux-content-margin;
|
114
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
.vd-hr {
|
2
|
+
margin: vd-grid-unit(5) auto;
|
3
|
+
width: 100%;
|
4
|
+
max-width: $vd-section-wrap-max-width;
|
5
|
+
border-top: 1px solid vd-colour(keyline);
|
6
|
+
border-left: none;
|
7
|
+
border-right: none;
|
8
|
+
border-bottom: none;
|
9
|
+
}
|
10
|
+
|
11
|
+
.vd-hr--full {
|
12
|
+
width: 100%;
|
13
|
+
max-width: 100%;
|
14
|
+
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
.vd-in-page-help {
|
2
|
+
display: block;
|
3
|
+
}
|
4
|
+
|
5
|
+
.vd-in-page-help-section {
|
6
|
+
border-bottom: 1px solid vd-colour(framing);
|
7
|
+
}
|
8
|
+
|
9
|
+
.vd-in-page-help-container {
|
10
|
+
position: relative;
|
11
|
+
}
|
12
|
+
|
13
|
+
.vd-in-page-help-content {
|
14
|
+
|
15
|
+
@include vd-viewport-media-min(medium) {
|
16
|
+
display: flex;
|
17
|
+
flex-flow: row wrap;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
.vd-in-page-help-content-item {
|
22
|
+
|
23
|
+
@include vd-viewport-media-min(medium) {
|
24
|
+
flex: 1;
|
25
|
+
}
|
26
|
+
|
27
|
+
&.vd-in-page-help-content-item--constrained {
|
28
|
+
flex-basis: 50%;
|
29
|
+
flex-grow: 0;
|
30
|
+
|
31
|
+
@include vd-viewport-media-max(medium) {
|
32
|
+
flex: 1 1 auto;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
.vd-in-page-help-is-dismissible > & {
|
37
|
+
margin-right: 65px;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
.vd-in-page-help-content-text {
|
42
|
+
min-width: 200px;
|
43
|
+
padding-top: 10px;
|
44
|
+
}
|
45
|
+
|
46
|
+
.vd-in-page-help-content-media {
|
47
|
+
display: flex;
|
48
|
+
justify-content: center;
|
49
|
+
align-items: center;
|
50
|
+
|
51
|
+
@include vd-viewport-media-min(medium) {
|
52
|
+
min-width: 500px;
|
53
|
+
min-height: 250px;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
.vd-in-page-help-close {
|
58
|
+
position: absolute;
|
59
|
+
top: 0;
|
60
|
+
right: 0;
|
61
|
+
}
|
@@ -0,0 +1,99 @@
|
|
1
|
+
$vd-input-padding: vd-grid-unit(3) !default;
|
2
|
+
$vd-input-icon-padding: 35px;
|
3
|
+
$vd-input-icon-position-h: vd-grid-unit(3);
|
4
|
+
$vd-input-border-width: 2px;
|
5
|
+
|
6
|
+
$vd-input-message-margin: 8px;
|
7
|
+
|
8
|
+
// Generate 5dp px line height value for vd-textarea. Required to accurately calculate it's height based on the
|
9
|
+
// requested number of lines. Specify the exact pixel value to ensure there is not rounding issues between browsers.
|
10
|
+
$vd-textarea-leading: 20;
|
11
|
+
$vd-textarea-unitless-font-size: map-deep-get($_vd-text-definitions, body, size);
|
12
|
+
$vd-textarea-unitless-line-height: to-fixed(($vd-textarea-leading / $vd-textarea-unitless-font-size), $digits: 5);
|
13
|
+
$vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-textarea-unitless-line-height);
|
14
|
+
|
15
|
+
@mixin vd-input-text() {
|
16
|
+
color: vd-colour(text);
|
17
|
+
font-family: $vd-font-primary;
|
18
|
+
font-weight: $vd-font-weight--regular;
|
19
|
+
font-size: vd-text-size(body);
|
20
|
+
word-break: normal;
|
21
|
+
|
22
|
+
&::placeholder {
|
23
|
+
color: vd-colour(supplementary);
|
24
|
+
opacity: 1;
|
25
|
+
}
|
26
|
+
|
27
|
+
// Add ellipsis to long placeholders
|
28
|
+
&:placeholder-shown {
|
29
|
+
text-overflow: ellipsis;
|
30
|
+
}
|
31
|
+
|
32
|
+
&:disabled {
|
33
|
+
@include disabled();
|
34
|
+
}
|
35
|
+
|
36
|
+
@include vd-viewport-media-max(xsmall) {
|
37
|
+
// Prevent zooming when focusing on inputs; @todo there are better approaches to handle this
|
38
|
+
font-size: 16px;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
@mixin vd-input-box-model ($vd-input-width: 100%) {
|
43
|
+
width: $vd-input-width;
|
44
|
+
margin: 0;
|
45
|
+
padding: $vd-input-padding;
|
46
|
+
box-sizing: border-box;
|
47
|
+
outline: none;
|
48
|
+
}
|
49
|
+
|
50
|
+
@mixin vd-input-states () {
|
51
|
+
box-shadow: none;
|
52
|
+
background-color: vd-colour(box);
|
53
|
+
border: vd-border(framing, $vd-input-border-width);
|
54
|
+
border-radius: $vd-border-radius;
|
55
|
+
|
56
|
+
transition: all $vd-time-s;
|
57
|
+
transition-property: border-color, box-shadow;
|
58
|
+
|
59
|
+
@include vd-input-focus();
|
60
|
+
@include vd-input-error();
|
61
|
+
}
|
62
|
+
|
63
|
+
@mixin vd-input-focus () {
|
64
|
+
&:focus, &.vd-focus {
|
65
|
+
border-color: vd-colour(go);
|
66
|
+
box-shadow: 0 0 $vd-shadow-blur vd-colour(go);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
@mixin vd-input-error () {
|
71
|
+
@include vd-input-error-selectors () {
|
72
|
+
@include vd-input-error-styles();
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
@mixin vd-input-error-selectors () {
|
77
|
+
// @TODO Deprecate `.vd-input--error`.
|
78
|
+
&.vd-input--error,
|
79
|
+
&.vd-error,
|
80
|
+
&.ng-invalid.ng-dirty,
|
81
|
+
.ng-submitted &.ng-invalid {
|
82
|
+
@content;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
@mixin vd-input-error-styles () {
|
87
|
+
border-color: vd-colour(no);
|
88
|
+
|
89
|
+
&:focus, &.vd-focus {
|
90
|
+
box-shadow: 0 0 $vd-shadow-blur vd-colour(no);
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
@mixin vd-input {
|
95
|
+
cursor: text;
|
96
|
+
@include vd-input-text();
|
97
|
+
@include vd-input-box-model();
|
98
|
+
@include vd-input-states();
|
99
|
+
}
|
@@ -0,0 +1,49 @@
|
|
1
|
+
.vd-input {
|
2
|
+
@include vd-input;
|
3
|
+
}
|
4
|
+
|
5
|
+
.vd-input-error-message-section {
|
6
|
+
display: block;
|
7
|
+
margin-top: $vd-input-message-margin;
|
8
|
+
color: vd-colour(no);
|
9
|
+
font-size: vd-text-size(supplementary);
|
10
|
+
|
11
|
+
.vd-input-error-message-text {
|
12
|
+
margin-left: $vd-input-message-margin / 2;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
.vd-input--icon-left { padding-left: $vd-input-icon-padding; }
|
17
|
+
.vd-input--icon-right { padding-right: $vd-input-icon-padding; }
|
18
|
+
|
19
|
+
.vd-input-icon {
|
20
|
+
position: absolute;
|
21
|
+
top: 16px;
|
22
|
+
color: vd-colour(supplementary--text);
|
23
|
+
pointer-events: none;
|
24
|
+
}
|
25
|
+
|
26
|
+
.vd-input-icon--left { left: $vd-input-icon-position-h; }
|
27
|
+
.vd-input-icon--right { right: $vd-input-icon-position-h; }
|
28
|
+
|
29
|
+
.vd-input--text-align-right {
|
30
|
+
text-align: right;
|
31
|
+
}
|
32
|
+
|
33
|
+
.vd-input--text-align-left {
|
34
|
+
text-align: left;
|
35
|
+
}
|
36
|
+
.vd-input-symbol {
|
37
|
+
line-height: 1;
|
38
|
+
}
|
39
|
+
|
40
|
+
.vd-textarea {
|
41
|
+
display: block;
|
42
|
+
resize: none;
|
43
|
+
overflow: hidden;
|
44
|
+
line-height: $vd-textarea-line-height;
|
45
|
+
}
|
46
|
+
|
47
|
+
.vd-textarea--scrollable {
|
48
|
+
overflow: visible;
|
49
|
+
}
|