@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,23 @@
|
|
1
|
+
.vd-link {
|
2
|
+
color: vd-colour(go);
|
3
|
+
text-decoration: none;
|
4
|
+
cursor: pointer;
|
5
|
+
transition: color $vd-time-s;
|
6
|
+
|
7
|
+
&:visited { color: vd-colour(go); }
|
8
|
+
|
9
|
+
@include vd-hover-when-supported {
|
10
|
+
&:hover { text-decoration: underline; }
|
11
|
+
}
|
12
|
+
|
13
|
+
&:active { text-decoration: underline;}
|
14
|
+
}
|
15
|
+
|
16
|
+
.vd-link--secondary {
|
17
|
+
color: currentColor !important; // required important to override a tag styles set in vd-table
|
18
|
+
text-decoration: underline !important; // required to override base a:link
|
19
|
+
|
20
|
+
@include vd-hover-when-supported {
|
21
|
+
&:hover { color: vd-colour(go) !important; } // required important to override a tag styles set in vd-table
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
$vd-loader-m: 20px;
|
2
|
+
$vd-loader-s: 16px;
|
3
|
+
$vd-loader-border: 2px;
|
4
|
+
$vd-icon-height: 15px;
|
5
|
+
$vd-i-bg-margin: vd-grid-unit(2);
|
6
|
+
|
7
|
+
.vd-loader {
|
8
|
+
display: inline-block;
|
9
|
+
align-self: center;
|
10
|
+
width: $vd-loader-m;
|
11
|
+
height: $vd-loader-m;
|
12
|
+
border-radius: 50%;
|
13
|
+
border: $vd-loader-border solid vd-colour(do);
|
14
|
+
border-left-color: transparent;
|
15
|
+
@include vd-slow-rotate;
|
16
|
+
|
17
|
+
&.vd-loader--small {
|
18
|
+
width: $vd-loader-s;
|
19
|
+
height: $vd-loader-s;
|
20
|
+
}
|
21
|
+
|
22
|
+
.vd-btn & {
|
23
|
+
border-top-color: currentColor;
|
24
|
+
border-right-color: currentColor;
|
25
|
+
border-bottom-color: currentColor;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
.vd-btn {
|
30
|
+
.vd-loader--small {
|
31
|
+
margin: -3px 0 -3px 6px;
|
32
|
+
vertical-align: middle;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
.vd-loader--input {
|
37
|
+
position: absolute;
|
38
|
+
top: 50%;
|
39
|
+
right: $vd-i-bg-margin;
|
40
|
+
z-index: 0;
|
41
|
+
margin-top: -(($vd-loader-m / 2) + $vd-loader-border);
|
42
|
+
|
43
|
+
&.vd-loader--small {
|
44
|
+
margin-top: -(($vd-loader-s / 2) + $vd-loader-border);
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
// Defaults to right
|
49
|
+
.vd-i-bg {
|
50
|
+
position: absolute;
|
51
|
+
top: 50%;
|
52
|
+
right: $vd-i-bg-margin;
|
53
|
+
margin: auto;
|
54
|
+
transform: translate(0, -50%);
|
55
|
+
z-index: 0;
|
56
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
.vd-lozenge {
|
2
|
+
@include vd-text(body);
|
3
|
+
|
4
|
+
padding: 6px 10px;
|
5
|
+
color: vd-colour(supplementary--text);
|
6
|
+
background-color: vd-colour(framing);
|
7
|
+
border-radius: $vd-border-radius;
|
8
|
+
display: inline-block;
|
9
|
+
margin-right: vd-grid-unit(1);
|
10
|
+
margin-bottom: vd-grid-unit(1);
|
11
|
+
|
12
|
+
.vd-lozenge-label {
|
13
|
+
text-transform: capitalize;
|
14
|
+
}
|
15
|
+
|
16
|
+
.vd-lozenge-value {
|
17
|
+
font-weight: $vd-font-weight--bold;
|
18
|
+
}
|
19
|
+
|
20
|
+
.vd-lozenge-delete {
|
21
|
+
margin-left: 6px;
|
22
|
+
cursor: pointer;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
.vd-lozenge--interactive {
|
27
|
+
color: vd-colour(text-action);
|
28
|
+
|
29
|
+
background-color: vd-colour(supplementary);
|
30
|
+
}
|
31
|
+
|
32
|
+
.vd-lozenge--disabled {
|
33
|
+
@include disabled;
|
34
|
+
pointer-events: none;
|
35
|
+
}
|
36
|
+
|
37
|
+
.vd-lozenge--marked {
|
38
|
+
background-color: vd-colour(no);
|
39
|
+
color: vd-colour(text-action);
|
40
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@keyframes vd-lozenge-group-already-added {
|
2
|
+
from { transform: scale3d(1, 1, 1); }
|
3
|
+
10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
|
4
|
+
30%, 50%, 70%, 90% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg); }
|
5
|
+
40%, 60%, 80% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg); }
|
6
|
+
to { transform: scale3d(1, 1, 1); }
|
7
|
+
}
|
8
|
+
|
9
|
+
// Common styles for an input and selected lozenge group. See vd-tag-input and vd-autocomplete-multi.
|
10
|
+
.vd-lozenge-group {
|
11
|
+
display: flex;
|
12
|
+
flex-wrap: wrap;
|
13
|
+
align-items: center;
|
14
|
+
cursor: text;
|
15
|
+
|
16
|
+
@include vd-input-states();
|
17
|
+
|
18
|
+
.vd-lozenge {
|
19
|
+
margin-left: vd-grid-unit(1);
|
20
|
+
margin-top: vd-grid-unit(1);
|
21
|
+
margin-right: 0;
|
22
|
+
|
23
|
+
&.vd-lozenge-group-already-added {
|
24
|
+
animation-name: vd-lozenge-group-already-added;
|
25
|
+
animation-duration: 1s;
|
26
|
+
animation-fill-mode: both;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
.vd-lozenge-group-input {
|
31
|
+
@include vd-input-text();
|
32
|
+
@include vd-input-box-model();
|
33
|
+
background-color: transparent;
|
34
|
+
border: none;
|
35
|
+
flex-grow: 1;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
@@ -0,0 +1,39 @@
|
|
1
|
+
.vd-main-content-container {
|
2
|
+
box-sizing: border-box;
|
3
|
+
display: flex;
|
4
|
+
flex-flow: column;
|
5
|
+
flex-grow: 1;
|
6
|
+
// The content container needs a defined basis size of >1px so it will wrap under the top bar
|
7
|
+
flex-basis: 1px;
|
8
|
+
height: calc(100% - #{$vd-topbar-height});
|
9
|
+
|
10
|
+
&.vd-nav-rest-of-page {
|
11
|
+
height: 100%;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
// Adjust the height when the main content is embedded in iOS
|
16
|
+
.vd-main-content-container--wrapped {
|
17
|
+
height: 100%;
|
18
|
+
}
|
19
|
+
|
20
|
+
.vd-main-content-inner-container {
|
21
|
+
flex-grow: 1;
|
22
|
+
flex-basis: 0;
|
23
|
+
position: relative;
|
24
|
+
}
|
25
|
+
|
26
|
+
.vd-main-content {
|
27
|
+
position: absolute;
|
28
|
+
top: 0;
|
29
|
+
right: 0;
|
30
|
+
bottom: 0;
|
31
|
+
left: 0;
|
32
|
+
overflow: auto;
|
33
|
+
// Ensures that we can always scroll overflow on iOS even when the content that is overflow is an iframe
|
34
|
+
-webkit-overflow-scrolling: touch;
|
35
|
+
|
36
|
+
@media print {
|
37
|
+
overflow: visible;
|
38
|
+
}
|
39
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
$vd-multiselect-popover-input-icon-padding: vd-grid-unit(6);
|
2
|
+
|
3
|
+
.vd-multiselect-popover-input {
|
4
|
+
cursor: pointer;
|
5
|
+
}
|
6
|
+
|
7
|
+
.vd-multiselect-popover-container {
|
8
|
+
display: block;
|
9
|
+
|
10
|
+
.vd-input-icon {
|
11
|
+
padding-right: $vd-multiselect-popover-input-icon-padding;
|
12
|
+
color: vd-colour(text);
|
13
|
+
}
|
14
|
+
|
15
|
+
@include vd-input-error-selectors () {
|
16
|
+
.vd-multiselect-popover-input {
|
17
|
+
@include vd-input-error-styles();
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
.vd-multiselect-popover-content-container {
|
23
|
+
max-width: $vd-field-short-max-width;
|
24
|
+
|
25
|
+
.vd-checkbox-input-container {
|
26
|
+
align-items: flex-start;
|
27
|
+
}
|
28
|
+
|
29
|
+
.vd-popover-list-item {
|
30
|
+
cursor: pointer;
|
31
|
+
}
|
32
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
.vd-nav-item {
|
2
|
+
box-sizing: border-box;
|
3
|
+
height: 100%;
|
4
|
+
}
|
5
|
+
|
6
|
+
.vd-nav-item-action {
|
7
|
+
display: flex;
|
8
|
+
align-items: center;
|
9
|
+
|
10
|
+
box-sizing: border-box;
|
11
|
+
width: 100%;
|
12
|
+
height: 100%;
|
13
|
+
|
14
|
+
color: inherit;
|
15
|
+
|
16
|
+
// Overrides any base anchor styles
|
17
|
+
&:active,
|
18
|
+
&:focus,
|
19
|
+
&:hover {
|
20
|
+
color: inherit;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
.vd-nav-item--disabled {
|
25
|
+
cursor: not-allowed;
|
26
|
+
|
27
|
+
.vd-nav-item-action {
|
28
|
+
pointer-events: none;
|
29
|
+
}
|
30
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
.vd-next-stepper {
|
2
|
+
display: block;
|
3
|
+
padding: vd-grid-unit(6);
|
4
|
+
background-color: vd-colour(box);
|
5
|
+
border: vd-border(framing);
|
6
|
+
|
7
|
+
&.vd-next-stepper--on-box {
|
8
|
+
background-color: vd-colour(background);
|
9
|
+
border-color: transparent;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
.vd-next-stepper-label {
|
14
|
+
white-space: nowrap;
|
15
|
+
font-weight: bold;
|
16
|
+
margin-right: vd-grid-unit(1);
|
17
|
+
}
|
18
|
+
|
19
|
+
.vd-next-stepper-summary {
|
20
|
+
display: flex;
|
21
|
+
justify-content: space-between;
|
22
|
+
}
|
23
|
+
|
24
|
+
.vd-next-stepper-header {
|
25
|
+
flex-basis: 100%;
|
26
|
+
padding-right: vd-grid-unit(2);
|
27
|
+
}
|
28
|
+
|
29
|
+
.vd-next-stepper-details {
|
30
|
+
display: flex;
|
31
|
+
flex-direction: column;
|
32
|
+
border-top: vd-border(keyline);
|
33
|
+
margin-top: vd-grid-unit(2);
|
34
|
+
padding-top: vd-grid-unit(2);
|
35
|
+
}
|
36
|
+
|
37
|
+
.vd-next-stepper-confirm {
|
38
|
+
margin: vd-grid-unit(2) 0 0;
|
39
|
+
align-self: flex-end;
|
40
|
+
}
|
41
|
+
|
42
|
+
.vd-next-stepper-why {
|
43
|
+
white-space: nowrap;
|
44
|
+
}
|
45
|
+
|
46
|
+
.vd-next-stepper-dott {
|
47
|
+
margin-right: vd-grid-unit(6);
|
48
|
+
}
|
49
|
+
|
50
|
+
@include vd-viewport-media-max (xsmall) {
|
51
|
+
.vd-next-stepper-summary {
|
52
|
+
flex-direction: column;
|
53
|
+
}
|
54
|
+
|
55
|
+
.vd-next-stepper-header {
|
56
|
+
padding: 0 0 vd-grid-unit(2) 0;
|
57
|
+
}
|
58
|
+
|
59
|
+
.vd-next-stepper-why {
|
60
|
+
align-self: flex-end;
|
61
|
+
}
|
62
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
$vd-colour-overlay: vd-colour(overlay);
|
@@ -0,0 +1,19 @@
|
|
1
|
+
.vd-overlay {
|
2
|
+
position: fixed;
|
3
|
+
width: 100%;
|
4
|
+
height: 100%;
|
5
|
+
left: 0;
|
6
|
+
top: 0;
|
7
|
+
visibility: hidden;
|
8
|
+
transition-duration: 0.2s;
|
9
|
+
transition-timing-function: ease-in;
|
10
|
+
transition-property: background-color, visibility;
|
11
|
+
background-color: transparent;
|
12
|
+
pointer-events: none;
|
13
|
+
}
|
14
|
+
|
15
|
+
.vd-overlay--visible {
|
16
|
+
visibility: visible;
|
17
|
+
background-color: $vd-colour-overlay;
|
18
|
+
pointer-events: auto;
|
19
|
+
}
|
@@ -0,0 +1,180 @@
|
|
1
|
+
// Position the popover beak appropriately on the specified edge
|
2
|
+
@mixin position-popover-beak($edge: top, $offset: 50%, $box-shadow: none) {
|
3
|
+
$edge-index: index((top, right, bottom, left), $edge);
|
4
|
+
$opposite-edge: nth((bottom, left, top, right), $edge-index);
|
5
|
+
$next-edge: nth((right, bottom, left, top), $edge-index);
|
6
|
+
$direction: nth((left, top, left, top), $edge-index);
|
7
|
+
|
8
|
+
.vd-popover-beak {
|
9
|
+
#{$edge}: 0;
|
10
|
+
#{$direction}: $offset;
|
11
|
+
margin-#{$edge}: -$vd-popover-beak-size / 2;
|
12
|
+
margin-#{$direction}: -$vd-popover-beak-size / 2;
|
13
|
+
border-#{$next-edge}-color: transparent;
|
14
|
+
border-#{$opposite-edge}-color: transparent;
|
15
|
+
box-shadow: $box-shadow;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
.vd-popover-container {
|
20
|
+
@include vd-reset;
|
21
|
+
|
22
|
+
display: none;
|
23
|
+
position: relative;
|
24
|
+
z-index: $vd-popover-z-index;
|
25
|
+
outline: none;
|
26
|
+
|
27
|
+
&.vd-popover-tether-enabled {
|
28
|
+
display: inline-block;
|
29
|
+
}
|
30
|
+
|
31
|
+
&.vd-popover-tether-element-attached-top.vd-popover-tether-target-attached-bottom {
|
32
|
+
padding-top: $vd-popover-trigger-spacing;
|
33
|
+
@include position-popover-beak(top, $offset: $vd-popover-spacing, $box-shadow: none);
|
34
|
+
|
35
|
+
&.vd-popover-tether-element-attached-center .vd-popover-beak {
|
36
|
+
left: 50%;
|
37
|
+
}
|
38
|
+
|
39
|
+
&.vd-popover-tether-element-attached-right .vd-popover-beak {
|
40
|
+
left: auto;
|
41
|
+
right: $vd-popover-spacing;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
&.vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top {
|
46
|
+
padding-bottom: $vd-popover-trigger-spacing;
|
47
|
+
@include position-popover-beak(bottom, $offset: $vd-popover-spacing, $box-shadow: 3px 3px 5px vd-colour(shadow));
|
48
|
+
|
49
|
+
&.vd-popover-tether-element-attached-center .vd-popover-beak {
|
50
|
+
left: 50%;
|
51
|
+
}
|
52
|
+
|
53
|
+
&.vd-popover-tether-element-attached-right .vd-popover-beak {
|
54
|
+
left: auto;
|
55
|
+
right: $vd-popover-spacing;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
&.vd-popover-tether-element-attached-middle.vd-popover-tether-target-attached-middle {
|
60
|
+
&.vd-popover-tether-element-attached-right.vd-popover-tether-target-attached-left {
|
61
|
+
padding-right: $vd-popover-trigger-spacing;
|
62
|
+
@include position-popover-beak(right, $offset: 50%, $box-shadow: 3px 0 5px vd-colour(shadow));
|
63
|
+
}
|
64
|
+
|
65
|
+
&.vd-popover-tether-element-attached-left.vd-popover-tether-target-attached-right {
|
66
|
+
padding-left: $vd-popover-trigger-spacing;
|
67
|
+
@include position-popover-beak(left, $offset: 50%, $box-shadow: 3px 3px 5px vd-colour(shadow));
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
.vd-popover-container--inside-modal {
|
73
|
+
z-index: $vd-popover-inside-modal-z-index;
|
74
|
+
}
|
75
|
+
|
76
|
+
.vd-popover {
|
77
|
+
position: relative;
|
78
|
+
border: 1px solid vd-colour(framing);
|
79
|
+
border-radius: $vd-popover-border-radius;
|
80
|
+
box-shadow: $vd-box-shadow;
|
81
|
+
background-color: vd-colour(box);
|
82
|
+
|
83
|
+
.vd-popover-tether-pinned-bottom & {
|
84
|
+
margin-bottom: $vd-popover-beak-size;
|
85
|
+
}
|
86
|
+
|
87
|
+
.vd-popover-tether-pinned-top & {
|
88
|
+
margin-top: $vd-popover-beak-size;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
.vd-popover-content {
|
93
|
+
position: relative;
|
94
|
+
box-sizing: border-box;
|
95
|
+
border-radius: $vd-popover-border-radius;
|
96
|
+
background-color: vd-colour(box);
|
97
|
+
z-index: 1;
|
98
|
+
padding: $vd-popover-spacing;
|
99
|
+
|
100
|
+
// The 40px is the approximate distance between the middle of the triggering component and the start of the list
|
101
|
+
max-height: calc(50vh - 40px);
|
102
|
+
overflow-y: auto;
|
103
|
+
overflow-x: hidden;
|
104
|
+
}
|
105
|
+
|
106
|
+
.vd-popover-actions {
|
107
|
+
.vd-action-bar {
|
108
|
+
position: relative;
|
109
|
+
z-index: 1;
|
110
|
+
border-radius: 0 0 $vd-popover-border-radius $vd-popover-border-radius;
|
111
|
+
border: 1px solid transparent;
|
112
|
+
padding-left: $vd-popover-spacing;
|
113
|
+
padding-right: $vd-popover-spacing;
|
114
|
+
}
|
115
|
+
}
|
116
|
+
|
117
|
+
.vd-popover-beak {
|
118
|
+
box-sizing: border-box;
|
119
|
+
position: absolute;
|
120
|
+
height: $vd-popover-beak-size;
|
121
|
+
width: $vd-popover-beak-size;
|
122
|
+
background-color: vd-colour(box);
|
123
|
+
border: 1px solid vd-colour(framing);
|
124
|
+
transform: rotate(45deg);
|
125
|
+
|
126
|
+
// If there is a vd-action-bar present and the beak is at the bottom it should be the same colour as the action bar
|
127
|
+
.vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:not(:empty) ~ & {
|
128
|
+
background-color: $vd-action-bar-background-colour;
|
129
|
+
}
|
130
|
+
|
131
|
+
// Don't display the beak if the popover has been pinned to the edge of the scroll container as we can't guarantee
|
132
|
+
// the position of the trigger element and may end up pointing the beak at the wrong element.
|
133
|
+
.vd-popover-tether-pinned & {
|
134
|
+
display: none;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
.vd-popover-container--modal {
|
139
|
+
display: block;
|
140
|
+
|
141
|
+
.vd-popover {
|
142
|
+
display: flex;
|
143
|
+
flex-direction: column;
|
144
|
+
justify-content: space-between;
|
145
|
+
flex: 1;
|
146
|
+
border: none;
|
147
|
+
box-shadow: none;
|
148
|
+
}
|
149
|
+
|
150
|
+
.vd-dialog-container {
|
151
|
+
padding: 0;
|
152
|
+
}
|
153
|
+
|
154
|
+
.vd-dialog-content {
|
155
|
+
margin: 0;
|
156
|
+
padding: 0;
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
.vd-dialog-popover-container {
|
161
|
+
position: fixed;
|
162
|
+
top: 0;
|
163
|
+
bottom: 0;
|
164
|
+
left: 0;
|
165
|
+
right: 0;
|
166
|
+
z-index: $vd-popover-inside-modal-z-index;
|
167
|
+
}
|
168
|
+
|
169
|
+
.vd-popover-resize-detector {
|
170
|
+
position: absolute;
|
171
|
+
left: 0;
|
172
|
+
top: -100%;
|
173
|
+
width: 100%;
|
174
|
+
height: 100%;
|
175
|
+
margin: 1px 0 0;
|
176
|
+
border: none;
|
177
|
+
opacity: 0;
|
178
|
+
visibility: hidden;
|
179
|
+
pointer-events: none;
|
180
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
$vd-popover-list-spacing: vd-grid-unit(2);
|
2
|
+
$vd-popover-list-item-spacing: vd-grid-unit(4);
|
3
|
+
|
4
|
+
@mixin vd-popover-list-item ($_vd-popover-item-padding: $vd-popover-list-item-spacing $vd-popover-spacing) {
|
5
|
+
color: currentColor;
|
6
|
+
text-decoration: none;
|
7
|
+
transition-duration: $vd-time-s;
|
8
|
+
transition-property: color, background;
|
9
|
+
display: block;
|
10
|
+
padding: $_vd-popover-item-padding;
|
11
|
+
word-break: break-word;
|
12
|
+
|
13
|
+
&:hover {
|
14
|
+
text-decoration: none;
|
15
|
+
}
|
16
|
+
}
|
@@ -0,0 +1,128 @@
|
|
1
|
+
.vd-popover--with-list {
|
2
|
+
.vd-popover-content {
|
3
|
+
padding: 0;
|
4
|
+
display: flex;
|
5
|
+
flex-direction: column;
|
6
|
+
}
|
7
|
+
|
8
|
+
// @note It is important that the gap at the top/bottom of the list is implemented using padding as the implementation
|
9
|
+
// of overflow, scrolling, etc for autocomplete suggestions list relies on this
|
10
|
+
//
|
11
|
+
// If margin is used instead of padding, the incorrect height is calculated for the dropdown and it
|
12
|
+
// causes the dropdown to "flicker" direction
|
13
|
+
&.vd-popover-tether-element-attached-top.vd-popover-tether-target-attached-bottom {
|
14
|
+
.vd-popover-content {
|
15
|
+
padding-top: $vd-popover-list-spacing;
|
16
|
+
}
|
17
|
+
|
18
|
+
.vd-popover-list-empty,
|
19
|
+
.vd-popover-list-header {
|
20
|
+
padding-top: -$vd-popover-list-spacing;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
&.vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top {
|
25
|
+
.vd-popover-content {
|
26
|
+
padding-bottom: $vd-popover-list-spacing;
|
27
|
+
}
|
28
|
+
|
29
|
+
.vd-popover-list-empty {
|
30
|
+
padding-bottom: -$vd-popover-list-spacing;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
.vd-popover-list {
|
36
|
+
box-sizing: border-box;
|
37
|
+
list-style: none;
|
38
|
+
padding: 0;
|
39
|
+
margin: 0;
|
40
|
+
}
|
41
|
+
|
42
|
+
.vd-popover-list-group-header {
|
43
|
+
@include vd-popover-list-item();
|
44
|
+
@include vd-text(signpost);
|
45
|
+
position: relative;
|
46
|
+
|
47
|
+
&::after {
|
48
|
+
content: '';
|
49
|
+
border-bottom: vd-border(framing, 2px);
|
50
|
+
display: block;
|
51
|
+
position: absolute;
|
52
|
+
bottom: 0;
|
53
|
+
right: $vd-popover-spacing;
|
54
|
+
left: $vd-popover-spacing;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
.vd-popover-list-item {
|
59
|
+
@include vd-popover-list-item();
|
60
|
+
outline: none;
|
61
|
+
cursor: pointer;
|
62
|
+
|
63
|
+
&.vd-popover-list-item--active,
|
64
|
+
&:hover,
|
65
|
+
&:focus {
|
66
|
+
background-color: vd-colour(go-highlight);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
.vd-popover-list-item--disabled {
|
71
|
+
cursor: not-allowed;
|
72
|
+
}
|
73
|
+
.vd-popover-list-empty {
|
74
|
+
@include vd-popover-list-item($vd-popover-spacing);
|
75
|
+
}
|
76
|
+
|
77
|
+
.vd-popover-list-header {
|
78
|
+
position: relative;
|
79
|
+
|
80
|
+
&:empty {
|
81
|
+
display: none;
|
82
|
+
}
|
83
|
+
|
84
|
+
@include vd-popover-list-item();
|
85
|
+
}
|
86
|
+
|
87
|
+
.vd-popover-list-footer {
|
88
|
+
@include vd-popover-list-item();
|
89
|
+
}
|
90
|
+
|
91
|
+
.vd-popover-list-footer--full {
|
92
|
+
background-color: vd-colour(box);
|
93
|
+
border-top: vd-border(framing);
|
94
|
+
display: flex;
|
95
|
+
flex-direction: column;
|
96
|
+
min-height: 60px;
|
97
|
+
padding: 0;
|
98
|
+
}
|
99
|
+
|
100
|
+
.vd-popover-list-footer-action {
|
101
|
+
@include vd-text(label);
|
102
|
+
background-color: vd-colour(box);
|
103
|
+
border: 0;
|
104
|
+
color: vd-colour(do);
|
105
|
+
cursor: pointer;
|
106
|
+
flex: 1 0 100%;
|
107
|
+
font-family: $vd-font-lato;
|
108
|
+
outline: none;
|
109
|
+
padding: vd-spacer(2) $vd-popover-spacing;
|
110
|
+
text-align: left;
|
111
|
+
width: 100%;
|
112
|
+
|
113
|
+
@include vd-hover-when-supported {
|
114
|
+
&:hover {
|
115
|
+
background-color: vd-colour(go-highlight);
|
116
|
+
}
|
117
|
+
}
|
118
|
+
|
119
|
+
&:active, &:focus {
|
120
|
+
background-color: vd-colour(go-highlight);
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
.vd-popover-list-separator {
|
125
|
+
@extend .vd-hr;
|
126
|
+
margin: $vd-popover-list-spacing ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
|
127
|
+
width: inherit;
|
128
|
+
}
|