@mtvh/mtvh-design-system 0.0.16 → 0.0.18
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 +84 -75
- package/assets/scss/components/_link.scss +4 -12
- package/assets/scss/components/_notification.scss +7 -17
- package/assets/scss/components/_pagination.scss +20 -0
- package/assets/scss/components/_stepper.scss +13 -0
- package/assets/scss/config/_icon-list.scss +1 -1
- package/assets/scss/config/_variables.scss +11 -0
- 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/_formio.scss +4 -0
- package/assets/scss/forms/_validation.scss +1 -1
- 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,107 +1,116 @@
|
|
|
1
|
+
.mtvh-formio {
|
|
2
|
+
@import "../forms/formio";
|
|
3
|
+
@import "../forms/mtvho_contact_phone";
|
|
4
|
+
@import "../forms/mtvho_contact_email";
|
|
5
|
+
}
|
|
1
6
|
.mtvh-form, .mtvh-formio {
|
|
2
7
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
@import "../forms/form-control";
|
|
9
|
+
@import "../forms/form-check";
|
|
10
|
+
@import "../forms/labels";
|
|
11
|
+
@import "../forms/form-chip";
|
|
12
|
+
@import "../forms/form-date-input";
|
|
13
|
+
@import "../forms/input-group";
|
|
14
|
+
@import "../forms/validation";
|
|
10
15
|
|
|
11
|
-
&:has(.mtvh-form-container), &:has(.formio-form) {
|
|
12
16
|
|
|
13
|
-
|
|
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
|
+
&:has(.mtvh-form-container), &:has(.formio-form) {
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
--#{$prefix}form-padding-y: #{$mtvh-spacing-
|
|
20
|
-
--#{$prefix}form-padding-x: #{$mtvh-spacing-
|
|
21
|
-
|
|
19
|
+
background-color: var(--#{$prefix}white);
|
|
20
|
+
--#{$prefix}form-padding-y: #{$mtvh-spacing-7};
|
|
21
|
+
--#{$prefix}form-padding-x: #{$mtvh-spacing-4};
|
|
22
|
+
--#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
@include media-breakpoint-up("lg") {
|
|
25
|
+
--#{$prefix}form-padding-y: #{$mtvh-spacing-8};
|
|
26
|
+
--#{$prefix}form-padding-x: #{$mtvh-spacing-11};
|
|
27
|
+
}
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
29
|
+
margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
|
|
30
|
+
padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
|
|
31
|
+
overflow: hidden;
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
legend.field-required, .tab-error, .mtvh-form-container-required .field-required{
|
|
37
|
-
&:after {
|
|
38
|
-
content: " *";
|
|
39
|
-
color: $form-feedback-invalid-color;
|
|
33
|
+
@include media-breakpoint-up("md") {
|
|
34
|
+
margin: 0;
|
|
35
|
+
}
|
|
40
36
|
}
|
|
41
|
-
}
|
|
42
37
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
&.text-right, &.pull-right {
|
|
49
|
-
float: none;
|
|
50
|
-
margin-bottom: 0;
|
|
51
|
-
text-align: left !important;
|
|
38
|
+
.form-group {
|
|
39
|
+
margin-bottom: var(--#{$prefix}form-group-padding-y);
|
|
40
|
+
.formio-choices.choices {
|
|
41
|
+
margin-bottom: 0;
|
|
42
|
+
}
|
|
52
43
|
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
}
|
|
56
44
|
|
|
45
|
+
label.field-required, legend.field-required, .tab-error, .mtvh-form-container-required .field-required {
|
|
46
|
+
&:after {
|
|
47
|
+
content: " *";
|
|
48
|
+
color: $form-feedback-invalid-color;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
57
51
|
|
|
58
|
-
.
|
|
52
|
+
.form-text {
|
|
53
|
+
margin-top: $mtvh-spacing-3;
|
|
54
|
+
font-size: $font-size-sm;
|
|
55
|
+
margin-bottom: $mtvh-spacing-4;
|
|
59
56
|
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
&.text-right, &.pull-right {
|
|
58
|
+
float: none;
|
|
59
|
+
margin-bottom: 0;
|
|
60
|
+
text-align: left !important;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
62
63
|
|
|
63
|
-
@include media-breakpoint-up("md") {
|
|
64
|
-
--#{$prefix}form-max-width: 576px;
|
|
65
|
-
}
|
|
66
|
-
@include media-breakpoint-up("lg") {
|
|
67
|
-
--#{$prefix}form-group-padding-y: #{$form-group-lg-margin-bottom};
|
|
68
|
-
--#{$prefix}form-max-width: 550px;
|
|
69
64
|
}
|
|
70
65
|
|
|
71
|
-
&--md {
|
|
72
66
|
|
|
73
|
-
|
|
74
|
-
|
|
67
|
+
.mtvh-form-container, .formio-form {
|
|
68
|
+
|
|
75
69
|
--#{$prefix}form-max-width: unset;
|
|
70
|
+
--#{$prefix}form-control-input-width: #{$input-width-size-lg};
|
|
76
71
|
|
|
77
72
|
@include media-breakpoint-up("md") {
|
|
78
73
|
--#{$prefix}form-max-width: 576px;
|
|
79
74
|
}
|
|
80
75
|
@include media-breakpoint-up("lg") {
|
|
81
|
-
|
|
82
|
-
--#{$prefix}form-
|
|
83
|
-
--#{$prefix}form-max-width: 636px;
|
|
76
|
+
--#{$prefix}form-group-padding-y: #{$form-group-lg-margin-bottom};
|
|
77
|
+
--#{$prefix}form-max-width: 550px;
|
|
84
78
|
}
|
|
85
|
-
}
|
|
86
79
|
|
|
87
|
-
|
|
80
|
+
&--md {
|
|
88
81
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
82
|
+
--#{$prefix}form-control-input-width: #{$input-width-size-l};
|
|
83
|
+
--#{$prefix}form-group-padding-y: #{$mtvh-spacing-6};
|
|
84
|
+
--#{$prefix}form-max-width: unset;
|
|
93
85
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
86
|
+
@include media-breakpoint-up("md") {
|
|
87
|
+
--#{$prefix}form-max-width: 576px;
|
|
88
|
+
}
|
|
89
|
+
@include media-breakpoint-up("lg") {
|
|
90
|
+
|
|
91
|
+
--#{$prefix}form-group-padding-y: #{$mtvh-spacing-7};
|
|
92
|
+
--#{$prefix}form-max-width: 636px;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
98
95
|
|
|
96
|
+
max-width: var(--#{$prefix}form-max-width);
|
|
99
97
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
98
|
+
@include media-breakpoint-up("md") {
|
|
99
|
+
padding-left: 60px;
|
|
100
|
+
padding-right: 60px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@include media-breakpoint-up("lg") {
|
|
104
|
+
margin:0 auto;
|
|
105
|
+
padding: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.mtvh-form-container-required {
|
|
109
|
+
font-size: $font-size-xs;
|
|
110
|
+
padding: $mtvh-spacing-4 0 $mtvh-spacing-6 0;
|
|
111
|
+
@include media-breakpoint-down('lg') {
|
|
112
|
+
padding-bottom: $mtvh-spacing-7;
|
|
113
|
+
}
|
|
105
114
|
}
|
|
106
|
-
}
|
|
107
115
|
}
|
|
116
|
+
|
|
@@ -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,20 @@
|
|
|
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
|
-
.badge {
|
|
26
|
-
--#{$prefix}margin-left: 2px;
|
|
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);
|
|
28
19
|
}
|
|
29
|
-
|
|
30
20
|
}
|
|
@@ -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>'
|
|
@@ -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;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
|
6
6
|
// server-side validation.
|
|
7
7
|
|
|
8
|
-
.invalid-feedback, .formio-component.has-
|
|
8
|
+
.invalid-feedback, .formio-component.has-error .invalid-feedback {
|
|
9
9
|
font-weight: $mtvh-font-weight-bold;
|
|
10
10
|
&:has(.error.form-text) {
|
|
11
11
|
.form-text {
|
|
@@ -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
|
}
|