@mtvh/mtvh-design-system 0.0.24 → 0.0.26

package/assets/scss/components/_content-block.scss

@@ -1,14 +1,19 @@
 .mtvh-content-block {
-
+  border-radius: 0.5rem;
+  position: relative;
   padding: $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-5 $mtvh-spacing-5;
   @include media-breakpoint-up(md) {
-    padding: $mtvh-spacing-6 $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-6;
+    padding: $mtvh-spacing-6;
+  }
+
+  &:last-of-type {
+    .mtvh-link {
+      padding-bottom: 0;
+    }
   }
-  border-radius: .5rem;
-  position: relative;
 
   &__date {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
 
   &--text-only {
@@ -28,7 +33,6 @@
   }
 
   &-link-card {
-
     text-decoration: none;
     box-shadow: var(--#{$prefix}box-shadow);
     padding: $mtvh-spacing-5 $mtvh-spacing-5 $mtvh-spacing-6 $mtvh-spacing-5;
@@ -47,19 +51,21 @@
     }
 
     &:focus-within {
-      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);
       background-color: var(--#{$prefix}white);
     }
-    &:active, &:focus  {
+    &:active,
+    &:focus {
       background-color: var(--#{$prefix}white);
       outline: unset;
     }
-    &:hover  {
+    &:hover {
       outline: solid $btn-border-width var(--#{$prefix}purple-03);
       outline-offset: 0;
     }
-    &:active{
+    &:active {
       background-color: var(--#{$prefix}purple-01);
     }
 
@@ -78,7 +84,8 @@
         z-index: 100;
       }
 
-      &:active, &:focus {
+      &:active,
+      &:focus {
         outline: unset;
       }
     }
@@ -86,24 +93,26 @@
       font-size: $mtvh-base-font-size;
     }
   }
-  .mtvh-btn, p {
+  .mtvh-btn,
+  p {
     &:last-child {
       margin-bottom: 0;
     }
   }
 
-  h3, .mtvh-h3 {
-    + .mtvh-btn  {
+  h3,
+  .mtvh-h3 {
+    + .mtvh-btn {
       margin-top: 0.625rem;
     }
   }
-  h4, .mtvh-h4 {
-    + .mtvh-btn  {
+  h4,
+  .mtvh-h4 {
+    + .mtvh-btn {
       margin-top: 0.625rem;
     }
   }
 
-
   &-no-padding {
     padding: 0;
   }
@@ -119,10 +128,8 @@
     background-color: var(--#{$prefix}content-block-bg);
   }
 
-
   &-icon {
-
-    &:not(.mtvh-content-block-link-card ) {
+    &:not(.mtvh-content-block-link-card) {
       padding: $mtvh-spacing-5;
       @include media-breakpoint-up(md) {
         padding: $mtvh-spacing-5 $mtvh-spacing-6;
@@ -130,15 +137,16 @@
     }
 
     .mtvh-icon {
-        margin-bottom: $mtvh-spacing-3;
-        height: $icon-size-scale-xl;
-        display: block;
+      margin-bottom: $mtvh-spacing-3;
+      height: $icon-size-scale-xl;
+      display: block;
     }
 
-    h3:has(+ p + p ),  h3:has(+ p + p + p), h3:has(+ div){
+    h3:has(+ p + p),
+    h3:has(+ p + p + p),
+    h3:has(+ div) {
       margin-bottom: $mtvh-spacing-5;
     }
-
   }
 
   &-container {
@@ -146,7 +154,6 @@
   }
 
   &-body {
-
     @include media-breakpoint-up(md) {
       max-width: 380px;
     }
@@ -160,12 +167,11 @@
   &-header {
     padding-bottom: $mtvh-spacing-5;
 
-    h2  {
+    h2 {
       margin-bottom: $mtvh-spacing-3;
     }
   }
   &-payment {
-
     padding-top: $mtvh-spacing-5;
     padding-bottom: $mtvh-spacing-5;
     border-top: 1px solid var(--#{$prefix}grey-02);
@@ -188,7 +194,6 @@
       margin-bottom: 8px;
     }
 
-
     @include media-breakpoint-up(md) {
       border: 0;
       position: absolute;
@@ -198,7 +203,6 @@
     }
   }
   &-footer {
-
     padding-top: $mtvh-spacing-5;
 
     @include media-breakpoint-up(md) {
@@ -214,7 +218,7 @@
   }
 }
 
-@each $state, $variable in $content-block-theme-border{
+@each $state, $variable in $content-block-theme-border {
   .mtvh-content-block-border--#{$state} {
     --#{$prefix}content-block-border: #{$variable};
   }
@@ -225,5 +229,3 @@
     --#{$prefix}content-block-bg: #{$variable};
   }
 }
-
-

package/assets/scss/components/_form.scss

@@ -7,115 +7,130 @@
 @import "../forms/input-group";
 @import "../forms/validation";
 
-
 .formio-form {
   @import "../forms/formio";
   @import "../forms/mtvho_contact_phone";
   @import "../forms/mtvho_contact_email";
 }
 
-.mtvh-form, .mtvh-formio, formio {
+.mtvh-form,
+.mtvh-formio,
+formio {
 
-    &:has(.mtvh-form-container), &:has(.formio-form)  {
+  --#{$prefix}form-group-padding-y: #{$mtvh-spacing-6};
+  @include media-breakpoint-up("lg") {
+    --#{$prefix}form-group-padding-y: #{$mtvh-spacing-7};
+  }
 
-      --#{$prefix}form-padding-y: #{$mtvh-spacing-7};
-      --#{$prefix}form-padding-x: #{$mtvh-spacing-4};
-      --#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
+  &:has(.mtvh-form-container),
+  &:has(.formio-form) {
+    --#{$prefix}form-padding-y: #{$mtvh-spacing-7};
+    --#{$prefix}form-padding-x: #{$mtvh-spacing-4};
+    --#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
 
-      @include media-breakpoint-up("lg") {
-        --#{$prefix}form-padding-y: #{$mtvh-spacing-8};
-        --#{$prefix}form-padding-x: #{$mtvh-spacing-11};
-      }
+    @include media-breakpoint-up("lg") {
+      --#{$prefix}form-padding-y: #{$mtvh-spacing-8};
+      --#{$prefix}form-padding-x: #{$mtvh-spacing-11};
+    }
 
-      background-color: var(--#{$prefix}white);
-      margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
-      padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
-      overflow: hidden;
+    background-color: var(--#{$prefix}white);
+    margin: 0 calc(var(--#{$prefix}form-padding-x) * -1);
+    padding: var(--#{$prefix}form-padding-y) var(--#{$prefix}form-padding-x);
+    overflow: hidden;
 
-      @include media-breakpoint-up("md") {
-        margin: 0;
-      }
+    @include media-breakpoint-up("md") {
+      margin: 0;
     }
+  }
 
-    .form-group, .formio-form-group.mb-2 {
-      margin-bottom: var(--#{$prefix}form-group-padding-y) !important;
-
-      .formio-choices.choices {
-        --#{$prefix}form-group-padding-y: 0;
-      }
+  .form-group,
+  .formio-form-group.mb-2 {
+    margin-bottom: var(--#{$prefix}form-group-padding-y) !important;
 
-      &:empty {
-        display: none;
-        --#{$prefix}form-group-padding-y: 0;
-      }
+    .formio-choices.choices {
+      --#{$prefix}form-group-padding-y: 0;
     }
 
-    label.field-required, legend.field-required, .tab-error, .mtvh-form-container-required .field-required {
-      &:after {
-        content: " *";
-        color: $form-feedback-invalid-color;
-      }
+    &:empty {
+      display: none;
+      --#{$prefix}form-group-padding-y: 0;
     }
+  }
 
-    .form-text  {
-      margin-top: $mtvh-spacing-3;
-      font-size: $font-size-sm;
-      margin-bottom: $mtvh-spacing-4;
+  label.field-required,
+  legend.field-required,
+  .tab-error,
+  .mtvh-form-container-required .field-required {
+    &:after {
+      content: " *";
+      color: $form-feedback-invalid-color;
+    }
+  }
 
-      &.text-right, &.pull-right {
-        float: none;
-        margin-bottom: 0;
-        text-align: left !important;
-      }
+  .form-text {
+    font-size: $font-size-sm;
+    margin-bottom: $mtvh-spacing-4;
+
+    &.text-right,
+    &.pull-right,
+    &.text-end,
+    &.float-end {
+      float: none !important;
+      margin-bottom: 0;
+      text-align: left !important;
     }
+  }
+}
 
+.mtvh-form-container,
+.formio-form {
+  --#{$prefix}form-max-width: unset;
+  --#{$prefix}form-control-input-width: #{$input-width-size-lg};
+
+  @include media-breakpoint-up("md") {
+    --#{$prefix}form-max-width: 576px;
+  }
+  @include media-breakpoint-up("lg") {
+    --#{$prefix}form-group-padding-y: #{$form-group-lg-margin-bottom};
+    --#{$prefix}form-max-width: 550px;
+  }
+  max-width: var(--#{$prefix}form-max-width);
+  @include media-breakpoint-up("md") {
+    padding-left: 60px;
+    padding-right: 60px;
   }
 
+  @include media-breakpoint-up("lg") {
+    margin: 0 auto;
+    padding: 0;
+  }
 
-  .mtvh-form-container, .formio-form {
+  &--unset {
+    max-width: unset;
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
 
+  }
+  &--md {
+    --#{$prefix}form-control-input-width: #{$input-width-size-l};
+    --#{$prefix}form-group-padding-y: #{$mtvh-spacing-6};
     --#{$prefix}form-max-width: unset;
-    --#{$prefix}form-control-input-width: #{$input-width-size-lg};
 
     @include media-breakpoint-up("md") {
       --#{$prefix}form-max-width: 576px;
     }
     @include media-breakpoint-up("lg") {
-      --#{$prefix}form-group-padding-y: #{$form-group-lg-margin-bottom};
-      --#{$prefix}form-max-width: 550px;
-    }
-
-    &--md {
-
-      --#{$prefix}form-control-input-width: #{$input-width-size-l};
-      --#{$prefix}form-group-padding-y: #{$mtvh-spacing-6};
-      --#{$prefix}form-max-width: unset;
-
-      @include media-breakpoint-up("md") {
-        --#{$prefix}form-max-width: 576px;
-      }
-      @include media-breakpoint-up("lg") {
-        --#{$prefix}form-group-padding-y: #{$mtvh-spacing-7};
-        --#{$prefix}form-max-width: 636px;
-      }
-    }
-
-    max-width: var(--#{$prefix}form-max-width);
-    @include media-breakpoint-up("md") {
-      padding-left: 60px;
-      padding-right: 60px;
-    }
-
-    @include media-breakpoint-up("lg") {
-      margin:0 auto;
-      padding: 0;
+      --#{$prefix}form-group-padding-y: #{$mtvh-spacing-7};
+      --#{$prefix}form-max-width: 636px;
     }
+  }
 
-    .mtvh-form-container-required {
-      font-size: $font-size-xs;
-      padding: $mtvh-spacing-4 0 $mtvh-spacing-6 0;
-      @include media-breakpoint-down('lg') {
-        padding-bottom: $mtvh-spacing-7;
-      }
+  .mtvh-form-container-required {
+    font-size: $font-size-xs;
+    padding: 0 0 $mtvh-spacing-6 0;
+    @include media-breakpoint-down("lg") {
+      padding-bottom: $mtvh-spacing-7;
     }
+  }
 }

package/assets/scss/components/_link.scss

@@ -4,19 +4,18 @@ $mtvh-links: (
     text-color-hover: var(--#{$prefix}blue-05),
     text-color-active: var(--#{$prefix}blue-06),
     text-color-focus: var(--#{$prefix}blue-05),
-    text-disabled-color: var(--#{$prefix}grey-06)
+    text-disabled-color: var(--#{$prefix}grey-06),
   ),
   light: (
     text-color: var(--#{$prefix}white),
     text-color-hover: var(--#{$prefix}grey-04),
     text-color-active: var(--#{$prefix}grey-05),
     text-color-focus: var(--#{$prefix}grey-04),
-    text-disabled-color: var(--#{$prefix}grey-06)
+    text-disabled-color: var(--#{$prefix}grey-06),
   ),
 );
 
 .mtvh-link {
-
   line-height: var(--mtvh-btn-line-height);
   padding-top: $mtvh-spacing-3;
   padding-bottom: $mtvh-spacing-3;
@@ -24,6 +23,8 @@ $mtvh-links: (
   cursor: pointer;
   display: inline-block;
   min-height: 2.75rem;
+  border: 0;
+  background: transparent;
 
   &:hover {
     color: var(--#{$prefix}blue-05);
@@ -40,7 +41,8 @@ $mtvh-links: (
 
   &:focus {
     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);
     text-decoration: none;
     border-radius: var(--#{$prefix}btn-border-radius);
     color: var(--#{$prefix}blue-05);
@@ -50,7 +52,8 @@ $mtvh-links: (
     color: var(--#{$prefix}blue-06);
   }
 
-  &.disabled, &[aria-disabled="true"] {
+  &.disabled,
+  &[aria-disabled="true"] {
     color: var(--#{$prefix}grey-06);
     pointer-events: none;
     cursor: not-allowed;
@@ -65,8 +68,7 @@ $mtvh-links: (
       }
 
       @if map-get($property-map, text-color-focus) {
-
-        &:focus  {
+        &:focus {
           color: map-get($property-map, text-color-focus);
         }
 
@@ -80,7 +82,6 @@ $mtvh-links: (
       &:disabled,
       &.disabled {
         color: map-get($property-map, text-disabled-color);
-
       }
     }
   }
@@ -90,5 +91,4 @@ $mtvh-links: (
   &:after {
     margin-left: $link-icon-spacing !important;
   }
-
 }

package/assets/scss/components/_list-group.scss

@@ -11,7 +11,7 @@
   }
 
   &-border-top {
-    border :0;
+    border: 0;
     border-top: 1px solid;
   }
 

package/assets/scss/components/_notification.scss

@@ -1,5 +1,4 @@
 .mtvh-notification {
-
   position: relative;
   .mtvh-icon {
     position: relative;

package/assets/scss/components/_pagination.scss

@@ -1,20 +1,18 @@
 .pagination {
   .page-link {
-
     &:has(.mtvh-icon) {
       --#{$prefix}pagination-padding-x: 8px;
-      .mtvh-icon:before, .mtvh-icon:after {
+      .mtvh-icon:before,
+      .mtvh-icon:after {
         margin-right: 0;
         margin-left: 0;
       }
     }
     @include field-focus();
-
   }
 
   .page-item {
     margin-right: 4px;
     margin-bottom: 0;
   }
-
 }

package/assets/scss/components/_status.scss

@@ -5,16 +5,15 @@
   background-color: var(--#{$prefix}badge-background);
   border-color: var(--#{$prefix}badge-border-color);
   color: var(--#{$prefix}badge-color);
-  outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}badge-border-color);
+  outline: solid var(--#{$prefix}btn-outline-border)
+    var(--#{$prefix}badge-border-color);
   outline-offset: calc(var(--#{$prefix}btn-outline-border) * -1);
   text-transform: uppercase;
   line-height: 1.25;
 
-
   @include media-breakpoint-up(md) {
     --#{$prefix}badge-padding-x: #{$mtvh-spacing-3};
     --#{$prefix}badge-padding-y: #{$mtvh-spacing-2};
-
   }
 }
 
@@ -24,8 +23,8 @@
   $color: map-get($variable, "color");
 
   .badge--#{$state} {
-      --#{$prefix}badge-color: #{$color};
-      --#{$prefix}badge-border-color: #{$border-color};
-      --#{$prefix}badge-background: #{$bg-colour};
+    --#{$prefix}badge-color: #{$color};
+    --#{$prefix}badge-border-color: #{$border-color};
+    --#{$prefix}badge-background: #{$bg-colour};
   }
 }

package/assets/scss/components/_stepper.scss

@@ -1,4 +1,3 @@
-
 @mixin stepper-small-container {
   &.mtvh-stepper-small {
     @content;
@@ -7,12 +6,11 @@
     @content;
   }
 }
-@mixin stepper-small-count  {
+@mixin stepper-small-count {
   counter-increment: count-1;
   content: counter(count);
 }
 @mixin stepper-small-position {
-
   opacity: 0;
   position: absolute;
   top: 80px;
@@ -20,13 +18,10 @@
   margin-left: auto;
   text-align: center;
   color: var(--#{$prefix}stepper-sm-font-color);
-  width:100%;
-
+  width: 100%;
 }
 
-
 .mtvh-stepper {
-
   --#{$prefix}stepper-font-color: #{$stepper-font-color};
   --#{$prefix}stepper-sm-font-color: #{$stepper-sm-font-color};
   --#{$prefix}stepper-font-size: #{$stepper-font-size};
@@ -57,7 +52,6 @@
   }
 
   .mtvh-stepper-item {
-
     align-items: center;
     display: flex;
     justify-content: center;
@@ -74,14 +68,17 @@
       margin-right: 4px;
     }
 
-    &:has( a + span), &:has( span + a ), &.completed {
+    &:has(a + span),
+    &:has(span + a),
+    &.completed {
       background-color: var(--#{$prefix}stepper-bg-color);
       color: inherit;
       font-weight: bold;
     }
 
     &:focus-within {
-      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);
     }
 
@@ -89,7 +86,7 @@
       border-radius: 50px 0 0 50px;
     }
     &:last-child {
-      border-radius: 0 50px  50px 0;
+      border-radius: 0 50px 50px 0;
     }
 
     &.active {
@@ -101,7 +98,7 @@
     }
 
     &:before {
-      content: counter(count)  ".";
+      content: counter(count) ".";
       @include media-breakpoint-down($stepper-breakpoint) {
         @include stepper-small-count;
       }
@@ -113,13 +110,12 @@
       font-size: var(--#{$prefix}stepper-font-size);
 
       &:focus {
-        border:0;
+        border: 0;
         outline: 0;
       }
     }
 
     &:has(a) {
-
       &:hover {
         background-color: var(--#{$prefix}blue-04);
         cursor: pointer;
@@ -127,7 +123,6 @@
     }
 
     &:has(a:not(.link-inactive)) {
-
       &:before {
         font-weight: $mtvh-font-weight-bold;
       }
@@ -147,21 +142,22 @@
       }
     }
 
-    a, span {
+    a,
+    span {
       @include media-breakpoint-up($stepper-breakpoint) {
         padding-left: 3px;
       }
       @include media-breakpoint-down($stepper-breakpoint) {
-        @include stepper-small-position
+        @include stepper-small-position;
       }
     }
 
     &.active {
-      span, a {
+      span,
+      a {
         opacity: 1;
         @include active-link-style;
       }
-
     }
   }
 }
@@ -169,8 +165,9 @@
 .mtvh-stepper-small {
   .mtvh-stepper-item {
     --#{$prefix}stepper-font-color: #{$stepper-sm-font-color};
-    a, span {
-        @include stepper-small-position
+    a,
+    span {
+      @include stepper-small-position;
     }
     &:before {
       @include stepper-small-count;

package/assets/scss/config/_all.scss

@@ -1,5 +1,5 @@
 @import "variables";
 @import "font";
-@import 'palette';
-@import 'theme';
+@import "palette";
+@import "theme";
 @import "icon-list";

package/assets/scss/config/_font.scss

@@ -1,8 +1,8 @@
 @font-face {
-  font-family: 'Paralucent';
+  font-family: "Paralucent";
   src:
-    url('#{$font-path}paralucent-demibold-webfont.woff2') format('woff2'),
-    url('#{$font-path}paralucent-demibold-webfont.woff') format('woff');
-  font-weight:600;
-  font-style:normal;
+    url("#{$font-path}paralucent-demibold-webfont.woff2") format("woff2"),
+    url("#{$font-path}paralucent-demibold-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
 }