@mtvh/mtvh-design-system 0.0.11 → 0.0.13
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/_all.scss +2 -0
- package/assets/scss/components/_banner.scss +2 -1
- package/assets/scss/components/_close.scss +1 -1
- package/assets/scss/components/_content-block.scss +24 -15
- package/assets/scss/components/_form.scss +2 -1
- package/assets/scss/components/_notification.scss +32 -0
- package/assets/scss/components/_status.scss +24 -0
- package/assets/scss/config/_variables.scss +73 -0
- package/assets/scss/forms/input-group.scss +3 -0
- package/assets/scss/mixins/_form.scss +1 -0
- package/dist/mtvh.min.css +1 -1
- package/package.json +2 -2
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
--#{$prefix}banner-padding-y :#{$mtvh-spacing-3};
|
|
35
35
|
--#{$prefix}banner-padding-x : 0;
|
|
36
|
+
|
|
36
37
|
display: flex;
|
|
37
38
|
flex-direction: row;
|
|
38
39
|
justify-content: space-between;
|
|
@@ -84,7 +85,7 @@
|
|
|
84
85
|
|
|
85
86
|
|
|
86
87
|
@each $state, $variable in $banner-theme-colors {
|
|
87
|
-
.mtvh-banner
|
|
88
|
+
.mtvh-banner--#{$state} {
|
|
88
89
|
--#{$prefix}banner-text-color: var(--#{$prefix}black);
|
|
89
90
|
--#{$prefix}border-color: var(--#{$prefix}black);
|
|
90
91
|
--#{$prefix}banner-bg: #{$variable};
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
@each $state in map-keys($banner-theme-colors) {
|
|
37
|
-
.mtvh-banner
|
|
37
|
+
.mtvh-banner--#{$state} {
|
|
38
38
|
--#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
|
|
39
39
|
--#{$prefix}btn-close-hover-bg-color: var(--#{$prefix}btn-close-#{$state}-hover-bg);
|
|
40
40
|
}
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
font-size: $font-size-sm;
|
|
15
15
|
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
16
16
|
}
|
|
17
|
+
a {
|
|
18
|
+
color: inherit;
|
|
19
|
+
}
|
|
17
20
|
}
|
|
18
21
|
&--stretch {
|
|
19
22
|
height: 100%;
|
|
@@ -26,28 +29,36 @@
|
|
|
26
29
|
text-decoration: none;
|
|
27
30
|
box-shadow: var(--#{$prefix}box-shadow);
|
|
28
31
|
padding: $mtvh-spacing-5;
|
|
29
|
-
&:hover {
|
|
30
|
-
background-color: var(--#{$prefix}grey-02);
|
|
31
|
-
}
|
|
32
32
|
|
|
33
33
|
@include media-breakpoint-up(md) {
|
|
34
|
-
padding: $mtvh-spacing-6;
|
|
34
|
+
padding: $mtvh-spacing-5 $mtvh-spacing-6;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
@include media-breakpoint-up(lg) {
|
|
38
38
|
min-height: 17rem;
|
|
39
|
+
padding: $mtvh-spacing-6;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--unset {
|
|
43
|
+
min-height: unset;
|
|
39
44
|
}
|
|
40
45
|
|
|
41
46
|
&:focus-within {
|
|
42
47
|
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
|
|
43
48
|
outline-offset: $mtvh-spacing-3;
|
|
44
|
-
background-color: var(--#{$prefix}
|
|
49
|
+
background-color: var(--#{$prefix}white);
|
|
45
50
|
}
|
|
46
|
-
|
|
47
51
|
&:active, &:focus {
|
|
48
|
-
background-color: var(--#{$prefix}
|
|
52
|
+
background-color: var(--#{$prefix}white);
|
|
49
53
|
outline: unset;
|
|
50
54
|
}
|
|
55
|
+
&:hover {
|
|
56
|
+
outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}purple-03);
|
|
57
|
+
outline-offset: 0;
|
|
58
|
+
}
|
|
59
|
+
&:active{
|
|
60
|
+
background-color: var(--#{$prefix}purple-01);
|
|
61
|
+
}
|
|
51
62
|
|
|
52
63
|
a {
|
|
53
64
|
@extend %h3;
|
|
@@ -63,7 +74,6 @@
|
|
|
63
74
|
z-index: 100;
|
|
64
75
|
}
|
|
65
76
|
&:active, &:focus {
|
|
66
|
-
background-color: var(--#{$prefix}grey-04);
|
|
67
77
|
outline: unset;
|
|
68
78
|
}
|
|
69
79
|
|
|
@@ -75,12 +85,6 @@
|
|
|
75
85
|
}
|
|
76
86
|
}
|
|
77
87
|
|
|
78
|
-
h2 {
|
|
79
|
-
+ .mtvh-btn, + .mtvh-link {
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
88
|
h3 {
|
|
85
89
|
+ .mtvh-btn, + .mtvh-link {
|
|
86
90
|
margin-top: 0.625rem;
|
|
@@ -108,12 +112,17 @@
|
|
|
108
112
|
background-color: var(--#{$prefix}content-block-bg);
|
|
109
113
|
}
|
|
110
114
|
|
|
115
|
+
|
|
111
116
|
&-icon {
|
|
112
117
|
|
|
113
|
-
|
|
118
|
+
&:not(.mtvh-content-block-link-card ) {
|
|
119
|
+
padding-top: $mtvh-spacing-5;
|
|
120
|
+
}
|
|
114
121
|
|
|
115
122
|
.mtvh-icon {
|
|
116
123
|
margin-bottom: $mtvh-spacing-3;
|
|
124
|
+
height: $icon-size-scale-xl;
|
|
125
|
+
display: block;
|
|
117
126
|
}
|
|
118
127
|
|
|
119
128
|
h3:has(+ p + p ), h3:has(+ p + p + p), h3:has(+ div){
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
@import "../forms/labels";
|
|
6
6
|
@import "../forms/validation";
|
|
7
7
|
@import "../forms/formio";
|
|
8
|
-
@import "../forms/form-date-input";
|
|
8
|
+
@import "../forms/form-date-input";
|
|
9
|
+
@import "../forms/input-group";
|
|
9
10
|
|
|
10
11
|
--#{$prefix}form-padding-y: #{$mtvh-spacing-7};
|
|
11
12
|
--#{$prefix}form-padding-x: #{$mtvh-spacing-4};
|
|
@@ -0,0 +1,32 @@
|
|
|
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;
|
|
8
|
+
|
|
9
|
+
.mtvh-icon {
|
|
10
|
+
position: relative;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&-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
|
+
}
|
|
27
|
+
|
|
28
|
+
.mtvh-icon-notification + .notification-text {
|
|
29
|
+
margin-left: -23px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.badge {
|
|
2
|
+
background-color: var(--#{$prefix}badge-background);
|
|
3
|
+
border-color: var(--#{$prefix}badge-border-color);
|
|
4
|
+
color: var(--#{$prefix}badge-color);
|
|
5
|
+
border: 2px solid var(--#{$prefix}badge-border-color);
|
|
6
|
+
text-transform: uppercase;
|
|
7
|
+
line-height: 1.25;
|
|
8
|
+
@include media-breakpoint-up(lg) {
|
|
9
|
+
--#{$prefix}badge-padding-x: #{$mtvh-spacing-2};
|
|
10
|
+
--#{$prefix}badge-padding-y: #{$mtvh-spacing-1};
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@each $state, $variable in $badge-themes {
|
|
15
|
+
$bg-colour: map-get($variable, "background");
|
|
16
|
+
$border-color: map-get($variable, "border");
|
|
17
|
+
$color: map-get($variable, "color");
|
|
18
|
+
|
|
19
|
+
.badge--#{$state} {
|
|
20
|
+
--#{$prefix}badge-color: #{$color};
|
|
21
|
+
--#{$prefix}badge-border-color: #{$border-color};
|
|
22
|
+
--#{$prefix}badge-background: #{$bg-colour};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -6,6 +6,7 @@ $asset-icon-path: "./images/icons/" !default;
|
|
|
6
6
|
|
|
7
7
|
// Font
|
|
8
8
|
$font-size-base: 1rem;
|
|
9
|
+
$font-size-xxs: $font-size-base * 0.625;
|
|
9
10
|
$font-size-xs: $font-size-base;
|
|
10
11
|
$font-size-sm: $font-size-base * 1.125;
|
|
11
12
|
$font-size-md: $font-size-base * 1.375;
|
|
@@ -257,3 +258,75 @@ $content-block-theme-border: (
|
|
|
257
258
|
"yellow-03": var(--#{$prefix}yellow-03)
|
|
258
259
|
);
|
|
259
260
|
|
|
261
|
+
$badge-themes: (
|
|
262
|
+
"primary" : (
|
|
263
|
+
"border" : transparent,
|
|
264
|
+
"background" : var(--#{$prefix}blue-03),
|
|
265
|
+
"color" : var(--#{$prefix}black),
|
|
266
|
+
),
|
|
267
|
+
"secondary" : (
|
|
268
|
+
"border" : transparent,
|
|
269
|
+
"background" : var(--#{$prefix}grey-05),
|
|
270
|
+
"color" : var(--#{$prefix}black),
|
|
271
|
+
)
|
|
272
|
+
,
|
|
273
|
+
"success" : (
|
|
274
|
+
"border" : transparent,
|
|
275
|
+
"background" : var(--#{$prefix}green-03),
|
|
276
|
+
"color" : var(--#{$prefix}black),
|
|
277
|
+
),
|
|
278
|
+
"danger" : (
|
|
279
|
+
"border" : transparent,
|
|
280
|
+
"background" : var(--#{$prefix}red-03),
|
|
281
|
+
"color" : var(--#{$prefix}black),
|
|
282
|
+
),
|
|
283
|
+
"warning" : (
|
|
284
|
+
"border" : transparent,
|
|
285
|
+
"background" : var(--#{$prefix}yellow-03),
|
|
286
|
+
"color" : var(--#{$prefix}black),
|
|
287
|
+
),
|
|
288
|
+
"info" : (
|
|
289
|
+
"border" : transparent,
|
|
290
|
+
"background" :var(--#{$prefix}purple-03),
|
|
291
|
+
"color" : var(--#{$prefix}black),
|
|
292
|
+
),
|
|
293
|
+
"danger-light" : (
|
|
294
|
+
"border" : transparent,
|
|
295
|
+
"background" : var(--#{$prefix}red-02),
|
|
296
|
+
"color" : var(--#{$prefix}black),
|
|
297
|
+
),
|
|
298
|
+
"outline-dark" : (
|
|
299
|
+
"border" : var(--#{$prefix}black),
|
|
300
|
+
"background" : transparent,
|
|
301
|
+
"color" : var(--#{$prefix}black),
|
|
302
|
+
),
|
|
303
|
+
"outline-success" : (
|
|
304
|
+
"border" : var(--#{$prefix}green-04),
|
|
305
|
+
"background" : var(--#{$prefix}white),
|
|
306
|
+
"color" : var(--#{$prefix}green-04)
|
|
307
|
+
),
|
|
308
|
+
"outline-info" : (
|
|
309
|
+
"border" : var(--#{$prefix}purple-04),
|
|
310
|
+
"background" : var(--#{$prefix}white),
|
|
311
|
+
"color" : var(--#{$prefix}purple-04)
|
|
312
|
+
),
|
|
313
|
+
"outline-danger" : (
|
|
314
|
+
"border": var(--#{$prefix}red-04),
|
|
315
|
+
"background" : var(--#{$prefix}white),
|
|
316
|
+
"color": var(--#{$prefix}red-04),
|
|
317
|
+
),
|
|
318
|
+
"outline-light" : (
|
|
319
|
+
"border" : var(--#{$prefix}grey-06),
|
|
320
|
+
"background" : var(--#{$prefix}white),
|
|
321
|
+
"color" : var(--#{$prefix}grey-06)
|
|
322
|
+
)
|
|
323
|
+
);
|
|
324
|
+
|
|
325
|
+
$badge-border-radius: 0;
|
|
326
|
+
$badge-padding-x: $mtvh-spacing-1;
|
|
327
|
+
$badge-padding-y: 0;
|
|
328
|
+
$badge-font-size: $mtvh-base-font-size;
|
|
329
|
+
|
|
330
|
+
/* Notification */
|
|
331
|
+
$notification-bg-color: $danger;
|
|
332
|
+
$notification-text-color: var(--#{$prefix}white);
|