@mtvh/mtvh-design-system 0.0.7 → 0.0.9

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 (24) 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 +34 -12
  7. package/assets/scss/components/_link.scss +16 -16
  8. package/assets/scss/components/_list-group.scss +1 -1
  9. package/assets/scss/components/_stepper.scss +2 -1
  10. package/assets/scss/config/_all.scss +1 -1
  11. package/assets/scss/config/_palette.scss +2 -2
  12. package/assets/scss/config/_theme.scss +1 -3
  13. package/assets/scss/config/_variables.scss +79 -68
  14. package/assets/scss/forms/_form-check.scss +24 -49
  15. package/assets/scss/forms/_form-control.scss +2 -7
  16. package/assets/scss/forms/_formio.scss +2 -12
  17. package/assets/scss/forms/_labels.scss +9 -1
  18. package/assets/scss/forms/_validation.scss +5 -19
  19. package/assets/scss/mixins/_form.scss +13 -1
  20. package/assets/scss/{base/_mixins.scss → mixins/_icon.scss} +10 -10
  21. package/assets/scss/mtvh.scss +3 -2
  22. package/dist/mtvh.min.css +1 -1
  23. package/package.json +1 -1
  24. /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") {
@@ -20,20 +20,42 @@
20
20
  }
21
21
  .mtvh-form-container {
22
22
 
23
- @include media-breakpoint-up("md") {
23
+ @include media-breakpoint-up("lg") {
24
+ max-width: 550px;
25
+ margin:0 auto;
26
+ }
27
+
28
+ .form-group {
29
+ margin-bottom: $form-group-xs-margin-top;
24
30
 
31
+ @include media-breakpoint-up("lg") {
32
+ margin-bottom: $form-group-margin-top;
33
+ }
25
34
  }
26
- @include media-breakpoint-up("lg") {
27
- padding-left: 10%;
28
- padding-right: 10%;
35
+
36
+ .field-required:after, .tab-error::after {
37
+ content: " *";
38
+ color: $form-feedback-invalid-color;
29
39
  }
30
- @include media-breakpoint-up("xl") {
31
- padding-left: 285px;
32
- padding-right: 285px;
40
+
41
+ .form-text {
42
+ margin-top: $mtvh-spacing-3;
43
+ font-size: $font-size-sm;
44
+ margin-bottom: $mtvh-spacing-4;
45
+
46
+ &.text-right, &.pull-right {
47
+ float: none;
48
+ margin-bottom: 0;
49
+ text-align: left !important;
50
+ }
33
51
  }
34
52
 
35
- .form-group {
36
- margin-top: $form-group-margin-top;
53
+ .mtvh-form-container-required {
54
+ font-size: $font-size-xs;
55
+ padding: $mtvh-spacing-4 0 $mtvh-spacing-6 0;
56
+ @include media-breakpoint-down('lg') {
57
+ padding-bottom: $mtvh-spacing-7;
58
+ }
37
59
  }
38
60
 
39
61
  }
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/components/_stepper.scss CHANGED
@@ -17,13 +17,14 @@
17
17
  position: relative;
18
18
  width: 100%;
19
19
  padding: 0 0 $mtvh-spacing-9 0;
20
- margin: 0 0 0 0;
20
+ margin: $mtvh-spacing-6 0 $mtvh-spacing-5 0;
21
21
  justify-content: center;
22
22
  color: var(--#{$prefix}stepper-font-color);
23
23
  text-align: center;
24
24
 
25
25
  @include media-breakpoint-up($stepper-breakpoint) {
26
26
  padding-bottom: 0;
27
+ margin: $mtvh-spacing-9 0 $mtvh-spacing-5 0;
27
28
  }
28
29
 
29
30
  .mtvh-stepper-item {
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,26 +121,22 @@ $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
- $form-group-margin-top: 4rem;
132
+ $form-group-margin-top: 3.5rem;
133
+ $form-group-xs-margin-top: 3rem;
134
+ $form-text-margin-top: 0;
117
135
  $form-label-font-size : $font-size-md;
118
136
  $form-label-font-weight: 700;
119
- $form-label-color: #000000;
120
- $form-text-font-size: $font-size-sm;
137
+ $form-label-color: var(--#{$prefix}black);
121
138
  $form-label-margin-bottom: $mtvh-spacing-3;
122
- $form-select-focus-border-color: var( --mtvh-grey-06);
139
+ $form-select-focus-border-color: var(--#{$prefix}grey-06);
123
140
  $form-feedback-font-size: $font-size-sm;
124
141
  $form-feedback-invalid-color: $danger;
125
142
  $form-feedback-icon-invalid: '';
@@ -128,12 +145,13 @@ $input-line-height: 1.5;
128
145
  $input-font-size: $font-size-sm;
129
146
  $input-padding-y: $mtvh-spacing-4;
130
147
  $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);
148
+ $input-focus-color: var(--#{$prefix}blue-05);
149
+ $input-focus-border-color: var(--#{$prefix}grey-06);
150
+ $input-border-color: var(--#{$prefix}grey-06);
134
151
  $input-border-radius: 0.25rem;
135
- $input-color: $body-color;
136
- $input-placeholder-color: var( --mtvh-grey-06);
152
+ $input-color: var(--#{$prefix}black);
153
+ $input-placeholder-color: var(--#{$prefix}grey-06);
154
+
137
155
  $input-width-size-xxs : 64px;
138
156
  $input-width-size-xs : 80px;
139
157
  $input-width-size-sm : 96px;
@@ -142,22 +160,22 @@ $input-width-size-lg : 336px;
142
160
  $input-width-size-xl : 451px;
143
161
 
144
162
  /* 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;
163
+ $form-check-bg-color: unset;
164
+ $form-check-hover-bg-color: unset;
165
+ $form-check-input-width: 2.75rem;
166
+ $form-check-input-height: 2.75rem;
167
+ $form-check-min-height: 2.75rem;
149
168
  $form-check-margin-bottom: $mtvh-spacing-5;
150
- $form-check-input-checked-color: var(--mtvh-white);
151
169
  $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);
170
+ $form-check-padding-start: $form-check-input-width + 1rem;
171
+ $form-check-input-checked-bg-color: var(--#{$prefix}purple-05);
172
+ $form-check-input-hover-bg-color: var(--#{$prefix}purple-04);
173
+ $form-check-input-checked-border-color: var(--#{$prefix}purple-05);
156
174
  $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
175
  $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
176
  $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;
177
+ $form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
178
+ $form-check-wrapper-radio-invalid-border: 1px solid var(--#{$prefix}red-01);
161
179
 
162
180
  /* list group */
163
181
  $list-group-item-padding-x: 0;
@@ -179,49 +197,42 @@ $btn-close-focus-opacity: 1;
179
197
  $btn-close-hover-opacity: 1;
180
198
 
181
199
  /* 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);
200
+ $stepper-bg-color: var(--#{$prefix}grey-06);
201
+ $stepper-sm-font-color: var(--#{$prefix}purple-04);
202
+ $stepper-active-bg-color: var(--#{$prefix}purple-04);
203
+ $stepper-disabled-bg-color: var(--#{$prefix}grey-03);
204
+ $stepper-disabled-font-color: var(--#{$prefix}black);
187
205
  $stepper-font-size: $font-size-xs;
188
- $stepper-font-color: var(--mtvh-white);
206
+ $stepper-font-color: var(--#{$prefix}white);
189
207
  $stepper-item-padding-x: $mtvh-spacing-3;
190
208
  $stepper-item-padding-y: $mtvh-spacing-2;
191
209
  $stepper-breakpoint: "lg";
192
210
 
193
211
  $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
212
  $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)
213
+ "success": var(--#{$prefix}green-02),
214
+ "warning": var(--#{$prefix}yellow-02),
215
+ "danger": var(--#{$prefix}red-02),
216
+ "emergency": var(--#{$prefix}red-04),
217
+ "dark": var(--#{$prefix}black)
208
218
  );
209
219
 
210
220
  $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)
221
+ "yellow-01": var(--#{$prefix}yellow-01),
222
+ "red-01": var(--#{$prefix}red-01),
223
+ "green-01": var(--#{$prefix}green-01),
224
+ "grey-01": var(--#{$prefix}grey-01),
225
+ "white": var(--#{$prefix}white),
226
+ "purple-01": var(--#{$prefix}purple-01),
227
+ "stone-02": var(--#{$prefix}stone-02)
218
228
  );
219
229
 
220
230
  $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)
231
+ "grey-03": var(--#{$prefix}grey-03),
232
+ "grey-04": var(--#{$prefix}grey-04),
233
+ "red-04": var(--#{$prefix}red-04),
234
+ "green-04": var(--#{$prefix}green-04),
235
+ "purple-04": var(--#{$prefix}purple-04),
236
+ "yellow-03": var(--#{$prefix}yellow-03)
227
237
  );
238
+
package/assets/scss/forms/_form-check.scss CHANGED
@@ -4,75 +4,50 @@
4
4
 
5
5
  .form-check {
6
6
 
7
- position: relative;
7
+ display: flex;
8
+ align-items: center;
9
+ margin-bottom: $mtvh-spacing-5;
8
10
 
9
- label, .form-check-input {
10
- &:hover {
11
- cursor: pointer;
12
-
13
- .form-check-input {
14
- cursor: pointer;
15
- }
16
- }
11
+ &:last-child {
12
+ margin-bottom: 0;
17
13
  }
18
14
 
19
- &:has([type="checkbox"]) {
20
-
21
- }
22
- &:has([type="radio"]) {
23
15
 
16
+ .form-check-label {
17
+ position: relative;
18
+ display: flex;
19
+ align-items: center;
24
20
 
25
- &:focus {
26
-
21
+ input {
22
+ float: unset;
23
+ align-self: start;
24
+ @include field-focus();
25
+ }
26
+ span {
27
+ align-self: center;
27
28
  }
28
29
 
29
- label {
30
- &:before {
31
- content: "";
32
- position: absolute;
33
- left: -30px;
34
- top: 0;
35
- width: 120%;
36
- height: 120%;
37
- }
30
+ &:hover {
31
+ cursor: pointer;
38
32
  }
39
33
 
40
- }
41
34
 
42
- label {
43
- span {
44
- display: inline-block;
45
- }
46
35
  }
36
+
47
37
  }
48
38
 
49
39
  .form-check-input {
50
40
 
51
- margin-right: $mtvh-spacing-3;
41
+ margin-top: 0;
42
+ margin-right: $mtvh-spacing-4;
43
+ float: unset;
44
+ align-self: start;
52
45
 
53
46
  &[type="checkbox"] {
54
47
  background-size: 50%;
55
48
  }
56
49
 
57
50
  &: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
- }
51
+ cursor: pointer;
76
52
  }
77
-
78
53
  }
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 {