@mtvh/mtvh-design-system 0.0.21 → 0.0.22

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 (9) hide show
  1. package/assets/scss/components/_form.scss +9 -3
  2. package/assets/scss/components/_stepper.scss +11 -10
  3. package/assets/scss/forms/_form-check.scss +4 -0
  4. package/assets/scss/forms/_form-chip.scss +35 -21
  5. package/assets/scss/forms/_formio.scss +5 -3
  6. package/assets/scss/forms/_validation.scss +14 -1
  7. package/assets/scss/mixins/_form.scss +7 -4
  8. package/dist/mtvh.min.css +1 -1
  9. package/package.json +1 -1
package/assets/scss/components/_form.scss CHANGED
@@ -37,10 +37,16 @@
37
37
  }
38
38
  }
39
39
 
40
- .form-group {
41
- margin-bottom: var(--#{$prefix}form-group-padding-y);
40
+ .form-group, .formio-form-group.mb-2 {
41
+ margin-bottom: var(--#{$prefix}form-group-padding-y) !important;
42
+
42
43
  .formio-choices.choices {
43
- margin-bottom: 0;
44
+ --#{$prefix}form-group-padding-y: 0;
45
+ }
46
+
47
+ &:empty {
48
+ display: none;
49
+ --#{$prefix}form-group-padding-y: 0;
44
50
  }
45
51
  }
46
52
 
package/assets/scss/components/_stepper.scss CHANGED
@@ -15,7 +15,7 @@
15
15
 
16
16
  opacity: 0;
17
17
  position: absolute;
18
- top: 50px;
18
+ top: 80px;
19
19
  left: 0;
20
20
  margin-left: auto;
21
21
  text-align: center;
@@ -39,19 +39,19 @@
39
39
  flex-wrap: nowrap;
40
40
  list-style: none;
41
41
  width: 100%;
42
- padding: 0 0 $mtvh-spacing-9 0;
43
- margin: $mtvh-spacing-6 0 $mtvh-spacing-5 0;
42
+ padding: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
43
+ margin: 0;
44
44
  justify-content: center;
45
45
  color: var(--#{$prefix}stepper-font-color);
46
46
  text-align: center;
47
47
  position: relative;
48
- padding-bottom: 0;
49
- margin: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
50
48
 
51
49
  @include stepper-small-container {
52
- padding: 0 0 $mtvh-spacing-9 0;
53
- margin: $mtvh-spacing-6 0 $mtvh-spacing-5 0;
54
- position: unset;
50
+ padding: $mtvh-spacing-7 0 $mtvh-spacing-4 0;
51
+ min-height: 120px;
52
+ .mtvh-stepper-item {
53
+ height: 40px;
54
+ }
55
55
  }
56
56
 
57
57
  .mtvh-stepper-item {
@@ -59,11 +59,11 @@
59
59
  counter-increment: count;
60
60
  flex-basis: 100%;
61
61
  margin-right: 1px;
62
+ margin-bottom: 0;
62
63
  color: var(--#{$prefix}stepper-disabled-font-color);
63
64
  background-color: var(--#{$prefix}stepper-disabled-bg-color);
64
65
  font-size: var(--#{$prefix}stepper-font-size);
65
66
  padding: $mtvh-spacing-3 $mtvh-spacing-2;
66
- position: relative;
67
67
 
68
68
  &:has( a + span), &:has( span + a ), &.completed {
69
69
  background-color: var(--#{$prefix}stepper-bg-color);
@@ -74,6 +74,7 @@
74
74
  &:has(a) {
75
75
  &:hover {
76
76
  background-color: var(--#{$prefix}blue-04);
77
+ cursor: pointer;
77
78
  }
78
79
  }
79
80
 
@@ -133,7 +134,7 @@
133
134
  &:has(a.link-inactive) {
134
135
  color: var(--#{$prefix}stepper-disabled-font-color);
135
136
  background-color: var(--#{$prefix}stepper-disabled-bg-color);
136
-
137
+ font-weight: normal;
137
138
  a {
138
139
  color: var(--#{$prefix}stepper-disabled-font-color);
139
140
  background-color: var(--#{$prefix}stepper-disabled-bg-color);
package/assets/scss/forms/_form-check.scss CHANGED
@@ -55,4 +55,8 @@
55
55
  }
56
56
  }
57
57
 
58
+ &:checked {
59
+ border-color: $form-check-input-checked-border-color;
60
+ background-color: $form-check-input-focus-bg-color;
61
+ }
58
62
  }
package/assets/scss/forms/_form-chip.scss CHANGED
@@ -7,10 +7,35 @@
7
7
  .form-check {
8
8
  padding: 0;
9
9
  margin: 0;
10
+ }
11
+
12
+ .form-check-input {
13
+ width: 5px;
14
+ opacity: 0;
15
+ position: absolute;
10
16
 
11
- &.checkbox.radio-selected {
12
- &:hover {
13
- span {
17
+ &:focus {
18
+ + label {
19
+ @include focus-style();
20
+ color: inherit;
21
+ }
22
+ }
23
+ &:checked {
24
+ + label {
25
+ background-color: $form-check-input-checked-bg-color;
26
+ color: $form-check-input-checked-color;
27
+ }
28
+ &:focus {
29
+ + label {
30
+ color: $form-check-input-checked-color;
31
+ }
32
+ }
33
+ }
34
+
35
+ &[type="checkbox"] {
36
+
37
+ &:checked + label {
38
+ &:hover {
14
39
  position: relative;
15
40
  &:after {
16
41
  position: absolute;;
@@ -25,36 +50,25 @@
25
50
  height: $icon-size-scale-xs;
26
51
  }
27
52
  }
28
-
29
53
  }
30
54
  }
31
- }
32
55
 
33
- .form-check-input {
34
- width: 5px;
35
- opacity: 0;
36
- position: absolute;
37
56
  }
57
+
38
58
  .form-check-label {
39
- span {
59
+
40
60
  padding: $mtvh-spacing-3 $mtvh-spacing-6;
41
61
  border: 1px solid var(--mtvh-grey-06);
42
62
  border-radius: 0.5rem;
43
63
  background-color: var(--mtvh-grey-01);
44
- }
45
- }
46
-
47
- .form-check-input {
48
-
49
- &:checked + span {
50
- background-color: $form-check-input-checked-bg-color;
51
- color: $form-check-input-checked-color;
52
- }
64
+
53
65
  }
54
66
 
55
67
  &--fullwidth {
56
-
57
- .radio, label, .form-check-label span {
68
+ .form-check {
69
+ width: 100%;
70
+ }
71
+ .form-check-label, .form-check-label span {
58
72
  width: 100%;
59
73
  }
60
74
  }
package/assets/scss/forms/_formio.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  .formio-component {
2
2
 
3
3
  &.formio-hidden{
4
- margin-bottom:0;
4
+ margin-bottom: 0;
5
+ --#{$prefix}form-group-padding-y: 0;
5
6
  }
6
7
 
7
8
  &.formio-component-button:has(> button[type="submit"]),&.formio-component-form,&.formio-component-fieldset,&.formio-component-columns,&.formio-component-mtvhLogicSet{
@@ -32,8 +33,9 @@
32
33
 
33
34
  .formio-error-wrapper {
34
35
  background: unset;
36
+ padding: 0;
35
37
  }
36
38
 
37
- .formio-error-wrapper {
38
- padding: 0;
39
+ .choices__item.choices__item--selectable {
40
+ padding-right: 30px;
39
41
  }
package/assets/scss/forms/_validation.scss CHANGED
@@ -7,7 +7,8 @@
7
7
  .was-validated .form-control:invalid, .form-control.is-invalid {
8
8
  padding-right: $input-padding-x;
9
9
  }
10
- .invalid-feedback, .formio-component.has-error .invalid-feedback {
10
+
11
+ .invalid-feedback, .formio-component.has-error.has-message .invalid-feedback {
11
12
  font-weight: $mtvh-font-weight-bold;
12
13
  &:has(.error.form-text) {
13
14
  .form-text {
@@ -16,6 +17,7 @@
16
17
  font-size: $font-size-sm;
17
18
  font-weight: bold;
18
19
  margin: 0;
20
+ display: inline-block;
19
21
  }
20
22
  }
21
23
  }
@@ -25,6 +27,17 @@
25
27
  }
26
28
  }
27
29
 
30
+ .mtvh-chips {
31
+ &.has-error, &.has-message {
32
+ .form-check-label {
33
+ color: $form-label-color;
34
+ span {
35
+ border-color: $form-feedback-invalid-color;
36
+ }
37
+ }
38
+ }
39
+ }
40
+
28
41
  .form-check-input {
29
42
  &.is-invalid {
30
43
  border-color: var(--mtvh-form-invalid-border-color);
package/assets/scss/mixins/_form.scss CHANGED
@@ -39,9 +39,12 @@
39
39
 
40
40
  @mixin field-focus() {
41
41
  &:focus {
42
- box-shadow: none;
43
- outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}primary-outline-color);
44
- outline-offset: var(--#{$prefix}btn-outline-border);
45
- color: $input-color;
42
+ @include focus-style();
46
43
  }
47
44
  }
45
+ @mixin focus-style() {
46
+ box-shadow: none;
47
+ outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}primary-outline-color);
48
+ outline-offset: var(--#{$prefix}btn-outline-border);
49
+ color: $input-color;
50
+ }