@mtvh/mtvh-design-system 0.0.14 → 0.0.15
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 +6 -3
- package/assets/scss/components/_all.scss +1 -0
- package/assets/scss/components/_banner.scss +3 -0
- package/assets/scss/components/_button.scss +0 -1
- package/assets/scss/components/_content-block.scss +5 -4
- package/assets/scss/components/_form.scss +27 -27
- package/assets/scss/components/_link.scss +10 -0
- package/assets/scss/components/_notification.scss +19 -21
- package/assets/scss/components/_rounded-card.scss +9 -0
- package/assets/scss/components/_status.scss +3 -0
- package/assets/scss/config/_variables.scss +9 -11
- package/assets/scss/forms/_form-check.scss +0 -4
- package/assets/scss/mixins/_form.scss +1 -1
- package/dist/mtvh.min.css +1 -1
- package/package.json +1 -1
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
display: flex;
|
|
38
38
|
flex-direction: row;
|
|
39
39
|
justify-content: space-between;
|
|
40
|
+
align-items: center;
|
|
40
41
|
padding: var(--#{$prefix}banner-padding-y) var(--#{$prefix}banner-padding-x);
|
|
41
42
|
|
|
42
43
|
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
flex-shrink: 0;
|
|
45
46
|
top: unset;
|
|
46
47
|
position: relative;
|
|
48
|
+
align-self: start;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
button {
|
|
@@ -52,6 +54,7 @@
|
|
|
52
54
|
|
|
53
55
|
+ .mtvh-banner-row {
|
|
54
56
|
border-top: 1px solid var(--#{$prefix}border-color);
|
|
57
|
+
border-radius: 0;
|
|
55
58
|
padding-top: 0;
|
|
56
59
|
}
|
|
57
60
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.mtvh-content-block {
|
|
2
2
|
|
|
3
|
-
padding: $mtvh-spacing-6 $mtvh-spacing-5;
|
|
3
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-5 $mtvh-spacing-6 $mtvh-spacing-5;
|
|
4
4
|
@include media-breakpoint-up(md) {
|
|
5
|
-
padding: $mtvh-spacing-6;
|
|
5
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
6
6
|
}
|
|
7
7
|
&__date {
|
|
8
8
|
margin-bottom: .5rem;
|
|
@@ -90,15 +90,16 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
h3, .mtvh-h3 {
|
|
93
|
-
+ .mtvh-btn
|
|
93
|
+
+ .mtvh-btn {
|
|
94
94
|
margin-top: 0.625rem;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
h4, .mtvh-h4 {
|
|
98
|
-
+ .mtvh-btn
|
|
98
|
+
+ .mtvh-btn {
|
|
99
99
|
margin-top: 0.625rem;
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
+
|
|
102
103
|
&-no-padding {
|
|
103
104
|
padding: 0;
|
|
104
105
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
.mtvh-form {
|
|
1
|
+
.mtvh-form, .mtvh-formio {
|
|
3
2
|
|
|
4
3
|
@import "../forms/form-control";
|
|
5
4
|
@import "../forms/form-check";
|
|
@@ -9,14 +8,36 @@
|
|
|
9
8
|
@import "../forms/form-date-input";
|
|
10
9
|
@import "../forms/input-group";
|
|
11
10
|
|
|
11
|
+
&:has(.mtvh-form-container), &:has(.formio-form) {
|
|
12
|
+
|
|
13
|
+
background-color: var(--#{$prefix}white);
|
|
14
|
+
--#{$prefix}form-padding-y: #{$mtvh-spacing-7};
|
|
15
|
+
--#{$prefix}form-padding-x: #{$mtvh-spacing-4};
|
|
16
|
+
--#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
|
|
17
|
+
|
|
18
|
+
@include media-breakpoint-up("lg") {
|
|
19
|
+
--#{$prefix}form-padding-y: #{$mtvh-spacing-8};
|
|
20
|
+
--#{$prefix}form-padding-x: #{$mtvh-spacing-11};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
|
|
24
|
+
padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
|
|
27
|
+
@include media-breakpoint-up("md") {
|
|
28
|
+
margin: 0;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
12
31
|
|
|
13
32
|
.form-group {
|
|
14
33
|
margin-bottom: var(--#{$prefix}form-group-padding-y);
|
|
15
34
|
}
|
|
16
35
|
|
|
17
|
-
.field-required
|
|
18
|
-
|
|
19
|
-
|
|
36
|
+
legend.field-required, .tab-error, .mtvh-form-container-required .field-required{
|
|
37
|
+
&:after {
|
|
38
|
+
content: " *";
|
|
39
|
+
color: $form-feedback-invalid-color;
|
|
40
|
+
}
|
|
20
41
|
}
|
|
21
42
|
|
|
22
43
|
.form-text {
|
|
@@ -33,31 +54,10 @@
|
|
|
33
54
|
|
|
34
55
|
}
|
|
35
56
|
|
|
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
|
-
}
|
|
54
|
-
|
|
55
|
-
}
|
|
56
57
|
|
|
57
|
-
.mtvh-form-container {
|
|
58
|
+
.mtvh-form-container, .formio-form {
|
|
58
59
|
|
|
59
60
|
--#{$prefix}form-max-width: unset;
|
|
60
|
-
--#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
|
|
61
61
|
--#{$prefix}form-control-input-width: #{$input-width-size-lg};
|
|
62
62
|
|
|
63
63
|
@include media-breakpoint-up("md") {
|
|
@@ -17,11 +17,21 @@ $mtvh-links: (
|
|
|
17
17
|
|
|
18
18
|
.mtvh-link {
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
line-height: 1.2;
|
|
21
22
|
text-decoration: underline;
|
|
22
23
|
font-weight: bold;
|
|
23
24
|
cursor: pointer;
|
|
24
25
|
display: inline-block;
|
|
26
|
+
|
|
27
|
+
&-btn {
|
|
28
|
+
border: 0;
|
|
29
|
+
padding-top: $mtvh-spacing-3;
|
|
30
|
+
padding-bottom: $mtvh-spacing-3;
|
|
31
|
+
line-height: var(--mtvh-btn-line-height);
|
|
32
|
+
display: block;
|
|
33
|
+
}
|
|
34
|
+
|
|
25
35
|
&:hover {
|
|
26
36
|
color: var(--#{$prefix}blue-05);
|
|
27
37
|
text-decoration: none;
|
|
@@ -1,32 +1,30 @@
|
|
|
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;
|
|
1
|
+
.mtvh-notification {
|
|
8
2
|
|
|
9
3
|
.mtvh-icon {
|
|
10
4
|
position: relative;
|
|
11
5
|
}
|
|
12
6
|
|
|
7
|
+
span {
|
|
8
|
+
|
|
9
|
+
}
|
|
10
|
+
|
|
13
11
|
&-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
12
|
}
|
|
27
13
|
|
|
28
|
-
.
|
|
29
|
-
|
|
14
|
+
.badge {
|
|
15
|
+
--#{$prefix}badge-padding-x: 2px;
|
|
16
|
+
--#{$prefix}badge-padding-y: 2px;
|
|
17
|
+
--#{$prefix}margin-left: 4px;
|
|
18
|
+
font-size: 0.625rem;
|
|
19
|
+
margin-left: var(--#{$prefix}margin-left);
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* customize the position */
|
|
24
|
+
.mtvh-icon-update {
|
|
25
|
+
.badge {
|
|
26
|
+
--#{$prefix}margin-left: 2px;
|
|
27
|
+
}
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
}
|
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
outline-offset: calc(var(--#{$prefix}btn-outline-border) * -1);
|
|
10
10
|
text-transform: uppercase;
|
|
11
11
|
line-height: 1.25;
|
|
12
|
+
min-width: 1rem;
|
|
13
|
+
min-height: 1rem;
|
|
14
|
+
|
|
12
15
|
@include media-breakpoint-up(md) {
|
|
13
16
|
--#{$prefix}badge-padding-x: #{$mtvh-spacing-3};
|
|
14
17
|
--#{$prefix}badge-padding-y: #{$mtvh-spacing-2};
|
|
@@ -23,7 +23,8 @@ $font-sizes: (
|
|
|
23
23
|
4: $font-size-lg,
|
|
24
24
|
5: $font-size-md,
|
|
25
25
|
6: $font-size-sm,
|
|
26
|
-
7: $font-size-xs
|
|
26
|
+
7: $font-size-xs,
|
|
27
|
+
8: $font-size-xxs
|
|
27
28
|
);
|
|
28
29
|
|
|
29
30
|
$line-height-base: 1.5;
|
|
@@ -54,6 +55,7 @@ $stone: #F9F2EA;
|
|
|
54
55
|
$grey-01: #f7f7f7;
|
|
55
56
|
$danger-bg-subtle: #FF7C8C;
|
|
56
57
|
$danger-text-emphasis: #000000;
|
|
58
|
+
$grey-03: #DADADA;
|
|
57
59
|
|
|
58
60
|
$theme-colors: (
|
|
59
61
|
"primary": $primary,
|
|
@@ -65,7 +67,8 @@ $theme-colors: (
|
|
|
65
67
|
"light": $light,
|
|
66
68
|
"dark": $dark,
|
|
67
69
|
"stone": $stone,
|
|
68
|
-
"grey-01": $grey-01
|
|
70
|
+
"grey-01": $grey-01,
|
|
71
|
+
"grey-03": $grey-03,
|
|
69
72
|
);
|
|
70
73
|
|
|
71
74
|
|
|
@@ -109,7 +112,6 @@ $spacers: (
|
|
|
109
112
|
3: $spacer,
|
|
110
113
|
4: $spacer * 1.5,
|
|
111
114
|
5: $spacer * 3,
|
|
112
|
-
6: $mtvh-spacing-8,
|
|
113
115
|
11: $mtvh-spacing-1,
|
|
114
116
|
12: $mtvh-spacing-2,
|
|
115
117
|
13: $mtvh-spacing-3,
|
|
@@ -117,10 +119,7 @@ $spacers: (
|
|
|
117
119
|
15: $mtvh-spacing-5,
|
|
118
120
|
16: $mtvh-spacing-6,
|
|
119
121
|
17: $mtvh-spacing-7,
|
|
120
|
-
18: $mtvh-spacing-8
|
|
121
|
-
19: $mtvh-spacing-9,
|
|
122
|
-
20: $mtvh-spacing-10,
|
|
123
|
-
21: $mtvh-spacing-11
|
|
122
|
+
18: $mtvh-spacing-8
|
|
124
123
|
);
|
|
125
124
|
|
|
126
125
|
$icon-size-scale-xs : 16px !default;
|
|
@@ -188,14 +187,14 @@ $form-check-padding-start: $form-check-input-width + 1rem;
|
|
|
188
187
|
$form-check-input-checked-bg-color: var(--#{$prefix}purple-04);
|
|
189
188
|
$form-check-input-hover-bg-color: var(--#{$prefix}purple-04);
|
|
190
189
|
$form-check-input-checked-border-color: var(--#{$prefix}purple-04);
|
|
191
|
-
$form-check-input-focus-border: var(--#{$prefix}purple-
|
|
192
|
-
$form-check-input-focus-bg-color: var(--#{$prefix}purple-
|
|
190
|
+
$form-check-input-focus-border: var(--#{$prefix}purple-04);
|
|
191
|
+
$form-check-input-focus-bg-color: var(--#{$prefix}purple-04);
|
|
193
192
|
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m6.813 13.492 9.9-9.848c.274-.275.587-.406.937-.393.35.012.663.156.938.43.274.275.412.587.412.937 0 .35-.137.661-.413.936l-10.8 10.784a1.313 1.313 0 0 1-1.912 0l-4.463-4.456c-.274-.274-.412-.587-.412-.936 0-.35.137-.662.413-.936.274-.275.587-.412.937-.412.35 0 .663.137.938.412l3.525 3.482Z' fill='#{$form-check-input-checked-color}'/></svg>");
|
|
194
193
|
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
|
|
195
194
|
$form-check-input-focus-box-shadow: "";
|
|
196
195
|
$form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
|
|
197
196
|
$form-check-wrapper-radio-invalid-border: 1px solid var(--#{$prefix}red-01);
|
|
198
|
-
$form-select-indicator-color:
|
|
197
|
+
$form-select-indicator-color: var(--#{$prefix}black);
|
|
199
198
|
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
|
|
200
199
|
|
|
201
200
|
|
|
@@ -334,5 +333,4 @@ $badge-font-size: $mtvh-base-font-size;
|
|
|
334
333
|
/* Notification */
|
|
335
334
|
$notification-bg-color: $danger;
|
|
336
335
|
$notification-text-color: var(--#{$prefix}white);
|
|
337
|
-
|
|
338
336
|
$box-shadow:0 0.125rem 0.225rem rgba(0,0,0,0.12);
|