@mtvh/mtvh-design-system 0.0.10 → 0.0.12

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.
Files changed (17) hide show
  1. package/assets/scss/components/_all.scss +1 -0
  2. package/assets/scss/components/_banner.scss +2 -1
  3. package/assets/scss/components/_close.scss +1 -1
  4. package/assets/scss/components/_content-block.scss +8 -3
  5. package/assets/scss/components/_form.scss +53 -26
  6. package/assets/scss/components/_status.scss +24 -0
  7. package/assets/scss/components/_stepper.scss +2 -2
  8. package/assets/scss/config/_variables.scss +94 -5
  9. package/assets/scss/forms/_form-check.scss +10 -3
  10. package/assets/scss/forms/_form-control.scss +27 -13
  11. package/assets/scss/forms/_formio.scss +5 -0
  12. package/assets/scss/forms/_mtvho_contact_email.scss +8 -0
  13. package/assets/scss/forms/_mtvho_contact_phone.scss +8 -0
  14. package/assets/scss/forms/input-group.scss +3 -0
  15. package/assets/scss/mixins/_form.scss +1 -0
  16. package/dist/mtvh.min.css +1 -1
  17. package/package.json +1 -1
package/assets/scss/components/_all.scss CHANGED
@@ -7,3 +7,4 @@
7
7
  @import '_list-group';
8
8
  @import '_stepper';
9
9
  @import '_banner';
10
+ @import '_status';
package/assets/scss/components/_banner.scss CHANGED
@@ -33,6 +33,7 @@
33
33
 
34
34
  --#{$prefix}banner-padding-y :#{$mtvh-spacing-3};
35
35
  --#{$prefix}banner-padding-x : 0;
36
+
36
37
  display: flex;
37
38
  flex-direction: row;
38
39
  justify-content: space-between;
@@ -84,7 +85,7 @@
84
85
 
85
86
 
86
87
  @each $state, $variable in $banner-theme-colors {
87
- .mtvh-banner-#{$state} {
88
+ .mtvh-banner--#{$state} {
88
89
  --#{$prefix}banner-text-color: var(--#{$prefix}black);
89
90
  --#{$prefix}border-color: var(--#{$prefix}black);
90
91
  --#{$prefix}banner-bg: #{$variable};
package/assets/scss/components/_close.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  @each $state in map-keys($banner-theme-colors) {
37
- .mtvh-banner-#{$state} {
37
+ .mtvh-banner--#{$state} {
38
38
  --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
39
39
  --#{$prefix}btn-close-hover-bg-color: var(--#{$prefix}btn-close-#{$state}-hover-bg);
40
40
  }
package/assets/scss/components/_content-block.scss CHANGED
@@ -8,10 +8,11 @@
8
8
  margin-bottom: .5rem;
9
9
  }
10
10
  &--text-only {
11
- padding: $mtvh-spacing-5 $mtvh-spacing-5;
12
- font-size: 1rem;
11
+ padding: $mtvh-spacing-4 $mtvh-spacing-5;
12
+ font-size: $font-size-xs;
13
13
  @include media-breakpoint-up(md) {
14
- font-size: 1.125rem;
14
+ font-size: $font-size-sm;
15
+ padding: $mtvh-spacing-5 $mtvh-spacing-6;
15
16
  }
16
17
  }
17
18
  &--stretch {
@@ -32,6 +33,7 @@
32
33
  @include media-breakpoint-up(md) {
33
34
  padding: $mtvh-spacing-6;
34
35
  }
36
+
35
37
  @include media-breakpoint-up(lg) {
36
38
  min-height: 17rem;
37
39
  }
@@ -107,6 +109,9 @@
107
109
  }
108
110
 
109
111
  &-icon {
112
+
113
+ padding-top: $mtvh-spacing-5;
114
+
110
115
  .mtvh-icon {
111
116
  margin-bottom: $mtvh-spacing-3;
112
117
  }
package/assets/scss/components/_form.scss CHANGED
@@ -6,62 +6,90 @@
6
6
  @import "../forms/validation";
7
7
  @import "../forms/formio";
8
8
  @import "../forms/form-date-input";
9
+ @import "../forms/input-group";
9
10
 
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
+ }
10
18
 
11
19
  background-color: var(--#{$prefix}white);
12
- margin: 0 calc(var(--#{$prefix}gutter-x)* -0.5);
13
- padding: var(--#{$prefix}gutter-x);
20
+ margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
21
+ padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
14
22
  overflow: hidden;
15
23
 
16
24
  @include media-breakpoint-up("md") {
17
- padding: $mtvh-spacing-5 $mtvh-spacing-11 $mtvh-spacing-5 $mtvh-spacing-11;
25
+ margin: 0;
18
26
  }
19
27
 
20
- }
21
- .mtvh-form-container {
28
+ .form-group {
29
+ margin-bottom: var(--#{$prefix}form-group-padding-y);
30
+ }
22
31
 
32
+ .field-required:after, .tab-error::after {
33
+ content: " *";
34
+ color: $form-feedback-invalid-color;
35
+ }
23
36
 
24
- @include media-breakpoint-up("lg") {
25
- max-width: 550px;
26
- margin:0 auto;
37
+ .form-text {
38
+ margin-top: $mtvh-spacing-3;
39
+ font-size: $font-size-sm;
40
+ margin-bottom: $mtvh-spacing-4;
41
+
42
+ &.text-right, &.pull-right {
43
+ float: none;
44
+ margin-bottom: 0;
45
+ text-align: left !important;
46
+ }
27
47
  }
28
48
 
49
+
50
+ }
51
+ .mtvh-form-container {
52
+
53
+ --#{$prefix}form-max-width: unset;
29
54
  --#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
55
+ --#{$prefix}form-control-input-width: #{$input-width-size-lg};
30
56
 
57
+ @include media-breakpoint-up("md") {
58
+ --#{$prefix}form-max-width: 576px;
59
+ }
31
60
  @include media-breakpoint-up("lg") {
32
61
  --#{$prefix}form-group-padding-y: #{$form-group-lg-margin-bottom};
62
+ --#{$prefix}form-max-width: 550px;
33
63
  }
34
64
 
35
65
  &--md {
66
+
67
+ --#{$prefix}form-control-input-width: #{$input-width-size-l};
36
68
  --#{$prefix}form-group-padding-y: #{$mtvh-spacing-6};
69
+ --#{$prefix}form-max-width: unset;
37
70
 
71
+ @include media-breakpoint-up("md") {
72
+ --#{$prefix}form-max-width: 576px;
73
+ }
38
74
  @include media-breakpoint-up("lg") {
75
+
39
76
  --#{$prefix}form-group-padding-y: #{$mtvh-spacing-7};
77
+ --#{$prefix}form-max-width: 636px;
40
78
  }
41
-
42
79
  }
43
80
 
44
- .form-group {
45
- margin-bottom: var(--#{$prefix}form-group-padding-y);
81
+ max-width: var(--#{$prefix}form-max-width);
46
82
 
83
+ @include media-breakpoint-up("md") {
84
+ padding-left: 60px;
85
+ padding-right: 60px;
47
86
  }
48
87
 
49
- .field-required:after, .tab-error::after {
50
- content: " *";
51
- color: $form-feedback-invalid-color;
88
+ @include media-breakpoint-up("lg") {
89
+ margin:0 auto;
90
+ padding: 0;
52
91
  }
53
92
 
54
- .form-text {
55
- margin-top: $mtvh-spacing-3;
56
- font-size: $font-size-sm;
57
- margin-bottom: $mtvh-spacing-4;
58
-
59
- &.text-right, &.pull-right {
60
- float: none;
61
- margin-bottom: 0;
62
- text-align: left !important;
63
- }
64
- }
65
93
 
66
94
  .mtvh-form-container-required {
67
95
  font-size: $font-size-xs;
@@ -70,5 +98,4 @@
70
98
  padding-bottom: $mtvh-spacing-7;
71
99
  }
72
100
  }
73
-
74
101
  }
package/assets/scss/components/_status.scss ADDED
@@ -0,0 +1,24 @@
1
+ .badge {
2
+ background-color: var(--#{$prefix}badge-background);
3
+ border-color: var(--#{$prefix}badge-border-color);
4
+ color: var(--#{$prefix}badge-color);
5
+ border: 2px solid var(--#{$prefix}badge-border-color);
6
+ text-transform: uppercase;
7
+ line-height: 1.25;
8
+ @include media-breakpoint-up(lg) {
9
+ --#{$prefix}badge-padding-x: #{$mtvh-spacing-2};
10
+ --#{$prefix}badge-padding-y: #{$mtvh-spacing-1};
11
+ }
12
+ }
13
+
14
+ @each $state, $variable in $badge-themes {
15
+ $bg-colour: map-get($variable, "background");
16
+ $border-color: map-get($variable, "border");
17
+ $color: map-get($variable, "color");
18
+
19
+ .badge--#{$state} {
20
+ --#{$prefix}badge-color: #{$color};
21
+ --#{$prefix}badge-border-color: #{$border-color};
22
+ --#{$prefix}badge-background: #{$bg-colour};
23
+ }
24
+ }
package/assets/scss/components/_stepper.scss CHANGED
@@ -23,8 +23,8 @@
23
23
  text-align: center;
24
24
 
25
25
  @include media-breakpoint-up($stepper-breakpoint) {
26
- padding-bottom: 0;
27
- margin: $mtvh-spacing-9 0 $mtvh-spacing-5 0;
26
+ padding-bottom: 0;
27
+ margin: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
28
28
  }
29
29
 
30
30
  .mtvh-stepper-item {
package/assets/scss/config/_variables.scss CHANGED
@@ -104,7 +104,18 @@ $spacers: (
104
104
  3: $spacer,
105
105
  4: $spacer * 1.5,
106
106
  5: $spacer * 3,
107
- 6: $mtvh-spacing-8
107
+ 6: $mtvh-spacing-8,
108
+ 11: $mtvh-spacing-1,
109
+ 12: $mtvh-spacing-2,
110
+ 13: $mtvh-spacing-3,
111
+ 14: $mtvh-spacing-4,
112
+ 15: $mtvh-spacing-5,
113
+ 16: $mtvh-spacing-6,
114
+ 17: $mtvh-spacing-7,
115
+ 18: $mtvh-spacing-8,
116
+ 19: $mtvh-spacing-9,
117
+ 20: $mtvh-spacing-10,
118
+ 21: $mtvh-spacing-11
108
119
  );
109
120
 
110
121
  $icon-size-scale-xs : 16px !default;
@@ -155,9 +166,10 @@ $input-placeholder-color: var(--#{$prefix}grey-06);
155
166
  $input-width-size-xxs : 64px;
156
167
  $input-width-size-xs : 80px;
157
168
  $input-width-size-sm : 96px;
158
- $input-width-size-md : 160px;
169
+ $input-width-size-md : 130px;
159
170
  $input-width-size-lg : 336px;
160
- $input-width-size-xl : 451px;
171
+ $input-width-size-xl : 450px;
172
+ $input-width-size-l : 420px;
161
173
 
162
174
  /* form check */
163
175
  $form-check-bg-color: unset;
@@ -168,14 +180,19 @@ $form-check-min-height: 2.75rem;
168
180
  $form-check-margin-bottom: $mtvh-spacing-5;
169
181
  $form-check-input-checked-color: #fff;
170
182
  $form-check-padding-start: $form-check-input-width + 1rem;
171
- $form-check-input-checked-bg-color: var(--#{$prefix}purple-05);
183
+ $form-check-input-checked-bg-color: var(--#{$prefix}purple-04);
172
184
  $form-check-input-hover-bg-color: var(--#{$prefix}purple-04);
173
- $form-check-input-checked-border-color: var(--#{$prefix}purple-05);
185
+ $form-check-input-checked-border-color: var(--#{$prefix}purple-04);
186
+ $form-check-input-focus-border: var(--#{$prefix}purple-05);
187
+ $form-check-input-focus-bg-color: var(--#{$prefix}purple-05);
174
188
  $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>");
175
189
  $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>");
176
190
  $form-check-input-focus-box-shadow: "";
177
191
  $form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
178
192
  $form-check-wrapper-radio-invalid-border: 1px solid var(--#{$prefix}red-01);
193
+ $form-select-indicator-color: "#000";
194
+ $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>");
195
+
179
196
 
180
197
  /* list group */
181
198
  $list-group-item-padding-x: 0;
@@ -219,11 +236,15 @@ $banner-theme-colors: (
219
236
 
220
237
  $content-block-theme-colors: (
221
238
  "yellow-01": var(--#{$prefix}yellow-01),
239
+ "yellow-02": var(--#{$prefix}yellow-02),
222
240
  "red-01": var(--#{$prefix}red-01),
241
+ "red-02": var(--#{$prefix}red-02),
223
242
  "green-01": var(--#{$prefix}green-01),
243
+ "green-02": var(--#{$prefix}green-02),
224
244
  "grey-01": var(--#{$prefix}grey-01),
225
245
  "white": var(--#{$prefix}white),
226
246
  "purple-01": var(--#{$prefix}purple-01),
247
+ "purple-02": var(--#{$prefix}purple-02),
227
248
  "stone-02": var(--#{$prefix}stone-02)
228
249
  );
229
250
 
@@ -236,3 +257,71 @@ $content-block-theme-border: (
236
257
  "yellow-03": var(--#{$prefix}yellow-03)
237
258
  );
238
259
 
260
+ $badge-themes: (
261
+ "primary" : (
262
+ "border" : transparent,
263
+ "background" : var(--#{$prefix}blue-03),
264
+ "color" : var(--#{$prefix}black),
265
+ ),
266
+ "secondary" : (
267
+ "border" : transparent,
268
+ "background" : var(--#{$prefix}grey-05),
269
+ "color" : var(--#{$prefix}black),
270
+ )
271
+ ,
272
+ "success" : (
273
+ "border" : transparent,
274
+ "background" : var(--#{$prefix}green-03),
275
+ "color" : var(--#{$prefix}black),
276
+ ),
277
+ "danger" : (
278
+ "border" : transparent,
279
+ "background" : var(--#{$prefix}red-03),
280
+ "color" : var(--#{$prefix}black),
281
+ ),
282
+ "warning" : (
283
+ "border" : transparent,
284
+ "background" : var(--#{$prefix}yellow-03),
285
+ "color" : var(--#{$prefix}black),
286
+ ),
287
+ "info" : (
288
+ "border" : transparent,
289
+ "background" :var(--#{$prefix}purple-03),
290
+ "color" : var(--#{$prefix}black),
291
+ ),
292
+ "danger-light" : (
293
+ "border" : transparent,
294
+ "background" : var(--#{$prefix}red-02),
295
+ "color" : var(--#{$prefix}black),
296
+ ),
297
+ "outline-dark" : (
298
+ "border" : var(--#{$prefix}black),
299
+ "background" : transparent,
300
+ "color" : var(--#{$prefix}black),
301
+ ),
302
+ "outline-success" : (
303
+ "border" : var(--#{$prefix}green-04),
304
+ "background" : var(--#{$prefix}white),
305
+ "color" : var(--#{$prefix}green-04)
306
+ ),
307
+ "outline-info" : (
308
+ "border" : var(--#{$prefix}purple-04),
309
+ "background" : var(--#{$prefix}white),
310
+ "color" : var(--#{$prefix}purple-04)
311
+ ),
312
+ "outline-danger" : (
313
+ "border": var(--#{$prefix}red-04),
314
+ "background" : var(--#{$prefix}white),
315
+ "color": var(--#{$prefix}red-04),
316
+ ),
317
+ "outline-light" : (
318
+ "border" : var(--#{$prefix}grey-06),
319
+ "background" : var(--#{$prefix}white),
320
+ "color" : var(--#{$prefix}grey-06)
321
+ )
322
+ );
323
+
324
+ $badge-border-radius: 0;
325
+ $badge-padding-x: $mtvh-spacing-1;
326
+ $badge-padding-y: 0;
327
+ $badge-font-size: $mtvh-base-font-size;
package/assets/scss/forms/_form-check.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  .form-check {
6
6
 
7
7
  display: flex;
8
- align-items: center;
9
8
  margin-bottom: $mtvh-spacing-5;
10
9
 
11
10
  &:last-child {
@@ -17,11 +16,10 @@
17
16
  position: relative;
18
17
  display: flex;
19
18
  align-items: center;
20
-
19
+ @include field-focus();
21
20
  input {
22
21
  float: unset;
23
22
  align-self: start;
24
- @include field-focus();
25
23
  }
26
24
 
27
25
  &:hover {
@@ -47,4 +45,13 @@
47
45
  &:hover {
48
46
  cursor: pointer;
49
47
  }
48
+ &:focus {
49
+ border-color: $form-check-input-focus-border;
50
+ @include field-focus();
51
+
52
+ &:checked {
53
+ background-color: $form-check-input-focus-bg-color;
54
+ }
55
+ }
56
+
50
57
  }
package/assets/scss/forms/_form-control.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  .form-control {
2
- height: auto;
3
2
 
4
3
  @include field-focus();
5
4
 
@@ -13,23 +12,38 @@
13
12
  }
14
13
 
15
14
  span[ref|="charcount"], .text-muted {
16
- color : var(--mtvh-grey-06) !important;
15
+ color: var(--mtvh-grey-06) !important;
17
16
  }
18
- }
19
17
 
18
+ &:not(textarea, select) {
19
+ max-width: var(--#{$prefix}form-control-input-width);
20
+ }
20
21
 
21
- textarea {
22
- &.form-control {
23
- max-height: 496px;
24
- @include media-breakpoint-up(md) {
25
- max-height: 608px;
26
- }
22
+ &[ref|="postCode"], &[inputmode|="decimal"], &[autocomplete|="tel"] {
23
+ max-width: $input-width-size-md;
27
24
  }
28
- }
29
25
 
30
- select {
31
- &.form-control {
32
- height: auto;
26
+ &textarea {
27
+
28
+ max-height: 496px;
29
+ @include media-breakpoint-up(md) {
30
+ max-height: 608px;
31
+ }
33
32
  }
33
+
34
34
  }
35
35
 
36
+ select.form-control {
37
+
38
+ padding-right: 50px;
39
+
40
+ max-width: unset;
41
+ -o-appearance: none;
42
+ -webkit-appearance: none;
43
+ -moz-appearance: none;
44
+ appearance: none;
45
+ background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99024 13.8513L18.4014 5.44069C18.5717 5.27035 18.7789 5.17873 19.0228 5.1658C19.267 5.15321 19.4885 5.24434 19.6874 5.4392C19.8862 5.63439 19.9898 5.84863 19.998 6.08193C20.0063 6.31489 19.911 6.53726 19.7122 6.74901L11.0779 15.3829C10.9085 15.5396 10.7375 15.6573 10.5649 15.7358C10.3922 15.814 10.2007 15.8531 9.99024 15.8531C9.77981 15.8531 9.58761 15.8137 9.41363 15.7348C9.23998 15.6559 9.07412 15.5376 8.91605 15.3799L0.290642 6.752C0.102411 6.56377 0.00614352 6.34671 0.00183483 6.10082C-0.00280383 5.85492 0.0942936 5.63438 0.293127 5.4392C0.491961 5.24434 0.707031 5.14691 0.938341 5.14691C1.16965 5.14691 1.38323 5.24484 1.57908 5.44069L9.99024 13.8513Z' fill='black'/%3E%3C/svg%3E%0A");
46
+ background-position: calc(100% - 12px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
47
+ background-repeat: no-repeat;
48
+ background-size: 1rem;
49
+ }
package/assets/scss/forms/_formio.scss CHANGED
@@ -24,3 +24,8 @@
24
24
  }
25
25
  }
26
26
  }
27
+
28
+ .formio-wizard-nav-container {
29
+ display: block;
30
+ }
31
+
package/assets/scss/forms/_mtvho_contact_email.scss ADDED
@@ -0,0 +1,8 @@
1
+ .formio-component-mtvhoContactEmail {
2
+ select,
3
+ input {
4
+ @include media-breakpoint-up(lg) {
5
+ width: 50%;
6
+ }
7
+ }
8
+ }
package/assets/scss/forms/_mtvho_contact_phone.scss ADDED
@@ -0,0 +1,8 @@
1
+ .formio-component-mtvhoContactPhone {
2
+ select, input {
3
+
4
+ @include media-breakpoint-up(lg) {
5
+ width: 50%;
6
+ }
7
+ }
8
+ }
package/assets/scss/forms/input-group.scss ADDED
@@ -0,0 +1,3 @@
1
+ .input-group-text {
2
+ border-radius: 0.25rem 0 0 0.25rem ;
3
+ }
package/assets/scss/mixins/_form.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  position: relative;
9
9
  display: flex;
10
10
  gap: $mtvh-spacing-3;
11
+ margin: 0;
11
12
  &:before {
12
13
  content: '';
13
14
  -webkit-mask: get-icon('error',$danger);