@mtvh/mtvh-design-system 0.0.13 → 0.0.15
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.
- package/assets/scss/components/_alert.scss +20 -0
- package/assets/scss/components/_all.scss +2 -0
- package/assets/scss/components/_banner.scss +3 -0
- package/assets/scss/components/_button.scss +0 -1
- package/assets/scss/components/_content-block.scss +15 -8
- package/assets/scss/components/_form.scss +24 -18
- package/assets/scss/components/_link.scss +10 -0
- package/assets/scss/components/_notification.scss +19 -21
- package/assets/scss/components/_rounded-card.scss +9 -0
- package/assets/scss/components/_status.scss +12 -4
- package/assets/scss/components/_stepper.scss +22 -1
- package/assets/scss/config/_variables.scss +17 -13
- package/assets/scss/forms/_form-check.scss +0 -4
- package/assets/scss/forms/_formio.scss +3 -0
- package/assets/scss/forms/_validation.scss +15 -5
- package/assets/scss/mixins/_form.scss +4 -3
- package/dist/mtvh.min.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.mtvh-form .alert-danger {
|
|
2
|
+
padding: $mtvh-spacing-6 $mtvh-spacing-5;
|
|
3
|
+
|
|
4
|
+
@include media-breakpoint-up(md) {
|
|
5
|
+
padding: $mtvh-spacing-6;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
p {
|
|
9
|
+
@extend %h4;
|
|
10
|
+
font-weight: $mtvh-font-weight-semibold;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
ul {
|
|
14
|
+
li {
|
|
15
|
+
margin-bottom: $mtvh-spacing-4;
|
|
16
|
+
}
|
|
17
|
+
margin: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
}
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
display: flex;
|
|
38
38
|
flex-direction: row;
|
|
39
39
|
justify-content: space-between;
|
|
40
|
+
align-items: center;
|
|
40
41
|
padding: var(--#{$prefix}banner-padding-y) var(--#{$prefix}banner-padding-x);
|
|
41
42
|
|
|
42
43
|
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
flex-shrink: 0;
|
|
45
46
|
top: unset;
|
|
46
47
|
position: relative;
|
|
48
|
+
align-self: start;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
button {
|
|
@@ -52,6 +54,7 @@
|
|
|
52
54
|
|
|
53
55
|
+ .mtvh-banner-row {
|
|
54
56
|
border-top: 1px solid var(--#{$prefix}border-color);
|
|
57
|
+
border-radius: 0;
|
|
55
58
|
padding-top: 0;
|
|
56
59
|
}
|
|
57
60
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.mtvh-content-block {
|
|
2
2
|
|
|
3
|
-
padding: $mtvh-spacing-6 $mtvh-spacing-5;
|
|
3
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-5 $mtvh-spacing-6 $mtvh-spacing-5;
|
|
4
4
|
@include media-breakpoint-up(md) {
|
|
5
|
-
padding: $mtvh-spacing-6;
|
|
5
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
6
6
|
}
|
|
7
7
|
&__date {
|
|
8
8
|
margin-bottom: .5rem;
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
@extend %h3;
|
|
65
65
|
color: var(--#{$prefix}black);
|
|
66
66
|
text-decoration: none;
|
|
67
|
+
|
|
67
68
|
&:after {
|
|
68
69
|
bottom: 0;
|
|
69
70
|
content: "";
|
|
@@ -73,10 +74,13 @@
|
|
|
73
74
|
top: 0;
|
|
74
75
|
z-index: 100;
|
|
75
76
|
}
|
|
76
|
-
|
|
77
|
+
|
|
78
|
+
&:active, &:focus {
|
|
77
79
|
outline: unset;
|
|
78
80
|
}
|
|
79
|
-
|
|
81
|
+
}
|
|
82
|
+
p {
|
|
83
|
+
font-size: $mtvh-base-font-size;
|
|
80
84
|
}
|
|
81
85
|
}
|
|
82
86
|
.mtvh-btn, p {
|
|
@@ -85,16 +89,17 @@
|
|
|
85
89
|
}
|
|
86
90
|
}
|
|
87
91
|
|
|
88
|
-
h3 {
|
|
89
|
-
+ .mtvh-btn
|
|
92
|
+
h3, .mtvh-h3 {
|
|
93
|
+
+ .mtvh-btn {
|
|
90
94
|
margin-top: 0.625rem;
|
|
91
95
|
}
|
|
92
96
|
}
|
|
93
|
-
h4 {
|
|
94
|
-
+ .mtvh-btn
|
|
97
|
+
h4, .mtvh-h4 {
|
|
98
|
+
+ .mtvh-btn {
|
|
95
99
|
margin-top: 0.625rem;
|
|
96
100
|
}
|
|
97
101
|
}
|
|
102
|
+
|
|
98
103
|
&-no-padding {
|
|
99
104
|
padding: 0;
|
|
100
105
|
}
|
|
@@ -214,3 +219,5 @@
|
|
|
214
219
|
--#{$prefix}content-block-bg: #{$variable};
|
|
215
220
|
}
|
|
216
221
|
}
|
|
222
|
+
|
|
223
|
+
|
|
@@ -8,30 +8,36 @@
|
|
|
8
8
|
@import "../forms/form-date-input";
|
|
9
9
|
@import "../forms/input-group";
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
--#{$prefix}form-padding-x: #{$mtvh-spacing-4};
|
|
11
|
+
&:has(.mtvh-form-container), &:has(.formio-form) {
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
--#{$prefix}form-padding-y: #{$mtvh-spacing-
|
|
16
|
-
--#{$prefix}form-padding-x: #{$mtvh-spacing-
|
|
17
|
-
|
|
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};
|
|
17
|
+
|
|
18
|
+
@include media-breakpoint-up("lg") {
|
|
19
|
+
--#{$prefix}form-padding-y: #{$mtvh-spacing-8};
|
|
20
|
+
--#{$prefix}form-padding-x: #{$mtvh-spacing-11};
|
|
21
|
+
}
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
overflow: hidden;
|
|
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;
|
|
23
26
|
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
@include media-breakpoint-up("md") {
|
|
28
|
+
margin: 0;
|
|
29
|
+
}
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
.form-group {
|
|
29
33
|
margin-bottom: var(--#{$prefix}form-group-padding-y);
|
|
30
34
|
}
|
|
31
35
|
|
|
32
|
-
.field-required
|
|
33
|
-
|
|
34
|
-
|
|
36
|
+
legend.field-required, .tab-error, .mtvh-form-container-required .field-required{
|
|
37
|
+
&:after {
|
|
38
|
+
content: " *";
|
|
39
|
+
color: $form-feedback-invalid-color;
|
|
40
|
+
}
|
|
35
41
|
}
|
|
36
42
|
|
|
37
43
|
.form-text {
|
|
@@ -46,12 +52,12 @@
|
|
|
46
52
|
}
|
|
47
53
|
}
|
|
48
54
|
|
|
49
|
-
|
|
50
55
|
}
|
|
51
|
-
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
.mtvh-form-container, .formio-form {
|
|
52
59
|
|
|
53
60
|
--#{$prefix}form-max-width: unset;
|
|
54
|
-
--#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
|
|
55
61
|
--#{$prefix}form-control-input-width: #{$input-width-size-lg};
|
|
56
62
|
|
|
57
63
|
@include media-breakpoint-up("md") {
|
|
@@ -17,11 +17,21 @@ $mtvh-links: (
|
|
|
17
17
|
|
|
18
18
|
.mtvh-link {
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
line-height: 1.2;
|
|
21
22
|
text-decoration: underline;
|
|
22
23
|
font-weight: bold;
|
|
23
24
|
cursor: pointer;
|
|
24
25
|
display: inline-block;
|
|
26
|
+
|
|
27
|
+
&-btn {
|
|
28
|
+
border: 0;
|
|
29
|
+
padding-top: $mtvh-spacing-3;
|
|
30
|
+
padding-bottom: $mtvh-spacing-3;
|
|
31
|
+
line-height: var(--mtvh-btn-line-height);
|
|
32
|
+
display: block;
|
|
33
|
+
}
|
|
34
|
+
|
|
25
35
|
&:hover {
|
|
26
36
|
color: var(--#{$prefix}blue-05);
|
|
27
37
|
text-decoration: none;
|
|
@@ -1,32 +1,30 @@
|
|
|
1
|
-
.notification {
|
|
2
|
-
|
|
3
|
-
--#{$prefix}notification-text-color: var(--mtvh-white);
|
|
4
|
-
--#{$prefix}notification-bg-color: var(--mtvh-red-04);
|
|
5
|
-
|
|
6
|
-
margin-left: $mtvh-spacing-7;
|
|
7
|
-
margin-top: -$mtvh-spacing-5;
|
|
1
|
+
.mtvh-notification {
|
|
8
2
|
|
|
9
3
|
.mtvh-icon {
|
|
10
4
|
position: relative;
|
|
11
5
|
}
|
|
12
6
|
|
|
7
|
+
span {
|
|
8
|
+
|
|
9
|
+
}
|
|
10
|
+
|
|
13
11
|
&-text {
|
|
14
|
-
position: absolute;
|
|
15
|
-
margin-top: 6px;
|
|
16
|
-
margin-left: -20px;
|
|
17
|
-
background-color: var(--#{$prefix}notification-bg-color);
|
|
18
|
-
color: var(--#{$prefix}notification-text-color);
|
|
19
|
-
border-radius: var(--#{$prefix}border-radius-pill);
|
|
20
|
-
font-size: $font-size-xxs;
|
|
21
|
-
font-weight: $mtvh-font-weight-bold;
|
|
22
|
-
padding: 2px 5px;
|
|
23
|
-
line-height: 1;
|
|
24
|
-
white-space: nowrap;
|
|
25
|
-
vertical-align: baseline;
|
|
26
12
|
}
|
|
27
13
|
|
|
28
|
-
.
|
|
29
|
-
|
|
14
|
+
.badge {
|
|
15
|
+
--#{$prefix}badge-padding-x: 2px;
|
|
16
|
+
--#{$prefix}badge-padding-y: 2px;
|
|
17
|
+
--#{$prefix}margin-left: 4px;
|
|
18
|
+
font-size: 0.625rem;
|
|
19
|
+
margin-left: var(--#{$prefix}margin-left);
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* customize the position */
|
|
24
|
+
.mtvh-icon-update {
|
|
25
|
+
.badge {
|
|
26
|
+
--#{$prefix}margin-left: 2px;
|
|
27
|
+
}
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
}
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
.badge {
|
|
2
|
+
--#{$prefix}badge-padding-x: #{$mtvh-spacing-2};
|
|
3
|
+
--#{$prefix}badge-padding-y: #{$mtvh-spacing-1};
|
|
4
|
+
|
|
2
5
|
background-color: var(--#{$prefix}badge-background);
|
|
3
6
|
border-color: var(--#{$prefix}badge-border-color);
|
|
4
7
|
color: var(--#{$prefix}badge-color);
|
|
5
|
-
|
|
8
|
+
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}badge-border-color);
|
|
9
|
+
outline-offset: calc(var(--#{$prefix}btn-outline-border) * -1);
|
|
6
10
|
text-transform: uppercase;
|
|
7
11
|
line-height: 1.25;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
12
|
+
min-width: 1rem;
|
|
13
|
+
min-height: 1rem;
|
|
14
|
+
|
|
15
|
+
@include media-breakpoint-up(md) {
|
|
16
|
+
--#{$prefix}badge-padding-x: #{$mtvh-spacing-3};
|
|
17
|
+
--#{$prefix}badge-padding-y: #{$mtvh-spacing-2};
|
|
18
|
+
|
|
11
19
|
}
|
|
12
20
|
}
|
|
13
21
|
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
flex-basis: 100%;
|
|
34
34
|
margin-right: 1px;
|
|
35
35
|
color: var(--#{$prefix}stepper-disabled-font-color);
|
|
36
|
+
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
36
37
|
font-size: var(--#{$prefix}stepper-font-size);
|
|
37
38
|
padding: var(--#{$prefix}stepper-item-padding-x) var(--#{$prefix}stepper-item-padding-y);
|
|
38
|
-
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
39
39
|
|
|
40
40
|
&:has( a + span), &:has( span + a ) {
|
|
41
41
|
background-color: var(--#{$prefix}stepper-bg-color);
|
|
@@ -59,12 +59,33 @@
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
}
|
|
62
|
+
|
|
62
63
|
a {
|
|
63
64
|
text-decoration: none;
|
|
64
65
|
color: var(--#{$prefix}stepper-font-color);
|
|
65
66
|
font-size: var(--#{$prefix}stepper-font-size);
|
|
66
67
|
}
|
|
67
68
|
|
|
69
|
+
&:has(a:not(.link-inactive)) {
|
|
70
|
+
&:before {
|
|
71
|
+
font-weight: $mtvh-font-weight-bold;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:has(a.link-inactive) {
|
|
76
|
+
color: var(--#{$prefix}stepper-disabled-font-color);
|
|
77
|
+
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
78
|
+
|
|
79
|
+
a {
|
|
80
|
+
color: var(--#{$prefix}stepper-disabled-font-color);
|
|
81
|
+
background-color: var(--#{$prefix}stepper-disabled-bg-color);
|
|
82
|
+
font-weight: normal;
|
|
83
|
+
&:hover {
|
|
84
|
+
cursor: initial;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
68
89
|
a, span {
|
|
69
90
|
@include media-breakpoint-down($stepper-breakpoint) {
|
|
70
91
|
|
|
@@ -23,7 +23,8 @@ $font-sizes: (
|
|
|
23
23
|
4: $font-size-lg,
|
|
24
24
|
5: $font-size-md,
|
|
25
25
|
6: $font-size-sm,
|
|
26
|
-
7: $font-size-xs
|
|
26
|
+
7: $font-size-xs,
|
|
27
|
+
8: $font-size-xxs
|
|
27
28
|
);
|
|
28
29
|
|
|
29
30
|
$line-height-base: 1.5;
|
|
@@ -48,9 +49,13 @@ $warning: #F8D643;
|
|
|
48
49
|
$danger: #DD080D;
|
|
49
50
|
$primary: #0072BF;
|
|
50
51
|
$dark: #000000;
|
|
51
|
-
$secondary: #
|
|
52
|
+
$secondary: #696969;
|
|
52
53
|
$light: #ffffff;
|
|
53
54
|
$stone: #F9F2EA;
|
|
55
|
+
$grey-01: #f7f7f7;
|
|
56
|
+
$danger-bg-subtle: #FF7C8C;
|
|
57
|
+
$danger-text-emphasis: #000000;
|
|
58
|
+
$grey-03: #DADADA;
|
|
54
59
|
|
|
55
60
|
$theme-colors: (
|
|
56
61
|
"primary": $primary,
|
|
@@ -61,7 +66,9 @@ $theme-colors: (
|
|
|
61
66
|
"danger": $danger,
|
|
62
67
|
"light": $light,
|
|
63
68
|
"dark": $dark,
|
|
64
|
-
"stone": $stone
|
|
69
|
+
"stone": $stone,
|
|
70
|
+
"grey-01": $grey-01,
|
|
71
|
+
"grey-03": $grey-03,
|
|
65
72
|
);
|
|
66
73
|
|
|
67
74
|
|
|
@@ -105,7 +112,6 @@ $spacers: (
|
|
|
105
112
|
3: $spacer,
|
|
106
113
|
4: $spacer * 1.5,
|
|
107
114
|
5: $spacer * 3,
|
|
108
|
-
6: $mtvh-spacing-8,
|
|
109
115
|
11: $mtvh-spacing-1,
|
|
110
116
|
12: $mtvh-spacing-2,
|
|
111
117
|
13: $mtvh-spacing-3,
|
|
@@ -113,10 +119,7 @@ $spacers: (
|
|
|
113
119
|
15: $mtvh-spacing-5,
|
|
114
120
|
16: $mtvh-spacing-6,
|
|
115
121
|
17: $mtvh-spacing-7,
|
|
116
|
-
18: $mtvh-spacing-8
|
|
117
|
-
19: $mtvh-spacing-9,
|
|
118
|
-
20: $mtvh-spacing-10,
|
|
119
|
-
21: $mtvh-spacing-11
|
|
122
|
+
18: $mtvh-spacing-8
|
|
120
123
|
);
|
|
121
124
|
|
|
122
125
|
$icon-size-scale-xs : 16px !default;
|
|
@@ -184,14 +187,14 @@ $form-check-padding-start: $form-check-input-width + 1rem;
|
|
|
184
187
|
$form-check-input-checked-bg-color: var(--#{$prefix}purple-04);
|
|
185
188
|
$form-check-input-hover-bg-color: var(--#{$prefix}purple-04);
|
|
186
189
|
$form-check-input-checked-border-color: var(--#{$prefix}purple-04);
|
|
187
|
-
$form-check-input-focus-border: var(--#{$prefix}purple-
|
|
188
|
-
$form-check-input-focus-bg-color: var(--#{$prefix}purple-
|
|
190
|
+
$form-check-input-focus-border: var(--#{$prefix}purple-04);
|
|
191
|
+
$form-check-input-focus-bg-color: var(--#{$prefix}purple-04);
|
|
189
192
|
$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>");
|
|
190
193
|
$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>");
|
|
191
194
|
$form-check-input-focus-box-shadow: "";
|
|
192
195
|
$form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
|
|
193
196
|
$form-check-wrapper-radio-invalid-border: 1px solid var(--#{$prefix}red-01);
|
|
194
|
-
$form-select-indicator-color:
|
|
197
|
+
$form-select-indicator-color: var(--#{$prefix}black);
|
|
195
198
|
$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>");
|
|
196
199
|
|
|
197
200
|
|
|
@@ -226,7 +229,7 @@ $stepper-item-padding-x: $mtvh-spacing-3;
|
|
|
226
229
|
$stepper-item-padding-y: $mtvh-spacing-2;
|
|
227
230
|
$stepper-breakpoint: "lg";
|
|
228
231
|
|
|
229
|
-
$alert-border-radius:
|
|
232
|
+
$alert-border-radius: 8px;
|
|
230
233
|
$banner-theme-colors: (
|
|
231
234
|
"success": var(--#{$prefix}green-02),
|
|
232
235
|
"warning": var(--#{$prefix}yellow-02),
|
|
@@ -329,4 +332,5 @@ $badge-font-size: $mtvh-base-font-size;
|
|
|
329
332
|
|
|
330
333
|
/* Notification */
|
|
331
334
|
$notification-bg-color: $danger;
|
|
332
|
-
$notification-text-color:
|
|
335
|
+
$notification-text-color: var(--#{$prefix}white);
|
|
336
|
+
$box-shadow:0 0.125rem 0.225rem rgba(0,0,0,0.12);
|
|
@@ -7,6 +7,21 @@
|
|
|
7
7
|
|
|
8
8
|
.invalid-feedback {
|
|
9
9
|
font-weight: $mtvh-font-weight-bold;
|
|
10
|
+
|
|
11
|
+
&:has(.error.form-text) {
|
|
12
|
+
.form-text {
|
|
13
|
+
&.error {
|
|
14
|
+
color: $form-feedback-invalid-color;
|
|
15
|
+
font-size: $font-size-sm;
|
|
16
|
+
font-weight: bold;
|
|
17
|
+
margin: 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
@include form-invalid-text();
|
|
22
|
+
&:empty {
|
|
23
|
+
display: none;
|
|
24
|
+
}
|
|
10
25
|
}
|
|
11
26
|
|
|
12
27
|
.form-check-input {
|
|
@@ -17,9 +32,4 @@
|
|
|
17
32
|
}
|
|
18
33
|
}
|
|
19
34
|
|
|
20
|
-
.form-text {
|
|
21
|
-
&.error {
|
|
22
|
-
@include form-invalid-text();
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
35
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
position: relative;
|
|
9
9
|
display: flex;
|
|
10
10
|
gap: $mtvh-spacing-3;
|
|
11
|
-
margin: 0;
|
|
11
|
+
margin: $mtvh-spacing-3 0 0 0;
|
|
12
12
|
&:before {
|
|
13
13
|
content: '';
|
|
14
14
|
-webkit-mask: get-icon('error',$danger);
|
|
@@ -17,9 +17,10 @@
|
|
|
17
17
|
mask-repeat: no-repeat;
|
|
18
18
|
-webkit-mask-repeat: no-repeat;
|
|
19
19
|
margin-left: -$mtvh-spacing-6;
|
|
20
|
-
padding-right: $
|
|
21
|
-
margin-top: $mtvh-spacing-
|
|
20
|
+
padding-right: $mtvh-spacing-6;
|
|
21
|
+
margin-top: $mtvh-spacing-1;
|
|
22
22
|
}
|
|
23
|
+
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
|