@mtvh/mtvh-design-system 0.0.12 → 0.0.14
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/assets/scss/components/_alert.scss +17 -0
- package/assets/scss/components/_all.scss +2 -0
- package/assets/scss/components/_content-block.scss +34 -19
- package/assets/scss/components/_form.scss +23 -17
- package/assets/scss/components/_notification.scss +32 -0
- package/assets/scss/components/_status.scss +9 -4
- package/assets/scss/components/_stepper.scss +22 -1
- package/assets/scss/config/_variables.scss +14 -3
- package/assets/scss/forms/_formio.scss +3 -0
- package/assets/scss/forms/_validation.scss +15 -5
- package/assets/scss/mixins/_form.scss +3 -2
- package/dist/mtvh.min.css +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.mtvh-form .alert-danger {
|
|
2
|
+
padding: $mtvh-spacing-6 $mtvh-spacing-5;
|
|
3
|
+
|
|
4
|
+
@include media-breakpoint-up(md) {
|
|
5
|
+
padding: $mtvh-spacing-6;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
p {
|
|
9
|
+
@extend %h4;
|
|
10
|
+
font-weight: $mtvh-font-weight-semibold;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
ul li {
|
|
14
|
+
margin-bottom: $mtvh-spacing-4;
|
|
15
|
+
}
|
|
16
|
+
margin-bottom: $mtvh-spacing-8;
|
|
17
|
+
}
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
font-size: $font-size-sm;
|
|
15
15
|
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
16
16
|
}
|
|
17
|
+
a {
|
|
18
|
+
color: inherit;
|
|
19
|
+
}
|
|
17
20
|
}
|
|
18
21
|
&--stretch {
|
|
19
22
|
height: 100%;
|
|
@@ -26,33 +29,42 @@
|
|
|
26
29
|
text-decoration: none;
|
|
27
30
|
box-shadow: var(--#{$prefix}box-shadow);
|
|
28
31
|
padding: $mtvh-spacing-5;
|
|
29
|
-
&:hover {
|
|
30
|
-
background-color: var(--#{$prefix}grey-02);
|
|
31
|
-
}
|
|
32
32
|
|
|
33
33
|
@include media-breakpoint-up(md) {
|
|
34
|
-
padding: $mtvh-spacing-6;
|
|
34
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
@include media-breakpoint-up(lg) {
|
|
38
38
|
min-height: 17rem;
|
|
39
|
+
padding: $mtvh-spacing-6;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--unset {
|
|
43
|
+
min-height: unset;
|
|
39
44
|
}
|
|
40
45
|
|
|
41
46
|
&:focus-within {
|
|
42
47
|
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
|
|
43
48
|
outline-offset: $mtvh-spacing-3;
|
|
44
|
-
background-color: var(--#{$prefix}
|
|
49
|
+
background-color: var(--#{$prefix}white);
|
|
45
50
|
}
|
|
46
|
-
|
|
47
51
|
&:active, &:focus {
|
|
48
|
-
background-color: var(--#{$prefix}
|
|
52
|
+
background-color: var(--#{$prefix}white);
|
|
49
53
|
outline: unset;
|
|
50
54
|
}
|
|
55
|
+
&:hover {
|
|
56
|
+
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}purple-03);
|
|
57
|
+
outline-offset: 0;
|
|
58
|
+
}
|
|
59
|
+
&:active{
|
|
60
|
+
background-color: var(--#{$prefix}purple-01);
|
|
61
|
+
}
|
|
51
62
|
|
|
52
63
|
a {
|
|
53
64
|
@extend %h3;
|
|
54
65
|
color: var(--#{$prefix}black);
|
|
55
66
|
text-decoration: none;
|
|
67
|
+
|
|
56
68
|
&:after {
|
|
57
69
|
bottom: 0;
|
|
58
70
|
content: "";
|
|
@@ -62,11 +74,13 @@
|
|
|
62
74
|
top: 0;
|
|
63
75
|
z-index: 100;
|
|
64
76
|
}
|
|
65
|
-
|
|
66
|
-
|
|
77
|
+
|
|
78
|
+
&:active, &:focus {
|
|
67
79
|
outline: unset;
|
|
68
80
|
}
|
|
69
|
-
|
|
81
|
+
}
|
|
82
|
+
p {
|
|
83
|
+
font-size: $mtvh-base-font-size;
|
|
70
84
|
}
|
|
71
85
|
}
|
|
72
86
|
.mtvh-btn, p {
|
|
@@ -75,18 +89,12 @@
|
|
|
75
89
|
}
|
|
76
90
|
}
|
|
77
91
|
|
|
78
|
-
|
|
79
|
-
+ .mtvh-btn, + .mtvh-link {
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
h3 {
|
|
92
|
+
h3, .mtvh-h3 {
|
|
85
93
|
+ .mtvh-btn, + .mtvh-link {
|
|
86
94
|
margin-top: 0.625rem;
|
|
87
95
|
}
|
|
88
96
|
}
|
|
89
|
-
h4 {
|
|
97
|
+
h4, .mtvh-h4 {
|
|
90
98
|
+ .mtvh-btn, + .mtvh-link {
|
|
91
99
|
margin-top: 0.625rem;
|
|
92
100
|
}
|
|
@@ -108,12 +116,17 @@
|
|
|
108
116
|
background-color: var(--#{$prefix}content-block-bg);
|
|
109
117
|
}
|
|
110
118
|
|
|
119
|
+
|
|
111
120
|
&-icon {
|
|
112
121
|
|
|
113
|
-
|
|
122
|
+
&:not(.mtvh-content-block-link-card ) {
|
|
123
|
+
padding-top: $mtvh-spacing-5;
|
|
124
|
+
}
|
|
114
125
|
|
|
115
126
|
.mtvh-icon {
|
|
116
127
|
margin-bottom: $mtvh-spacing-3;
|
|
128
|
+
height: $icon-size-scale-xl;
|
|
129
|
+
display: block;
|
|
117
130
|
}
|
|
118
131
|
|
|
119
132
|
h3:has(+ p + p ), h3:has(+ p + p + p), h3:has(+ div){
|
|
@@ -205,3 +218,5 @@
|
|
|
205
218
|
--#{$prefix}content-block-bg: #{$variable};
|
|
206
219
|
}
|
|
207
220
|
}
|
|
221
|
+
|
|
222
|
+
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
.mtvh-form {
|
|
2
3
|
|
|
3
4
|
@import "../forms/form-control";
|
|
4
5
|
@import "../forms/form-check";
|
|
@@ -8,22 +9,6 @@
|
|
|
8
9
|
@import "../forms/form-date-input";
|
|
9
10
|
@import "../forms/input-group";
|
|
10
11
|
|
|
11
|
-
--#{$prefix}form-padding-y: #{$mtvh-spacing-7};
|
|
12
|
-
--#{$prefix}form-padding-x: #{$mtvh-spacing-4};
|
|
13
|
-
|
|
14
|
-
@include media-breakpoint-up("lg") {
|
|
15
|
-
--#{$prefix}form-padding-y: #{$mtvh-spacing-8};
|
|
16
|
-
--#{$prefix}form-padding-x: #{$mtvh-spacing-11};
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
background-color: var(--#{$prefix}white);
|
|
20
|
-
margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
|
|
21
|
-
padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
|
|
24
|
-
@include media-breakpoint-up("md") {
|
|
25
|
-
margin: 0;
|
|
26
|
-
}
|
|
27
12
|
|
|
28
13
|
.form-group {
|
|
29
14
|
margin-bottom: var(--#{$prefix}form-group-padding-y);
|
|
@@ -46,8 +31,29 @@
|
|
|
46
31
|
}
|
|
47
32
|
}
|
|
48
33
|
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.mtvh-formio {
|
|
37
|
+
|
|
38
|
+
--#{$prefix}form-padding-y: #{$mtvh-spacing-7};
|
|
39
|
+
--#{$prefix}form-padding-x: #{$mtvh-spacing-4};
|
|
40
|
+
|
|
41
|
+
@include media-breakpoint-up("lg") {
|
|
42
|
+
--#{$prefix}form-padding-y: #{$mtvh-spacing-8};
|
|
43
|
+
--#{$prefix}form-padding-x: #{$mtvh-spacing-11};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
background-color: var(--#{$prefix}white);
|
|
47
|
+
margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
|
|
48
|
+
padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
|
|
51
|
+
@include media-breakpoint-up("md") {
|
|
52
|
+
margin: 0;
|
|
53
|
+
}
|
|
49
54
|
|
|
50
55
|
}
|
|
56
|
+
|
|
51
57
|
.mtvh-form-container {
|
|
52
58
|
|
|
53
59
|
--#{$prefix}form-max-width: unset;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.notification {
|
|
2
|
+
|
|
3
|
+
--#{$prefix}notification-text-color: var(--mtvh-white);
|
|
4
|
+
--#{$prefix}notification-bg-color: var(--mtvh-red-04);
|
|
5
|
+
|
|
6
|
+
margin-left: $mtvh-spacing-7;
|
|
7
|
+
margin-top: -$mtvh-spacing-5;
|
|
8
|
+
|
|
9
|
+
.mtvh-icon {
|
|
10
|
+
position: relative;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&-text {
|
|
14
|
+
position: absolute;
|
|
15
|
+
margin-top: 6px;
|
|
16
|
+
margin-left: -20px;
|
|
17
|
+
background-color: var(--#{$prefix}notification-bg-color);
|
|
18
|
+
color: var(--#{$prefix}notification-text-color);
|
|
19
|
+
border-radius: var(--#{$prefix}border-radius-pill);
|
|
20
|
+
font-size: $font-size-xxs;
|
|
21
|
+
font-weight: $mtvh-font-weight-bold;
|
|
22
|
+
padding: 2px 5px;
|
|
23
|
+
line-height: 1;
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
vertical-align: baseline;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.mtvh-icon-notification + .notification-text {
|
|
29
|
+
margin-left: -23px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
.badge {
|
|
2
|
+
--#{$prefix}badge-padding-x: #{$mtvh-spacing-2};
|
|
3
|
+
--#{$prefix}badge-padding-y: #{$mtvh-spacing-1};
|
|
4
|
+
|
|
2
5
|
background-color: var(--#{$prefix}badge-background);
|
|
3
6
|
border-color: var(--#{$prefix}badge-border-color);
|
|
4
7
|
color: var(--#{$prefix}badge-color);
|
|
5
|
-
|
|
8
|
+
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}badge-border-color);
|
|
9
|
+
outline-offset: calc(var(--#{$prefix}btn-outline-border) * -1);
|
|
6
10
|
text-transform: uppercase;
|
|
7
11
|
line-height: 1.25;
|
|
8
|
-
@include media-breakpoint-up(
|
|
9
|
-
--#{$prefix}badge-padding-x: #{$mtvh-spacing-
|
|
10
|
-
--#{$prefix}badge-padding-y: #{$mtvh-spacing-
|
|
12
|
+
@include media-breakpoint-up(md) {
|
|
13
|
+
--#{$prefix}badge-padding-x: #{$mtvh-spacing-3};
|
|
14
|
+
--#{$prefix}badge-padding-y: #{$mtvh-spacing-2};
|
|
15
|
+
|
|
11
16
|
}
|
|
12
17
|
}
|
|
13
18
|
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
flex-basis: 100%;
|
|
34
34
|
margin-right: 1px;
|
|
35
35
|
color: var(--#{$prefix}stepper-disabled-font-color);
|
|
36
|
+
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
36
37
|
font-size: var(--#{$prefix}stepper-font-size);
|
|
37
38
|
padding: var(--#{$prefix}stepper-item-padding-x) var(--#{$prefix}stepper-item-padding-y);
|
|
38
|
-
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
39
39
|
|
|
40
40
|
&:has( a + span), &:has( span + a ) {
|
|
41
41
|
background-color: var(--#{$prefix}stepper-bg-color);
|
|
@@ -59,12 +59,33 @@
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
}
|
|
62
|
+
|
|
62
63
|
a {
|
|
63
64
|
text-decoration: none;
|
|
64
65
|
color: var(--#{$prefix}stepper-font-color);
|
|
65
66
|
font-size: var(--#{$prefix}stepper-font-size);
|
|
66
67
|
}
|
|
67
68
|
|
|
69
|
+
&:has(a:not(.link-inactive)) {
|
|
70
|
+
&:before {
|
|
71
|
+
font-weight: $mtvh-font-weight-bold;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:has(a.link-inactive) {
|
|
76
|
+
color: var(--#{$prefix}stepper-disabled-font-color);
|
|
77
|
+
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
78
|
+
|
|
79
|
+
a {
|
|
80
|
+
color: var(--#{$prefix}stepper-disabled-font-color);
|
|
81
|
+
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
82
|
+
font-weight: normal;
|
|
83
|
+
&:hover {
|
|
84
|
+
cursor: initial;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
68
89
|
a, span {
|
|
69
90
|
@include media-breakpoint-down($stepper-breakpoint) {
|
|
70
91
|
|
|
@@ -6,6 +6,7 @@ $asset-icon-path: "./images/icons/" !default;
|
|
|
6
6
|
|
|
7
7
|
// Font
|
|
8
8
|
$font-size-base: 1rem;
|
|
9
|
+
$font-size-xxs: $font-size-base * 0.625;
|
|
9
10
|
$font-size-xs: $font-size-base;
|
|
10
11
|
$font-size-sm: $font-size-base * 1.125;
|
|
11
12
|
$font-size-md: $font-size-base * 1.375;
|
|
@@ -47,9 +48,12 @@ $warning: #F8D643;
|
|
|
47
48
|
$danger: #DD080D;
|
|
48
49
|
$primary: #0072BF;
|
|
49
50
|
$dark: #000000;
|
|
50
|
-
$secondary: #
|
|
51
|
+
$secondary: #696969;
|
|
51
52
|
$light: #ffffff;
|
|
52
53
|
$stone: #F9F2EA;
|
|
54
|
+
$grey-01: #f7f7f7;
|
|
55
|
+
$danger-bg-subtle: #FF7C8C;
|
|
56
|
+
$danger-text-emphasis: #000000;
|
|
53
57
|
|
|
54
58
|
$theme-colors: (
|
|
55
59
|
"primary": $primary,
|
|
@@ -60,7 +64,8 @@ $theme-colors: (
|
|
|
60
64
|
"danger": $danger,
|
|
61
65
|
"light": $light,
|
|
62
66
|
"dark": $dark,
|
|
63
|
-
"stone": $stone
|
|
67
|
+
"stone": $stone,
|
|
68
|
+
"grey-01": $grey-01
|
|
64
69
|
);
|
|
65
70
|
|
|
66
71
|
|
|
@@ -225,7 +230,7 @@ $stepper-item-padding-x: $mtvh-spacing-3;
|
|
|
225
230
|
$stepper-item-padding-y: $mtvh-spacing-2;
|
|
226
231
|
$stepper-breakpoint: "lg";
|
|
227
232
|
|
|
228
|
-
$alert-border-radius:
|
|
233
|
+
$alert-border-radius: 8px;
|
|
229
234
|
$banner-theme-colors: (
|
|
230
235
|
"success": var(--#{$prefix}green-02),
|
|
231
236
|
"warning": var(--#{$prefix}yellow-02),
|
|
@@ -325,3 +330,9 @@ $badge-border-radius: 0;
|
|
|
325
330
|
$badge-padding-x: $mtvh-spacing-1;
|
|
326
331
|
$badge-padding-y: 0;
|
|
327
332
|
$badge-font-size: $mtvh-base-font-size;
|
|
333
|
+
|
|
334
|
+
/* Notification */
|
|
335
|
+
$notification-bg-color: $danger;
|
|
336
|
+
$notification-text-color: var(--#{$prefix}white);
|
|
337
|
+
|
|
338
|
+
$box-shadow:0 0.125rem 0.225rem rgba(0,0,0,0.12);
|
|
@@ -7,6 +7,21 @@
|
|
|
7
7
|
|
|
8
8
|
.invalid-feedback {
|
|
9
9
|
font-weight: $mtvh-font-weight-bold;
|
|
10
|
+
|
|
11
|
+
&:has(.error.form-text) {
|
|
12
|
+
.form-text {
|
|
13
|
+
&.error {
|
|
14
|
+
color: $form-feedback-invalid-color;
|
|
15
|
+
font-size: $font-size-sm;
|
|
16
|
+
font-weight: bold;
|
|
17
|
+
margin: 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
@include form-invalid-text();
|
|
22
|
+
&:empty {
|
|
23
|
+
display: none;
|
|
24
|
+
}
|
|
10
25
|
}
|
|
11
26
|
|
|
12
27
|
.form-check-input {
|
|
@@ -17,9 +32,4 @@
|
|
|
17
32
|
}
|
|
18
33
|
}
|
|
19
34
|
|
|
20
|
-
.form-text {
|
|
21
|
-
&.error {
|
|
22
|
-
@include form-invalid-text();
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
35
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
position: relative;
|
|
9
9
|
display: flex;
|
|
10
10
|
gap: $mtvh-spacing-3;
|
|
11
|
-
margin: 0;
|
|
11
|
+
margin: $mtvh-spacing-3 0 0 0;
|
|
12
12
|
&:before {
|
|
13
13
|
content: '';
|
|
14
14
|
-webkit-mask: get-icon('error',$danger);
|
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
-webkit-mask-repeat: no-repeat;
|
|
19
19
|
margin-left: -$mtvh-spacing-6;
|
|
20
20
|
padding-right: $icon-size-scale-sm;
|
|
21
|
-
margin-top: $mtvh-spacing-
|
|
21
|
+
margin-top: $mtvh-spacing-1;
|
|
22
22
|
}
|
|
23
|
+
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
|