@mtvh/mtvh-design-system 0.0.7 → 0.0.8

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 (22) hide show
  1. package/assets/scss/base/_all.scss +0 -1
  2. package/assets/scss/base/_global.scss +1 -3
  3. package/assets/scss/components/_breadcrumb.scss +2 -3
  4. package/assets/scss/components/_close.scss +0 -4
  5. package/assets/scss/components/_content-block.scss +11 -11
  6. package/assets/scss/components/_form.scss +3 -3
  7. package/assets/scss/components/_link.scss +16 -16
  8. package/assets/scss/components/_list-group.scss +1 -1
  9. package/assets/scss/config/_all.scss +1 -1
  10. package/assets/scss/config/_palette.scss +2 -2
  11. package/assets/scss/config/_theme.scss +1 -3
  12. package/assets/scss/config/_variables.scss +74 -64
  13. package/assets/scss/forms/_form-check.scss +2 -43
  14. package/assets/scss/forms/_form-control.scss +2 -7
  15. package/assets/scss/forms/_formio.scss +1 -1
  16. package/assets/scss/forms/_validation.scss +5 -11
  17. package/assets/scss/mixins/_form.scss +13 -1
  18. package/assets/scss/{base/_mixins.scss → mixins/_icon.scss} +10 -10
  19. package/assets/scss/mtvh.scss +3 -2
  20. package/dist/mtvh.min.css +1 -1
  21. package/package.json +1 -1
  22. /package/assets/scss/config/{_map-list.scss → _icon-list.scss} +0 -0
package/assets/scss/base/_all.scss CHANGED
@@ -1,4 +1,3 @@
1
1
  @import 'global';
2
2
  @import 'functions';
3
- @import 'mixins';
4
3
  @import 'print';
package/assets/scss/base/_global.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  html {
2
2
  font-size: 100%;
3
- line-height: var(--mtvh-line-height);
4
3
  box-sizing: border-box;
5
4
  }
6
5
  body {
@@ -10,7 +9,6 @@ body {
10
9
  -webkit-font-smoothing: antialiased;
11
10
  -moz-osx-font-smoothing: grayscale;
12
11
  font-size: 100%;
13
- line-height: var(--mtvh-line-height);
14
12
  box-sizing: border-box;
15
13
  }
16
14
 
@@ -21,5 +19,5 @@ body {
21
19
  }
22
20
 
23
21
  .mtvh-layout {
24
- background-color: var(--mtvh-grey-01);
22
+ background-color: var(--#{$prefix}grey-01);
25
23
  }
package/assets/scss/components/_breadcrumb.scss CHANGED
@@ -20,16 +20,15 @@
20
20
  width: 20%;
21
21
  content: ' ';
22
22
 
23
- background: linear-gradient(to left, var(--mtvh-grey-01), rgba(255,255,255,0));
23
+ background: linear-gradient(to left, var(--#{$prefix}grey-01), rgba(255,255,255,0));
24
24
  }
25
25
  }
26
26
 
27
27
  .active {
28
28
  font-weight: bold;
29
- --mtvh-breadcrumb-item-active-color: var(--mtvh-black);
30
29
  }
31
30
  a {
32
- color: var(--mtvh-black);
31
+ color: var(--#{$prefix}black);
33
32
  text-decoration: none;
34
33
  font-weight: normal;
35
34
 
package/assets/scss/components/_close.scss CHANGED
@@ -35,18 +35,14 @@
35
35
 
36
36
  @each $state in map-keys($banner-theme-colors) {
37
37
  .mtvh-banner-#{$state} {
38
- .btn-close {
39
38
  --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
40
39
  --#{$prefix}btn-close-hover-bg-color: var(--#{$prefix}btn-close-#{$state}-hover-bg);
41
- }
42
40
  }
43
41
  }
44
42
 
45
43
  @each $state in map-keys($content-block-theme-colors) {
46
44
  .mtvh-content-block-bg--#{$state} {
47
- .btn-close {
48
45
  --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}primary-outline-color);
49
46
  --#{$prefix}btn-close-hover-bg-color: var(--#{$prefix}btn-close-#{$state}-hover-bg);
50
- }
51
47
  }
52
48
  }
package/assets/scss/components/_content-block.scss CHANGED
@@ -23,10 +23,10 @@
23
23
 
24
24
  &-link-card {
25
25
  text-decoration: none;
26
- box-shadow: var(--mtvh-box-shadow);
26
+ box-shadow: var(--#{$prefix}box-shadow);
27
27
  padding: $mtvh-spacing-5;
28
28
  &:hover {
29
- background-color: var(--mtvh-grey-02);
29
+ background-color: var(--#{$prefix}grey-02);
30
30
  }
31
31
 
32
32
  @include media-breakpoint-up(md) {
@@ -37,19 +37,19 @@
37
37
  }
38
38
 
39
39
  &:focus-within {
40
- outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
40
+ outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
41
41
  outline-offset: $mtvh-spacing-3;
42
- background-color: var(--mtvh-grey-04);
42
+ background-color: var(--#{$prefix}grey-04);
43
43
  }
44
44
 
45
45
  &:active, &:focus {
46
- background-color: var(--mtvh-grey-04);
46
+ background-color: var(--#{$prefix}grey-04);
47
47
  outline: unset;
48
48
  }
49
49
 
50
50
  a {
51
51
  @extend %h3;
52
- color: var(--mtvh-black);
52
+ color: var(--#{$prefix}black);
53
53
  text-decoration: none;
54
54
  &:after {
55
55
  bottom: 0;
@@ -61,7 +61,7 @@
61
61
  z-index: 100;
62
62
  }
63
63
  &:active, &:focus {
64
- background-color: var(--mtvh-grey-04);
64
+ background-color: var(--#{$prefix}grey-04);
65
65
  outline: unset;
66
66
  }
67
67
 
@@ -69,7 +69,7 @@
69
69
  }
70
70
  .mtvh-btn, p {
71
71
  &:last-child {
72
- margin-bottom: 0px;
72
+ margin-bottom: 0;
73
73
  }
74
74
  }
75
75
 
@@ -143,8 +143,8 @@
143
143
 
144
144
  padding-top: $mtvh-spacing-5;
145
145
  padding-bottom: $mtvh-spacing-5;
146
- border-top: 1px solid var(--mtvh-grey-02);
147
- border-bottom: 1px solid var(--mtvh-grey-02);
146
+ border-top: 1px solid var(--#{$prefix}grey-02);
147
+ border-bottom: 1px solid var(--#{$prefix}grey-02);
148
148
 
149
149
  @include media-breakpoint-up(md) {
150
150
  padding: 0;
@@ -155,7 +155,7 @@
155
155
  font-size: $font-size-lg;
156
156
  font-weight: $mtvh-font-weight-bold;
157
157
  margin-bottom: $mtvh-spacing-3;
158
- line-height: $line-height-md;//33.8px;
158
+ line-height: $line-height-md;
159
159
  }
160
160
  &-date {
161
161
  font-weight: $mtvh-font-weight-bold;
package/assets/scss/components/_form.scss CHANGED
@@ -8,9 +8,9 @@
8
8
  @import "../forms/form-date-input";
9
9
 
10
10
 
11
- background-color: var(--mtvh-white);
12
- margin: 0 calc(var(--mtvh-gutter-x)* -0.5);
13
- padding: var(--mtvh-gutter-x);
11
+ background-color: var(--#{$prefix}white);
12
+ margin: 0 calc(var(--#{$prefix}gutter-x)* -0.5);
13
+ padding: var(--#{$prefix}gutter-x);
14
14
  overflow: hidden;
15
15
 
16
16
  @include media-breakpoint-up("md") {
package/assets/scss/components/_link.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  $mtvh-links: (
2
2
  primary: (
3
- text-color: var(--mtvh-blue-04),
4
- text-color-hover: var(--mtvh-blue-05),
5
- text-color-active: var(--mtvh-blue-06),
6
- text-color-focus: var(--mtvh-blue-05),
7
- text-disabled-color: var(--mtvh-grey-06)
3
+ text-color: var(--#{$prefix}blue-04),
4
+ text-color-hover: var(--#{$prefix}blue-05),
5
+ text-color-active: var(--#{$prefix}blue-06),
6
+ text-color-focus: var(--#{$prefix}blue-05),
7
+ text-disabled-color: var(--#{$prefix}grey-06)
8
8
  ),
9
9
  light: (
10
- text-color: var(--mtvh-white),
11
- text-color-hover: var(--mtvh-grey-04),
12
- text-color-active: var(--mtvh-grey-05),
13
- text-color-focus: var(--mtvh-grey-04),
14
- text-disabled-color: var(--mtvh-grey-06)
10
+ text-color: var(--#{$prefix}white),
11
+ text-color-hover: var(--#{$prefix}grey-04),
12
+ text-color-active: var(--#{$prefix}grey-05),
13
+ text-color-focus: var(--#{$prefix}grey-04),
14
+ text-disabled-color: var(--#{$prefix}grey-06)
15
15
  ),
16
16
  );
17
17
 
@@ -23,7 +23,7 @@ $mtvh-links: (
23
23
  cursor: pointer;
24
24
  display: inline-block;
25
25
  &:hover {
26
- color: var(--mtvh-blue-05);
26
+ color: var(--#{$prefix}blue-05);
27
27
  text-decoration: none;
28
28
  }
29
29
 
@@ -37,19 +37,19 @@ $mtvh-links: (
37
37
 
38
38
  &:focus {
39
39
  box-shadow: none;
40
- outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
40
+ outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
41
41
  outline-offset: 0.5rem;;
42
42
  text-decoration: none;
43
- border-radius: var(--mtvh-btn-border-radius);
44
- color: var(--mtvh-blue-05);
43
+ border-radius: var(--#{$prefix}btn-border-radius);
44
+ color: var(--#{$prefix}blue-05);
45
45
  }
46
46
 
47
47
  &:active {
48
- color: var(--mtvh-blue-06);
48
+ color: var(--#{$prefix}blue-06);
49
49
  }
50
50
 
51
51
  &.disabled, &[aria-disabled="true"] {
52
- color: var(--mtvh-grey-06);
52
+ color: var(--#{$prefix}grey-06);
53
53
  pointer-events: none;
54
54
  cursor: not-allowed;
55
55
  }
package/assets/scss/components/_list-group.scss CHANGED
@@ -16,6 +16,6 @@
16
16
  }
17
17
 
18
18
  &--border-yellow-02 {
19
- border-color: var(--mtvh-yellow-02);
19
+ border-color: var(--#{$prefix}yellow-02);
20
20
  }
21
21
  }
package/assets/scss/config/_all.scss CHANGED
@@ -2,4 +2,4 @@
2
2
  @import "font";
3
3
  @import 'palette';
4
4
  @import 'theme';
5
- @import "map-list";
5
+ @import "icon-list";
package/assets/scss/config/_palette.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
 
3
- --mtvh-white: #fff;
4
- --mtvh-black: #000;
3
+ --mtvh-white: #ffffff;
4
+ --mtvh-black: #000000;
5
5
  --mtvh-transparent: transparent;
6
6
  --mtvh-grey-01: #F7F7F7;
7
7
  --mtvh-grey-02: #EAE9E9;
package/assets/scss/config/_theme.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  --mtvh-link-color: var(--mtvh-blue-04);
5
5
  --mtvh-primary-outline-color: var(--mtvh-blue-03);
6
6
  --mtvh-dark-outline-color: var(--mtvh-black);
7
-
8
7
  --mtvh-border-color: var(--mtvh-grey-06);
9
8
  --mtvh-btn-disabled-bg: var(--mtvh-grey-06);
10
9
  --mtvh-btn-disabled-border-color: var(--mtvh-grey-06);
@@ -25,12 +24,11 @@
25
24
  --mtvh-btn-close-yellow-01-hover-bg: var(--mtvh-yellow-02);
26
25
  --mtvh-btn-close-green-01-hover-bg: var(--mtvh-green-02);
27
26
  --mtvh-btn-close-red-01-hover-bg: var(--mtvh-red-02);
27
+ --mtvh-btn-close-grey-02-hover-bg: var(--mtvh-grey-02);
28
28
  --mtvh-btn-close-white-hover-bg: var(--mtvh-grey-02);
29
- --mtvh-btn-close-grey-hover-bg: var(--mtvh-grey-02);
30
29
 
31
30
  --mtvh-btn-close-danger-hover-bg: var(--mtvh-red-03);
32
31
  --mtvh-btn-close-success-hover-bg: var(--mtvh-green-03);
33
- --mtvh-btn-close-success-hover-bg-suble: var(--mtvh-green-02);
34
32
  --mtvh-btn-close-warning-hover-bg: var(--mtvh-yellow-03);
35
33
 
36
34
  }
package/assets/scss/config/_variables.scss CHANGED
@@ -31,7 +31,6 @@ $link-hover-color: #005792;
31
31
  $body-color: #000;
32
32
  $font-family-sans-serif: Arial, sans-serif;
33
33
 
34
-
35
34
  // MTVH Font
36
35
  $mtvh-base-font-size: $font-size-base;
37
36
  $mtvh-font-weight-lighter: lighter !default;
@@ -42,6 +41,29 @@ $mtvh-font-weight-semibold: 600 !default;
42
41
  $mtvh-font-weight-bold: 700 !default;
43
42
  $mtvh-font-weight-bolder: bolder !default;
44
43
 
44
+ $success: #23870B;
45
+ $info: #895ED0;
46
+ $warning: #F8D643;
47
+ $danger: #DD080D;
48
+ $primary: #0072BF;
49
+ $dark: #000000;
50
+ $secondary: #9A9A9A;
51
+ $light: #0072BF;
52
+ $stone: #F9F2EA;
53
+
54
+ $theme-colors: (
55
+ "primary": $primary,
56
+ "secondary": $secondary,
57
+ "success": $success,
58
+ "info": $info,
59
+ "warning": $warning,
60
+ "danger": $danger,
61
+ "light": $light,
62
+ "dark": $dark,
63
+ "stone": $stone
64
+ );
65
+
66
+
45
67
  //button
46
68
  $input-btn-font-family:$font-family-sans-serif;
47
69
  $btn-border-radius: 3rem;
@@ -51,15 +73,16 @@ $btn-padding-y: 0.438rem;
51
73
  $btn-font-size: 1rem;
52
74
  $btn-border-width: 3px;
53
75
 
76
+ $border-width-xs: 0.063rem;
77
+ $border-width-sm: 0.15rem;
78
+ $border-width-md: 0.19rem;
79
+ $line-height-md: 1.3;
80
+
54
81
  //spacing
55
82
  $button-icon-spacing: 0.75rem;
56
83
  $button-icon-small-spacing: 8px;
57
84
  $link-icon-spacing: 0.5rem;
58
85
 
59
- $border-width-sm: 0.15rem;
60
- $border-width-md: 0.19rem;
61
- $line-height-md: 1.3;
62
-
63
86
  $mtvh-spacing-1: 0.125rem;
64
87
  $mtvh-spacing-2: 0.25rem;
65
88
  $mtvh-spacing-3: 0.5rem;
@@ -89,8 +112,6 @@ $icon-size-scale-sm : 20px !default;
89
112
  $icon-size-scale-md : 28px !default;
90
113
  $icon-size-scale-lg : 42px !default;
91
114
  $icon-size-scale-xl : 56px !default;
92
- $breadcrumb-item-padding-x: $mtvh-spacing-4;
93
- $breadcrumb-font-size: $font-size-xs;
94
115
 
95
116
  $mtvh-icon-sizes: (
96
117
  "xs" : $icon-size-scale-xs,
@@ -100,18 +121,13 @@ $mtvh-icon-sizes: (
100
121
  "xl" : $icon-size-scale-xl
101
122
  ) !default;
102
123
 
103
-
104
- $success: #23870B;
105
- $info: #895ED0;
106
- $warning: #F8D643; //--mtvh-purple-04
107
- $danger: #DD080D;
108
- $primary: #0072BF;
109
- $dark: #000000;
110
- $btn-color: $primary;
111
-
112
124
  /* breadcrumb */
113
125
  $breadcrumb-margin-bottom: $mtvh-spacing-6;
114
126
  $breadcrumb-border-radius: none;
127
+ $breadcrumb-item-padding-x: $mtvh-spacing-4;
128
+ $breadcrumb-font-size: $font-size-xs;
129
+ $breadcrumb-active-color: var(--#{$prefix}black);
130
+
115
131
  /* form */
116
132
  $form-group-margin-top: 4rem;
117
133
  $form-label-font-size : $font-size-md;
@@ -119,7 +135,7 @@ $form-label-font-weight: 700;
119
135
  $form-label-color: #000000;
120
136
  $form-text-font-size: $font-size-sm;
121
137
  $form-label-margin-bottom: $mtvh-spacing-3;
122
- $form-select-focus-border-color: var( --mtvh-grey-06);
138
+ $form-select-focus-border-color: var(--#{$prefix}grey-06);
123
139
  $form-feedback-font-size: $font-size-sm;
124
140
  $form-feedback-invalid-color: $danger;
125
141
  $form-feedback-icon-invalid: '';
@@ -128,12 +144,13 @@ $input-line-height: 1.5;
128
144
  $input-font-size: $font-size-sm;
129
145
  $input-padding-y: $mtvh-spacing-4;
130
146
  $input-padding-x: $mtvh-spacing-5;
131
- $input-focus-color: var(--mtvh-blue-05);
132
- $input-focus-border-color: var( --mtvh-grey-06);
133
- $input-border-color: var( --mtvh-grey-06);
147
+ $input-focus-color: var(--#{$prefix}blue-05);
148
+ $input-focus-border-color: var(--#{$prefix}grey-06);
149
+ $input-border-color: var(--#{$prefix}grey-06);
134
150
  $input-border-radius: 0.25rem;
135
151
  $input-color: $body-color;
136
- $input-placeholder-color: var( --mtvh-grey-06);
152
+ $input-placeholder-color: var(--#{$prefix}grey-06);
153
+
137
154
  $input-width-size-xxs : 64px;
138
155
  $input-width-size-xs : 80px;
139
156
  $input-width-size-sm : 96px;
@@ -142,22 +159,22 @@ $input-width-size-lg : 336px;
142
159
  $input-width-size-xl : 451px;
143
160
 
144
161
  /* form check */
145
- $form-check-bg-color: var(--mtvh-grey-01);
146
- $form-check-hover-bg-color: var(--mtvh-grey-02);
147
- $form-check-input-width: 2em;
148
- $form-check-input-height: 2em;
162
+ $form-check-bg-color: unset;
163
+ $form-check-hover-bg-color: unset;
164
+ $form-check-input-width: 2.75rem;
165
+ $form-check-input-height: 2.75rem;
166
+ $form-check-min-height: 2.75rem;
149
167
  $form-check-margin-bottom: $mtvh-spacing-5;
150
- $form-check-input-checked-color: var(--mtvh-white);
151
168
  $form-check-input-checked-color: #fff;
152
- $form-check-padding-start: $form-check-input-width + 1em;
153
- $form-check-input-checked-bg-color: var(--mtvh-purple-04);
154
- $form-check-input-hover-bg-color: var(--mtvh-purple-05);
155
- $form-check-input-checked-border-color: var(--mtvh-purple-04);
169
+ $form-check-padding-start: $form-check-input-width + 1rem;
170
+ $form-check-input-checked-bg-color: var(--#{$prefix}purple-05);
171
+ $form-check-input-hover-bg-color: var(--#{$prefix}purple-04);
172
+ $form-check-input-checked-border-color: var(--#{$prefix}purple-05);
156
173
  $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>");
157
174
  $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>");
158
175
  $form-check-input-focus-box-shadow: "";
159
- $form-check-input-border: 1px solid var(--mtvh-grey-06);
160
- $form-check-wrapper-radio-invalid-border: 1px solid $danger;
176
+ $form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
177
+ $form-check-wrapper-radio-invalid-border: 1px solid var(--#{$prefix}red-01);
161
178
 
162
179
  /* list group */
163
180
  $list-group-item-padding-x: 0;
@@ -179,49 +196,42 @@ $btn-close-focus-opacity: 1;
179
196
  $btn-close-hover-opacity: 1;
180
197
 
181
198
  /* stepper */
182
- $stepper-bg-color: var(--mtvh-grey-06);
183
- $stepper-sm-font-color: var(--mtvh-purple-04);
184
- $stepper-active-bg-color: var(--mtvh-purple-04);
185
- $stepper-disabled-bg-color: var(--mtvh-grey-03);
186
- $stepper-disabled-font-color: var(--mtvh-black);
199
+ $stepper-bg-color: var(--#{$prefix}grey-06);
200
+ $stepper-sm-font-color: var(--#{$prefix}purple-04);
201
+ $stepper-active-bg-color: var(--#{$prefix}purple-04);
202
+ $stepper-disabled-bg-color: var(--#{$prefix}grey-03);
203
+ $stepper-disabled-font-color: var(--#{$prefix}black);
187
204
  $stepper-font-size: $font-size-xs;
188
- $stepper-font-color: var(--mtvh-white);
205
+ $stepper-font-color: var(--#{$prefix}white);
189
206
  $stepper-item-padding-x: $mtvh-spacing-3;
190
207
  $stepper-item-padding-y: $mtvh-spacing-2;
191
208
  $stepper-breakpoint: "lg";
192
209
 
193
210
  $alert-border-radius: 0;
194
-
195
- $success-bg-subtle: tint-color($success, 80%);
196
- $info-bg-subtle: tint-color($info, 80%);
197
- $warning-bg-subtle: tint-color($warning, 80%);
198
- $danger-bg-subtle: tint-color($danger, 80%);
199
- $light-bg-subtle: var(--mtvh-red-02);
200
- $dark-bg-subtle: var(--mtvh-red-02);
201
-
202
211
  $banner-theme-colors: (
203
- "success": var(--mtvh-green-02),
204
- "warning": var(--mtvh-yellow-02),
205
- "danger": var(--mtvh-red-02),
206
- "emergency": var(--mtvh-red-04),
207
- "dark": var(--mtvh-black)
212
+ "success": var(--#{$prefix}green-02),
213
+ "warning": var(--#{$prefix}yellow-02),
214
+ "danger": var(--#{$prefix}red-02),
215
+ "emergency": var(--#{$prefix}red-04),
216
+ "dark": var(--#{$prefix}black)
208
217
  );
209
218
 
210
219
  $content-block-theme-colors: (
211
- "yellow-01": var(--mtvh-yellow-01),
212
- "red-01": var(--mtvh-red-01),
213
- "green-01": var(--mtvh-green-01),
214
- "grey-01": var(--mtvh-grey-01),
215
- "white": var(--mtvh-white),
216
- "purple-01": var(--mtvh-purple-01),
217
- "stone-02": var(--mtvh-stone-02)
220
+ "yellow-01": var(--#{$prefix}yellow-01),
221
+ "red-01": var(--#{$prefix}red-01),
222
+ "green-01": var(--#{$prefix}green-01),
223
+ "grey-01": var(--#{$prefix}grey-01),
224
+ "white": var(--#{$prefix}white),
225
+ "purple-01": var(--#{$prefix}purple-01),
226
+ "stone-02": var(--#{$prefix}stone-02)
218
227
  );
219
228
 
220
229
  $content-block-theme-border: (
221
- "grey-03": var(--mtvh-grey-03),
222
- "grey-04": var(--mtvh-grey-04),
223
- "red-04": var(--mtvh-red-04),
224
- "green-04": var(--mtvh-green-04),
225
- "purple-04": var(--mtvh-purple-04),
226
- "yellow-03": var(--mtvh-yellow-03)
230
+ "grey-03": var(--#{$prefix}grey-03),
231
+ "grey-04": var(--#{$prefix}grey-04),
232
+ "red-04": var(--#{$prefix}red-04),
233
+ "green-04": var(--#{$prefix}green-04),
234
+ "purple-04": var(--#{$prefix}purple-04),
235
+ "yellow-03": var(--#{$prefix}yellow-03)
227
236
  );
237
+
package/assets/scss/forms/_form-check.scss CHANGED
@@ -14,30 +14,10 @@
14
14
  cursor: pointer;
15
15
  }
16
16
  }
17
- }
18
-
19
- &:has([type="checkbox"]) {
20
-
21
- }
22
- &:has([type="radio"]) {
23
-
24
-
25
- &:focus {
26
-
27
- }
28
-
29
- label {
30
- &:before {
31
- content: "";
32
- position: absolute;
33
- left: -30px;
34
- top: 0;
35
- width: 120%;
36
- height: 120%;
37
- }
38
- }
39
17
 
18
+ @include field-focus();
40
19
  }
20
+
41
21
 
42
22
  label {
43
23
  span {
@@ -54,25 +34,4 @@
54
34
  background-size: 50%;
55
35
  }
56
36
 
57
- &:hover {
58
-
59
- &[type="checkbox"] {
60
- @if $enable-gradients {
61
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
62
- } @else {
63
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
64
- }
65
-
66
- }
67
-
68
- &[type="radio"] {
69
- @if $enable-gradients {
70
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
71
- } @else {
72
- --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
73
- }
74
- background-color: $form-check-input-hover-bg-color;
75
- }
76
- }
77
-
78
37
  }
package/assets/scss/forms/_form-control.scss CHANGED
@@ -1,12 +1,7 @@
1
1
  .form-control {
2
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
- }
3
+
4
+ @include field-focus();
10
5
 
11
6
  &.is-invalid {
12
7
  &:focus {
package/assets/scss/forms/_formio.scss CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  &.has-message.has-error {
14
14
  .text-danger {
15
- color: var(--mtvh-red-04) !important;
15
+ color: var(--#{$prefix}red-04) !important;
16
16
  }
17
17
  }
18
18
 
package/assets/scss/forms/_validation.scss CHANGED
@@ -8,14 +8,15 @@
8
8
  .invalid-feedback {
9
9
  font-weight: $mtvh-font-weight-bold;
10
10
  }
11
- .form-control {
11
+
12
+ .form-check-input {
12
13
  &.is-invalid {
13
- background-color: var(--mtvh-red-01);
14
- &[type="radio"] {
15
- border: 1px solid blue;
14
+ &:checked {
15
+ background-color:$form-check-input-checked-bg-color;
16
16
  }
17
17
  }
18
18
  }
19
+
19
20
  .form-text {
20
21
  font-size: $font-size-sm;
21
22
  margin-bottom: $mtvh-spacing-4;
@@ -27,13 +28,6 @@
27
28
  /* override radio validation style */
28
29
  .form-group {
29
30
  &.has-error {
30
- &:has([type="radio"]) {
31
31
 
32
- .form-check.radio {
33
- input {
34
- border: $form-check-input-border;
35
- }
36
- }
37
- }
38
32
  }
39
33
  }
package/assets/scss/mixins/_form.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
 
3
3
  @mixin form-invalid-text() {
4
- color: var(--mtvh-red-04);
4
+ color: var(--#{$prefix}red-04);
5
5
  font-size: $font-size-sm;
6
6
  font-weight: bold;
7
7
  padding-left: $mtvh-spacing-6;
@@ -35,3 +35,15 @@
35
35
  }
36
36
 
37
37
  }
38
+
39
+
40
+ @mixin field-focus() {
41
+
42
+ &:focus {
43
+ box-shadow: none;
44
+ outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}primary-outline-color);
45
+ outline-offset: 0;
46
+ outline-offset: var(--#{$prefix}btn-outline-border);
47
+ color: $input-color;
48
+ }
49
+ }
package/assets/scss/{base/_mixins.scss → mixins/_icon.scss} RENAMED
@@ -50,18 +50,18 @@
50
50
  } @else { //position is left
51
51
 
52
52
  &:before{ ;
53
- @include animate-default;
54
- @include icon-transform('left');
55
- @if $svg-path {
56
- background-image: url($svg-path);
57
- } @else {
58
- -webkit-mask: get-icon($icon);
59
- mask: get-icon($icon);
60
- background-color: currentColor
61
- }
62
-
53
+ @include animate-default;
54
+ @include icon-transform('left');
55
+ @if $svg-path {
56
+ background-image: url($svg-path);
57
+ } @else {
58
+ -webkit-mask: get-icon($icon);
59
+ mask: get-icon($icon);
60
+ background-color: currentColor
63
61
  }
64
62
 
63
+ }
64
+
65
65
  @if $svg-path == '' {
66
66
  &:hover:not(.disabled) {
67
67
  &:before {
package/assets/scss/mtvh.scss CHANGED
@@ -4,13 +4,14 @@
4
4
  @import "bootstrap/scss/functions";
5
5
 
6
6
  // 2. Include any default variable overrides here
7
+ @import 'config/palette';
7
8
  @import "config/variables";
8
9
  @import "config/font";
9
- @import 'config/palette';
10
10
  @import 'config/theme';
11
- @import "config/map-list";
11
+ @import "config/icon-list";
12
12
  @import 'base/all';
13
13
 
14
+ @import "mixins/icon";
14
15
  @import "mixins/form";
15
16
  @import "mixins/butttons";
16
17
  @import "mixins/banner";