@madgex/design-system 5.11.2 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -10
- package/dist/_tokens/css/_tokens.css +62 -96
- package/dist/_tokens/js/_tokens-module.js +1342 -1406
- package/dist/_tokens/sketch/_tokens.sketchpalette +1 -1
- package/dist/assets/icons.json +1 -1
- package/dist/css/index.css +1 -1
- package/dist/js/index-fractal.js +1 -1
- package/dist/js/index.js +1 -1
- package/package.json +5 -5
- package/src/components/_preview.njk +1 -0
- package/src/components/button/button.scss +50 -37
- package/src/components/card/README.md +1 -1
- package/src/components/card/_template.njk +1 -1
- package/src/components/card/card.config.js +1 -2
- package/src/components/card/card.scss +29 -39
- package/src/components/icons/README.md +3 -3
- package/src/components/icons/icons.scss +26 -19
- package/src/components/inputs/_form-elements.scss +44 -44
- package/src/components/inputs/checkbox-pill/checkbox-pill.scss +14 -14
- package/src/components/inputs/combobox/combobox.scss +13 -13
- package/src/components/inputs/file-upload/file-upload.scss +14 -14
- package/src/components/inputs/input-number/input-number.scss +10 -10
- package/src/components/inputs/text-editor/text-editor.scss +16 -16
- package/src/components/modal/modal.js +1 -1
- package/src/components/modal/modal.scss +4 -4
- package/src/components/notification/notification.scss +1 -1
- package/src/components/pagination/pagination.scss +8 -8
- package/src/components/popover/popover.js +1 -1
- package/src/components/popover/popover.scss +13 -13
- package/src/components/section-title/section-title.scss +1 -1
- package/src/components/skip-link/skip-link.scss +4 -4
- package/src/components/tabs/tabs.js +1 -1
- package/src/components/tabs/tabs.scss +16 -16
- package/src/components/toggle-button-links/toggle-button-links.scss +20 -20
- package/src/helpers/spacing/README.md +2 -2
- package/src/layout/grid/README.md +5 -5
- package/src/layout/grid/grid.njk +7 -0
- package/src/scss/constants/__index.scss +2 -0
- package/src/scss/constants/_sd-tokens.scss +81 -0
- package/src/scss/constants/_vars.scss +4 -0
- package/src/scss/core/_containers.scss +35 -38
- package/src/scss/core/_defaults.scss +14 -8
- package/src/scss/core/_grid.scss +39 -24
- package/src/scss/core/_lists.scss +13 -13
- package/src/scss/core/_message.scss +32 -32
- package/src/scss/core/_typography.scss +13 -13
- package/src/scss/functions/__index.scss +0 -2
- package/src/scss/functions/_media-queries.scss +4 -4
- package/src/scss/functions/_text-contrast.scss +6 -7
- package/src/scss/helpers/_borders.scss +5 -38
- package/src/scss/helpers/_display.scss +0 -1
- package/src/scss/helpers/_edited-text.scss +5 -5
- package/src/scss/helpers/_floats.scss +0 -1
- package/src/scss/helpers/_font-types.scss +15 -15
- package/src/scss/helpers/_spacing.scss +33 -36
- package/src/scss/helpers/_text-align.scss +0 -1
- package/src/scss/helpers/_vertical-align.scss +0 -2
- package/src/scss/helpers/_width-height.scss +4 -6
- package/src/scss/import.scss +1 -0
- package/src/scss/index.scss +0 -2
- package/src/tokens/_config.js +22 -9
- package/src/tokens/_constants.json +130 -0
- package/src/tokens/color.json +8 -76
- package/src/tokens/custom.json +0 -8
- package/src/tokens/size.json +0 -16
- package/src/tokens/typography.json +3 -1
- package/tasks/registerTransforms.js +28 -1
- package/tasks/svgsprite.js +5 -2
- package/dist/_tokens/scss/_tokens.scss +0 -741
- package/src/scss/functions/_color.scss +0 -0
- package/src/scss/functions/_px2rem.scss +0 -20
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<link rel="stylesheet" href="{{ '/_tokens/css/_tokens.css' | path }}" />
|
|
6
7
|
<link rel="stylesheet" href="{{ '/css/index.css' | path }}" />
|
|
7
8
|
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | path }}" />
|
|
8
9
|
|
|
@@ -1,76 +1,89 @@
|
|
|
1
1
|
.mds-button {
|
|
2
|
+
--button-background: var(--mds-color-button-bg-base);
|
|
3
|
+
--button-border-color-top: var(--mds-color-button-border-top);
|
|
4
|
+
--button-border-color-right: var(--mds-color-button-border-right);
|
|
5
|
+
--button-border-color-bottom: var(--mds-color-button-border-bottom);
|
|
6
|
+
--button-border-color-left: var(--mds-color-button-border-left);
|
|
7
|
+
--button-border-color: var(--button-border-color-top) var(--button-border-color-right)
|
|
8
|
+
var(--button-border-color-bottom) var(--button-border-color-left);
|
|
9
|
+
--button-border-width: var(--mds-size-border-width-button);
|
|
10
|
+
--button-text-color: var(--mds-color-button-text-base);
|
|
11
|
+
--button-font-family: var(--mds-font-family-button-base);
|
|
12
|
+
--button-font-weight: var(--mds-font-weight-button-base);
|
|
13
|
+
--button-text-transform: var(--mds-text-transform-button);
|
|
14
|
+
|
|
2
15
|
cursor: pointer;
|
|
3
16
|
user-select: none;
|
|
4
17
|
-webkit-appearance: none;
|
|
5
18
|
width: auto;
|
|
6
|
-
border: $mds-size-border-width-button solid;
|
|
7
|
-
border-top-color: $mds-color-button-border-top;
|
|
8
|
-
border-right-color: $mds-color-button-border-right;
|
|
9
|
-
border-bottom-color: $mds-color-button-border-bottom;
|
|
10
|
-
border-left-color: $mds-color-button-border-left;
|
|
11
|
-
border-radius: $mds-size-border-radius-button;
|
|
12
19
|
|
|
13
|
-
background:
|
|
14
|
-
|
|
20
|
+
background: var(--button-background);
|
|
21
|
+
border: var(--button-border-width) solid;
|
|
22
|
+
border-color: var(--button-border-color);
|
|
23
|
+
border-radius: var(--mds-size-border-radius-button);
|
|
24
|
+
|
|
25
|
+
padding: ($scss-var-size-baseline * 3) ($scss-var-size-baseline * 5);
|
|
15
26
|
display: inline-block;
|
|
16
27
|
text-align: center;
|
|
17
|
-
color:
|
|
28
|
+
color: var(--button-text-color);
|
|
18
29
|
@extend .mds-font-body-copy;
|
|
19
|
-
font-family:
|
|
20
|
-
font-weight:
|
|
21
|
-
text-transform:
|
|
30
|
+
font-family: var(--button-font-family);
|
|
31
|
+
font-weight: var(--button-font-weight);
|
|
32
|
+
text-transform: var(--mds-text-transform-button);
|
|
22
33
|
|
|
23
34
|
&:hover,
|
|
24
35
|
&:focus {
|
|
25
|
-
background:
|
|
36
|
+
--button-background: var(--mds-color-button-bg-hover);
|
|
37
|
+
--button-border-color-top: var(--mds-color-button-border-hover-top);
|
|
38
|
+
--button-border-color-right: var(--mds-color-button-border-hover-right);
|
|
39
|
+
--button-border-color-bottom: var(--mds-color-button-border-hover-bottom);
|
|
40
|
+
--button-border-color-left: var(--mds-color-button-border-hover-left);
|
|
41
|
+
--button-text-color: var(--mds-color-button-text-hover);
|
|
42
|
+
|
|
26
43
|
text-decoration: none;
|
|
27
|
-
color: $mds-color-button-text-hover;
|
|
28
|
-
border-top-color: $mds-color-button-border-hover-top;
|
|
29
|
-
border-right-color: $mds-color-button-border-hover-right;
|
|
30
|
-
border-bottom-color: $mds-color-button-border-hover-bottom;
|
|
31
|
-
border-left-color: $mds-color-button-border-hover-left;
|
|
32
44
|
}
|
|
33
45
|
}
|
|
34
46
|
|
|
35
47
|
.mds-button--small {
|
|
36
|
-
padding: ($
|
|
48
|
+
padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
|
|
37
49
|
}
|
|
38
50
|
|
|
39
51
|
.mds-button--large {
|
|
40
|
-
padding: ($
|
|
52
|
+
padding: ($scss-var-size-baseline * 4) ($scss-var-size-baseline * 6);
|
|
41
53
|
}
|
|
42
54
|
|
|
43
55
|
.mds-button--icon {
|
|
44
|
-
padding: ($
|
|
56
|
+
padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
|
|
45
57
|
}
|
|
46
58
|
|
|
47
59
|
.mds-button--plain {
|
|
48
|
-
background: transparent;
|
|
49
|
-
color:
|
|
50
|
-
|
|
51
|
-
font-family: inherit;
|
|
52
|
-
|
|
53
|
-
text-transform: none;
|
|
60
|
+
--button-background: transparent;
|
|
61
|
+
--button-border-color: transparent;
|
|
62
|
+
--button-text-color: var(--mds-color-link-base);
|
|
63
|
+
--button-font-family: inherit;
|
|
64
|
+
--button-font-weight: var(--mds-font-weight-link-base);
|
|
65
|
+
--button-text-transform: none;
|
|
54
66
|
|
|
55
67
|
&:hover,
|
|
56
68
|
&:focus {
|
|
57
|
-
background: transparent;
|
|
58
|
-
color:
|
|
69
|
+
--button-background: transparent;
|
|
70
|
+
--button-text-color: var(--mds-color-link-hover);
|
|
71
|
+
--button-border-color: transparent;
|
|
72
|
+
|
|
59
73
|
text-decoration: underline;
|
|
60
|
-
border-color: transparent;
|
|
61
74
|
}
|
|
62
75
|
}
|
|
63
76
|
|
|
64
77
|
.mds-button--neutral {
|
|
65
|
-
background: $
|
|
66
|
-
color:
|
|
67
|
-
border-color: $
|
|
68
|
-
border-width: 1px;
|
|
78
|
+
--button-background: #{$scss-var-color-neutral-white};
|
|
79
|
+
--button-text-color: var(--mds-color-text-base);
|
|
80
|
+
--button-border-color: #{$scss-var-color-neutral-lighter};
|
|
81
|
+
--button-border-width: 1px;
|
|
69
82
|
|
|
70
83
|
&:hover,
|
|
71
84
|
&:focus {
|
|
72
|
-
background: $
|
|
73
|
-
color:
|
|
74
|
-
border-color: $
|
|
85
|
+
--button-background: #{$scss-var-color-neutral-lighter};
|
|
86
|
+
--button-text-color: var(--mds-color-text-base);
|
|
87
|
+
--button-border-color: #{$scss-var-color-neutral-lighter};
|
|
75
88
|
}
|
|
76
89
|
}
|
|
@@ -10,7 +10,7 @@ The card component adds a border and padding around the content.
|
|
|
10
10
|
|
|
11
11
|
### `classes` parameter
|
|
12
12
|
|
|
13
|
-
Use the class `mds-card--highlighted` in the `classes` parameter to apply a grey background to the card (colour: $
|
|
13
|
+
Use the class `mds-card--highlighted` in the `classes` parameter to apply a grey background to the card (colour: $scss-var-color-neutral-lightest)
|
|
14
14
|
|
|
15
15
|
You can customise the `background`, `border` and add a `box-shadow` using the custom brand tokens and passing the class newly created as a parameter. `mds-card--[id of the custom style]`. In the example below, it would be `mds-card--1`.
|
|
16
16
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{%- for name, value in params.badges -%}
|
|
5
5
|
<div class="mds-badge-container__column mds-badge-container__column--{{ name }}">
|
|
6
6
|
{%- for badge in value -%}
|
|
7
|
-
<p class="mds-badge mds-badge--{{ badge.styleId }}">{{ badge.label }}</p>
|
|
7
|
+
<p class="mds-badge{% if badge.styleId %} mds-badge--{{ badge.styleId }}{% endif %}" data-card-badge="{{ badge.styleId }}">{{ badge.label }}</p>
|
|
8
8
|
{%- endfor -%}
|
|
9
9
|
</div>
|
|
10
10
|
{%- endfor -%}
|
|
@@ -1,28 +1,33 @@
|
|
|
1
1
|
.mds-card {
|
|
2
|
-
|
|
2
|
+
--card-background: none;
|
|
3
|
+
--card-border: var(--mds-size-border-width-base) solid var(--mds-color-border);
|
|
4
|
+
--card-shadow: none;
|
|
5
|
+
|
|
6
|
+
border: var(--card-border);
|
|
7
|
+
background: var(--card-background);
|
|
8
|
+
box-shadow: var(--card-shadow);
|
|
3
9
|
|
|
4
10
|
> *:last-child {
|
|
5
11
|
margin-bottom: 0;
|
|
6
12
|
}
|
|
7
13
|
}
|
|
8
14
|
.mds-card__container {
|
|
9
|
-
padding: ($
|
|
15
|
+
padding: ($scss-var-size-baseline * 3) ($scss-var-size-baseline * 4);
|
|
10
16
|
}
|
|
11
17
|
|
|
12
18
|
.mds-card--highlighted {
|
|
13
|
-
background: $
|
|
19
|
+
--card-background: #{$scss-var-color-neutral-lightest};
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
.mds-badge-container {
|
|
17
23
|
display: flex;
|
|
18
24
|
flex-wrap: wrap;
|
|
19
|
-
column-gap: $
|
|
20
|
-
|
|
25
|
+
column-gap: $scss-var-size-baseline;
|
|
21
26
|
|
|
22
27
|
&__column {
|
|
23
28
|
display: flex;
|
|
24
29
|
flex-wrap: wrap;
|
|
25
|
-
column-gap: $
|
|
30
|
+
column-gap: $scss-var-size-baseline;
|
|
26
31
|
align-items: flex-start;
|
|
27
32
|
flex: 1 1 auto;
|
|
28
33
|
|
|
@@ -32,41 +37,26 @@
|
|
|
32
37
|
}
|
|
33
38
|
}
|
|
34
39
|
|
|
35
|
-
// get tokens from custom.card
|
|
36
|
-
$cards: map-get($tokens, 'custom', 'card');
|
|
37
|
-
// set of css properties that we accept
|
|
38
|
-
// any other properties found in the tokens won't be added to the css
|
|
39
|
-
$validCardProperties: background, border, box-shadow;
|
|
40
|
-
|
|
41
|
-
@each $name, $obj in $cards {
|
|
42
|
-
.mds-card--#{$name} {
|
|
43
|
-
@each $property in $validCardProperties {
|
|
44
|
-
$value: map-get($obj, $property);
|
|
45
|
-
#{$property}: $value;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
// get tokens from custom.badge
|
|
51
|
-
$badges: map-get($tokens, 'custom', 'badge');
|
|
52
|
-
// set of css properties that we accept
|
|
53
|
-
// any other properties found in the tokens won't be added to the css
|
|
54
|
-
$validBadgeProperties: background, color, font-size, font-weight, text-transform, padding, border;
|
|
55
|
-
|
|
56
|
-
|
|
57
40
|
.mds-badge {
|
|
41
|
+
--badge-background: #{$scss-var-color-neutral-black};
|
|
42
|
+
--badge-border: none;
|
|
43
|
+
--badge-color: #{$scss-var-color-neutral-white};
|
|
44
|
+
--badge-font-weight: inherit;
|
|
45
|
+
--badge-padding: #{$scss-var-size-baseline} #{$scss-var-size-baseline * 2};
|
|
46
|
+
--badge-text-transform: uppercase;
|
|
47
|
+
|
|
58
48
|
display: block;
|
|
59
|
-
|
|
60
|
-
margin-bottom: $mds-size-baseline;
|
|
49
|
+
margin-bottom: $scss-var-size-baseline;
|
|
61
50
|
@extend .mds-font-minion;
|
|
62
|
-
|
|
51
|
+
|
|
52
|
+
background: var(--badge-background);
|
|
53
|
+
color: var(--badge-color);
|
|
54
|
+
font-weight: var(--badge-font-weight);
|
|
55
|
+
padding: var(--badge-padding);
|
|
56
|
+
text-transform: var(--badge-text-transform);
|
|
63
57
|
}
|
|
64
58
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
#{$property}: $value;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
59
|
+
.mds-badge--new {
|
|
60
|
+
--badge-background: var(--mds-color-new-badge-background);
|
|
61
|
+
--badge-color: var(--mds-color-new-badge-text);
|
|
62
|
+
}
|
|
@@ -51,9 +51,9 @@ Add `mds-icon-container--circle` in `containerClasses`.
|
|
|
51
51
|
|
|
52
52
|
To add a colour to the container, add one of the following classes:
|
|
53
53
|
|
|
54
|
-
- `mds-icon-container--error` = `$
|
|
55
|
-
- `mds-icon-container--success` = `$
|
|
56
|
-
- `mds-icon-container--success` = `$
|
|
54
|
+
- `mds-icon-container--error` = `$scss-var-color-status-error-dark`
|
|
55
|
+
- `mds-icon-container--success` = `$scss-var-color-status-success-dark`
|
|
56
|
+
- `mds-icon-container--success` = `$scss-var-color-status-info-dark`
|
|
57
57
|
|
|
58
58
|
Reference: [Colours tokens](/docs/tokens/colour)
|
|
59
59
|
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
+
$icon-size-default: 1em;
|
|
2
|
+
$icon-size-sm: 16px;
|
|
3
|
+
$icon-size-md: 24px;
|
|
4
|
+
$icon-size-lg: 32px;
|
|
5
|
+
$icon-size-xl: 48px;
|
|
6
|
+
$icon-size-xxl: 72px;
|
|
7
|
+
|
|
1
8
|
.mds-icon {
|
|
2
9
|
display: inline-block;
|
|
3
10
|
fill: currentColor;
|
|
4
|
-
width: $
|
|
5
|
-
height: $
|
|
11
|
+
width: $icon-size-default;
|
|
12
|
+
height: $icon-size-default;
|
|
6
13
|
position: relative;
|
|
7
14
|
// Move icon to baseline of text - see readme
|
|
8
15
|
top: 0.125em;
|
|
@@ -28,15 +35,15 @@
|
|
|
28
35
|
}
|
|
29
36
|
|
|
30
37
|
&--error {
|
|
31
|
-
background-color: $
|
|
38
|
+
background-color: $scss-var-color-status-error-dark;
|
|
32
39
|
}
|
|
33
40
|
|
|
34
41
|
&--success {
|
|
35
|
-
background-color: $
|
|
42
|
+
background-color: $scss-var-color-status-success-dark;
|
|
36
43
|
}
|
|
37
44
|
|
|
38
45
|
&--info {
|
|
39
|
-
background-color: $
|
|
46
|
+
background-color: $scss-var-color-status-info-dark;
|
|
40
47
|
}
|
|
41
48
|
}
|
|
42
49
|
.mds-icon-container--before,
|
|
@@ -49,28 +56,28 @@
|
|
|
49
56
|
}
|
|
50
57
|
|
|
51
58
|
.mds-icon--sm {
|
|
52
|
-
width: $
|
|
53
|
-
height: $
|
|
59
|
+
width: $icon-size-sm;
|
|
60
|
+
height: $icon-size-sm;
|
|
54
61
|
}
|
|
55
62
|
|
|
56
63
|
.mds-icon--md {
|
|
57
|
-
width: $
|
|
58
|
-
height: $
|
|
64
|
+
width: $icon-size-md;
|
|
65
|
+
height: $icon-size-md;
|
|
59
66
|
}
|
|
60
67
|
|
|
61
68
|
.mds-icon--lg {
|
|
62
|
-
width: $
|
|
63
|
-
height: $
|
|
69
|
+
width: $icon-size-lg;
|
|
70
|
+
height: $icon-size-lg;
|
|
64
71
|
}
|
|
65
72
|
|
|
66
73
|
.mds-icon--xl {
|
|
67
|
-
width: $
|
|
68
|
-
height: $
|
|
74
|
+
width: $icon-size-xl;
|
|
75
|
+
height: $icon-size-xl;
|
|
69
76
|
}
|
|
70
77
|
|
|
71
78
|
.mds-icon--xxl {
|
|
72
|
-
width: $
|
|
73
|
-
height: $
|
|
79
|
+
width: $icon-size-xxl;
|
|
80
|
+
height: $icon-size-xxl;
|
|
74
81
|
}
|
|
75
82
|
|
|
76
83
|
.mds-icon--spinner {
|
|
@@ -78,19 +85,19 @@
|
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
.mds-icon--error {
|
|
81
|
-
fill: $
|
|
88
|
+
fill: $scss-var-color-status-error-darkest;
|
|
82
89
|
}
|
|
83
90
|
|
|
84
91
|
.mds-icon--success {
|
|
85
|
-
fill: $
|
|
92
|
+
fill: $scss-var-color-status-success-darkest;
|
|
86
93
|
}
|
|
87
94
|
|
|
88
95
|
.mds-icon--info {
|
|
89
|
-
fill: $
|
|
96
|
+
fill: $scss-var-color-status-info-darkest;
|
|
90
97
|
}
|
|
91
98
|
|
|
92
99
|
.mds-icon--neutral {
|
|
93
|
-
fill: $
|
|
100
|
+
fill: $scss-var-color-neutral-light;
|
|
94
101
|
}
|
|
95
102
|
|
|
96
103
|
@keyframes spin {
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
@mixin inputFocusStyle($focusColour:
|
|
1
|
+
@mixin inputFocusStyle($focusColour: var(--mds-color-input-focus)) {
|
|
2
2
|
border-color: $focusColour;
|
|
3
3
|
outline-color: $focusColour;
|
|
4
4
|
box-shadow: 0 0 3px 2px $focusColour;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.mds-form-field {
|
|
8
|
-
margin-bottom: $
|
|
8
|
+
margin-bottom: $scss-var-size-baseline * 7;
|
|
9
9
|
}
|
|
10
10
|
.mds-form-label {
|
|
11
11
|
display: flex;
|
|
12
|
-
margin-bottom: $
|
|
12
|
+
margin-bottom: $scss-var-size-baseline * 3;
|
|
13
13
|
|
|
14
14
|
&--legend-with-tooltip {
|
|
15
15
|
// display: inline/inline-block doesn't work on <legend>
|
|
@@ -21,18 +21,18 @@
|
|
|
21
21
|
flex: 0 1 auto;
|
|
22
22
|
}
|
|
23
23
|
.mds-form-label__required {
|
|
24
|
-
color: $
|
|
24
|
+
color: $scss-var-color-status-error-dark;
|
|
25
25
|
top: 0;
|
|
26
|
-
width:
|
|
27
|
-
margin-left: $
|
|
26
|
+
width: calc(var(--mds-font-size-base) / 2);
|
|
27
|
+
margin-left: $scss-var-size-baseline;
|
|
28
28
|
}
|
|
29
29
|
.mds-form-label__tooltip {
|
|
30
30
|
padding: 0;
|
|
31
|
-
margin-left: $
|
|
31
|
+
margin-left: $scss-var-size-baseline * 2;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.mds-form-field__child {
|
|
35
|
-
margin-bottom: $
|
|
35
|
+
margin-bottom: $scss-var-size-baseline * 2;
|
|
36
36
|
&:last-child {
|
|
37
37
|
margin-bottom: 0;
|
|
38
38
|
}
|
|
@@ -43,19 +43,19 @@
|
|
|
43
43
|
|
|
44
44
|
.mds-form-message {
|
|
45
45
|
@extend .mds-font-long-primer;
|
|
46
|
-
color: $
|
|
47
|
-
margin-bottom: $
|
|
46
|
+
color: $scss-var-color-neutral-base;
|
|
47
|
+
margin-bottom: $scss-var-size-baseline * 4;
|
|
48
48
|
display: flex;
|
|
49
49
|
align-items: center;
|
|
50
50
|
|
|
51
51
|
&--error {
|
|
52
|
-
color: $
|
|
52
|
+
color: $scss-var-color-status-error-dark;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.mds-form-message--character-count {
|
|
57
57
|
display: none;
|
|
58
|
-
margin-top: $
|
|
58
|
+
margin-top: $scss-var-size-baseline;
|
|
59
59
|
|
|
60
60
|
.js & {
|
|
61
61
|
display: flex;
|
|
@@ -73,9 +73,9 @@
|
|
|
73
73
|
|
|
74
74
|
.mds-form-control {
|
|
75
75
|
width: 100%;
|
|
76
|
-
padding: $
|
|
77
|
-
border-radius:
|
|
78
|
-
border:
|
|
76
|
+
padding: $scss-var-size-baseline * 3;
|
|
77
|
+
border-radius: var(--mds-size-border-radius-base);
|
|
78
|
+
border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
|
|
79
79
|
@extend .mds-font-body-copy;
|
|
80
80
|
|
|
81
81
|
&:focus-within, /* focus-within for mds-combobox--multiple wrapper element with focused input */
|
|
@@ -84,14 +84,14 @@
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.mds-form-element--error & {
|
|
87
|
-
border-color: $
|
|
88
|
-
background-color: $
|
|
89
|
-
border-left-width: $
|
|
90
|
-
padding-left: $
|
|
87
|
+
border-color: $scss-var-color-status-error-dark;
|
|
88
|
+
background-color: $scss-var-color-status-error-lightest;
|
|
89
|
+
border-left-width: $scss-var-size-baseline;
|
|
90
|
+
padding-left: $scss-var-size-baseline * 2;
|
|
91
91
|
&:focus-within,
|
|
92
92
|
&:focus {
|
|
93
|
-
@include inputFocusStyle($
|
|
94
|
-
border-left-width: $
|
|
93
|
+
@include inputFocusStyle($scss-var-color-status-error-dark);
|
|
94
|
+
border-left-width: $scss-var-size-baseline;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
}
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
.mds-form-element--inline {
|
|
100
100
|
& .mds-form-check {
|
|
101
101
|
display: inline-block;
|
|
102
|
-
margin-right: $
|
|
102
|
+
margin-right: $scss-var-size-baseline * 7;
|
|
103
103
|
margin-bottom: 0;
|
|
104
104
|
|
|
105
105
|
& .mds-form-check__label {
|
|
@@ -113,22 +113,22 @@
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
.mds-form-check-container--border {
|
|
116
|
-
border-radius:
|
|
117
|
-
border:
|
|
116
|
+
border-radius: var(--mds-size-border-radius-base);
|
|
117
|
+
border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
|
|
118
118
|
max-height: 200px;
|
|
119
119
|
min-height: 200px;
|
|
120
120
|
overflow-y: auto;
|
|
121
|
-
padding: $
|
|
121
|
+
padding: $scss-var-size-baseline * 2;
|
|
122
122
|
|
|
123
123
|
.mds-form-element--error & {
|
|
124
|
-
border-color: $
|
|
125
|
-
background-color: $
|
|
126
|
-
border-left-width: $
|
|
124
|
+
border-color: $scss-var-color-status-error-dark;
|
|
125
|
+
background-color: $scss-var-color-status-error-lightest;
|
|
126
|
+
border-left-width: $scss-var-size-baseline;
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
.mds-form-check {
|
|
131
|
-
margin-bottom: $
|
|
131
|
+
margin-bottom: $scss-var-size-baseline * 2;
|
|
132
132
|
|
|
133
133
|
&:last-child {
|
|
134
134
|
margin-bottom: 0;
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
.mds-form-check__label {
|
|
154
154
|
vertical-align: middle;
|
|
155
155
|
& * {
|
|
156
|
-
margin-left: $
|
|
156
|
+
margin-left: $scss-var-size-baseline;
|
|
157
157
|
}
|
|
158
158
|
// in case if label has a image (topCV)
|
|
159
159
|
img {
|
|
@@ -164,13 +164,13 @@
|
|
|
164
164
|
.mds-form-check__input {
|
|
165
165
|
display: inline-block;
|
|
166
166
|
appearance: none;
|
|
167
|
-
height: $
|
|
168
|
-
width: $
|
|
169
|
-
padding: $
|
|
170
|
-
border:
|
|
171
|
-
background-color: $
|
|
167
|
+
height: $scss-var-size-baseline * 4;
|
|
168
|
+
width: $scss-var-size-baseline * 4;
|
|
169
|
+
padding: $scss-var-size-baseline;
|
|
170
|
+
border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
|
|
171
|
+
background-color: $scss-var-color-neutral-white;
|
|
172
172
|
outline: 0;
|
|
173
|
-
margin-right: $
|
|
173
|
+
margin-right: $scss-var-size-baseline * 2;
|
|
174
174
|
vertical-align: middle;
|
|
175
175
|
cursor: pointer;
|
|
176
176
|
|
|
@@ -180,18 +180,18 @@
|
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
&:disabled {
|
|
183
|
-
border-color:
|
|
184
|
-
background:
|
|
183
|
+
border-color: var(--mds-color-input-disabled-field);
|
|
184
|
+
background: var(--mds-color-input-disabled-field);
|
|
185
185
|
box-shadow: none;
|
|
186
186
|
cursor: auto;
|
|
187
187
|
|
|
188
188
|
& + .mds-form-check__label {
|
|
189
|
-
color:
|
|
189
|
+
color: var(--mds-color-input-disabled-label);
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
192
|
|
|
193
193
|
.mds-form-element--checkbox & {
|
|
194
|
-
border-radius:
|
|
194
|
+
border-radius: var(--mds-size-border-radius-base);
|
|
195
195
|
|
|
196
196
|
&:checked:before {
|
|
197
197
|
content: '\2713';
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
align-items: center;
|
|
201
201
|
width: 100%;
|
|
202
202
|
height: 100%;
|
|
203
|
-
color:
|
|
203
|
+
color: var(--mds-color-input-checked);
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
.mds-form-element--radio & {
|
|
@@ -212,14 +212,14 @@
|
|
|
212
212
|
width: 100%;
|
|
213
213
|
height: 100%;
|
|
214
214
|
border-radius: 50%;
|
|
215
|
-
background-color:
|
|
215
|
+
background-color: var(--mds-color-input-checked);
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
.mds-form-check__nested-container {
|
|
221
|
-
margin-top: $
|
|
222
|
-
padding-left: $
|
|
221
|
+
margin-top: $scss-var-size-baseline * 2;
|
|
222
|
+
padding-left: $scss-var-size-baseline * 5;
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
.js .mds-form-element__fallback {
|
|
@@ -5,40 +5,40 @@
|
|
|
5
5
|
width: auto;
|
|
6
6
|
|
|
7
7
|
box-sizing: border-box;
|
|
8
|
-
border:
|
|
9
|
-
border-radius:
|
|
8
|
+
border: var(--mds-size-border-width-base) solid $scss-var-color-neutral-lighter;
|
|
9
|
+
border-radius: var(--mds-size-border-radius-base);
|
|
10
10
|
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
align-items: center;
|
|
13
13
|
text-align: left;
|
|
14
|
-
padding: ($
|
|
14
|
+
padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
|
|
15
15
|
|
|
16
16
|
@extend .mds-font-body-copy;
|
|
17
|
-
font-family:
|
|
18
|
-
font-weight:
|
|
17
|
+
font-family: var(--mds-font-family-base);
|
|
18
|
+
font-weight: var(--mds-font-weight-base);
|
|
19
19
|
text-transform: none;
|
|
20
20
|
|
|
21
|
-
background: $
|
|
22
|
-
color:
|
|
21
|
+
background: $scss-var-color-neutral-white;
|
|
22
|
+
color: var(--mds-color-text-base);
|
|
23
23
|
|
|
24
24
|
&:hover,
|
|
25
25
|
&:focus-within {
|
|
26
|
-
background: $
|
|
27
|
-
color:
|
|
26
|
+
background: $scss-var-color-neutral-lightest;
|
|
27
|
+
color: var(--mds-color-link-hover);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
&:focus-within {
|
|
31
|
-
outline: 2px solid
|
|
31
|
+
outline: 2px solid var(--mds-color-text-base);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.mds-checkbox-pill--active {
|
|
36
|
-
background:
|
|
37
|
-
color:
|
|
36
|
+
background: var(--mds-color-pill-bg-base);
|
|
37
|
+
color: var(--mds-color-pill-text-base);
|
|
38
38
|
|
|
39
39
|
&:hover,
|
|
40
40
|
&:focus-within {
|
|
41
|
-
background:
|
|
42
|
-
color:
|
|
41
|
+
background: var(--mds-color-pill-bg-hover);
|
|
42
|
+
color: var(--mds-color-pill-text-hover);
|
|
43
43
|
}
|
|
44
44
|
}
|