@mtvh/mtvh-design-system 0.0.30 → 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 +1 -1
  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":
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 {