@mtvh/mtvh-design-system 0.0.13 → 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 +1 -0
- package/assets/scss/components/_content-block.scss +10 -4
- package/assets/scss/components/_form.scss +23 -17
- package/assets/scss/components/_status.scss +9 -4
- package/assets/scss/components/_stepper.scss +22 -1
- package/assets/scss/config/_variables.scss +10 -4
- 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 +1 -1
|
@@ -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
|
+
}
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
@extend %h3;
|
|
65
65
|
color: var(--#{$prefix}black);
|
|
66
66
|
text-decoration: none;
|
|
67
|
+
|
|
67
68
|
&:after {
|
|
68
69
|
bottom: 0;
|
|
69
70
|
content: "";
|
|
@@ -73,10 +74,13 @@
|
|
|
73
74
|
top: 0;
|
|
74
75
|
z-index: 100;
|
|
75
76
|
}
|
|
76
|
-
|
|
77
|
+
|
|
78
|
+
&:active, &:focus {
|
|
77
79
|
outline: unset;
|
|
78
80
|
}
|
|
79
|
-
|
|
81
|
+
}
|
|
82
|
+
p {
|
|
83
|
+
font-size: $mtvh-base-font-size;
|
|
80
84
|
}
|
|
81
85
|
}
|
|
82
86
|
.mtvh-btn, p {
|
|
@@ -85,12 +89,12 @@
|
|
|
85
89
|
}
|
|
86
90
|
}
|
|
87
91
|
|
|
88
|
-
h3 {
|
|
92
|
+
h3, .mtvh-h3 {
|
|
89
93
|
+ .mtvh-btn, + .mtvh-link {
|
|
90
94
|
margin-top: 0.625rem;
|
|
91
95
|
}
|
|
92
96
|
}
|
|
93
|
-
h4 {
|
|
97
|
+
h4, .mtvh-h4 {
|
|
94
98
|
+ .mtvh-btn, + .mtvh-link {
|
|
95
99
|
margin-top: 0.625rem;
|
|
96
100
|
}
|
|
@@ -214,3 +218,5 @@
|
|
|
214
218
|
--#{$prefix}content-block-bg: #{$variable};
|
|
215
219
|
}
|
|
216
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;
|
|
@@ -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
|
|
|
@@ -48,9 +48,12 @@ $warning: #F8D643;
|
|
|
48
48
|
$danger: #DD080D;
|
|
49
49
|
$primary: #0072BF;
|
|
50
50
|
$dark: #000000;
|
|
51
|
-
$secondary: #
|
|
51
|
+
$secondary: #696969;
|
|
52
52
|
$light: #ffffff;
|
|
53
53
|
$stone: #F9F2EA;
|
|
54
|
+
$grey-01: #f7f7f7;
|
|
55
|
+
$danger-bg-subtle: #FF7C8C;
|
|
56
|
+
$danger-text-emphasis: #000000;
|
|
54
57
|
|
|
55
58
|
$theme-colors: (
|
|
56
59
|
"primary": $primary,
|
|
@@ -61,7 +64,8 @@ $theme-colors: (
|
|
|
61
64
|
"danger": $danger,
|
|
62
65
|
"light": $light,
|
|
63
66
|
"dark": $dark,
|
|
64
|
-
"stone": $stone
|
|
67
|
+
"stone": $stone,
|
|
68
|
+
"grey-01": $grey-01
|
|
65
69
|
);
|
|
66
70
|
|
|
67
71
|
|
|
@@ -226,7 +230,7 @@ $stepper-item-padding-x: $mtvh-spacing-3;
|
|
|
226
230
|
$stepper-item-padding-y: $mtvh-spacing-2;
|
|
227
231
|
$stepper-breakpoint: "lg";
|
|
228
232
|
|
|
229
|
-
$alert-border-radius:
|
|
233
|
+
$alert-border-radius: 8px;
|
|
230
234
|
$banner-theme-colors: (
|
|
231
235
|
"success": var(--#{$prefix}green-02),
|
|
232
236
|
"warning": var(--#{$prefix}yellow-02),
|
|
@@ -329,4 +333,6 @@ $badge-font-size: $mtvh-base-font-size;
|
|
|
329
333
|
|
|
330
334
|
/* Notification */
|
|
331
335
|
$notification-bg-color: $danger;
|
|
332
|
-
$notification-text-color:
|
|
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
|
|