@mtvh/mtvh-design-system 0.0.29 → 0.0.31

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 (12) hide show
  1. package/assets/scss/components/_button-circle.scss +1 -10
  2. package/assets/scss/components/_button.scss +15 -0
  3. package/assets/scss/components/_content-block.scss +3 -4
  4. package/assets/scss/config/_icon-list.scss +5 -5
  5. package/assets/scss/config/_variables.scss +5 -2
  6. package/assets/scss/core/iconography/_icon.scss +1 -1
  7. package/assets/scss/forms/_input-group.scss +24 -0
  8. package/assets/scss/mixins/_butttons.scss +8 -3
  9. package/assets/scss/mixins/_icon.scss +1 -0
  10. package/dist/js/app.min.js +1 -1
  11. package/dist/mtvh.min.css +3 -3
  12. package/package.json +1 -1
package/assets/scss/components/_button-circle.scss CHANGED
@@ -5,22 +5,13 @@
5
5
  min-width: unset;
6
6
  min-height: unset;
7
7
  @include button-circle();
8
- &:before {
9
- margin: 0;
10
- }
8
+
11
9
  }
12
10
 
13
11
  .btn-close-circle {
14
12
  @include button-circle();
15
13
  }
16
14
 
17
- .alert-dismissible {
18
- .btn-close-circle {
19
- top: $mtvh-spacing-5;
20
- padding: $mtvh-spacing-4;
21
- }
22
- }
23
-
24
15
  @each $state in map-keys($banner-theme-colors) {
25
16
  .mtvh-banner--#{$state} {
26
17
  --#{$prefix}btn-close-focus-outline-color: var(
package/assets/scss/components/_button.scss CHANGED
@@ -30,6 +30,21 @@ $mtvh-buttons: (
30
30
  border-active: transparent,
31
31
  border-color-disabled: var(--mtvh-grey-05),
32
32
  ),
33
+ light-grey: (
34
+ text-color: var(--mtvh-black),
35
+ text-color-hover: var(--mtvh-black),
36
+ text-color-active: var(--mtvh-black),
37
+ text-color-focus: var(--mtvh-black),
38
+ text-color-disabled: var(--mtvh-black),
39
+ background: var(--mtvh-grey-01),
40
+ background-hover: var(--mtvh-grey-01),
41
+ background-active: var(--mtvh-grey-02),
42
+ background-focus: var(--mtvh-white),
43
+ background-disabled: var(--mtvh-grey-05),
44
+ border: transparent,
45
+ border-active: transparent,
46
+ border-color-disabled: var(--mtvh-grey-05),
47
+ ),
33
48
  outline-primary: (
34
49
  text-color: var(--mtvh-blue-04),
35
50
  text-color-hover: var(--mtvh-blue-05),
package/assets/scss/components/_content-block.scss CHANGED
@@ -126,9 +126,6 @@
126
126
  &-bg {
127
127
  --#{$prefix}content-block-bg: var(--mtvh-white);
128
128
  background-color: var(--#{$prefix}content-block-bg);
129
- a {
130
- color: var(--#{$prefix}content-block-bg-link-color, var(--#{$prefix}blue-04));
131
- }
132
129
  }
133
130
 
134
131
  &-icon {
@@ -231,7 +228,9 @@
231
228
  .mtvh-content-block-bg--#{$state} {
232
229
  --#{$prefix}content-block-bg: #{$variable};
233
230
  @if ($state == "grey-02" or $state == "yellow-02") {
234
- --#{$prefix}content-block-bg-link-color: var(--#{$prefix}black);
231
+ a {
232
+ color: var(--#{$prefix}black);
233
+ }
235
234
  }
236
235
  }
237
236
  }
package/assets/scss/config/_icon-list.scss CHANGED
@@ -27,7 +27,7 @@ $icons: (
27
27
  "person":
28
28
  '<svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11.611c-1.607 0-2.976-.566-4.108-1.697C7.26 8.782 6.694 7.412 6.694 5.806c0-1.607.566-2.976 1.698-4.108C9.524.566 10.893 0 12.5 0c1.607 0 2.976.566 4.108 1.698 1.132 1.132 1.698 2.5 1.698 4.108 0 1.606-.566 2.976-1.698 4.108-1.132 1.132-2.501 1.697-4.108 1.697ZM0 21.714v-1.17c0-.814.218-1.562.654-2.245a4.366 4.366 0 0 1 1.779-1.582 25.435 25.435 0 0 1 5.02-1.822c1.677-.41 3.36-.615 5.047-.615 1.688 0 3.37.205 5.05.615a25.352 25.352 0 0 1 5.019 1.821c.75.372 1.343.9 1.778 1.583.435.683.653 1.43.653 2.245v1.17c0 .673-.235 1.245-.706 1.716a2.336 2.336 0 0 1-1.716.706H2.422a2.336 2.336 0 0 1-1.716-.706A2.336 2.336 0 0 1 0 21.714Zm2.39.033h20.22v-1.199c0-.353-.1-.677-.3-.973-.2-.297-.477-.54-.83-.732a21.98 21.98 0 0 0-4.444-1.624 19.049 19.049 0 0 0-9.082 0c-1.493.367-2.969.908-4.426 1.624a2.285 2.285 0 0 0-.838.733c-.2.297-.3.62-.3.97v1.2ZM12.5 9.222a3.29 3.29 0 0 0 2.413-1.004 3.29 3.29 0 0 0 1.003-2.412 3.29 3.29 0 0 0-1.003-2.413A3.29 3.29 0 0 0 12.5 2.39a3.29 3.29 0 0 0-2.413 1.003 3.29 3.29 0 0 0-1.003 2.413c0 .94.334 1.743 1.003 2.412A3.29 3.29 0 0 0 12.5 9.222Z" fill="#000"/></svg>',
29
29
  "search":
30
- '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.215 14.417c-2.019 0-3.726-.698-5.122-2.094C.698 10.927 0 9.223 0 7.21c0-2.013.697-3.718 2.092-5.115C3.486.698 5.19 0 7.206 0c2.016 0 3.722.699 5.12 2.096 1.396 1.397 2.095 3.102 2.095 5.116 0 .843-.141 1.655-.425 2.436a6.767 6.767 0 0 1-1.134 2.03l6.89 6.871a.82.82 0 0 1 .248.59.803.803 0 0 1-.254.605.828.828 0 0 1-1.192.003l-6.883-6.888a6.552 6.552 0 0 1-2.065 1.152 7.238 7.238 0 0 1-2.39.406Zm-.004-1.688c1.545 0 2.851-.533 3.92-1.6 1.067-1.066 1.601-2.373 1.601-3.921 0-1.548-.534-2.855-1.602-3.921-1.068-1.066-2.375-1.599-3.922-1.599-1.547 0-2.854.533-3.92 1.6-1.066 1.066-1.6 2.373-1.6 3.921 0 1.548.534 2.855 1.6 3.921 1.067 1.066 2.374 1.599 3.923 1.599Z" fill="#000"/></svg>',
30
+ '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M7.383 14.762c-2.06 0-3.806-.715-5.237-2.145C.716 11.187 0 9.442 0 7.383c0-2.06.715-3.805 2.144-5.237C3.574.716 5.318 0 7.377 0c2.06 0 3.804.716 5.234 2.147 1.431 1.431 2.146 3.177 2.146 5.239a7.22 7.22 0 0 1-.371 2.333 6.53 6.53 0 0 1-1.016 1.925l6.272 6.266c.239.244.358.532.358.866 0 .334-.123.621-.369.862-.24.241-.53.362-.865.362-.336 0-.623-.12-.862-.358l-6.26-6.267c-.56.439-1.205.78-1.936 1.023a7.316 7.316 0 0 1-2.325.364Zm-.004-2.455c1.376 0 2.541-.477 3.494-1.43.953-.953 1.43-2.119 1.43-3.496 0-1.377-.477-2.542-1.43-3.495-.953-.954-2.118-1.43-3.494-1.43-1.377 0-2.542.476-3.495 1.43-.953.953-1.43 2.118-1.43 3.495 0 1.377.477 2.543 1.43 3.496.953.953 2.118 1.43 3.495 1.43Z"/></svg>',
31
31
  "generic-doc":
32
32
  '<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.95 20c-.528 0-.981-.188-1.358-.565a1.852 1.852 0 0 1-.565-1.358V1.923c0-.529.189-.982.565-1.358C2.97.188 3.422 0 3.95 0h7.308c.255 0 .499.047.73.141.231.094.438.232.62.413l4.8 4.79a1.925 1.925 0 0 1 .568 1.361v11.372c0 .529-.188.981-.565 1.358-.376.377-.83.565-1.358.565H3.95Zm7.154-14.09V1.923H3.95v16.154h12.103V6.872h-3.987a.926.926 0 0 1-.68-.282.926.926 0 0 1-.282-.68Z" fill="#000"/></svg>',
33
33
  "presentation":
@@ -80,9 +80,9 @@ $icons: (
80
80
  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M5.928 19c-.532 0-.987-.19-1.365-.567a1.859 1.859 0 0 1-.568-1.364v-2.112H1.933c-.532 0-.987-.189-1.365-.567A1.859 1.859 0 0 1 0 13.026v-4.12c0-.824.286-1.52.857-2.086a2.846 2.846 0 0 1 2.081-.85h14.124c.825 0 1.52.283 2.087.85.567.566.851 1.262.851 2.086v4.12c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567h-2.062v2.112c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567H5.928Zm-3.995-5.974h2.062v-.078c0-.53.19-.985.568-1.364a1.862 1.862 0 0 1 1.365-.567h8.144c.532 0 .987.19 1.365.568.379.378.568.832.568 1.363v.078h2.062v-4.12a.97.97 0 0 0-.29-.716.978.978 0 0 0-.718-.289H2.94a.978.978 0 0 0-.718.289.97.97 0 0 0-.29.716v4.12Zm12.14-7.056V2.931H5.927V5.97H3.995V2.931c0-.53.19-.986.568-1.364A1.862 1.862 0 0 1 5.928 1h8.144c.532 0 .987.19 1.365.567.379.378.568.833.568 1.364V5.97h-1.933Zm1.984 4.416a.932.932 0 0 0 .683-.283.93.93 0 0 0 .283-.682.93.93 0 0 0-.283-.683.931.931 0 0 0-.683-.283.931.931 0 0 0-.683.283.93.93 0 0 0-.284.683.93.93 0 0 0 .284.682.932.932 0 0 0 .683.283Zm-1.985 6.683v-4.12H5.928v4.12h8.144Z"/></svg>',
81
81
  "space-sub-block":
82
82
  '<svg width="28" height="28" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.52481 12C1.24033 12 0.998404 11.8987 0.799042 11.6961C0.599681 11.4933 0.5 11.2474 0.5 10.9582V1.0416C0.5 0.752457 0.599681 0.506571 0.799042 0.303943C0.998404 0.101314 1.24033 0 1.52481 0H5.88428C6.16876 0 6.41069 0.101314 6.61005 0.303943C6.80941 0.506571 6.90909 0.752457 6.90909 1.0416V2.74286H12.4752C12.7597 2.74286 13.0016 2.84417 13.201 3.0468C13.4003 3.24943 13.5 3.49531 13.5 3.78446V10.9582C13.5 11.2474 13.4003 11.4933 13.201 11.6961C13.0016 11.8987 12.7597 12 12.4752 12H1.52481ZM1.51182 10.9714H5.89727V9.25714H1.51182V10.9714ZM1.51182 8.22857H5.89727V6.51429H1.51182V8.22857ZM1.51182 5.48571H5.89727V3.77143H1.51182V5.48571ZM1.51182 2.74286H5.89727V1.02857H1.51182V2.74286ZM6.90909 10.9714H12.4882V3.77143H6.90909V10.9714ZM8.89427 6.51429C8.75091 6.51429 8.63071 6.46497 8.53367 6.36634C8.43674 6.26771 8.38828 6.14548 8.38828 5.99966C8.38828 5.85394 8.43674 5.73183 8.53367 5.63331C8.63071 5.53491 8.75091 5.48571 8.89427 5.48571H10.3733C10.5167 5.48571 10.6368 5.53503 10.7337 5.63366C10.8308 5.73217 10.8793 5.85434 10.8793 6.00017C10.8793 6.146 10.8308 6.26811 10.7337 6.36651C10.6368 6.46503 10.5167 6.51429 10.3733 6.51429H8.89427ZM8.89427 9.25714C8.75091 9.25714 8.63071 9.20783 8.53367 9.1092C8.43674 9.01057 8.38828 8.88834 8.38828 8.74251C8.38828 8.5968 8.43674 8.47468 8.53367 8.37617C8.63071 8.27777 8.75091 8.22857 8.89427 8.22857H10.3733C10.5167 8.22857 10.6368 8.27788 10.7337 8.37651C10.8308 8.47503 10.8793 8.5972 10.8793 8.74303C10.8793 8.88886 10.8308 9.01097 10.7337 9.10937C10.6368 9.20789 10.5167 9.25714 10.3733 9.25714H8.89427Z" fill="#9A9A9A"/></svg>',
83
- "cheveron-up":
83
+ "chevron-up":
84
84
  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#000" d="m22.01 18.23-8.413 9.46a.875.875 0 0 1-.621.31c-.244.014-.466-.088-.665-.308a1.11 1.11 0 0 1-.31-.723c-.009-.262.087-.512.285-.75l8.636-9.711c.17-.177.34-.309.513-.397.173-.088.364-.132.575-.132.21 0 .403.044.577.133.173.089.34.222.497.399l8.627 9.705c.188.211.285.456.289.732.005.277-.093.525-.291.744-.2.22-.415.33-.646.33-.231 0-.445-.11-.64-.331l-8.413-9.46Z"/></svg>',
85
- "cheveron-down":
85
+ "chevron-down":
86
86
  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#000" d="m21.99 25.77 8.413-9.46a.875.875 0 0 1 .621-.31c.244-.014.466.088.665.308s.302.46.31.723c.009.262-.086.512-.285.75l-8.636 9.711c-.17.177-.34.309-.513.397a1.247 1.247 0 0 1-.575.132c-.21 0-.403-.044-.577-.133a1.73 1.73 0 0 1-.497-.399l-8.627-9.705a1.096 1.096 0 0 1-.289-.732 1.051 1.051 0 0 1 .291-.744c.2-.22.415-.33.646-.33.231 0 .445.11.64.331l8.413 9.46Z"/></svg>'
87
87
  );
88
88
 
@@ -679,11 +679,11 @@ $mtvh-icons: (
679
679
  height: $icon-size-scale-lg,
680
680
  svg-path: "#{$asset-icon-path}mastercard.svg",
681
681
  ),
682
- "cheveron-up": (
682
+ "chevron-up": (
683
683
  width: $icon-size-scale-lg,
684
684
  height: $icon-size-scale-lg
685
685
  ),
686
- "cheveron-down": (
686
+ "chevron-down": (
687
687
  width: $icon-size-scale-lg,
688
688
  height: $icon-size-scale-lg
689
689
  ),
package/assets/scss/config/_variables.scss CHANGED
@@ -233,7 +233,10 @@ $stepper-font-size: $font-size-xs;
233
233
  $stepper-font-color: var(--#{$prefix}white);
234
234
  $stepper-breakpoint: "lg";
235
235
 
236
- $alert-border-radius: 8px;
236
+ $alert-border-radius: 0.5rem;
237
+ $alert-padding-x: 0;
238
+ $alert-padding-y: 0;
239
+
237
240
  $banner-theme-colors: (
238
241
  "success": var(--#{$prefix}green-02),
239
242
  "warning": var(--#{$prefix}yellow-02),
@@ -376,7 +379,7 @@ $pagination-padding-y: 8px;
376
379
  $pagination-border-radius: 4px;
377
380
  $pagination-color: var(--#{$prefix}blue-04);
378
381
  $pagination-hover-color: var(--#{$prefix}blue-05);
379
- $pagination-hover-bg: var(--#{$prefix}white);
382
+ $pagination-hover-bg: var(--#{$prefix}grey-01);
380
383
  $pagination-active-bg: var(--#{$prefix}purple-04);
381
384
  $pagination-active-color: var(--#{$prefix}white);
382
385
  $pagination-focus-color: var(--#{$prefix}blue-04);
package/assets/scss/core/iconography/_icon.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  @include hover-animate($position: "right");
27
27
  }
28
28
  }
29
- &.m-0, &.mtvh-icon--circle {
29
+ &.m-0, &.btn-icon-circle {
30
30
  &:after,
31
31
  &:before {
32
32
  margin-right: 0;
package/assets/scss/forms/_input-group.scss CHANGED
@@ -1,3 +1,27 @@
1
1
  .input-group-text {
2
2
  border-radius: 0.25rem 0 0 0.25rem;
3
3
  }
4
+ .input-group-search {
5
+ $height: 46px;
6
+ display: flex;
7
+ align-items: center;
8
+
9
+
10
+ input.form-control {
11
+ padding-left: $mtvh-spacing-5;
12
+ border-right: 0;
13
+ height: $height;
14
+ }
15
+ .input-group-append {
16
+ border: var(--mtvh-border-width) solid var(--mtvh-grey-06);
17
+ border-top-right-radius: 0.25rem !important;
18
+ border-bottom-right-radius: 0.25rem !important;
19
+ border-radius: 0.25rem;
20
+ height: $height;
21
+ .mtvh-icon {
22
+ &:before {
23
+ background-color: var(--mtvh-black);
24
+ }
25
+ }
26
+ }
27
+ }
package/assets/scss/mixins/_butttons.scss CHANGED
@@ -47,10 +47,15 @@
47
47
  }
48
48
  }
49
49
 
50
- @mixin button-circle($padding: $mtvh-spacing-4, $hover-bg: rgba(0, 0, 0, 0.08), $active-bg: rgba(0, 0, 0, 0.16)) {
51
- border: 0;
50
+ @mixin button-circle($size: 44px, $padding-x: 0,$padding-y: 0, $hover-bg: rgba(0, 0, 0, 0.08), $active-bg: rgba(0, 0, 0, 0.16)) {
51
+
52
+ width: $size;
53
+ height: $size;
54
+ min-width: $size;
55
+ min-height: $size;
56
+ border: none;
52
57
  border-radius: 50%;
53
- padding: $padding;
58
+ padding: $padding-y $padding-x;
54
59
 
55
60
  &:focus-visible {
56
61
  box-shadow: none;
package/assets/scss/mixins/_icon.scss CHANGED
@@ -136,6 +136,7 @@
136
136
  display: flex;
137
137
  align-items: center;
138
138
  justify-content: center;
139
+ padding: (($size - $icon-size-scale-xs) / 2);
139
140
  color: $color;
140
141
 
141
142
  &.mtvh-icon {