@lightspeed/design-system-css 1.1.1 → 1.2.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -1
- package/dist/index.css +383 -240
- package/dist/index.css.map +1 -1
- package/dist/vend-styles.css +383 -240
- package/package.json +1 -34
- package/src/images-ui/images-ui-ns.scss +1 -1
- package/src/vend-stylelint/use-colour-function.js +25 -22
- package/src/vend-styles/components/BarChart/BarChart.scss +9 -9
- package/src/vend-styles/components/CodeInput/CodeInput.scss +0 -1
- package/src/vend-styles/components/DatePicker/DatePicker.scss +3 -11
- package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +1 -1
- package/src/vend-styles/components/LineChart/LineChart.scss +5 -4
- package/src/vend-styles/components/Modal/Modal.scss +25 -12
- package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -2
- package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
- package/src/vend-styles/components/TableList/TableList.scss +5 -1
- package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +1 -6
- package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +15 -7
- package/src/vend.ui/behaviours/vd-align/vd-align.scss +9 -3
- package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +4 -3
- package/src/vend.ui/components/vd-avatar/vd-avatar.scss +7 -7
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
- package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -1
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +7 -3
- package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +5 -1
- package/src/vend.ui/components/vd-banner/vd-banner.scss +8 -4
- package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
- package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +15 -15
- package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +4 -3
- package/src/vend.ui/components/vd-btn/vd-btn.scss +11 -9
- package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -2
- package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +33 -12
- package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +2 -2
- package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +16 -6
- package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +3 -1
- package/src/vend.ui/components/vd-dialog/vd-dialog.scss +13 -13
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
- package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +1 -1
- package/src/vend.ui/components/vd-dott/vd-dott.scss +5 -4
- package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +1 -1
- package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -2
- package/src/vend.ui/components/vd-flex/vd-flex.scss +39 -13
- package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +2 -2
- package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +0 -2
- package/src/vend.ui/components/vd-input/vd-input-ns.scss +19 -12
- package/src/vend.ui/components/vd-input/vd-input.scss +12 -4
- package/src/vend.ui/components/vd-link/vd-link.scss +12 -4
- package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
- package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +22 -7
- package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
- package/src/vend.ui/components/vd-nav-divider/vd-nav-divider.scss +14 -0
- package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +1 -1
- package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
- package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
- package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
- package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
- package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
- package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
- package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
- package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
- package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
- package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
- package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
- package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
- package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
- package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
- package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +95 -0
- package/src/vend.ui/components/vd-sidebar/vd-sidebar-ns.scss +23 -0
- package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +113 -0
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +4 -4
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +5 -2
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +12 -3
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +42 -27
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
- package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
- package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
- package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
- package/src/vend.ui/components/vd-topbar/vd-topbar.scss +2 -2
- package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
- package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
- package/src/vend.ui/styles/global/_grid.scss +5 -5
- package/src/vend.ui/styles/global/_layout.scss +2 -2
- package/src/vend.ui/styles/global/_non-styles.scss +1 -0
- package/src/vend.ui/styles/global/_normalise.scss +8 -1
- package/src/vend.ui/styles/global/_z-index.scss +0 -8
- package/src/vend.ui/styles/global/colour/_base.scss +8 -13
- package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
- package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
- package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
- package/src/vend.ui/styles/global/effects/_effects.scss +51 -6
- package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
- package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
- package/src/vend.ui/styles/global/text/_base.scss +1 -1
- package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
- package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
- package/src/vend.ui/styles/global/text/_text.scss +2 -2
- package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
- package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
- package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
- package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
- package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
- package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
- package/src/vend.ui/styles/navi/_nv-topnav.scss +5 -4
- package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
- package/src/vend.ui/styles/navi/navi.scss +8 -9
- package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
- package/src/vend.ui/styles/navi/non-styles/_variables.scss +0 -11
- package/src/vend.ui/styles/vend-ui.scss +2 -0
- package/CHANGELOG.md +0 -180
- package/src/vend.ui/styles/navi/_nv-sidenav.scss +0 -143
package/package.json
CHANGED
@@ -1,34 +1 @@
|
|
1
|
-
{
|
2
|
-
"name": "@lightspeed/design-system-css",
|
3
|
-
"version": "1.1.1",
|
4
|
-
"description": "Lightspeed's Design System in CSS",
|
5
|
-
"author": "Lightspeed Commerce Inc.",
|
6
|
-
"license": "SEE LICENSE IN LICENSE.md",
|
7
|
-
"main": "dist/index.css",
|
8
|
-
"publishConfig": {
|
9
|
-
"access": "public"
|
10
|
-
},
|
11
|
-
"files": [
|
12
|
-
"src",
|
13
|
-
"dist"
|
14
|
-
],
|
15
|
-
"scripts": {
|
16
|
-
"prebuild": "rm -rf dist",
|
17
|
-
"build": "yarn lint && yarn build:css && yarn build:retrocompatibility",
|
18
|
-
"build:css": "sass --load-path=../../node_modules -q src/index.scss:dist/index.css",
|
19
|
-
"build:retrocompatibility": "cp dist/index.css dist/vend-styles.css",
|
20
|
-
"build:watch": "yarn lint && yarn build:css --watch",
|
21
|
-
"test": "true",
|
22
|
-
"lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
|
23
|
-
},
|
24
|
-
"dependencies": {
|
25
|
-
"@lightspeed/design-system-tokens": "^1.0.0"
|
26
|
-
},
|
27
|
-
"devDependencies": {
|
28
|
-
"@types/node": "^16.11.2",
|
29
|
-
"sass": "~1.45.2",
|
30
|
-
"stylelint": "^13.5.0",
|
31
|
-
"stylelint-scss": "^3.17.2",
|
32
|
-
"ts-node": "^10.3.1"
|
33
|
-
}
|
34
|
-
}
|
1
|
+
{"name":"@lightspeed/design-system-css","version":"1.2.1","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^1.1.0"},"devDependencies":{"@types/node":"^16.11.2","sass":"~1.45.2","stylelint":"^13.5.0","stylelint-scss":"^3.17.2","ts-node":"^10.3.1"}}
|
@@ -1 +1 @@
|
|
1
|
-
$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/'
|
1
|
+
$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/';
|
@@ -1,23 +1,26 @@
|
|
1
|
-
|
2
|
-
const
|
1
|
+
/* eslint-disable func-names */
|
2
|
+
const stylelint = require('stylelint');
|
3
3
|
|
4
|
-
const
|
4
|
+
const ruleName = 'vend/use-colour-function';
|
5
|
+
|
6
|
+
const message = '[VEND] Use the vd-colour SASS function when defining a colour.';
|
5
7
|
const messages = stylelint.utils.ruleMessages(ruleName, {
|
6
8
|
expected() {
|
7
|
-
return message
|
9
|
+
return message;
|
8
10
|
},
|
9
|
-
})
|
11
|
+
});
|
10
12
|
|
11
|
-
module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
13
|
+
module.exports = stylelint.createPlugin(ruleName, function (enabled) {
|
12
14
|
if (!enabled) {
|
13
|
-
return
|
15
|
+
return;
|
14
16
|
}
|
15
17
|
|
16
18
|
// Matches hex, 'rgb', (not -rgb, ignores vend sass functions and values that are prefixed with -) and hsl colours; 'named' colours are
|
17
19
|
// prohibited via the `color-named` rule
|
18
|
-
const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}
|
20
|
+
const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}$/;
|
19
21
|
|
20
|
-
|
22
|
+
// eslint-disable-next-line consistent-return
|
23
|
+
return function (root, result) {
|
21
24
|
// Ensure no named colours are used
|
22
25
|
stylelint.utils.checkAgainstRule(
|
23
26
|
{
|
@@ -25,7 +28,7 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
|
25
28
|
ruleSettings: ['never'],
|
26
29
|
root,
|
27
30
|
},
|
28
|
-
warning => {
|
31
|
+
(warning) => {
|
29
32
|
stylelint.utils.report({
|
30
33
|
message,
|
31
34
|
ruleName,
|
@@ -33,16 +36,16 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
|
33
36
|
node: warning.node,
|
34
37
|
line: warning.line,
|
35
38
|
column: warning.column,
|
36
|
-
})
|
39
|
+
});
|
37
40
|
}
|
38
|
-
)
|
41
|
+
);
|
39
42
|
|
40
|
-
root.walkDecls(function(decl) {
|
41
|
-
const { value, prop } = decl
|
42
|
-
const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER)
|
43
|
+
root.walkDecls(function (decl) {
|
44
|
+
const { value, prop } = decl;
|
45
|
+
const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER);
|
43
46
|
|
44
47
|
if (!isUnsupportedColourValue) {
|
45
|
-
return
|
48
|
+
return;
|
46
49
|
}
|
47
50
|
|
48
51
|
stylelint.utils.report({
|
@@ -51,10 +54,10 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
|
51
54
|
message: messages.expected(`${prop}, ${value}`),
|
52
55
|
node: decl,
|
53
56
|
word: value,
|
54
|
-
})
|
55
|
-
})
|
56
|
-
}
|
57
|
-
})
|
57
|
+
});
|
58
|
+
});
|
59
|
+
};
|
60
|
+
});
|
58
61
|
|
59
|
-
module.exports.ruleName = ruleName
|
60
|
-
module.exports.messages = messages
|
62
|
+
module.exports.ruleName = ruleName;
|
63
|
+
module.exports.messages = messages;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
/* stylelint-disable vend/use-colour-function */
|
2
|
-
$bar-chart-background-fill: #
|
3
|
-
$bar-chart-primary-text-color: #
|
2
|
+
$bar-chart-background-fill: #f2f2f2;
|
3
|
+
$bar-chart-primary-text-color: #76a27b;
|
4
4
|
$bar-chart-secondary-text-color: #959595;
|
5
|
-
$chart-fill: #
|
6
|
-
$chart-line: #
|
5
|
+
$chart-fill: #009d12;
|
6
|
+
$chart-line: #009d12;
|
7
7
|
/* stylelint-enable vend/use-colour-function */
|
8
8
|
|
9
9
|
$bar-chart-primary-text-size: 14px;
|
@@ -12,7 +12,7 @@ $bar-chart-secondary-text-size: 13px;
|
|
12
12
|
.vd-bar-chart-container {
|
13
13
|
font-size: 11px;
|
14
14
|
|
15
|
-
.y.axis .domain{
|
15
|
+
.y.axis .domain {
|
16
16
|
stroke: none;
|
17
17
|
display: none;
|
18
18
|
}
|
@@ -21,20 +21,20 @@ $bar-chart-secondary-text-size: 13px;
|
|
21
21
|
display: none;
|
22
22
|
}
|
23
23
|
|
24
|
-
.y.axis text{
|
24
|
+
.y.axis text {
|
25
25
|
font-size: $bar-chart-primary-text-size;
|
26
26
|
fill: $bar-chart-primary-text-color;
|
27
27
|
}
|
28
28
|
|
29
|
-
.bar{
|
29
|
+
.bar {
|
30
30
|
fill: $chart-fill;
|
31
31
|
opacity: 0.15;
|
32
32
|
}
|
33
|
-
.top{
|
33
|
+
.top {
|
34
34
|
fill: $chart-line;
|
35
35
|
}
|
36
36
|
|
37
|
-
.bar-label{
|
37
|
+
.bar-label {
|
38
38
|
font-size: $bar-chart-secondary-text-size;
|
39
39
|
fill: $bar-chart-secondary-text-color;
|
40
40
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
@use
|
1
|
+
@use 'sass:math';
|
2
2
|
|
3
3
|
@import '../../../vend.ui/styles/global/non-styles';
|
4
4
|
@import './DatePicker-ns';
|
@@ -213,19 +213,11 @@
|
|
213
213
|
}
|
214
214
|
|
215
215
|
.react-datepicker__day--range-start {
|
216
|
-
background-image: linear-gradient(
|
217
|
-
to right,
|
218
|
-
transparent 50%,
|
219
|
-
$vd-datepicker-range-colour 50%
|
220
|
-
);
|
216
|
+
background-image: linear-gradient(to right, transparent 50%, $vd-datepicker-range-colour 50%);
|
221
217
|
}
|
222
218
|
|
223
219
|
.react-datepicker__day--range-end {
|
224
|
-
background-image: linear-gradient(
|
225
|
-
to right,
|
226
|
-
$vd-datepicker-range-colour 50%,
|
227
|
-
transparent 50%
|
228
|
-
);
|
220
|
+
background-image: linear-gradient(to right, $vd-datepicker-range-colour 50%, transparent 50%);
|
229
221
|
}
|
230
222
|
|
231
223
|
// If the start and end date are the same, don't show the gradient
|
@@ -21,7 +21,7 @@ $vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
|
|
21
21
|
|
22
22
|
// Mixins
|
23
23
|
@mixin next-prev-arrow-common {
|
24
|
-
content:
|
24
|
+
content: ' ';
|
25
25
|
visibility: visible;
|
26
26
|
position: absolute;
|
27
27
|
width: $vd-datepicker-next-prev-button-icon-size;
|
@@ -3,13 +3,14 @@
|
|
3
3
|
/* stylelint-disable vend/use-colour-function */
|
4
4
|
// Should review at some point if it is possible to replace this with a standard colour
|
5
5
|
// or if we need to add this to standard colour
|
6
|
-
$chart-fill: #
|
6
|
+
$chart-fill: #009d12;
|
7
7
|
$chart-bg: #fafafa;
|
8
8
|
/* stylelint-enable vend/use-colour-function */
|
9
9
|
|
10
|
-
|
11
10
|
.vd-line-graph-container {
|
12
|
-
.vd-grid.vd-y,
|
11
|
+
.vd-grid.vd-y,
|
12
|
+
.vd-axis.vd-y,
|
13
|
+
.vd-axis.vd-x {
|
13
14
|
.domain {
|
14
15
|
display: none;
|
15
16
|
}
|
@@ -22,7 +23,7 @@ $chart-bg: #fafafa;
|
|
22
23
|
}
|
23
24
|
|
24
25
|
.vd-grid.vd-grid-filled {
|
25
|
-
stroke-dasharray: 4,2;
|
26
|
+
stroke-dasharray: 4, 2;
|
26
27
|
}
|
27
28
|
|
28
29
|
.vd-grid-background {
|
@@ -19,13 +19,13 @@
|
|
19
19
|
outline: none;
|
20
20
|
}
|
21
21
|
|
22
|
-
@include vd-viewport-media-max
|
22
|
+
@include vd-viewport-media-max(small) {
|
23
23
|
max-width: none;
|
24
24
|
width: 100%;
|
25
25
|
margin-top: $vd-dialog-container-top-offset;
|
26
26
|
}
|
27
27
|
|
28
|
-
@include vd-viewport-media-max
|
28
|
+
@include vd-viewport-media-max(xsmall) {
|
29
29
|
max-height: none;
|
30
30
|
height: calc(100% - #{$vd-dialog-container-top-offset});
|
31
31
|
|
@@ -43,7 +43,7 @@
|
|
43
43
|
}
|
44
44
|
|
45
45
|
@each $_vd-modal-size in $vd-modal-sizes {
|
46
|
-
@include vd-viewport-media-min
|
46
|
+
@include vd-viewport-media-min($vd-breakpoint-medium) {
|
47
47
|
.vd-modal--size-#{nth($_vd-modal-size, 1)} {
|
48
48
|
max-width: nth($_vd-modal-size, 2);
|
49
49
|
}
|
@@ -57,7 +57,7 @@
|
|
57
57
|
min-height: $vd-dialog-container-min-height;
|
58
58
|
max-height: calc(95vh - #{$vd-dialog-container-top-offset});
|
59
59
|
|
60
|
-
@include vd-viewport-media-max
|
60
|
+
@include vd-viewport-media-max(xsmall) {
|
61
61
|
max-height: 95%;
|
62
62
|
}
|
63
63
|
|
@@ -65,7 +65,10 @@
|
|
65
65
|
width: 100%;
|
66
66
|
}
|
67
67
|
|
68
|
-
.vd-breadcrumb,
|
68
|
+
.vd-breadcrumb,
|
69
|
+
.vd-dialog-header,
|
70
|
+
.vd-modal-container:not(.vd-modal--size-full-screen) & .vd-modal-content,
|
71
|
+
.vd-dialog-actions {
|
69
72
|
margin-left: var(--vd-dialog-spacing);
|
70
73
|
margin-right: var(--vd-dialog-spacing);
|
71
74
|
|
@@ -74,12 +77,14 @@
|
|
74
77
|
}
|
75
78
|
|
76
79
|
&:last-child {
|
77
|
-
margin-bottom: var(--vd-dialog-spacing)
|
80
|
+
margin-bottom: var(--vd-dialog-spacing);
|
78
81
|
}
|
79
82
|
}
|
80
83
|
|
81
84
|
.vd-breadcrumb {
|
82
|
-
& + .vd-dialog-header,
|
85
|
+
& + .vd-dialog-header,
|
86
|
+
& + .vd-modal-content,
|
87
|
+
& + .vd-dialog-actions {
|
83
88
|
margin-top: vd-grid-unit(4);
|
84
89
|
}
|
85
90
|
}
|
@@ -97,7 +102,9 @@
|
|
97
102
|
.vd-modal-banner {
|
98
103
|
width: 100%;
|
99
104
|
|
100
|
-
& + .vd-dialog-header,
|
105
|
+
& + .vd-dialog-header,
|
106
|
+
& + .vd-modal-content,
|
107
|
+
& + .vd-dialog-actions {
|
101
108
|
margin-top: var(--vd-dialog-spacing);
|
102
109
|
}
|
103
110
|
}
|
@@ -105,11 +112,14 @@
|
|
105
112
|
.vd-modal-sidebar {
|
106
113
|
display: none;
|
107
114
|
|
108
|
-
& + .vd-breadcrumb,
|
115
|
+
& + .vd-breadcrumb,
|
116
|
+
& + .vd-dialog-header,
|
117
|
+
.vd-modal-container:not(.vd-modal--size-full-screen) & + .vd-modal-content,
|
118
|
+
& + .vd-dialog-actions {
|
109
119
|
margin-top: var(--vd-dialog-spacing);
|
110
120
|
}
|
111
121
|
|
112
|
-
@include vd-viewport-media-min
|
122
|
+
@include vd-viewport-media-min($vd-breakpoint-medium) {
|
113
123
|
display: block;
|
114
124
|
width: $vd-modal-sidebar-size;
|
115
125
|
position: absolute;
|
@@ -117,14 +127,17 @@
|
|
117
127
|
bottom: 0;
|
118
128
|
left: 0;
|
119
129
|
|
120
|
-
& ~ .vd-breadcrumb,
|
130
|
+
& ~ .vd-breadcrumb,
|
131
|
+
& ~ .vd-dialog-header,
|
132
|
+
.vd-modal-container:not(.vd-modal--size-full-screen) & ~ .vd-modal-content,
|
133
|
+
& ~ .vd-dialog-actions {
|
121
134
|
margin-left: $vd-modal-sidebar-size;
|
122
135
|
padding-left: var(--vd-dialog-spacing);
|
123
136
|
}
|
124
137
|
|
125
138
|
& ~ .vd-modal-banner {
|
126
139
|
margin-left: $vd-modal-sidebar-size;
|
127
|
-
width: calc(100% - #{$vd-modal-sidebar-size})
|
140
|
+
width: calc(100% - #{$vd-modal-sidebar-size});
|
128
141
|
}
|
129
142
|
}
|
130
143
|
}
|
@@ -1,6 +1,11 @@
|
|
1
|
-
$vd-modal-sizes: (
|
1
|
+
$vd-modal-sizes: (
|
2
|
+
(small 600px) (small-with-sidebar 880px) (medium 720px) (medium-with-sidebar 1000px)
|
3
|
+
(large 1000px)
|
4
|
+
);
|
2
5
|
|
3
|
-
$vd-modal-mobile-sizes: (
|
6
|
+
$vd-modal-mobile-sizes: (
|
7
|
+
(small 600px) (small-with-sidebar 600px) (medium 720px) (medium-with-sidebar 720px) (large 1000px)
|
8
|
+
);
|
4
9
|
|
5
10
|
$vd-modal-sidebar-size: 280px;
|
6
11
|
|
@@ -81,7 +81,8 @@
|
|
81
81
|
padding-left: 6px;
|
82
82
|
|
83
83
|
// Adjacent cell always has the same spacing
|
84
|
-
+ .vd-table-list-cell,
|
84
|
+
+ .vd-table-list-cell,
|
85
|
+
+ .vd-table-list-head-cell {
|
85
86
|
padding-left: 0;
|
86
87
|
}
|
87
88
|
|
@@ -164,6 +165,9 @@
|
|
164
165
|
// -----------------------------------------------------------------
|
165
166
|
.vd-table-list-row {
|
166
167
|
border-bottom: vd-border(framing);
|
168
|
+
&.vd-table-list-row--active {
|
169
|
+
background-color: vd-colour(go-highlight);
|
170
|
+
}
|
167
171
|
}
|
168
172
|
|
169
173
|
// TABLE ROWS - EXPANDABLE ROW
|
@@ -17,12 +17,7 @@
|
|
17
17
|
height: 100%;
|
18
18
|
color: vd-colour(box);
|
19
19
|
background: vd-colour(box)
|
20
|
-
linear-gradient(
|
21
|
-
to left,
|
22
|
-
vd-colour(box) 50%,
|
23
|
-
$vd-upsell-background-colour 50%
|
24
|
-
)
|
25
|
-
no-repeat;
|
20
|
+
linear-gradient(to left, vd-colour(box) 50%, $vd-upsell-background-colour 50%) no-repeat;
|
26
21
|
}
|
27
22
|
|
28
23
|
.vd-upsell-primary-background-inner {
|
@@ -1,5 +1,5 @@
|
|
1
|
-
@import
|
2
|
-
@import
|
1
|
+
@import '../../../../styles/global/_non-styles';
|
2
|
+
@import './vd-flex-ns';
|
3
3
|
|
4
4
|
.vd-flex--settings-explanation {
|
5
5
|
min-width: $vd-settings-explanation-width;
|
@@ -19,15 +19,21 @@
|
|
19
19
|
margin-left: 85px !important;
|
20
20
|
}
|
21
21
|
|
22
|
-
.vd-flex--container
|
23
|
-
|
22
|
+
.vd-flex--container {
|
23
|
+
flex: 0 0 auto;
|
24
|
+
}
|
25
|
+
.vd-flex--fieldset-row {
|
26
|
+
flex-direction: row;
|
27
|
+
}
|
24
28
|
|
25
29
|
@include vd-viewport-media-max(small) {
|
26
30
|
.vd-flex--responsive-column {
|
27
31
|
flex-basis: auto;
|
28
32
|
margin: 0 0 $vd-section-padding-v 0;
|
29
33
|
|
30
|
-
&:last-child {
|
34
|
+
&:last-child {
|
35
|
+
margin-bottom: 0;
|
36
|
+
}
|
31
37
|
}
|
32
38
|
|
33
39
|
.vd-flex--settings-explanation {
|
@@ -37,11 +43,13 @@
|
|
37
43
|
}
|
38
44
|
|
39
45
|
.vd-flex--settings,
|
40
|
-
.vd-flex--row {
|
46
|
+
.vd-flex--row {
|
47
|
+
flex-direction: column;
|
48
|
+
}
|
41
49
|
}
|
42
50
|
|
43
51
|
@include vd-viewport-media-max(xsmall) {
|
44
|
-
.vd-flex--fieldset-row
|
52
|
+
.vd-flex--fieldset-row {
|
45
53
|
flex-direction: column;
|
46
54
|
}
|
47
55
|
}
|
@@ -1,3 +1,9 @@
|
|
1
|
-
.vd-align-left
|
2
|
-
|
3
|
-
|
1
|
+
.vd-align-left {
|
2
|
+
text-align: left !important;
|
3
|
+
}
|
4
|
+
.vd-align-center {
|
5
|
+
text-align: center !important;
|
6
|
+
}
|
7
|
+
.vd-align-right {
|
8
|
+
text-align: right !important;
|
9
|
+
}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
// stylelint-disable selector-type-no-unknown
|
1
2
|
$vd-autocomplete-filter-select-border-radius: $vd-border-radius 0 0 $vd-border-radius;
|
2
3
|
$vd-autocomplete-filter-select-padding: 12px;
|
3
4
|
$vd-autocomplete-filter-selector-container-width: 130px;
|
@@ -8,8 +9,8 @@ $vd-autocomplete-filter-icon-margin: 14px;
|
|
8
9
|
.vd-autocomplete-filter {
|
9
10
|
display: block;
|
10
11
|
|
11
|
-
@include vd-input-error-selectors
|
12
|
-
vd-autocomplete-multi {
|
12
|
+
@include vd-input-error-selectors() {
|
13
|
+
vd-autocomplete-multi {
|
13
14
|
@include vd-input-error-styles();
|
14
15
|
}
|
15
16
|
}
|
@@ -35,7 +36,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
|
|
35
36
|
border-left: vd-border(framing, $vd-input-border-width * 0.5);
|
36
37
|
}
|
37
38
|
|
38
|
-
vd-autocomplete-multi {
|
39
|
+
vd-autocomplete-multi {
|
39
40
|
width: 100%;
|
40
41
|
transition: none;
|
41
42
|
}
|
@@ -49,30 +49,30 @@
|
|
49
49
|
}
|
50
50
|
|
51
51
|
&.vd-avatar--initials-1 {
|
52
|
-
background-color: vd-colour(
|
52
|
+
background-color: vd-colour(farout-pink);
|
53
53
|
}
|
54
54
|
|
55
55
|
&.vd-avatar--initials-2 {
|
56
|
-
background-color: vd-colour(
|
56
|
+
background-color: vd-colour(mars);
|
57
57
|
}
|
58
58
|
|
59
59
|
&.vd-avatar--initials-3 {
|
60
|
-
background-color: vd-colour(
|
60
|
+
background-color: vd-colour(solar);
|
61
61
|
}
|
62
62
|
|
63
63
|
&.vd-avatar--initials-4 {
|
64
|
-
background-color: vd-colour(
|
64
|
+
background-color: vd-colour(galaxy);
|
65
65
|
}
|
66
66
|
|
67
67
|
&.vd-avatar--initials-5 {
|
68
|
-
background-color: vd-colour(
|
68
|
+
background-color: vd-colour(neptune);
|
69
69
|
}
|
70
70
|
|
71
71
|
&.vd-avatar--initials-6 {
|
72
|
-
background-color: vd-colour(
|
72
|
+
background-color: vd-colour(deep-purple);
|
73
73
|
}
|
74
74
|
|
75
75
|
&.vd-avatar--initials-7 {
|
76
|
-
background-color: vd-colour(shuttle-
|
76
|
+
background-color: vd-colour(shuttle-grey);
|
77
77
|
}
|
78
78
|
}
|
@@ -1 +1 @@
|
|
1
|
-
@import
|
1
|
+
@import './vd-id-badge/vd-id-badge';
|
@@ -33,7 +33,9 @@
|
|
33
33
|
border-radius: 0;
|
34
34
|
}
|
35
35
|
|
36
|
-
&:hover,
|
36
|
+
&:hover,
|
37
|
+
&:active,
|
38
|
+
&:focus {
|
37
39
|
outline: none;
|
38
40
|
background-color: vd-colour(go-highlight);
|
39
41
|
}
|
@@ -70,7 +72,9 @@
|
|
70
72
|
text-decoration: underline;
|
71
73
|
}
|
72
74
|
|
73
|
-
&:hover,
|
75
|
+
&:hover,
|
76
|
+
&:active,
|
77
|
+
&:focus {
|
74
78
|
outline: none;
|
75
79
|
|
76
80
|
.vd-id-badge__header-title {
|
@@ -79,7 +83,7 @@
|
|
79
83
|
}
|
80
84
|
}
|
81
85
|
|
82
|
-
// SIZING ADJUSTMENTS
|
86
|
+
// SIZING ADJUSTMENTS
|
83
87
|
|
84
88
|
&.vd-id-badge--x-small {
|
85
89
|
.vd-id-badge__content {
|
@@ -1,4 +1,8 @@
|
|
1
|
-
@mixin vd-banner(
|
1
|
+
@mixin vd-banner(
|
2
|
+
$primary-colour,
|
3
|
+
$text-colour: vd-colour(text-action),
|
4
|
+
$anchor-colour: vd-colour(text-action)
|
5
|
+
) {
|
2
6
|
background-color: $primary-colour;
|
3
7
|
color: $text-colour;
|
4
8
|
border: none;
|
@@ -39,7 +39,7 @@
|
|
39
39
|
padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
|
40
40
|
|
41
41
|
// Fallback to base padding if browser doesn't support CSS variables
|
42
|
-
@supports (
|
42
|
+
@supports (not (--a: 0)) {
|
43
43
|
padding: $vd-section-padding-v $vd-section-padding-h;
|
44
44
|
}
|
45
45
|
}
|
@@ -66,10 +66,14 @@
|
|
66
66
|
|
67
67
|
.vd-banner--info,
|
68
68
|
.vd-banner--activation {
|
69
|
-
@include vd-banner(vd-colour(supplementary))
|
69
|
+
@include vd-banner(vd-colour(supplementary));
|
70
|
+
}
|
71
|
+
.vd-banner--negative {
|
72
|
+
@include vd-banner(vd-colour(no));
|
73
|
+
}
|
74
|
+
.vd-banner--success {
|
75
|
+
@include vd-banner(vd-colour(success));
|
70
76
|
}
|
71
|
-
.vd-banner--negative { @include vd-banner(vd-colour(no)) }
|
72
|
-
.vd-banner--success { @include vd-banner(vd-colour(success)) }
|
73
77
|
|
74
78
|
@include vd-viewport-media-max(medium) {
|
75
79
|
.vd-banner-wrapper,
|