@mtvh/mtvh-design-system 0.0.4 → 0.0.6

package/assets/scss/base/_mixins.scss

@@ -1,55 +1,3 @@
-@mixin animate-default() {
-  -webkit-transition: transform 0.3s ease-out;
-  -moz-transition: transform 0.3s ease-out;
-  -ms-transition: transform 0.3s ease-out;
-  -o-transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-in;
-}
-
-@mixin hover-animate( $position : 'left', $rotate : '') {
-
-   @if $position == 'right' {
-    &:hover:not(.disabled) {
-      &:after {
-        -webkit-transform: translateX(4px);
-        -moz-transform: translateX(4px);
-        -ms-transform: translateX(4px);
-        -o-transform: translateX(4px);
-        transform: translateX(4px);
-      }
-    }
-  } @else {
-    &:hover:not(.disabled) {
-      &:before{
-        -webkit-transform: translateX(-4px);
-        -moz-transform: translateX(-4px);
-        -ms-transform: translateX(-4px);
-        -o-transform: translateX(-4px);
-        transform: translateX(-4px);
-      }
-    }
-  }
-
-}
-
-@mixin icon-transform($direction) {
-  //default is a right
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  content:' ';
-  opacity: 1;
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  margin-top: -.125rem;
-  @if $direction == 'right' {
-    margin-left: $button-icon-spacing;
-  }
-  @else {
-    margin-right: $button-icon-spacing;
-  }
-}
-
 // arrow direction: left, right, up, down, Default: right
 // arrow position: left, right
 @mixin mtvh-icon($icon : '', $color :'',  $hover-color :'', $active-color :'', $border-color :'', $position : 'left', $direction :  'right', $width : 20px, $height: 20px, $svg-path : null) {
@@ -147,25 +95,3 @@
     background-size: 100%;
   }
 }
-
-
-@mixin form-invalid-text() {
-  color: var(--mtvh-red-04);
-  font-size: $font-size-sm;
-  font-weight: bold;
-  padding-left: $mtvh-spacing-spacing-6;
-  position: relative;
-  display: flex;
-  gap: $mtvh-spacing-spacing-3;
-  &:before {
-    content: '';
-    -webkit-mask: get-icon('error',$danger);
-    mask: get-icon('error',$danger);
-    background-color: currentColor;
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    margin-left: -$mtvh-spacing-spacing-6;
-    padding-right: $icon-size-scale-sm;//$mtvh-spacing-spacing-6;
-    margin-top: $mtvh-spacing-spacing-2;
-  }
-}

package/assets/scss/components/_all.scss

@@ -1,4 +1,9 @@
-@import 'button';
-@import 'content-block';
-@import 'form';
-@import 'link';
+@import '_button';
+@import "_close";
+@import '_content-block';
+@import '_form';
+@import '_link';
+@import '_breadcrumb';
+@import '_list-group';
+@import '_stepper';
+@import '_banner';

package/assets/scss/components/_banner.scss

@@ -0,0 +1,107 @@
+.mtvh-banner {
+
+  background-color: var(--#{$prefix}banner-bg);
+  color: var(--#{$prefix}banner-color);
+  display: none;
+
+  &:has(.mtvh-banner-row) {
+    display: block;
+  }
+
+  a {
+    color: var(--#{$prefix}banner-link-color);
+    &:focus-visible {
+      outline-color: inherit;
+    }
+  }
+
+  .mtvh-btn {
+    align-self: flex-start;
+    @include media-breakpoint-up(lg) {
+      margin-left: $mtvh-spacing-5;
+    }
+  }
+
+  .mtvh-icon {
+    @include mtvh-banner-icon();
+  }
+
+}
+
+
+.mtvh-banner-row {
+
+  --#{$prefix}banner-padding-y :#{$mtvh-spacing-3};
+  --#{$prefix}banner-padding-x : 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding:  var(--#{$prefix}banner-padding-y) var(--#{$prefix}banner-padding-x);
+
+
+  .btn-close {
+    flex-shrink: 0;
+    top: unset;
+    position: relative;
+  }
+
+  button {
+    flex-shrink: 0;
+  }
+
+  + .mtvh-banner-row {
+    border-top: 1px solid var(--#{$prefix}border-color);
+  }
+
+  &.alert {
+    --#{$prefix}alert-margin-bottom: 0;
+  }
+
+  span {
+    align-content: center;
+  }
+
+  &--masquerading {
+    flex-wrap: wrap;
+
+    &:has(.mtvh-btn) {
+      span {
+        @include media-breakpoint-down(lg) {
+          margin-bottom: $mtvh-spacing-5;
+        }
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      flex-wrap: unset;
+      span {
+        margin-bottom: 0
+      }
+    }
+  }
+}
+
+
+@each $state in map-keys($banner-theme-colors) {
+  .mtvh-banner-#{$state} {
+    --#{$prefix}banner-color: var(--#{$prefix}black);
+    --#{$prefix}border-color: var(--#{$prefix}black);
+    --#{$prefix}banner-bg: var(--#{$prefix}banner-#{$state}-bg);
+
+    --#{$prefix}banner-link-color: var(--#{$prefix}black);
+    --#{$prefix}banner-icon: var(--#{$prefix}banner-#{$state}-icon);
+
+    @if($state == "emergency" or $state == "dark") {
+      --#{$prefix}banner-link-color: var(--#{$prefix}white);
+      --#{$prefix}banner-color: var(--#{$prefix}white);
+      --#{$prefix}border-color: var(--#{$prefix}transparent);
+    }
+    @if($state == "dark") {
+      .mtvh-banner-row {
+        --#{$prefix}banner-padding-y: #{$mtvh-spacing-5};
+      }
+    }
+  }
+}
+// scss-docs-end banner-modifiers
+

package/assets/scss/components/_breadcrumb.scss

@@ -0,0 +1,52 @@
+.breadcrumb {
+
+  -webkit-overflow-scrolling: touch;
+  flex-wrap: unset;
+  overflow-x: auto;
+  white-space: nowrap;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include media-breakpoint-down('lg') {
+
+    &:after {
+      position: absolute;
+      right: 0;
+      height: 32px;
+      width: 20%;
+      content: ' ';
+
+      background: linear-gradient(to left, var(--mtvh-grey-01), rgba(255,255,255,0));
+    }
+  }
+
+  .active {
+    font-weight: bold;
+    --mtvh-breadcrumb-item-active-color: var(--mtvh-black);
+  }
+  a {
+    color: var(--mtvh-black);
+    text-decoration: none;
+    font-weight: normal;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+.breadcrumb-item {
+  border:1px solid transparent;
+  margin-bottom: 0;
+
+  + .breadcrumb-item {
+    &::before {
+      float:unset;
+    }
+  }
+}

package/assets/scss/components/_close.scss

@@ -0,0 +1,52 @@
+.btn-close {
+
+  &-circle {
+
+    border-radius: 50%;
+    -moz-border-radius:50%;
+    -webkit-border-radius: 50%;
+    width: $btn-close-circle-width;
+    height: $btn-close-circle-height;
+    padding: $mtvh-spacing-4;
+
+    &:focus-visible {
+      box-shadow: none;
+      outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-close-focus-outline-color);
+      outline-offset: var(--#{$prefix}btn-outline-border);
+      text-decoration: none;
+      -webkit-tap-highlight-color: unset;
+    }
+    &:focus:not(:focus-visible) {
+      outline: 0;
+    }
+    &:hover {
+      background-color: var(--#{$prefix}btn-close-hover-bg-color);
+      cursor: pointer;
+    }
+  }
+
+}
+.alert-dismissible {
+  .btn-close-circle {
+      top: $mtvh-spacing-5;
+      padding: $mtvh-spacing-4;
+  }
+}
+
+@each $state in map-keys($banner-theme-colors) {
+  .mtvh-banner-#{$state} {
+    .btn-close {
+      --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
+      --#{$prefix}btn-close-hover-bg-color:  var(--#{$prefix}btn-close-#{$state}-hover-bg);
+    }
+  }
+}
+
+@each $state in map-keys($content-block-theme-colors) {
+  .mtvh-content-block-bg--#{$state} {
+    .btn-close {
+      --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
+      --#{$prefix}btn-close-hover-bg-color:  var(--#{$prefix}btn-close-#{$state}-hover-bg);
+    }
+  }
+}

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

@@ -27,6 +27,9 @@ $mtvh-content-block-border: (
   grey-03: (
     border-color: var(--mtvh-grey-03)
   ),
+  grey-04: (
+    border-color: var(--mtvh-grey-04)
+  ),
   red-04: (
     border-color: var(--mtvh-red-04)
   ),
@@ -43,15 +46,15 @@ $mtvh-content-block-border: (
 
 .mtvh-content-block {
 
-  padding: $mtvh-spacing-spacing-6 $mtvh-spacing-spacing-5;
+  padding: $mtvh-spacing-6 $mtvh-spacing-5;
   @include media-breakpoint-up(md) {
-    padding: $mtvh-spacing-spacing-6;
+    padding: $mtvh-spacing-6;
   }
   &__date {
     margin-bottom: .5rem;
   }
   &--text-only {
-    padding: $mtvh-spacing-spacing-5 $mtvh-spacing-spacing-5;
+    padding: $mtvh-spacing-5 $mtvh-spacing-5;
     font-size: 1rem;
     @include media-breakpoint-up(md) {
       font-size: 1.125rem;
@@ -67,13 +70,13 @@ $mtvh-content-block-border: (
   &-link-card {
     text-decoration: none;
     box-shadow: var(--mtvh-box-shadow);
-    padding: $mtvh-spacing-spacing-5;
+    padding: $mtvh-spacing-5;
     &:hover {
       background-color: var(--mtvh-grey-02);
     }
 
     @include media-breakpoint-up(md) {
-      padding: $mtvh-spacing-spacing-6;
+      padding: $mtvh-spacing-6;
     }
     @include media-breakpoint-up(lg) {
       min-height: 17rem;
@@ -81,7 +84,7 @@ $mtvh-content-block-border: (
 
     &:focus-within {
       outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
-      outline-offset: $mtvh-spacing-spacing-3;
+      outline-offset: $mtvh-spacing-3;
       background-color: var(--mtvh-grey-04);
     }
 
@@ -157,7 +160,11 @@ $mtvh-content-block-border: (
 
   &-icon {
     .mtvh-icon {
-        margin-bottom: $mtvh-spacing-spacing-3;
+        margin-bottom: $mtvh-spacing-3;
+    }
+
+    h3:has(+ p + p ),  h3:has(+ p + p + p), h3:has(+ div){
+      margin-bottom: $mtvh-spacing-5;
     }
 
   }
@@ -171,24 +178,23 @@ $mtvh-content-block-border: (
       max-width: 380px;
     }
     @include media-breakpoint-up(lg) {
-      max-width: 360px;
+      max-width: 62%;
     }
     @include media-breakpoint-up(xl) {
-      max-width: 430px;
+      max-width: 65%;
     }
-
   }
   &-header {
-    padding-bottom: $mtvh-spacing-spacing-5;
+    padding-bottom: $mtvh-spacing-5;
 
     h2  {
-      margin-bottom: $mtvh-spacing-spacing-3;
+      margin-bottom: $mtvh-spacing-3;
     }
   }
   &-payment {
 
-    padding-top: $mtvh-spacing-spacing-5;
-    padding-bottom: $mtvh-spacing-spacing-5;
+    padding-top: $mtvh-spacing-5;
+    padding-bottom: $mtvh-spacing-5;
     border-top: 1px solid var(--mtvh-grey-02);
     border-bottom: 1px solid var(--mtvh-grey-02);
 
@@ -200,7 +206,7 @@ $mtvh-content-block-border: (
     &-status {
       font-size: $font-size-lg;
       font-weight: $mtvh-font-weight-bold;
-      margin-bottom: $mtvh-spacing-spacing-3;
+      margin-bottom: $mtvh-spacing-3;
       line-height: $line-height-md;//33.8px;
     }
     &-date {
@@ -214,18 +220,23 @@ $mtvh-content-block-border: (
       border: 0;
       position: absolute;
       top: 1.8rem;
-      right: $mtvh-spacing-spacing-6;;
+      right: $mtvh-spacing-6;
       width: 216px;
     }
   }
   &-footer {
 
-    padding-top: $mtvh-spacing-spacing-5;
+    padding-top: $mtvh-spacing-5;
 
     @include media-breakpoint-up(md) {
       padding: 0;
     }
-    max-width: 400px;
-  }
 
+    @include media-breakpoint-up(lg) {
+      max-width: 400px;
+    }
+    @include media-breakpoint-up(xl) {
+      max-width: unset;
+    }
+  }
 }

package/assets/scss/components/_form.scss

@@ -1,92 +1,39 @@
-.form-control, .form-select, .form-check-input {
-  &:focus {
-    box-shadow: none;
-    outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
-    outline-offset: 0;
-    outline-offset: var(--mtvh-btn-outline-border);
-    color: $input-color;
-  }
-  &.is-invalid {
-    &:focus {
-      border-color: $input-border-color;
-      box-shadow: none;
-    }
-    background-color: var(--mtvh-red-01);
-  }
-}
-
-.form-label, .col-form-label, form label {
-  font-size: $font-size-md;
-  font-weight: 700;
-  line-height: 1.4;
-  padding-top: 0;
-  padding-bottom:  $mtvh-spacing-spacing-3;
-  margin-bottom: 0;
-}
-
-.form-control {
-  font-size: $input-font-size;
-  height: auto;
-}
-.invalid-feedback {
-  font-weight: $mtvh-font-weight-bold;
-}
-
-.form-text {
-  font-size: $font-size-sm;
-  margin-bottom: $mtvh-spacing-spacing-4;
-  &.error {
-    @include form-invalid-text();
-  }
-}
+.mtvh-form, .mtvh-formio {
 
-.mtvh-formio{
+  @import "../forms/form-control";
+  @import "../forms/form-check";
+  @import "../forms/labels";
+  @import "../forms/validation";
+  @import "../forms/formio";
+  @import "../forms/form-date-input";
 
-  div.formio-component {
 
-    margin-bottom: 5.5rem;
+  background-color: var(--mtvh-white);
+  margin: 0 calc(var(--mtvh-gutter-x)* -0.5);
+  padding: var(--mtvh-gutter-x);
+  overflow: hidden;
 
-    &.formio-hidden{
-      margin-bottom:0;
-    }
-
-    &.formio-component-button:has(> button[type="submit"]),&.formio-component-form,&.formio-component-fieldset,&.formio-component-columns,&.formio-component-mtvhLogicSet{
-      margin-bottom:0;
-    }
-
-    //Remove padding from last child
-    div.formio-component-form{
-      & .formio-component:last-child {
-        margin-bottom:0!important;
-      }
-    }
-
-
-    &.has-message.has-error {
-      .invalid-feedback {
-          display: block;
-          margin-top: $mtvh-spacing-spacing-4;
+  @include media-breakpoint-up("md") {
+    padding: $mtvh-spacing-5 $mtvh-spacing-11 $mtvh-spacing-5 $mtvh-spacing-11;
+  }
 
-          .form-text {
-            margin-bottom: 0;
-            margin-top:0;
-          }
-      }
+}
+.mtvh-form-container {
 
-      .text-danger {
-        color: $danger !important;
-      }
-    }
+  @include media-breakpoint-up("md") {
 
-    textarea {
-      max-height: 496px;
-      @include media-breakpoint-up(md) {
-        max-height: 608px;
-      }
-    }
+  }
+  @include media-breakpoint-up("lg") {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+  @include media-breakpoint-up("xl") {
+      padding-left: 285px;
+      padding-right: 285px;
+  }
 
-    span[ref|="charcount"], .text-muted {
-      color : var(--mtvh-grey-06) !important;
-    }
+  .form-group {
+    margin-top: $form-group-margin-top;
   }
+
 }

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

@@ -0,0 +1,21 @@
+.list-group-item {
+  margin-bottom: 0;
+  border-radius: 0;
+
+  & + .list-group-item {
+    border-top-width: 1px;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  &-border-top {
+    border :0;
+    border-top: 1px solid;
+  }
+
+  &--border-yellow-02 {
+    border-color: var(--mtvh-yellow-02);
+  }
+}

package/assets/scss/components/_stepper.scss

@@ -0,0 +1,88 @@
+.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};
+  --#{$prefix}stepper-bg-color: #{$stepper-bg-color};
+  --#{$prefix}stepper-active-bg-color: #{$stepper-active-bg-color};
+  --#{$prefix}stepper-disabled-bg-color: #{$stepper-disabled-bg-color};
+  --#{$prefix}stepper-disabled-font-color: #{$stepper-disabled-font-color};
+  --#{$prefix}stepper-item-padding-x: #{$stepper-item-padding-x};
+  --#{$prefix}stepper-item-padding-y: #{$stepper-item-padding-y};
+  --#{$prefix}stepper-breakpoint: #{$stepper-breakpoint};
+
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  position: relative;
+  width: 100%;
+  padding: 0 0 $mtvh-spacing-9 0;
+  margin: 0 0 0 0;
+  justify-content: center;
+  color: var(--#{$prefix}stepper-font-color);
+  text-align: center;
+
+  @include media-breakpoint-up($stepper-breakpoint) {
+     padding-bottom: 0;
+  }
+
+  .mtvh-stepper-item {
+
+    counter-increment: count;
+    flex-basis: 100%;
+    margin-right: 1px;
+    color: var(--#{$prefix}stepper-disabled-font-color);
+    font-size: var(--#{$prefix}stepper-font-size);
+    padding: var(--#{$prefix}stepper-item-padding-x) var(--#{$prefix}stepper-item-padding-y);
+    background-color: var(--#{$prefix}stepper-disabled-bg-color);
+
+    &:has( a + span), &:has( span + a ) {
+      background-color: var(--#{$prefix}stepper-bg-color);
+      color: var(--#{$prefix}stepper-font-color);
+    }
+
+    &:first-child {
+      border-radius: 50px 0 0 50px;
+    }
+    &:last-child {
+      border-radius: 0 50px  50px 0;
+    }
+    &.active {
+      background-color: var(--#{$prefix}stepper-active-bg-color);
+    }
+    &:before {
+      counter-increment: count-1;
+      content: counter(count);
+      @include media-breakpoint-up($stepper-breakpoint) {
+        content: counter(count)  ".";
+      }
+
+    }
+    a {
+      text-decoration: none;
+      color: var(--#{$prefix}stepper-font-color);
+      font-size: var(--#{$prefix}stepper-font-size);
+    }
+
+    a, span {
+      @include media-breakpoint-down($stepper-breakpoint) {
+
+        opacity: 0;
+        position: absolute;
+        top: 80%;
+        left: 50%;
+        margin-left: auto;
+        text-align: center;
+        transform: translate(-50%, -50%);
+        color: var(--#{$prefix}stepper-sm-font-color);
+        width:100%;
+      }
+    }
+
+    &.active {
+      span, a {
+        opacity: 1;
+      }
+    }
+  }
+}

package/assets/scss/config/_all.scss

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

package/assets/scss/config/_map-amends.scss

@@ -1,15 +1,5 @@
 //modify bootstrap map
 
 
-$mtvh-spacing : (
-  'spacing-1': 0.125, //2px
-  'spacing-2': 0.25, //4px
-  'spacing-3': 0.5, //8px
-  'spacing-4': 0.75, //12px
-  'spacing-5': 1, //16px
-  'spacing-6': 1.5, //24px
-  'spacing-7': 2, //32px
-  'spacing-8': 2.5, //40px
-);