@mtvh/mtvh-design-system 0.0.24 → 0.0.26

package/assets/scss/base/_all.scss

@@ -1,3 +1,3 @@
-@import 'global';
-@import 'functions';
-@import 'print';
+@import "global";
+@import "functions";
+@import "print";

package/assets/scss/base/_functions.scss

@@ -3,36 +3,37 @@
     $value: $value * 1px;
   }
 
-  @return calc( $value / $mtvh-base-font-size * 1rem);
+  @return calc($value / $mtvh-base-font-size * 1rem);
 }
 
-
-@function str-replace( $string, $search, $replace: '' ) {
-
-  $index: str-index( $string, $search );
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
   @if $index {
-    @return str-slice( $string, 1, $index - 1 ) + $replace + str-replace( str-slice( $string, $index + str-length( $search ) ), $search, $replace);
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
   }
 
   @return $string;
 }
 
 @function encode-color($string) {
-  @if type-of($string) == 'color' {
+  @if type-of($string) == "color" {
     $hex: str-slice(ie-hex-str($string), 4);
     $string: unquote("#{$hex}");
   }
 
-  $string: '%23' + $string;
+  $string: "%23" + $string;
   @return $string;
 }
 
-@function get-icon( $icon, $color: #fff ) {
+@function get-icon($icon, $color: #fff) {
+  $icon: map-get($icons, $icon);
+  $placeholder: "%%COLOR%%";
+  $data-uri: str-replace(url($data-svg-prefix + $icon), $placeholder, $color);
 
-  $icon:        map-get( $icons, $icon );
-  $placeholder: '%%COLOR%%';
-  $data-uri: str-replace( url( $data-svg-prefix + $icon ), $placeholder, $color );
-
-  @return str-replace( $data-uri, '#', '%23' );
+  @return str-replace($data-uri, "#", "%23");
 }
-

package/assets/scss/base/_global.scss

@@ -19,5 +19,5 @@ body {
 }
 
 .mtvh-layout {
-  background-color:  var(--#{$prefix}grey-01);
+  background-color: var(--#{$prefix}grey-01);
 }

package/assets/scss/base/_print.scss

@@ -15,16 +15,16 @@
   }
 
   a[href]::after {
-    content: ' (' attr(href) ')';
+    content: " (" attr(href) ")";
   }
 
   abbr[title]::after {
-    content: ' (' attr(title) ')';
+    content: " (" attr(title) ")";
   }
 
-  a[href^='#']::after,
-  a[href^='javascript:']::after {
-    content: '';
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
   }
 
   pre {

package/assets/scss/common/_custom.scss

@@ -7,20 +7,19 @@
     }
   }
 }
-.section-nav li a, .page-links a
-{
+.section-nav li a,
+.page-links a {
   font-weight: unset;
 }
-.section-nav li.active a, #toc a.active
-{
+.section-nav li.active a,
+#toc a.active {
   font-weight: bold;
 }
 #toc a.active {
-  color: #00385E !important;
+  color: #00385e !important;
 }
 
-.table-icons
-{
+.table-icons {
   td {
     vertical-align: middle;
     .center {
@@ -33,9 +32,7 @@
   }
 }
 
-
 .mtvh-content-block {
-
   h6,
   .h6,
   h5,
@@ -54,7 +51,7 @@
 
 .mx-auto {
   margin-right: auto !important;
-  margin-left: auto !important
+  margin-left: auto !important;
 }
 .stretched-link {
   &:after {

package/assets/scss/components/_alert.scss

@@ -16,5 +16,4 @@
     }
     margin: 0;
   }
-
 }

package/assets/scss/components/_all.scss

@@ -1,14 +1,16 @@
-@import '_button';
-@import "_close";
-@import '_content-block';
-@import '_form';
-@import '_link';
-@import '_breadcrumb';
-@import '_list-group';
-@import '_stepper';
-@import '_banner';
-@import '_status';
-@import '_notification';
+@import "_button";
+@import "_button-circle";
+@import "_content-block";
+@import "_form";
+@import "_link";
+@import "_breadcrumb";
+@import "_list-group";
+@import "_stepper";
+@import "_banner";
+@import "_status";
+@import "_notification";
 @import "_alert";
 @import "_rounded-card";
 @import "_pagination";
+@import "_payment";
+@import "_card-list";

package/assets/scss/components/_banner.scss

@@ -1,5 +1,4 @@
 .mtvh-banner {
-
   background-color: var(--#{$prefix}banner-bg);
   color: var(--#{$prefix}banner-text-color);
   display: none;
@@ -10,6 +9,7 @@
 
   a {
     color: inherit;
+    font-weight: $mtvh-font-weight-bold;
     &:focus-visible {
       outline-color: inherit;
     }
@@ -25,21 +25,17 @@
   .mtvh-icon {
     @include mtvh-banner-icon();
   }
-
 }
 
-
 .mtvh-banner-row {
-
-  --#{$prefix}banner-padding-y :#{$mtvh-spacing-3};
-  --#{$prefix}banner-padding-x : 0;
+  --#{$prefix}banner-padding-y: #{$mtvh-spacing-3};
+  --#{$prefix}banner-padding-x: 0;
 
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding:  var(--#{$prefix}banner-padding-y) var(--#{$prefix}banner-padding-x);
-
+  padding: var(--#{$prefix}banner-padding-y) var(--#{$prefix}banner-padding-x);
 
   .btn-close {
     flex-shrink: 0;
@@ -84,24 +80,23 @@
     @include media-breakpoint-up(lg) {
       flex-wrap: unset;
       span {
-        margin-bottom: 0
+        margin-bottom: 0;
       }
     }
   }
 }
 
-
 @each $state, $variable in $banner-theme-colors {
   .mtvh-banner--#{$state} {
     --#{$prefix}banner-text-color: var(--#{$prefix}black);
     --#{$prefix}border-color: var(--#{$prefix}black);
     --#{$prefix}banner-bg: #{$variable};
 
-    @if($state == "emergency" or $state == "dark") {
+    @if ($state == "emergency" or $state == "dark") {
       --#{$prefix}banner-text-color: var(--#{$prefix}white);
       --#{$prefix}border-color: var(--#{$prefix}transparent);
     }
-    @if($state == "dark") {
+    @if ($state == "dark") {
       .mtvh-banner-row {
         --#{$prefix}banner-padding-y: #{$mtvh-spacing-5};
       }
@@ -109,4 +104,3 @@
   }
 }
 // scss-docs-end banner-modifiers
-

package/assets/scss/components/_breadcrumb.scss

@@ -1,26 +1,29 @@
 .breadcrumb {
-
   -webkit-overflow-scrolling: touch;
   flex-wrap: unset;
   overflow-x: auto;
   white-space: nowrap;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
+  margin-top: $mtvh-spacing-4;
 
   &::-webkit-scrollbar {
     display: none;
   }
 
-  @include media-breakpoint-down('lg') {
-
+  @include media-breakpoint-down("lg") {
     &:after {
       position: absolute;
       right: 0;
       height: 32px;
       width: 20%;
-      content: ' ';
+      content: " ";
 
-      background: linear-gradient(to left, var(--#{$prefix}grey-01), rgba(255,255,255,0));
+      background: linear-gradient(
+        to left,
+        var(--#{$prefix}grey-01),
+        rgba(255, 255, 255, 0)
+      );
     }
   }
 
@@ -38,14 +41,13 @@
   }
 }
 
-
 .breadcrumb-item {
-  border:1px solid transparent;
+  border: 1px solid transparent;
   margin-bottom: 0;
 
   + .breadcrumb-item {
     &::before {
-      float:unset;
+      float: unset;
     }
   }
 }

package/assets/scss/components/_button-circle.scss

@@ -0,0 +1,38 @@
+.btn-icon-circle {
+  --#{$prefix}btn-close-focus-outline-color: var(
+    --#{$prefix}primary-outline-color
+  );
+  min-width: unset;
+  min-height: unset;
+  @include button-circle();
+  &:before {
+    margin: 0;
+  }
+}
+
+.btn-close-circle {
+  @include button-circle();
+}
+
+.alert-dismissible {
+  .btn-close-circle {
+    top: $mtvh-spacing-5;
+    padding: $mtvh-spacing-4;
+  }
+}
+
+@each $state in map-keys($banner-theme-colors) {
+  .mtvh-banner--#{$state} {
+    --#{$prefix}btn-close-focus-outline-color: var(
+      --#{$prefix}dark-outline-color
+    );
+  }
+}
+
+@each $state in map-keys($content-block-theme-colors) {
+  .mtvh-content-block-bg--#{$state} {
+    --#{$prefix}btn-close-focus-outline-color: var(
+      --#{$prefix}primary-outline-color
+    );
+  }
+}

package/assets/scss/components/_button.scss

@@ -13,7 +13,7 @@ $mtvh-buttons: (
     border-hover: transparent,
     border-active: var(--mtvh-blue-06),
     border-color-disabled: var(--mtvh-grey-06),
-    outline-color: var(--mtvh-blue-03)
+    outline-color: var(--mtvh-blue-03),
   ),
   light: (
     text-color: var(--mtvh-blue-04),
@@ -24,15 +24,13 @@ $mtvh-buttons: (
     background: var(--mtvh-white),
     background-hover: var(--mtvh-grey-01),
     background-active: var(--mtvh-grey-02),
-    background-focus:   var(--mtvh-grey-01),
+    background-focus: var(--mtvh-grey-01),
     background-disabled: var(--mtvh-grey-05),
     border: transparent,
     border-active: transparent,
-    border-color-disabled: var(--mtvh-grey-05)
-
+    border-color-disabled: var(--mtvh-grey-05),
   ),
   outline-primary: (
-
     text-color: var(--mtvh-blue-04),
     text-color-hover: var(--mtvh-blue-05),
     text-color-active: var(--mtvh-blue-06),
@@ -40,14 +38,14 @@ $mtvh-buttons: (
     text-color-disabled: var(--mtvh-grey-06),
     background: transparent,
     background-hover: transparent,
-    background-focus:  transparent,
+    background-focus: transparent,
     background-disabled: transparent,
     background-active: transparent,
-    border:  var(--mtvh-blue-04),
-    border-hover:  var(--mtvh-blue-05),
-    border-focus:  var(--mtvh-blue-05),
-    border-active:  var(--mtvh-blue-06),
-    border-color-disabled: var(--mtvh-grey-06)
+    border: var(--mtvh-blue-04),
+    border-hover: var(--mtvh-blue-05),
+    border-focus: var(--mtvh-blue-05),
+    border-active: var(--mtvh-blue-06),
+    border-color-disabled: var(--mtvh-grey-06),
   ),
   outline-light: (
     text-color: var(--mtvh-white),
@@ -57,25 +55,25 @@ $mtvh-buttons: (
     text-color-disabled: var(--mtvh-grey-05),
     background: transparent,
     background-hover: transparent,
-    background-focus:  transparent,
+    background-focus: transparent,
     background-disabled: transparent,
     border: var(--mtvh-white),
     border-hover: var(--mtvh-grey-04),
     border-focus: var(--mtvh-grey-04),
     border-active: var(--mtvh-grey-05),
-    border-color-disabled: var(--mtvh-grey-05)
+    border-color-disabled: var(--mtvh-grey-05),
   ),
   purple: (
     text-color: var(--mtvh-white),
     text-color-hover: var(--mtvh-white),
     text-color-focus: var(--mtvh-white),
-    background:  var(--mtvh-purple-04),
+    background: var(--mtvh-purple-04),
     background-hover: var(--mtvh-purple-05),
     background-focus: var(--mtvh-purple-05),
     background-active: var(--mtvh-purple-06),
     border: transparent,
     border-hover: transparent,
-    border-radius: 6px
+    border-radius: 6px,
   ),
   danger: (
     text-color: var(--mtvh-white),
@@ -89,7 +87,7 @@ $mtvh-buttons: (
     border: transparent,
     border-hover: transparent,
     border-active: transparent,
-    border-color-disabled: transparent
+    border-color-disabled: transparent,
   ),
   outline-danger: (
     text-color: var(--mtvh-red-04),
@@ -99,26 +97,26 @@ $mtvh-buttons: (
     text-color-disabled: var(--mtvh-grey-06),
     background: var(--mtvh-white),
     background-hover: var(--mtvh-white),
-    background-focus:  var(--mtvh-white),
+    background-focus: var(--mtvh-white),
     background-disabled: var(--mtvh-white),
     border: var(--mtvh-red-04),
     border-hover: var(--mtvh-red-05),
-    background-active:  var(--mtvh-white),
+    background-active: var(--mtvh-white),
     border-focus: var(--mtvh-red-05),
     border-active: var(--mtvh-red-06),
-    border-color-disabled: var(--mtvh-grey-06)
+    border-color-disabled: var(--mtvh-grey-06),
   ),
-
 );
 
-.btn, .mtvh-btn {
-
+.btn,
+.mtvh-btn {
   font-weight: $btn-font-weight;
   box-shadow: none;
 
   &:focus-visible {
     box-shadow: none;
-    outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
+    outline: solid var(--#{$prefix}btn-outline-border)
+      var(--#{$prefix}btn-outline-color);
     outline-offset: var(--#{$prefix}btn-outline-border);
     text-decoration: none;
   }
@@ -144,17 +142,17 @@ $mtvh-buttons: (
   display: inline-block;
   text-align: center;
   padding: $btn-padding-y $btn-padding-x;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 
-.mtvh-btn, .btn {
-
+.mtvh-btn,
+.btn {
   @each $color, $property-map in $mtvh-buttons {
-
-
     &-#{$color} {
-
       color: map-get($property-map, text-color);
       background-color: map-get($property-map, background);
       border-color: map-get($property-map, border);
@@ -177,7 +175,6 @@ $mtvh-buttons: (
         @if map-get($property-map, border-focus) {
           border-color: map-get($property-map, border-focus);
         }
-
       }
 
       &:active:not(:disabled):not(.disabled) {

package/assets/scss/components/_card-list.scss

@@ -0,0 +1,63 @@
+.card-list {
+
+  &-item {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    border-bottom: 1px solid var(--#{$prefix}grey-03);
+    padding-top: $mtvh-spacing-5;
+    padding-bottom: $mtvh-spacing-5;
+
+    &:has(.label) {
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    &--expired {
+      div {
+        opacity: 0.6;
+      }
+
+      input {
+        visibility: hidden;
+      }
+    }
+
+    label, .label {
+      flex: 1 100px;
+      display: flex;
+
+      div {
+        flex-wrap: nowrap;
+        @include media-breakpoint-up(lg) {
+          flex-wrap: nowrap;
+        }
+      }
+
+      span {
+        display: block;
+        align-self: center;
+
+        @include media-breakpoint-up(sm) {
+          display: inline;
+        }
+      }
+
+      .mtvh-icon {
+        font-weight: bold;
+      }
+    }
+
+    button {
+      align-self: flex-start;
+      @include media-breakpoint-up(sm) {
+        align-self: start;
+      }
+    }
+
+    .invali-feedback {
+      flex-basis: 100%;
+    }
+  }
+}