@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,74 @@
|
|
1
|
+
// =================================== Panel Buttons =================================== //
|
2
|
+
|
3
|
+
.vd-btn-panel {
|
4
|
+
@include vd-text(label);
|
5
|
+
|
6
|
+
align-items: center;
|
7
|
+
background-color: vd-colour(box);
|
8
|
+
border-radius: $vd-border-radius;
|
9
|
+
border: vd-border(framing, 2px);
|
10
|
+
box-sizing: border-box;
|
11
|
+
color: vd-colour(text);
|
12
|
+
cursor: pointer;
|
13
|
+
display: flex;
|
14
|
+
flex-direction: column;
|
15
|
+
flex-grow: 1;
|
16
|
+
font-family: $vd-font-lato;
|
17
|
+
justify-content: center;
|
18
|
+
margin-bottom: vd-grid-unit(2);
|
19
|
+
min-height: vd-grid-unit(30);
|
20
|
+
min-width: vd-grid-unit(30);
|
21
|
+
outline: none;
|
22
|
+
padding: vd-grid-unit(3) vd-grid-unit(5);
|
23
|
+
position: relative;
|
24
|
+
text-align: center;
|
25
|
+
|
26
|
+
transition-property: background, color, border, box-shadow;
|
27
|
+
transition: all $vd-time-s;
|
28
|
+
|
29
|
+
@include vd-btn-disabled();
|
30
|
+
|
31
|
+
&:focus {
|
32
|
+
border-color: vd-colour(go);
|
33
|
+
@include vd-btn-shadow(go);
|
34
|
+
}
|
35
|
+
|
36
|
+
&:hover {
|
37
|
+
border-color: vd-colour(go-lighter);
|
38
|
+
@include vd-btn-shadow(go);
|
39
|
+
}
|
40
|
+
|
41
|
+
&:active {
|
42
|
+
background-color: vd-rgba(vd-colour(box-rgb), 0.2);
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
// =================================== Selected Modifier =================================== //
|
47
|
+
|
48
|
+
.vd-btn-panel--selected {
|
49
|
+
border-color: vd-colour(do);
|
50
|
+
|
51
|
+
&:focus, &:hover {
|
52
|
+
border-color: vd-colour(do-lighter);
|
53
|
+
@include vd-btn-shadow(do);
|
54
|
+
}
|
55
|
+
|
56
|
+
&:active {
|
57
|
+
border-color: vd-colour(do-darker);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
// =================================== Panel Button Groups =================================== //
|
62
|
+
|
63
|
+
.vd-btn-panel-group {
|
64
|
+
flex-wrap: wrap;
|
65
|
+
display: flex;
|
66
|
+
|
67
|
+
> .vd-btn-panel {
|
68
|
+
margin: $vd-btn-group-margin;
|
69
|
+
}
|
70
|
+
|
71
|
+
@include vd-viewport-media-max(xsmall) {
|
72
|
+
min-width: 100%;
|
73
|
+
}
|
74
|
+
}
|
@@ -0,0 +1,112 @@
|
|
1
|
+
// =================================== Base Button =================================== //
|
2
|
+
|
3
|
+
.vd-btn {
|
4
|
+
@include vd-text(button);
|
5
|
+
|
6
|
+
border-radius: $vd-border-radius;
|
7
|
+
border: $vd-btn-stroke-width solid transparent;
|
8
|
+
box-sizing: border-box;
|
9
|
+
cursor: pointer;
|
10
|
+
display: inline-block;
|
11
|
+
font-family: $vd-font-lato;
|
12
|
+
padding: $vd-btn-padding;
|
13
|
+
position: relative;
|
14
|
+
text-align: center;
|
15
|
+
|
16
|
+
transition-property: background, color, border, box-shadow;
|
17
|
+
transition: all $vd-time-s;
|
18
|
+
|
19
|
+
&:not(.vd-btn--link) {
|
20
|
+
outline: none;
|
21
|
+
}
|
22
|
+
|
23
|
+
@include vd-btn-disabled();
|
24
|
+
}
|
25
|
+
|
26
|
+
// Disable click events for anchors using button classes
|
27
|
+
a.vd-btn {
|
28
|
+
&.disabled {
|
29
|
+
pointer-events: none;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
// =================================== Button Categories and Modifiers =================================== //
|
34
|
+
|
35
|
+
@each $name in $vd-btn-categories {
|
36
|
+
.vd-btn--#{$name} {
|
37
|
+
@include vd-btn($name);
|
38
|
+
}
|
39
|
+
|
40
|
+
.vd-btn--icon-#{$name} {
|
41
|
+
@include vd-btn-icon($name);
|
42
|
+
}
|
43
|
+
|
44
|
+
.vd-btn--text-#{$name} {
|
45
|
+
@include vd-btn-text($name);
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
// =================================== Link Buttons =================================== //
|
50
|
+
|
51
|
+
.vd-btn--link {
|
52
|
+
background: transparent;
|
53
|
+
border: 0;
|
54
|
+
color: inherit;
|
55
|
+
display: inline;
|
56
|
+
font-size: inherit;
|
57
|
+
font-weight: inherit;
|
58
|
+
padding: 0;
|
59
|
+
text-align: left;
|
60
|
+
text-decoration: underline;
|
61
|
+
|
62
|
+
&:hover, &:focus {
|
63
|
+
color: vd-colour(go);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
// =================================== Jumbo Buttons =================================== //
|
68
|
+
|
69
|
+
.vd-btn--jumbo {
|
70
|
+
@include vd-text(sub-heading);
|
71
|
+
padding: vd-grid-unit(4) vd-grid-unit(8);
|
72
|
+
}
|
73
|
+
|
74
|
+
// =================================== Full Width Buttons =================================== //
|
75
|
+
|
76
|
+
.vd-btn--block {
|
77
|
+
display: block;
|
78
|
+
width: 100%;
|
79
|
+
}
|
80
|
+
|
81
|
+
// =================================== Button Groups =================================== //
|
82
|
+
|
83
|
+
.vd-btn-group {
|
84
|
+
margin: -$vd-btn-group-margin;
|
85
|
+
|
86
|
+
> .vd-btn {
|
87
|
+
margin: $vd-btn-group-margin;
|
88
|
+
}
|
89
|
+
|
90
|
+
&.vd-btn-group--nowrap {
|
91
|
+
flex-wrap: nowrap;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
// =================================== Panel Buttons =================================== //
|
96
|
+
|
97
|
+
@import './vd-btn-panel';
|
98
|
+
|
99
|
+
// =================================== Misc =================================== //
|
100
|
+
|
101
|
+
/* When buttons are disabled they don't trigger onMouseOver / onMouseOut events but the event will bubble
|
102
|
+
up from child elements. `vd-btn-hover-assist` occupies all of the space within the button so mouse events are
|
103
|
+
consistently triggered. */
|
104
|
+
.vd-btn, .vd-tab-button {
|
105
|
+
&:disabled:hover > .vd-btn-hover-assist {
|
106
|
+
position: absolute;
|
107
|
+
top: 0;
|
108
|
+
right: 0;
|
109
|
+
bottom: 0;
|
110
|
+
left: 0;
|
111
|
+
}
|
112
|
+
}
|
@@ -0,0 +1,120 @@
|
|
1
|
+
vd-carousel { // stylelint-disable-line selector-type-no-unknown
|
2
|
+
display: flex;
|
3
|
+
flex-direction: column;
|
4
|
+
}
|
5
|
+
|
6
|
+
.vd-carousel-frame-container {
|
7
|
+
display: flex;
|
8
|
+
flex-direction: row;
|
9
|
+
justify-content: flex-start;
|
10
|
+
overflow: hidden;
|
11
|
+
flex: 1;
|
12
|
+
}
|
13
|
+
|
14
|
+
@keyframes vd-slide-in-left {
|
15
|
+
from {
|
16
|
+
transform: translateX(100%);
|
17
|
+
}
|
18
|
+
to {
|
19
|
+
transform: translateX(0);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
@keyframes vd-slide-out-left {
|
23
|
+
from {
|
24
|
+
transform: translateX(-100%);
|
25
|
+
}
|
26
|
+
to {
|
27
|
+
transform: translateX(-200%);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
@keyframes vd-slide-right {
|
31
|
+
from {
|
32
|
+
transform: translateX(-100%);
|
33
|
+
}
|
34
|
+
to {
|
35
|
+
transform: translateX(0);
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
vd-carousel-frame { // stylelint-disable-line selector-type-no-unknown
|
40
|
+
display: flex;
|
41
|
+
flex: 1 0 100%;
|
42
|
+
order: 2;
|
43
|
+
visibility: hidden;
|
44
|
+
max-width: 100%;
|
45
|
+
|
46
|
+
animation-duration: 0.5s;
|
47
|
+
animation-timing-function: ease-in-out;
|
48
|
+
}
|
49
|
+
|
50
|
+
.vd-carousel-frame-content {
|
51
|
+
flex: 1 1 0;
|
52
|
+
max-width: 100%;
|
53
|
+
}
|
54
|
+
|
55
|
+
.vd-carousel-frame-transition-left,
|
56
|
+
.vd-carousel-frame-transition-right {
|
57
|
+
visibility: visible;
|
58
|
+
order: 1;
|
59
|
+
}
|
60
|
+
|
61
|
+
.vd-carousel-frame-active {
|
62
|
+
visibility: visible;
|
63
|
+
order: 0;
|
64
|
+
|
65
|
+
&.vd-carousel-frame-transition-left {
|
66
|
+
animation-name: vd-slide-in-left;
|
67
|
+
}
|
68
|
+
|
69
|
+
&.vd-carousel-frame-transition-right {
|
70
|
+
animation-name: vd-slide-right;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
.vd-carousel-frame-transition-left:not(.vd-carousel-frame-active) {
|
75
|
+
animation-name: vd-slide-out-left;
|
76
|
+
}
|
77
|
+
|
78
|
+
.vd-carousel-frame-transition-right:not(.vd-carousel-frame-active) {
|
79
|
+
animation-name: vd-slide-right;
|
80
|
+
}
|
81
|
+
|
82
|
+
.vd-carousel-paginator {
|
83
|
+
display: flex;
|
84
|
+
flex-direction: row;
|
85
|
+
justify-content: space-between;
|
86
|
+
background-color: vd-colour(box);
|
87
|
+
height: 72px;
|
88
|
+
}
|
89
|
+
|
90
|
+
.vd-carousel-paginator-paddle {
|
91
|
+
width: 45px;
|
92
|
+
font-size: 18px;
|
93
|
+
}
|
94
|
+
|
95
|
+
.vd-carousel-paginator-indicators {
|
96
|
+
display: flex;
|
97
|
+
justify-content: center;
|
98
|
+
align-items: center;
|
99
|
+
}
|
100
|
+
|
101
|
+
.vd-carousel-paginator-indicator {
|
102
|
+
display: inline-flex;
|
103
|
+
justify-content: center;
|
104
|
+
align-items: center;
|
105
|
+
width: 24px;
|
106
|
+
height: 24px;
|
107
|
+
|
108
|
+
&::before {
|
109
|
+
content: '';
|
110
|
+
display: inline-block;
|
111
|
+
width: 8px;
|
112
|
+
height: 8px;
|
113
|
+
border-radius: 50%;
|
114
|
+
background-color: vd-colour(keyline);
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
.vd-carousel-paginator-indicator--active::before {
|
119
|
+
background-color: vd-colour(do);
|
120
|
+
}
|
@@ -0,0 +1,158 @@
|
|
1
|
+
@keyframes vd-checkbox-checked {
|
2
|
+
0% { height: 0; width: 0; }
|
3
|
+
25% { height: 0; width: $vd-checkbox-tick-width; }
|
4
|
+
50% { height: $vd-checkbox-tick-height; width: $vd-checkbox-tick-width; }
|
5
|
+
}
|
6
|
+
|
7
|
+
/* label-only-checkbox is for when only the checkbox and label should respond to onlick. Not the description aswell. */
|
8
|
+
|
9
|
+
.vd-checkbox {
|
10
|
+
display: inline-block;
|
11
|
+
position: relative;
|
12
|
+
margin: 0 vd-grid-unit(2);
|
13
|
+
|
14
|
+
&:first-child { margin-left: 0 }
|
15
|
+
&:last-child { margin-right: 0 }
|
16
|
+
}
|
17
|
+
|
18
|
+
.vd-label-only-checkbox {
|
19
|
+
display: inline-block;
|
20
|
+
}
|
21
|
+
|
22
|
+
.vd-checkbox-container {
|
23
|
+
margin-bottom: $vd-checkbox-spacing;
|
24
|
+
display: flex;
|
25
|
+
align-items: flex-start;
|
26
|
+
flex-direction: column;
|
27
|
+
cursor: pointer;
|
28
|
+
|
29
|
+
&:last-child { margin-bottom: 0 }
|
30
|
+
}
|
31
|
+
|
32
|
+
.vd-label-only-checkbox-container{
|
33
|
+
display: flex;
|
34
|
+
}
|
35
|
+
|
36
|
+
.vd-checkbox-input-container {
|
37
|
+
display: flex;
|
38
|
+
align-items: center;
|
39
|
+
}
|
40
|
+
|
41
|
+
.vd-label-only-checkbox-input-container {
|
42
|
+
display: flex;
|
43
|
+
position: relative;
|
44
|
+
align-items: flex-start;
|
45
|
+
flex-direction: row;
|
46
|
+
cursor: pointer;
|
47
|
+
}
|
48
|
+
|
49
|
+
.vd-checkbox-label { margin-left: $vd-checkbox-spacing; }
|
50
|
+
|
51
|
+
.vd-label-only-checkbox-label {
|
52
|
+
margin: auto 0 auto $vd-checkbox-spacing;
|
53
|
+
}
|
54
|
+
|
55
|
+
.vd-checkbox-description {
|
56
|
+
@include vd-text(supplementary);
|
57
|
+
margin-top: vd-grid-unit(1);
|
58
|
+
margin-left: $vd-checkbox-length + $vd-checkbox-spacing;
|
59
|
+
}
|
60
|
+
|
61
|
+
.vd-checkbox-input { @extend %vd-invisible-checkbox-input; }
|
62
|
+
|
63
|
+
.vd-checkbox-tick {
|
64
|
+
flex-shrink: 0;
|
65
|
+
position: relative;
|
66
|
+
height: $vd-checkbox-length;
|
67
|
+
width: $vd-checkbox-length;
|
68
|
+
background-color: vd-colour(box);
|
69
|
+
border: vd-border(framing);
|
70
|
+
border-radius: $vd-border-radius;
|
71
|
+
box-sizing: border-box;
|
72
|
+
|
73
|
+
&:after {
|
74
|
+
content: '';
|
75
|
+
box-sizing: content-box;
|
76
|
+
display: block;
|
77
|
+
position: absolute;
|
78
|
+
border-right: vd-border(framing, $vd-checkbox-tick-thickness);
|
79
|
+
border-top: vd-border(framing, $vd-checkbox-tick-thickness);
|
80
|
+
border-color: vd-colour(framing);
|
81
|
+
transform: scaleX(-1) rotate(180deg + -45deg);
|
82
|
+
transform-origin: left top;
|
83
|
+
height: $vd-checkbox-tick-height;
|
84
|
+
width: $vd-checkbox-tick-width;
|
85
|
+
top: 11px;
|
86
|
+
left: 2px;
|
87
|
+
opacity: 0;
|
88
|
+
transition: opacity $vd-time-s;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
.vd-checkbox-input:hover + .vd-checkbox-tick:after {
|
93
|
+
opacity: 1;
|
94
|
+
}
|
95
|
+
|
96
|
+
// Checked
|
97
|
+
.vd-checkbox-input:checked + .vd-checkbox-tick {
|
98
|
+
transition: background-color $vd-time-l;
|
99
|
+
background-color: vd-colour(do);
|
100
|
+
border-color: vd-colour(do);
|
101
|
+
|
102
|
+
&:after {
|
103
|
+
opacity: 1;
|
104
|
+
animation: vd-checkbox-checked $vd-time-l;
|
105
|
+
border-color: vd-colour(text-action);
|
106
|
+
box-sizing: content-box;
|
107
|
+
backface-visibility: hidden;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
// Disabled state
|
112
|
+
.vd-disabled .vd-checkbox-input,
|
113
|
+
.vd-checkbox-input:disabled {
|
114
|
+
cursor: not-allowed;
|
115
|
+
filter: grayscale(100%);
|
116
|
+
|
117
|
+
&:hover:not(:checked) + .vd-checkbox-tick:after { opacity: 0; }
|
118
|
+
|
119
|
+
~ .vd-checkbox-label {
|
120
|
+
opacity: $vd-opacity;
|
121
|
+
}
|
122
|
+
|
123
|
+
&:checked ~ .vd-checkbox-tick {
|
124
|
+
filter: grayscale(100%);
|
125
|
+
opacity: $vd-opacity;
|
126
|
+
}
|
127
|
+
}
|
128
|
+
|
129
|
+
// Mixed state
|
130
|
+
.vd-checkbox--mixed .vd-checkbox-tick {
|
131
|
+
border: 2px solid vd-colour(do);
|
132
|
+
}
|
133
|
+
|
134
|
+
.vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
|
135
|
+
background-color: vd-colour(do);
|
136
|
+
border: none;
|
137
|
+
top: 9px;
|
138
|
+
left: 6px;
|
139
|
+
width: 2px;
|
140
|
+
height: 8px;
|
141
|
+
opacity: 1;
|
142
|
+
transform: scaleX(-1) rotate(90deg);
|
143
|
+
}
|
144
|
+
|
145
|
+
// ReadOnly state
|
146
|
+
.vd-checkbox--readonly {
|
147
|
+
cursor: auto;
|
148
|
+
|
149
|
+
&.vd-checkbox--unselected {
|
150
|
+
filter: grayscale(100%);
|
151
|
+
opacity: $vd-opacity;
|
152
|
+
}
|
153
|
+
}
|
154
|
+
|
155
|
+
.vd-checkbox-icon {
|
156
|
+
width: $vd-checkbox-length;
|
157
|
+
height: $vd-checkbox-length;
|
158
|
+
}
|
@@ -0,0 +1,74 @@
|
|
1
|
+
// Date picker general
|
2
|
+
$vd-datepicker-font-size: 15px;
|
3
|
+
$vd-datepicker-button-colour: vd-colour(do);
|
4
|
+
$vd-datepicker-padding: 24px;
|
5
|
+
$vd-datepicker-background: vd-colour(box);
|
6
|
+
$vd-datepicker-border: vd-border(framing);
|
7
|
+
|
8
|
+
// Date picker no end date
|
9
|
+
$vd-datepicker-range-no-end-height: 32px;
|
10
|
+
|
11
|
+
// Table
|
12
|
+
$vd-datepicker-table-spacing: 10px;
|
13
|
+
$vd-datepicker-range-colour: vd-colour(do-highlight);
|
14
|
+
|
15
|
+
// Button
|
16
|
+
$vd-datepicker-button-radius: 50%;
|
17
|
+
$vd-datepicker-button-size: 30px;
|
18
|
+
|
19
|
+
// Button next / prev
|
20
|
+
$vd-datepicker-next-prev-button-width: 26px;
|
21
|
+
$vd-datepicker-next-prev-button-icon-size: 7px;
|
22
|
+
$vd-datepicker-next-prev-arrow-border-enabled: 3px solid vd-colour(text);
|
23
|
+
$vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
|
24
|
+
|
25
|
+
// Select
|
26
|
+
$vd-datepicker-select-horizontal-positioning: 29px;
|
27
|
+
$vd-datepicker-select-vertical-positioning: 15px;
|
28
|
+
|
29
|
+
// Select icon
|
30
|
+
$vd-datepicker-select-icon-position-top: 10px;
|
31
|
+
$vd-datepicker-select-icon-position-right-even: 37px;
|
32
|
+
$vd-datepicker-select-icon-position-right-odd: 110px;
|
33
|
+
$vd-datepicker-select-icon-border-width: 4px;
|
34
|
+
$vd-datepicker-select-arrow-border: 5px solid vd-colour(text);
|
35
|
+
|
36
|
+
// inputs
|
37
|
+
$vd-datepicker-data-inputs-width: 245px;
|
38
|
+
$vd-datepicker-date-input-border-radius: $vd-border-radius 0 0 $vd-border-radius;
|
39
|
+
$vd-datepicker-time-input-border-radius: 0 $vd-border-radius $vd-border-radius 0;
|
40
|
+
|
41
|
+
// Mixins
|
42
|
+
@mixin next-prev-arrow-common {
|
43
|
+
content: " ";
|
44
|
+
visibility: visible;
|
45
|
+
position: absolute;
|
46
|
+
width: $vd-datepicker-next-prev-button-icon-size;
|
47
|
+
height: $vd-datepicker-next-prev-button-icon-size;
|
48
|
+
border-right: $vd-datepicker-next-prev-arrow-border-enabled;
|
49
|
+
border-top: $vd-datepicker-next-prev-arrow-border-enabled;
|
50
|
+
box-sizing: initial;
|
51
|
+
}
|
52
|
+
|
53
|
+
@mixin next-prev-arrow-common--disabled {
|
54
|
+
border-right: $vd-datepicker-next-prev-arrow-border-disabled;
|
55
|
+
border-top: $vd-datepicker-next-prev-arrow-border-disabled;
|
56
|
+
}
|
57
|
+
|
58
|
+
@mixin vd-datepicker-select-common {
|
59
|
+
top: -$vd-datepicker-select-vertical-positioning;
|
60
|
+
position: absolute;
|
61
|
+
background: $vd-datepicker-background;
|
62
|
+
}
|
63
|
+
|
64
|
+
@mixin vd-datepicker-select-arrow-common {
|
65
|
+
position: absolute;
|
66
|
+
content: " ";
|
67
|
+
pointer-events: none;
|
68
|
+
visibility: visible;
|
69
|
+
width: 0;
|
70
|
+
height: 0;
|
71
|
+
border-left: $vd-datepicker-select-icon-border-width solid transparent;
|
72
|
+
border-right: $vd-datepicker-select-icon-border-width solid transparent;
|
73
|
+
z-index: $vd-z-index-content-base;
|
74
|
+
}
|