@mtvh/mtvh-design-system 0.0.15 → 0.0.17

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