@mtvh/mtvh-design-system 0.0.17 → 0.0.19
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/_all.scss +1 -0
- package/assets/scss/components/_banner.scss +4 -0
- package/assets/scss/components/_button.scss +4 -5
- package/assets/scss/components/_close.scss +1 -1
- package/assets/scss/components/_content-block.scss +18 -12
- package/assets/scss/components/_form.scss +6 -0
- package/assets/scss/components/_link.scss +4 -12
- package/assets/scss/components/_notification.scss +9 -17
- package/assets/scss/components/_pagination.scss +20 -0
- package/assets/scss/components/_status.scss +1 -2
- package/assets/scss/components/_stepper.scss +13 -0
- package/assets/scss/config/_icon-list.scss +1 -1
- package/assets/scss/config/_variables.scss +12 -1
- package/assets/scss/forms/_form-chip.scss +39 -0
- package/assets/scss/forms/_form-control.scss +2 -4
- package/assets/scss/forms/_form-date-input.scss +7 -2
- package/assets/scss/forms/_validation.scss +4 -3
- package/assets/scss/mixins/_form.scss +5 -6
- package/dist/mtvh.min.css +1 -1
- package/package.json +1 -1
|
@@ -118,9 +118,8 @@ $mtvh-buttons: (
|
|
|
118
118
|
|
|
119
119
|
&:focus-visible {
|
|
120
120
|
box-shadow: none;
|
|
121
|
-
outline: solid var(
|
|
122
|
-
outline-offset:
|
|
123
|
-
outline-offset: var(--mtvh-btn-outline-border);
|
|
121
|
+
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
|
|
122
|
+
outline-offset: var(--#{$prefix}btn-outline-border);
|
|
124
123
|
text-decoration: none;
|
|
125
124
|
}
|
|
126
125
|
&:focus:not(:focus-visible) {
|
|
@@ -133,12 +132,12 @@ $mtvh-buttons: (
|
|
|
133
132
|
|
|
134
133
|
.mtvh-btn {
|
|
135
134
|
min-height: 2.5rem;
|
|
136
|
-
min-width: var(
|
|
135
|
+
min-width: var(--#{$prefix}btn-min-width);
|
|
137
136
|
border-radius: $btn-border-radius;
|
|
138
137
|
border: $btn-border-width solid transparent;
|
|
139
138
|
white-space: normal;
|
|
140
139
|
font-size: $btn-font-size;
|
|
141
|
-
line-height: var(
|
|
140
|
+
line-height: var(--#{$prefix}btn-line-height);
|
|
142
141
|
text-decoration: none;
|
|
143
142
|
-webkit-font-smoothing: antialiased;
|
|
144
143
|
-webkit-appearance: none;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
&:focus-visible {
|
|
13
13
|
box-shadow: none;
|
|
14
14
|
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-close-focus-outline-color);
|
|
15
|
-
outline-offset: var(--#{$prefix}btn-outline-border);
|
|
15
|
+
outline-offset: calc(var(--#{$prefix}btn-outline-border) * -1);
|
|
16
16
|
text-decoration: none;
|
|
17
17
|
-webkit-tap-highlight-color: unset;
|
|
18
18
|
}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
.mtvh-content-block {
|
|
2
2
|
|
|
3
|
-
padding: $mtvh-spacing-
|
|
3
|
+
padding: $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-5 $mtvh-spacing-5;
|
|
4
4
|
@include media-breakpoint-up(md) {
|
|
5
|
-
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
5
|
+
padding: $mtvh-spacing-6 $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-6;
|
|
6
6
|
}
|
|
7
|
+
border-radius: .5rem;
|
|
8
|
+
position: relative;
|
|
9
|
+
|
|
7
10
|
&__date {
|
|
8
11
|
margin-bottom: .5rem;
|
|
9
12
|
}
|
|
13
|
+
|
|
10
14
|
&--text-only {
|
|
11
15
|
padding: $mtvh-spacing-4 $mtvh-spacing-5;
|
|
12
16
|
font-size: $font-size-xs;
|
|
@@ -18,20 +22,19 @@
|
|
|
18
22
|
color: inherit;
|
|
19
23
|
}
|
|
20
24
|
}
|
|
25
|
+
|
|
21
26
|
&--stretch {
|
|
22
27
|
height: 100%;
|
|
23
28
|
}
|
|
24
29
|
|
|
25
|
-
border-radius: .5rem;
|
|
26
|
-
position: relative;
|
|
27
|
-
|
|
28
30
|
&-link-card {
|
|
31
|
+
|
|
29
32
|
text-decoration: none;
|
|
30
33
|
box-shadow: var(--#{$prefix}box-shadow);
|
|
31
|
-
padding: $mtvh-spacing-5;
|
|
34
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-5 $mtvh-spacing-6 $mtvh-spacing-5;
|
|
32
35
|
|
|
33
36
|
@include media-breakpoint-up(md) {
|
|
34
|
-
padding: $mtvh-spacing-
|
|
37
|
+
padding: $mtvh-spacing-6;
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
@include media-breakpoint-up(lg) {
|
|
@@ -45,7 +48,7 @@
|
|
|
45
48
|
|
|
46
49
|
&:focus-within {
|
|
47
50
|
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
|
|
48
|
-
outline-offset: $
|
|
51
|
+
outline-offset: var(--#{$prefix}btn-outline-border);
|
|
49
52
|
background-color: var(--#{$prefix}white);
|
|
50
53
|
}
|
|
51
54
|
&:active, &:focus {
|
|
@@ -53,7 +56,7 @@
|
|
|
53
56
|
outline: unset;
|
|
54
57
|
}
|
|
55
58
|
&:hover {
|
|
56
|
-
outline: solid
|
|
59
|
+
outline: solid $btn-border-width var(--#{$prefix}purple-03);
|
|
57
60
|
outline-offset: 0;
|
|
58
61
|
}
|
|
59
62
|
&:active{
|
|
@@ -100,16 +103,15 @@
|
|
|
100
103
|
}
|
|
101
104
|
}
|
|
102
105
|
|
|
106
|
+
|
|
103
107
|
&-no-padding {
|
|
104
108
|
padding: 0;
|
|
105
109
|
}
|
|
106
110
|
|
|
107
111
|
&-border {
|
|
108
|
-
|
|
109
112
|
--#{$prefix}content-block-border: $border-width-sm solid;
|
|
110
113
|
border: $border-width-sm solid;
|
|
111
114
|
border-color: var(--#{$prefix}content-block-border);
|
|
112
|
-
|
|
113
115
|
}
|
|
114
116
|
|
|
115
117
|
&-bg {
|
|
@@ -121,7 +123,10 @@
|
|
|
121
123
|
&-icon {
|
|
122
124
|
|
|
123
125
|
&:not(.mtvh-content-block-link-card ) {
|
|
124
|
-
|
|
126
|
+
padding: $mtvh-spacing-5;
|
|
127
|
+
@include media-breakpoint-up(md) {
|
|
128
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
129
|
+
}
|
|
125
130
|
}
|
|
126
131
|
|
|
127
132
|
.mtvh-icon {
|
|
@@ -139,6 +144,7 @@
|
|
|
139
144
|
&-container {
|
|
140
145
|
font-size: $font-size-sm;
|
|
141
146
|
}
|
|
147
|
+
|
|
142
148
|
&-body {
|
|
143
149
|
|
|
144
150
|
@include media-breakpoint-up(md) {
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
.mtvh-formio {
|
|
2
2
|
@import "../forms/formio";
|
|
3
3
|
@import "../forms/mtvho_contact_phone";
|
|
4
|
+
@import "../forms/mtvho_contact_email";
|
|
4
5
|
}
|
|
5
6
|
.mtvh-form, .mtvh-formio {
|
|
6
7
|
|
|
7
8
|
@import "../forms/form-control";
|
|
8
9
|
@import "../forms/form-check";
|
|
9
10
|
@import "../forms/labels";
|
|
11
|
+
@import "../forms/form-chip";
|
|
10
12
|
@import "../forms/form-date-input";
|
|
11
13
|
@import "../forms/input-group";
|
|
12
14
|
@import "../forms/validation";
|
|
13
15
|
|
|
16
|
+
|
|
14
17
|
&:has(.mtvh-form-container), &:has(.formio-form) {
|
|
15
18
|
|
|
16
19
|
background-color: var(--#{$prefix}white);
|
|
@@ -34,6 +37,9 @@
|
|
|
34
37
|
|
|
35
38
|
.form-group {
|
|
36
39
|
margin-bottom: var(--#{$prefix}form-group-padding-y);
|
|
40
|
+
.formio-choices.choices {
|
|
41
|
+
margin-bottom: 0;
|
|
42
|
+
}
|
|
37
43
|
}
|
|
38
44
|
|
|
39
45
|
label.field-required, legend.field-required, .tab-error, .mtvh-form-container-required .field-required {
|
|
@@ -17,20 +17,13 @@ $mtvh-links: (
|
|
|
17
17
|
|
|
18
18
|
.mtvh-link {
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
line-height: var(--mtvh-btn-line-height);
|
|
21
|
+
padding-top: $mtvh-spacing-3;
|
|
22
|
+
padding-bottom: $mtvh-spacing-3;
|
|
23
23
|
font-weight: bold;
|
|
24
24
|
cursor: pointer;
|
|
25
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
|
-
}
|
|
26
|
+
min-height: 2.75rem;
|
|
34
27
|
|
|
35
28
|
&:hover {
|
|
36
29
|
color: var(--#{$prefix}blue-05);
|
|
@@ -48,7 +41,6 @@ $mtvh-links: (
|
|
|
48
41
|
&:focus {
|
|
49
42
|
box-shadow: none;
|
|
50
43
|
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
|
|
51
|
-
outline-offset: 0.5rem;;
|
|
52
44
|
text-decoration: none;
|
|
53
45
|
border-radius: var(--#{$prefix}btn-border-radius);
|
|
54
46
|
color: var(--#{$prefix}blue-05);
|
|
@@ -1,30 +1,22 @@
|
|
|
1
1
|
.mtvh-notification {
|
|
2
2
|
|
|
3
|
+
position: relative;
|
|
3
4
|
.mtvh-icon {
|
|
4
5
|
position: relative;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
|
-
span {
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
&-text {
|
|
12
|
-
}
|
|
13
|
-
|
|
14
8
|
.badge {
|
|
15
9
|
--#{$prefix}badge-padding-x: 2px;
|
|
16
10
|
--#{$prefix}badge-padding-y: 2px;
|
|
17
11
|
--#{$prefix}margin-left: 4px;
|
|
18
12
|
font-size: 0.625rem;
|
|
19
|
-
margin-left:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
13
|
+
margin-left: -2px;
|
|
14
|
+
position: absolute;
|
|
15
|
+
left: 25px;
|
|
16
|
+
top: 50%;
|
|
17
|
+
transform: translate(-20%, -50%);
|
|
18
|
+
border-radius: var(--#{$prefix}border-radius-pill);
|
|
19
|
+
min-width: 1rem;
|
|
20
|
+
min-height: 1rem;
|
|
28
21
|
}
|
|
29
|
-
|
|
30
22
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.pagination {
|
|
2
|
+
.page-link {
|
|
3
|
+
|
|
4
|
+
&:has(.mtvh-icon) {
|
|
5
|
+
--#{$prefix}pagination-padding-x: 8px;
|
|
6
|
+
.mtvh-icon:before, .mtvh-icon:after {
|
|
7
|
+
margin-right: 0;
|
|
8
|
+
margin-left: 0;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
@include field-focus();
|
|
12
|
+
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.page-item {
|
|
16
|
+
margin-right: 4px;
|
|
17
|
+
margin-bottom: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
}
|
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
@mixin active-link-style {
|
|
2
|
+
font-weight: $mtvh-font-weight-bold;
|
|
3
|
+
color: var(--#{$prefix}stepper-sm-font-color);
|
|
4
|
+
@include media-breakpoint-up($stepper-breakpoint) {
|
|
5
|
+
color: var(--#{$prefix}stepper-font-color);
|
|
6
|
+
}
|
|
7
|
+
&:before {
|
|
8
|
+
color: var(--#{$prefix}stepper-font-color);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
1
11
|
.mtvh-stepper {
|
|
2
12
|
|
|
3
13
|
--#{$prefix}stepper-font-color: #{$stepper-font-color};
|
|
@@ -50,6 +60,8 @@
|
|
|
50
60
|
}
|
|
51
61
|
&.active {
|
|
52
62
|
background-color: var(--#{$prefix}stepper-active-bg-color);
|
|
63
|
+
@include active-link-style;
|
|
64
|
+
|
|
53
65
|
}
|
|
54
66
|
&:before {
|
|
55
67
|
counter-increment: count-1;
|
|
@@ -104,6 +116,7 @@
|
|
|
104
116
|
&.active {
|
|
105
117
|
span, a {
|
|
106
118
|
opacity: 1;
|
|
119
|
+
@include active-link-style;
|
|
107
120
|
}
|
|
108
121
|
}
|
|
109
122
|
}
|
|
@@ -21,7 +21,7 @@ $icons: (
|
|
|
21
21
|
,'cancel': '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.992 11.816 4.18 17.627c-.26.26-.555.384-.886.372-.33-.012-.626-.147-.886-.407a1.24 1.24 0 0 1 0-1.807l5.776-5.777-5.811-5.811A1.179 1.179 0 0 1 2 3.293c.012-.342.147-.643.407-.903a1.24 1.24 0 0 1 1.807 0L9.992 8.2l5.811-5.811a1.24 1.24 0 0 1 1.807 0 1.24 1.24 0 0 1 0 1.807L11.8 10.008l5.811 5.812c.26.26.39.555.39.886 0 .33-.13.626-.39.886a1.24 1.24 0 0 1-1.807 0l-5.811-5.776Z" fill="#DD080D"/></svg>'
|
|
22
22
|
,'upload': '<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.39 12.825V16c0 .283.096.52.288.712.192.192.43.288.713.288s.52-.096.712-.288a.968.968 0 0 0 .288-.712v-3.175l.9.9c.1.1.212.175.337.225.125.05.25.07.375.063a1.038 1.038 0 0 0 .688-.313c.183-.2.279-.433.287-.7a.916.916 0 0 0-.287-.7l-2.6-2.6a.877.877 0 0 0-.325-.212 1.106 1.106 0 0 0-.375-.063c-.134 0-.259.02-.375.063a.877.877 0 0 0-.325.212l-2.6 2.6c-.2.2-.296.433-.288.7.008.267.113.5.313.7.2.183.433.28.7.288.266.008.5-.088.7-.288l.875-.875ZM4.39 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 2.391 18V2c0-.55.195-1.02.587-1.413A1.926 1.926 0 0 1 4.391 0h7.175a1.974 1.974 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V18c0 .55-.196 1.02-.588 1.413a1.926 1.926 0 0 1-1.412.587h-12Zm7-14V2h-7v16h12V7h-4a.968.968 0 0 1-.712-.287.968.968 0 0 1-.287-.713Z" fill="#000"/></svg>'
|
|
23
23
|
,'delete': '<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.242 19c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 3.242 17V4a.968.968 0 0 1-.712-.288A.968.968 0 0 1 2.242 3c0-.283.096-.52.288-.712A.968.968 0 0 1 3.242 2h4c0-.283.096-.52.288-.712A.968.968 0 0 1 8.242 1h4c.283 0 .521.096.713.288.191.191.287.429.287.712h4c.284 0 .521.096.713.288.191.191.287.429.287.712s-.096.52-.287.712a.968.968 0 0 1-.713.288v13c0 .55-.196 1.02-.587 1.413a1.926 1.926 0 0 1-1.413.587h-10Zm10-15h-10v13h10V4Zm-7 11c.284 0 .521-.096.713-.287A.968.968 0 0 0 9.242 14V7a.968.968 0 0 0-.287-.713A.968.968 0 0 0 8.242 6a.968.968 0 0 0-.712.287.968.968 0 0 0-.288.713v7c0 .283.096.52.288.713.191.191.429.287.712.287Zm4 0c.283 0 .521-.096.713-.287a.968.968 0 0 0 .287-.713V7a.967.967 0 0 0-.287-.713.968.968 0 0 0-.713-.287.968.968 0 0 0-.712.287.967.967 0 0 0-.288.713v7c0 .283.096.52.288.713.191.191.429.287.712.287Z" fill="#0072BF"/></svg>'
|
|
24
|
-
,'update' : '<svg
|
|
24
|
+
,'update' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28"><path fill="#000" d="M19.72 2.069a.905.905 0 0 1 .716.053.897.897 0 0 1 .467.537l1.383 4.202c.099.301.078.593-.064.875a1.106 1.106 0 0 1-.666.57l-4.2 1.383a.892.892 0 0 1-.713-.056.91.91 0 0 1-.465-.542.908.908 0 0 1 .052-.712.893.893 0 0 1 .542-.469l2.361-.778a10.064 10.064 0 0 0-3.887-1.452 8.762 8.762 0 0 0-4.11.35c-2.456.809-4.26 2.349-5.41 4.62-1.152 2.27-1.324 4.633-.517 7.087.805 2.443 2.343 4.239 4.614 5.386 2.27 1.148 4.631 1.319 7.08.512 2.044-.673 3.65-1.9 4.815-3.682 1.166-1.781 1.664-3.728 1.493-5.841-.01-.269.061-.5.213-.692a.993.993 0 0 1 .608-.363.874.874 0 0 1 .722.165c.21.16.322.375.333.64.235 2.562-.35 4.923-1.752 7.082-1.402 2.159-3.351 3.649-5.846 4.47-1.466.483-2.93.657-4.395.524a11.3 11.3 0 0 1-4.102-1.161 11.301 11.301 0 0 1-3.371-2.609c-.978-1.098-1.708-2.38-2.19-3.846-.484-1.467-.658-2.933-.524-4.398.133-1.464.52-2.831 1.16-4.101a11.268 11.268 0 0 1 2.62-3.375c1.105-.98 2.392-1.711 3.86-2.195a10.794 10.794 0 0 1 4.747-.473c1.607.197 3.115.72 4.522 1.568l-.691-2.1a.904.904 0 0 1 .052-.71.895.895 0 0 1 .542-.47Z"/><path fill="#000" d="M13.933 9.282c.26 0 .482.092.665.276a.899.899 0 0 1 .274.657v5.244l3.638 3.639a.94.94 0 0 1 0 1.333.907.907 0 0 1-1.329-.003l-3.845-3.872a1.128 1.128 0 0 1-.254-.374 1.133 1.133 0 0 1-.083-.43v-5.537c0-.254.092-.473.273-.657a.895.895 0 0 1 .661-.276Z"/></svg>'
|
|
25
25
|
,'envelop' : '<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.279 25a2.15 2.15 0 0 1-1.574-.662 2.15 2.15 0 0 1-.662-1.574V5.236c0-.608.22-1.133.662-1.574A2.15 2.15 0 0 1 2.279 3h23.444c.608 0 1.133.22 1.574.662.441.441.662.966.662 1.574v17.528a2.15 2.15 0 0 1-.662 1.574 2.15 2.15 0 0 1-1.574.662H2.28ZM26.178 6.38 14.622 13.96a2.43 2.43 0 0 1-.31.138.907.907 0 0 1-.622 0 1.365 1.365 0 0 1-.281-.138L1.824 6.38v16.38c0 .134.043.243.129.33a.445.445 0 0 0 .329.128H25.72a.446.446 0 0 0 .33-.129.446.446 0 0 0 .128-.329V6.381ZM14 12.49l11.86-7.709H2.166l11.835 7.709ZM1.824 6.38v.28-1.27.03-.639.631-.041 1.29-.28V23.22 6.38Z" fill="#000"/></svg>'
|
|
26
26
|
,'notification': '<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.877 23.917a.85.85 0 0 1-.877-.88c0-.254.083-.466.25-.636a.841.841 0 0 1 .627-.255h1.714V10.838c0-1.985.612-3.755 1.837-5.31 1.224-1.556 2.806-2.536 4.745-2.942V1.82c0-.509.175-.939.525-1.29.35-.353.779-.529 1.288-.529s.94.176 1.292.528c.353.352.53.782.53 1.29v.773c1.944.402 3.53 1.381 4.759 2.937 1.228 1.555 1.842 3.325 1.842 5.31v11.308h1.704c.24 0 .448.087.624.26a.864.864 0 0 1 .263.64.824.824 0 0 1-.259.626.892.892 0 0 1-.638.245H3.877ZM13.987 28a2.542 2.542 0 0 1-1.864-.777 2.54 2.54 0 0 1-.776-1.861h5.287c0 .725-.26 1.346-.78 1.863a2.553 2.553 0 0 1-1.866.775Zm-6.622-5.854h13.27V10.838c0-1.83-.65-3.39-1.95-4.678-1.301-1.29-2.868-1.934-4.701-1.934-1.833 0-3.394.644-4.684 1.934-1.29 1.289-1.935 2.848-1.935 4.678v11.308Z" fill="#000"/></svg>'
|
|
27
27
|
,'close': '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 15.9881L3.89441 26.0772C3.61683 26.3543 3.28654 26.4919 2.90353 26.49C2.52056 26.4881 2.18706 26.3454 1.90303 26.0618C1.62929 25.7782 1.495 25.451 1.50014 25.0802C1.50529 24.7094 1.64473 24.3874 1.91847 24.1141L12.0086 14L1.91847 3.88591C1.65756 3.62547 1.5239 3.30662 1.51749 2.92938C1.51107 2.55217 1.64473 2.22178 1.91847 1.93822C2.19221 1.65465 2.51735 1.5087 2.89391 1.50036C3.27047 1.49202 3.60397 1.62963 3.89441 1.9132L14 12.0119L24.1152 1.9132C24.3864 1.64247 24.7135 1.50806 25.0965 1.50997C25.4794 1.5119 25.8161 1.65465 26.1066 1.93822C26.3739 2.22178 26.505 2.54897 26.4999 2.91977C26.4947 3.29058 26.3553 3.61262 26.0815 3.88591L15.9914 14L26.0815 24.1141C26.3424 24.3745 26.4761 24.6934 26.4825 25.0706C26.4889 25.4478 26.3553 25.7782 26.0815 26.0618C25.8078 26.3454 25.4826 26.4913 25.1061 26.4997C24.7295 26.508 24.3992 26.3672 24.1152 26.0772L14 15.9881Z" fill="black"/></svg>','undo' : '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.71423 16.65C5.51933 16.65 5.3532 16.5816 5.21585 16.4449C5.07852 16.3082 5.00985 16.1428 5.00985 15.9488C5.00985 15.758 5.07852 15.5942 5.21585 15.4575C5.3532 15.3208 5.51933 15.2525 5.71423 15.2525H12.2324C13.2308 15.2525 14.0826 14.9117 14.788 14.23C15.4934 13.5484 15.8461 12.7152 15.8461 11.7303C15.8461 10.7455 15.4934 9.91385 14.788 9.23541C14.0826 8.55698 13.2308 8.21776 12.2324 8.21776H5.08507L7.3691 10.4913C7.51125 10.6328 7.58233 10.7982 7.58233 10.9874C7.58233 11.1766 7.51125 11.3419 7.3691 11.4835C7.22694 11.6198 7.06129 11.6877 6.87216 11.6871C6.68304 11.6864 6.52062 11.6186 6.38489 11.4835L3.00665 8.12077C2.91789 8.0356 2.85292 7.94242 2.81174 7.84125C2.77058 7.74009 2.75 7.63188 2.75 7.51662C2.75 7.40456 2.77058 7.29794 2.81174 7.19677C2.85292 7.09559 2.91789 7.00243 3.00665 6.91727L6.37235 3.56225C6.51451 3.42073 6.68064 3.34998 6.87073 3.34998C7.06081 3.34998 7.22694 3.42073 7.3691 3.56225C7.51125 3.70696 7.58072 3.87472 7.57751 4.06553C7.5743 4.25635 7.50483 4.41932 7.3691 4.55442L5.08507 6.82028H12.2324C13.6225 6.82028 14.8063 7.29572 15.7838 8.24661C16.7613 9.1975 17.25 10.3587 17.25 11.7303C17.25 13.1019 16.7613 14.2647 15.7838 15.2188C14.8063 16.1729 13.6225 16.65 12.2324 16.65H5.71423Z" fill="black"/></svg>'
|
|
@@ -170,7 +170,7 @@ $input-placeholder-color: var(--#{$prefix}grey-06);
|
|
|
170
170
|
$input-width-size-xxs : 64px;
|
|
171
171
|
$input-width-size-xs : 80px;
|
|
172
172
|
$input-width-size-sm : 96px;
|
|
173
|
-
$input-width-size-md :
|
|
173
|
+
$input-width-size-md : 160px;
|
|
174
174
|
$input-width-size-lg : 336px;
|
|
175
175
|
$input-width-size-xl : 450px;
|
|
176
176
|
$input-width-size-l : 420px;
|
|
@@ -334,3 +334,14 @@ $badge-font-size: $mtvh-base-font-size;
|
|
|
334
334
|
$notification-bg-color: $danger;
|
|
335
335
|
$notification-text-color: var(--#{$prefix}white);
|
|
336
336
|
$box-shadow:0 0.125rem 0.225rem rgba(0,0,0,0.12);
|
|
337
|
+
|
|
338
|
+
/* pagination */
|
|
339
|
+
$pagination-padding-x: 18px;
|
|
340
|
+
$pagination-padding-y: 10px;
|
|
341
|
+
$pagination-border-radius: 4px;
|
|
342
|
+
$pagination-active-bg: var(--#{$prefix}purple-04);
|
|
343
|
+
$pagination-active-color: var(--#{$prefix}white);
|
|
344
|
+
$pagination-font-size: $font-size-sm;
|
|
345
|
+
$pagination-focus-box-shadow: unset;
|
|
346
|
+
$pagination-border-width: 0;
|
|
347
|
+
$pagination-bg: transparent;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.mtvh-chips {
|
|
2
|
+
.form-radio.radio {
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: $mtvh-spacing-4;
|
|
5
|
+
flex-wrap: wrap;
|
|
6
|
+
}
|
|
7
|
+
.form-check {
|
|
8
|
+
padding: 0;
|
|
9
|
+
margin: 0;
|
|
10
|
+
}
|
|
11
|
+
.form-check-input {
|
|
12
|
+
width: 5px;
|
|
13
|
+
opacity: 0;
|
|
14
|
+
position: absolute;
|
|
15
|
+
}
|
|
16
|
+
.form-check-label {
|
|
17
|
+
span {
|
|
18
|
+
padding: $mtvh-spacing-3 $mtvh-spacing-6;
|
|
19
|
+
border: 1px solid var(--mtvh-grey-06);
|
|
20
|
+
border-radius: 0.5rem;
|
|
21
|
+
background-color: var(--mtvh-grey-01);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.form-check-input {
|
|
26
|
+
|
|
27
|
+
&:checked + span {
|
|
28
|
+
background-color: $form-check-input-checked-bg-color;
|
|
29
|
+
color: $form-check-input-checked-color;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&--fullwidth {
|
|
34
|
+
|
|
35
|
+
.radio, label, .form-check-label span {
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
color: var(--mtvh-grey-06) !important;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
&:not(textarea, select) {
|
|
18
|
+
&:not(textarea, select, .dropdown) {
|
|
19
19
|
max-width: var(--#{$prefix}form-control-input-width);
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -33,10 +33,8 @@
|
|
|
33
33
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
select
|
|
37
|
-
|
|
36
|
+
select {
|
|
38
37
|
padding-right: 50px;
|
|
39
|
-
|
|
40
38
|
max-width: unset;
|
|
41
39
|
-o-appearance: none;
|
|
42
40
|
-webkit-appearance: none;
|
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
|
5
5
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
|
6
6
|
// server-side validation.
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
.was-validated .form-control:invalid, .form-control.is-invalid {
|
|
8
|
+
padding-right: $input-padding-x;
|
|
9
|
+
}
|
|
10
|
+
.invalid-feedback, .formio-component.has-error .invalid-feedback {
|
|
9
11
|
font-weight: $mtvh-font-weight-bold;
|
|
10
12
|
&:has(.error.form-text) {
|
|
11
13
|
.form-text {
|
|
@@ -31,4 +33,3 @@
|
|
|
31
33
|
}
|
|
32
34
|
}
|
|
33
35
|
|
|
34
|
-
|
|
@@ -4,18 +4,18 @@
|
|
|
4
4
|
color: $form-feedback-invalid-color;
|
|
5
5
|
font-size: $font-size-sm;
|
|
6
6
|
font-weight: bold;
|
|
7
|
-
padding-left: $mtvh-spacing-
|
|
7
|
+
padding-left: $mtvh-spacing-2;
|
|
8
8
|
position: relative;
|
|
9
|
-
display: flex;
|
|
9
|
+
display: flex !important;
|
|
10
10
|
margin: $mtvh-spacing-3 0 0 0;
|
|
11
11
|
&:before {
|
|
12
12
|
content: '';
|
|
13
13
|
-webkit-mask: get-icon('error',$danger);
|
|
14
14
|
mask: get-icon('error',$danger);
|
|
15
|
-
background-color:
|
|
15
|
+
background-color: $danger;
|
|
16
16
|
mask-repeat: no-repeat;
|
|
17
17
|
-webkit-mask-repeat: no-repeat;
|
|
18
|
-
margin-left:
|
|
18
|
+
margin-left: $mtvh-spacing-1;
|
|
19
19
|
padding-right: $mtvh-spacing-7;
|
|
20
20
|
margin-top: $mtvh-spacing-1;
|
|
21
21
|
}
|
|
@@ -33,17 +33,16 @@
|
|
|
33
33
|
/* Firefox */
|
|
34
34
|
input[type=number] {
|
|
35
35
|
-moz-appearance: textfield;
|
|
36
|
+
padding-right: $input-padding-x !important;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
|
|
41
42
|
@mixin field-focus() {
|
|
42
|
-
|
|
43
43
|
&:focus {
|
|
44
44
|
box-shadow: none;
|
|
45
45
|
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}primary-outline-color);
|
|
46
|
-
outline-offset: 0;
|
|
47
46
|
outline-offset: var(--#{$prefix}btn-outline-border);
|
|
48
47
|
color: $input-color;
|
|
49
48
|
}
|