@mtvh/mtvh-design-system 0.0.4 → 0.0.5
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/base/_mixins.scss +5 -5
- package/assets/scss/components/_all.scss +1 -0
- package/assets/scss/components/_breadcrumb.scss +60 -0
- package/assets/scss/components/_content-block.scss +27 -19
- package/assets/scss/components/_form.scss +6 -88
- package/assets/scss/config/_all.scss +5 -0
- package/assets/scss/config/_map-amends.scss +0 -10
- package/assets/scss/config/_variables.scss +49 -13
- package/assets/scss/core/typography/_typography.scss +14 -0
- package/assets/scss/forms/_form-check.scss +48 -0
- package/assets/scss/forms/_form-control.scss +38 -0
- package/assets/scss/forms/_formio.scss +36 -0
- package/assets/scss/forms/_labels.scss +4 -0
- package/assets/scss/forms/_validation.scss +22 -0
- package/assets/scss/mtvh.scss +2 -2
- package/dist/mtvh.min.css +1 -1
- package/package.json +1 -1
|
@@ -153,10 +153,10 @@
|
|
|
153
153
|
color: var(--mtvh-red-04);
|
|
154
154
|
font-size: $font-size-sm;
|
|
155
155
|
font-weight: bold;
|
|
156
|
-
padding-left: $mtvh-spacing-
|
|
156
|
+
padding-left: $mtvh-spacing-6;
|
|
157
157
|
position: relative;
|
|
158
158
|
display: flex;
|
|
159
|
-
gap: $mtvh-spacing-
|
|
159
|
+
gap: $mtvh-spacing-3;
|
|
160
160
|
&:before {
|
|
161
161
|
content: '';
|
|
162
162
|
-webkit-mask: get-icon('error',$danger);
|
|
@@ -164,8 +164,8 @@
|
|
|
164
164
|
background-color: currentColor;
|
|
165
165
|
mask-repeat: no-repeat;
|
|
166
166
|
-webkit-mask-repeat: no-repeat;
|
|
167
|
-
margin-left: -$mtvh-spacing-
|
|
168
|
-
padding-right: $icon-size-scale-sm
|
|
169
|
-
margin-top: $mtvh-spacing-
|
|
167
|
+
margin-left: -$mtvh-spacing-6;
|
|
168
|
+
padding-right: $icon-size-scale-sm;
|
|
169
|
+
margin-top: $mtvh-spacing-2;
|
|
170
170
|
}
|
|
171
171
|
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
.breadcrumb {
|
|
2
|
+
|
|
3
|
+
-webkit-overflow-scrolling: touch;
|
|
4
|
+
flex-wrap: unset;
|
|
5
|
+
overflow-x: auto;
|
|
6
|
+
white-space: nowrap;
|
|
7
|
+
scroll-behavior: smooth;
|
|
8
|
+
-webkit-overflow-scrolling: touch;
|
|
9
|
+
|
|
10
|
+
&::-webkit-scrollbar {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
@include media-breakpoint-down('md') {
|
|
16
|
+
|
|
17
|
+
&:before {
|
|
18
|
+
content: " ";
|
|
19
|
+
height: 32px;
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 0;
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
24
|
+
&:after {
|
|
25
|
+
position: absolute;
|
|
26
|
+
right: 0;
|
|
27
|
+
height: 32px;
|
|
28
|
+
width: 20%;
|
|
29
|
+
content: ' ';
|
|
30
|
+
|
|
31
|
+
background: linear-gradient(to left, var(--mtvh-grey-01), rgba(255,255,255,0));
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.active {
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
--mtvh-breadcrumb-item-active-color: var(--mtvh-black);
|
|
38
|
+
}
|
|
39
|
+
a {
|
|
40
|
+
color: var(--mtvh-black);
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
font-weight: normal;
|
|
43
|
+
|
|
44
|
+
&:hover {
|
|
45
|
+
text-decoration: underline;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
.breadcrumb-item {
|
|
52
|
+
border:1px solid transparent;
|
|
53
|
+
margin-bottom: 0;
|
|
54
|
+
|
|
55
|
+
+ .breadcrumb-item {
|
|
56
|
+
&::before {
|
|
57
|
+
float:unset;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -43,15 +43,15 @@ $mtvh-content-block-border: (
|
|
|
43
43
|
|
|
44
44
|
.mtvh-content-block {
|
|
45
45
|
|
|
46
|
-
padding: $mtvh-spacing-
|
|
46
|
+
padding: $mtvh-spacing-6 $mtvh-spacing-5;
|
|
47
47
|
@include media-breakpoint-up(md) {
|
|
48
|
-
padding: $mtvh-spacing-
|
|
48
|
+
padding: $mtvh-spacing-6;
|
|
49
49
|
}
|
|
50
50
|
&__date {
|
|
51
51
|
margin-bottom: .5rem;
|
|
52
52
|
}
|
|
53
53
|
&--text-only {
|
|
54
|
-
padding: $mtvh-spacing-
|
|
54
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-5;
|
|
55
55
|
font-size: 1rem;
|
|
56
56
|
@include media-breakpoint-up(md) {
|
|
57
57
|
font-size: 1.125rem;
|
|
@@ -67,13 +67,13 @@ $mtvh-content-block-border: (
|
|
|
67
67
|
&-link-card {
|
|
68
68
|
text-decoration: none;
|
|
69
69
|
box-shadow: var(--mtvh-box-shadow);
|
|
70
|
-
padding: $mtvh-spacing-
|
|
70
|
+
padding: $mtvh-spacing-5;
|
|
71
71
|
&:hover {
|
|
72
72
|
background-color: var(--mtvh-grey-02);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@include media-breakpoint-up(md) {
|
|
76
|
-
padding: $mtvh-spacing-
|
|
76
|
+
padding: $mtvh-spacing-6;
|
|
77
77
|
}
|
|
78
78
|
@include media-breakpoint-up(lg) {
|
|
79
79
|
min-height: 17rem;
|
|
@@ -81,7 +81,7 @@ $mtvh-content-block-border: (
|
|
|
81
81
|
|
|
82
82
|
&:focus-within {
|
|
83
83
|
outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
|
|
84
|
-
outline-offset: $mtvh-spacing-
|
|
84
|
+
outline-offset: $mtvh-spacing-3;
|
|
85
85
|
background-color: var(--mtvh-grey-04);
|
|
86
86
|
}
|
|
87
87
|
|
|
@@ -157,7 +157,11 @@ $mtvh-content-block-border: (
|
|
|
157
157
|
|
|
158
158
|
&-icon {
|
|
159
159
|
.mtvh-icon {
|
|
160
|
-
margin-bottom: $mtvh-spacing-
|
|
160
|
+
margin-bottom: $mtvh-spacing-3;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
h3:has(+ p + p ), h3:has(+ p + p + p){
|
|
164
|
+
margin-bottom: $mtvh-spacing-5;
|
|
161
165
|
}
|
|
162
166
|
|
|
163
167
|
}
|
|
@@ -171,24 +175,23 @@ $mtvh-content-block-border: (
|
|
|
171
175
|
max-width: 380px;
|
|
172
176
|
}
|
|
173
177
|
@include media-breakpoint-up(lg) {
|
|
174
|
-
max-width:
|
|
178
|
+
max-width: 60%;
|
|
175
179
|
}
|
|
176
180
|
@include media-breakpoint-up(xl) {
|
|
177
|
-
max-width:
|
|
181
|
+
max-width: 65%;
|
|
178
182
|
}
|
|
179
|
-
|
|
180
183
|
}
|
|
181
184
|
&-header {
|
|
182
|
-
padding-bottom: $mtvh-spacing-
|
|
185
|
+
padding-bottom: $mtvh-spacing-5;
|
|
183
186
|
|
|
184
187
|
h2 {
|
|
185
|
-
margin-bottom: $mtvh-spacing-
|
|
188
|
+
margin-bottom: $mtvh-spacing-3;
|
|
186
189
|
}
|
|
187
190
|
}
|
|
188
191
|
&-payment {
|
|
189
192
|
|
|
190
|
-
padding-top: $mtvh-spacing-
|
|
191
|
-
padding-bottom: $mtvh-spacing-
|
|
193
|
+
padding-top: $mtvh-spacing-5;
|
|
194
|
+
padding-bottom: $mtvh-spacing-5;
|
|
192
195
|
border-top: 1px solid var(--mtvh-grey-02);
|
|
193
196
|
border-bottom: 1px solid var(--mtvh-grey-02);
|
|
194
197
|
|
|
@@ -200,7 +203,7 @@ $mtvh-content-block-border: (
|
|
|
200
203
|
&-status {
|
|
201
204
|
font-size: $font-size-lg;
|
|
202
205
|
font-weight: $mtvh-font-weight-bold;
|
|
203
|
-
margin-bottom: $mtvh-spacing-
|
|
206
|
+
margin-bottom: $mtvh-spacing-3;
|
|
204
207
|
line-height: $line-height-md;//33.8px;
|
|
205
208
|
}
|
|
206
209
|
&-date {
|
|
@@ -214,18 +217,23 @@ $mtvh-content-block-border: (
|
|
|
214
217
|
border: 0;
|
|
215
218
|
position: absolute;
|
|
216
219
|
top: 1.8rem;
|
|
217
|
-
right: $mtvh-spacing-
|
|
220
|
+
right: $mtvh-spacing-6;
|
|
218
221
|
width: 216px;
|
|
219
222
|
}
|
|
220
223
|
}
|
|
221
224
|
&-footer {
|
|
222
225
|
|
|
223
|
-
padding-top: $mtvh-spacing-
|
|
226
|
+
padding-top: $mtvh-spacing-5;
|
|
224
227
|
|
|
225
228
|
@include media-breakpoint-up(md) {
|
|
226
229
|
padding: 0;
|
|
227
230
|
}
|
|
228
|
-
max-width: 400px;
|
|
229
|
-
}
|
|
230
231
|
|
|
232
|
+
@include media-breakpoint-up(lg) {
|
|
233
|
+
max-width: 400px;
|
|
234
|
+
}
|
|
235
|
+
@include media-breakpoint-up(xl) {
|
|
236
|
+
max-width: unset;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
231
239
|
}
|
|
@@ -1,92 +1,10 @@
|
|
|
1
|
-
.
|
|
2
|
-
&:focus {
|
|
3
|
-
box-shadow: none;
|
|
4
|
-
outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
|
|
5
|
-
outline-offset: 0;
|
|
6
|
-
outline-offset: var(--mtvh-btn-outline-border);
|
|
7
|
-
color: $input-color;
|
|
8
|
-
}
|
|
9
|
-
&.is-invalid {
|
|
10
|
-
&:focus {
|
|
11
|
-
border-color: $input-border-color;
|
|
12
|
-
box-shadow: none;
|
|
13
|
-
}
|
|
14
|
-
background-color: var(--mtvh-red-01);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.form-label, .col-form-label, form label {
|
|
19
|
-
font-size: $font-size-md;
|
|
20
|
-
font-weight: 700;
|
|
21
|
-
line-height: 1.4;
|
|
22
|
-
padding-top: 0;
|
|
23
|
-
padding-bottom: $mtvh-spacing-spacing-3;
|
|
24
|
-
margin-bottom: 0;
|
|
25
|
-
}
|
|
1
|
+
.mtvh-form, .mtvh-formio {
|
|
26
2
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
font-weight: $mtvh-font-weight-bold;
|
|
33
|
-
}
|
|
3
|
+
@import "../forms/form-control";
|
|
4
|
+
@import "../forms/form-check";
|
|
5
|
+
@import "../forms/labels";
|
|
6
|
+
@import "../forms/validation";
|
|
7
|
+
@import "../forms/formio";
|
|
34
8
|
|
|
35
|
-
.form-text {
|
|
36
|
-
font-size: $font-size-sm;
|
|
37
|
-
margin-bottom: $mtvh-spacing-spacing-4;
|
|
38
|
-
&.error {
|
|
39
|
-
@include form-invalid-text();
|
|
40
|
-
}
|
|
41
9
|
}
|
|
42
10
|
|
|
43
|
-
.mtvh-formio{
|
|
44
|
-
|
|
45
|
-
div.formio-component {
|
|
46
|
-
|
|
47
|
-
margin-bottom: 5.5rem;
|
|
48
|
-
|
|
49
|
-
&.formio-hidden{
|
|
50
|
-
margin-bottom:0;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&.formio-component-button:has(> button[type="submit"]),&.formio-component-form,&.formio-component-fieldset,&.formio-component-columns,&.formio-component-mtvhLogicSet{
|
|
54
|
-
margin-bottom:0;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
//Remove padding from last child
|
|
58
|
-
div.formio-component-form{
|
|
59
|
-
& .formio-component:last-child {
|
|
60
|
-
margin-bottom:0!important;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
&.has-message.has-error {
|
|
66
|
-
.invalid-feedback {
|
|
67
|
-
display: block;
|
|
68
|
-
margin-top: $mtvh-spacing-spacing-4;
|
|
69
|
-
|
|
70
|
-
.form-text {
|
|
71
|
-
margin-bottom: 0;
|
|
72
|
-
margin-top:0;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.text-danger {
|
|
77
|
-
color: $danger !important;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
textarea {
|
|
82
|
-
max-height: 496px;
|
|
83
|
-
@include media-breakpoint-up(md) {
|
|
84
|
-
max-height: 608px;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
span[ref|="charcount"], .text-muted {
|
|
89
|
-
color : var(--mtvh-grey-06) !important;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
//modify bootstrap map
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
$mtvh-spacing : (
|
|
5
|
-
'spacing-1': 0.125, //2px
|
|
6
|
-
'spacing-2': 0.25, //4px
|
|
7
|
-
'spacing-3': 0.5, //8px
|
|
8
|
-
'spacing-4': 0.75, //12px
|
|
9
|
-
'spacing-5': 1, //16px
|
|
10
|
-
'spacing-6': 1.5, //24px
|
|
11
|
-
'spacing-7': 2, //32px
|
|
12
|
-
'spacing-8': 2.5, //40px
|
|
13
|
-
);
|
|
14
4
|
|
|
15
5
|
|
|
@@ -59,20 +59,35 @@ $link-icon-spacing: 0.5rem;
|
|
|
59
59
|
$border-width-sm: 0.15rem;
|
|
60
60
|
$border-width-md: 0.19rem;
|
|
61
61
|
|
|
62
|
-
$mtvh-spacing-
|
|
63
|
-
$mtvh-spacing-
|
|
64
|
-
$mtvh-spacing-
|
|
65
|
-
$mtvh-spacing-
|
|
66
|
-
$mtvh-spacing-
|
|
67
|
-
$mtvh-spacing-
|
|
68
|
-
$mtvh-spacing-
|
|
69
|
-
$mtvh-spacing-
|
|
62
|
+
$mtvh-spacing-1: 0.125rem;
|
|
63
|
+
$mtvh-spacing-2: 0.25rem;
|
|
64
|
+
$mtvh-spacing-3: 0.5rem;
|
|
65
|
+
$mtvh-spacing-4: 0.75rem;
|
|
66
|
+
$mtvh-spacing-5: 1rem;
|
|
67
|
+
$mtvh-spacing-6: 1.5rem;
|
|
68
|
+
$mtvh-spacing-7: 2rem;
|
|
69
|
+
$mtvh-spacing-8: 2.5rem;
|
|
70
|
+
$mtvh-spacing-9: 3rem;
|
|
71
|
+
// custom added bs spacing value
|
|
72
|
+
|
|
73
|
+
$spacer: 1rem;
|
|
74
|
+
$spacers: (
|
|
75
|
+
0: 0,
|
|
76
|
+
1: $spacer * .25,
|
|
77
|
+
2: $spacer * .5,
|
|
78
|
+
3: $spacer,
|
|
79
|
+
4: $spacer * 1.5,
|
|
80
|
+
5: $spacer * 3,
|
|
81
|
+
6: $mtvh-spacing-8
|
|
82
|
+
);
|
|
70
83
|
|
|
71
84
|
$icon-size-scale-xs : 16px !default;
|
|
72
85
|
$icon-size-scale-sm : 20px !default;
|
|
73
86
|
$icon-size-scale-md : 28px !default;
|
|
74
87
|
$icon-size-scale-lg : 42px !default;
|
|
75
88
|
$icon-size-scale-xl : 56px !default;
|
|
89
|
+
$breadcrumb-item-padding-x: $mtvh-spacing-4;
|
|
90
|
+
$breadcrumb-font-size: $font-size-xs;
|
|
76
91
|
|
|
77
92
|
$mtvh-icon-sizes: (
|
|
78
93
|
"xs" : $icon-size-scale-xs,
|
|
@@ -82,6 +97,7 @@ $mtvh-icon-sizes: (
|
|
|
82
97
|
"xl" : $icon-size-scale-xl
|
|
83
98
|
) !default;
|
|
84
99
|
|
|
100
|
+
|
|
85
101
|
$success: #23870B;
|
|
86
102
|
$info: #895ED0;
|
|
87
103
|
$warning: #D8B000; //--mtvh-purple-04
|
|
@@ -89,21 +105,24 @@ $danger: #DD080D;
|
|
|
89
105
|
$primary: #0072BF;
|
|
90
106
|
$btn-color: $primary;
|
|
91
107
|
|
|
108
|
+
/* breadcrumb */
|
|
109
|
+
$breadcrumb-margin-bottom: $mtvh-spacing-6;
|
|
92
110
|
|
|
93
111
|
/* form */
|
|
94
112
|
$form-label-font-size : $font-size-md;
|
|
95
113
|
$form-label-font-weight: 700;
|
|
96
114
|
$form-label-color: #000000;
|
|
97
|
-
$form-
|
|
115
|
+
$form-text-font-size: $font-size-sm;
|
|
116
|
+
$form-label-margin-bottom: $mtvh-spacing-3;
|
|
98
117
|
$form-select-focus-border-color: var( --mtvh-grey-06);
|
|
99
118
|
$form-feedback-font-size: $font-size-sm;
|
|
100
119
|
$form-feedback-invalid-color: $danger;
|
|
101
120
|
$form-feedback-icon-invalid: '';
|
|
102
|
-
$form-feedback-margin-top: $mtvh-spacing-
|
|
121
|
+
$form-feedback-margin-top: $mtvh-spacing-4;
|
|
103
122
|
$input-line-height: 1.5;
|
|
104
123
|
$input-font-size: $font-size-sm;
|
|
105
|
-
$input-padding-y: $mtvh-spacing-
|
|
106
|
-
$input-padding-x: $mtvh-spacing-
|
|
124
|
+
$input-padding-y: $mtvh-spacing-4;
|
|
125
|
+
$input-padding-x: $mtvh-spacing-5;
|
|
107
126
|
$input-focus-color: var(--mtvh-blue-05);
|
|
108
127
|
$input-focus-border-color: var( --mtvh-grey-06);
|
|
109
128
|
$input-border-color: var( --mtvh-grey-06);
|
|
@@ -111,12 +130,29 @@ $input-border-radius: 0.25rem;
|
|
|
111
130
|
$input-color: $body-color;
|
|
112
131
|
$input-placeholder-color: var( --mtvh-grey-06);
|
|
113
132
|
|
|
133
|
+
/* form check */
|
|
134
|
+
$form-check-bg-color: var(--mtvh-grey-01);
|
|
135
|
+
$form-check-hover-bg-color: var(--mtvh-grey-02);
|
|
136
|
+
$form-check-input-width: 2em;
|
|
137
|
+
$form-check-input-height: 2em;
|
|
138
|
+
$form-check-margin-bottom: $mtvh-spacing-5;
|
|
139
|
+
$form-check-input-checked-color: var(--mtvh-white);
|
|
140
|
+
$form-check-input-checked-color: #fff;
|
|
141
|
+
$form-check-padding-start: $form-check-input-width + 1em;
|
|
142
|
+
$form-check-input-checked-bg-color: var(--mtvh-purple-04);
|
|
143
|
+
$form-check-input-hover-bg-color: var(--mtvh-purple-05);
|
|
144
|
+
$form-check-input-checked-border-color: var(--mtvh-purple-04);
|
|
145
|
+
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
|
|
146
|
+
$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>");
|
|
147
|
+
|
|
148
|
+
|
|
114
149
|
$line-height-md: 1.3;
|
|
115
150
|
$container-max-widths: (
|
|
116
151
|
sm: 540px,
|
|
117
152
|
md: 720px,
|
|
118
153
|
lg: 960px,
|
|
119
|
-
xl: 1140px
|
|
154
|
+
xl: 1140px,
|
|
155
|
+
xxl: 1320px
|
|
120
156
|
);
|
|
121
157
|
|
|
122
158
|
$font-path: "./fonts/" !default;
|
|
@@ -14,6 +14,12 @@ h1, h2, h3, h4, h5, h6, dt,
|
|
|
14
14
|
h1, .mtvh-h1 {
|
|
15
15
|
@extend %h1;
|
|
16
16
|
}
|
|
17
|
+
.mtvh-title-h1 {
|
|
18
|
+
@extend %h1;
|
|
19
|
+
@extend %parent-title-h1;
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
|
|
17
23
|
h2, .mtvh-h2 {
|
|
18
24
|
@extend %h2;
|
|
19
25
|
}
|
|
@@ -34,6 +40,12 @@ p {
|
|
|
34
40
|
display: block;
|
|
35
41
|
}
|
|
36
42
|
|
|
43
|
+
%parent-title-h1 {
|
|
44
|
+
@include media-breakpoint-up('md') {
|
|
45
|
+
font-size: 3.25rem;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
37
49
|
%h2 {
|
|
38
50
|
margin-bottom: 1rem;
|
|
39
51
|
font-size: 2rem;
|
|
@@ -58,6 +70,7 @@ p {
|
|
|
58
70
|
%p {
|
|
59
71
|
margin-bottom: 1rem;
|
|
60
72
|
display: block;
|
|
73
|
+
font-size: $font-size-sm;
|
|
61
74
|
}
|
|
62
75
|
|
|
63
76
|
.mtvh-intro {
|
|
@@ -74,6 +87,7 @@ p {
|
|
|
74
87
|
|
|
75
88
|
a {
|
|
76
89
|
font-weight: bold;
|
|
90
|
+
outline-color: var(--mtvh-btn-outline-color);
|
|
77
91
|
}
|
|
78
92
|
|
|
79
93
|
ul,
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Check/radio
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
.form-check {
|
|
6
|
+
label, .form-check-input {
|
|
7
|
+
&:hover {
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
|
|
10
|
+
.form-check-input {
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
padding:$mtvh-spacing-4 $mtvh-spacing-5;
|
|
16
|
+
background-color: $form-check-bg-color;
|
|
17
|
+
border-radius: $border-radius;
|
|
18
|
+
|
|
19
|
+
&:hover {
|
|
20
|
+
background-color: $form-check-hover-bg-color;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.form-check-input {
|
|
25
|
+
float: none;
|
|
26
|
+
margin-left: 0;
|
|
27
|
+
margin-right: $mtvh-spacing-3;
|
|
28
|
+
&:hover {
|
|
29
|
+
|
|
30
|
+
&[type="checkbox"] {
|
|
31
|
+
@if $enable-gradients {
|
|
32
|
+
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
|
|
33
|
+
} @else {
|
|
34
|
+
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&[type="radio"] {
|
|
39
|
+
@if $enable-gradients {
|
|
40
|
+
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
|
|
41
|
+
} @else {
|
|
42
|
+
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
|
|
43
|
+
}
|
|
44
|
+
background-color: $form-check-input-hover-bg-color;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.form-control {
|
|
2
|
+
height: auto;
|
|
3
|
+
&:focus {
|
|
4
|
+
box-shadow: none;
|
|
5
|
+
outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
|
|
6
|
+
outline-offset: 0;
|
|
7
|
+
outline-offset: var(--mtvh-btn-outline-border);
|
|
8
|
+
color: $input-color;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&.is-invalid {
|
|
12
|
+
&:focus {
|
|
13
|
+
border-color: $input-border-color;
|
|
14
|
+
box-shadow: none;
|
|
15
|
+
}
|
|
16
|
+
background-color: var(--mtvh-red-01);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
span[ref|="charcount"], .text-muted {
|
|
20
|
+
color : var(--mtvh-grey-06) !important;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
textarea {
|
|
26
|
+
&.form-control {
|
|
27
|
+
max-height: 496px;
|
|
28
|
+
@include media-breakpoint-up(md) {
|
|
29
|
+
max-height: 608px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
select {
|
|
35
|
+
&.form-control {
|
|
36
|
+
height: auto;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
.formio-component {
|
|
2
|
+
|
|
3
|
+
margin-bottom: $mtvh-spacing-9;
|
|
4
|
+
|
|
5
|
+
&.formio-hidden{
|
|
6
|
+
margin-bottom:0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&.formio-component-button:has(> button[type="submit"]),&.formio-component-form,&.formio-component-fieldset,&.formio-component-columns,&.formio-component-mtvhLogicSet{
|
|
10
|
+
margin-bottom:0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&.has-message.has-error {
|
|
14
|
+
.text-danger {
|
|
15
|
+
color: var(--mtvh-red-04) !important;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
//Remove padding from last child
|
|
20
|
+
div.formio-component-form{
|
|
21
|
+
& .formio-component:last-child {
|
|
22
|
+
margin-bottom:0!important;
|
|
23
|
+
border: 1px red solid;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
div[ref="element"] {
|
|
27
|
+
.form-text.text-right, .form-text.pull-right {
|
|
28
|
+
float: none;
|
|
29
|
+
margin-top: 12px;
|
|
30
|
+
margin-bottom: 0;
|
|
31
|
+
text-align: left !important;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// Form validation
|
|
2
|
+
//
|
|
3
|
+
// Provide feedback to users when form field values are valid or invalid. Works
|
|
4
|
+
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
|
5
|
+
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
|
6
|
+
// server-side validation.
|
|
7
|
+
|
|
8
|
+
.invalid-feedback {
|
|
9
|
+
font-weight: $mtvh-font-weight-bold;
|
|
10
|
+
}
|
|
11
|
+
.form-control {
|
|
12
|
+
&.is-invalid {
|
|
13
|
+
background-color: var(--mtvh-red-01)
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
.form-text {
|
|
17
|
+
font-size: $font-size-sm;
|
|
18
|
+
margin-bottom: $mtvh-spacing-4;
|
|
19
|
+
&.error {
|
|
20
|
+
@include form-invalid-text();
|
|
21
|
+
}
|
|
22
|
+
}
|
package/assets/scss/mtvh.scss
CHANGED
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
|
|
14
14
|
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
|
|
15
15
|
@import "bootstrap/scss/variables";
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
//@import "bootstrap/scss/variables-dark";
|
|
17
|
+
//$theme-colors: map-remove($theme-colors, "light");
|
|
18
18
|
|
|
19
19
|
// 4. Include any default map overrides here
|
|
20
20
|
@import "config/map-amends";
|