@mtvh/mtvh-design-system 0.0.9 → 0.0.11

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

@@ -8,10 +8,11 @@
     margin-bottom: .5rem;
   }
   &--text-only {
-    padding: $mtvh-spacing-5 $mtvh-spacing-5;
-    font-size: 1rem;
+    padding: $mtvh-spacing-4 $mtvh-spacing-5;
+    font-size: $font-size-xs;
     @include media-breakpoint-up(md) {
-      font-size: 1.125rem;
+      font-size: $font-size-sm;
+      padding: $mtvh-spacing-5 $mtvh-spacing-6;
     }
   }
   &--stretch {
@@ -32,6 +33,7 @@
     @include media-breakpoint-up(md) {
       padding: $mtvh-spacing-6;
     }
+
     @include media-breakpoint-up(lg) {
       min-height: 17rem;
     }
@@ -107,6 +109,9 @@
   }
 
   &-icon {
+
+    padding-top: $mtvh-spacing-5;
+
     .mtvh-icon {
         margin-bottom: $mtvh-spacing-3;
     }

package/assets/scss/components/_form.scss

@@ -5,32 +5,27 @@
   @import "../forms/labels";
   @import "../forms/validation";
   @import "../forms/formio";
-  @import "../forms/form-date-input";
+  @import "../forms/form-date-input"; 
 
+  --#{$prefix}form-padding-y: #{$mtvh-spacing-7};
+  --#{$prefix}form-padding-x: #{$mtvh-spacing-4};
+
+  @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}gutter-x)* -0.5);
-  padding: var(--#{$prefix}gutter-x);
+  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") {
-    padding: $mtvh-spacing-5 $mtvh-spacing-11 $mtvh-spacing-5 $mtvh-spacing-11;
-  }
-
-}
-.mtvh-form-container {
-
-  @include media-breakpoint-up("lg") {
-    max-width: 550px;
-    margin:0 auto;
+    margin: 0;
   }
 
   .form-group {
-    margin-bottom: $form-group-xs-margin-top;
-
-    @include media-breakpoint-up("lg") {
-      margin-bottom: $form-group-margin-top;
-    }
+    margin-bottom: var(--#{$prefix}form-group-padding-y);
   }
 
   .field-required:after, .tab-error::after {
@@ -50,6 +45,51 @@
     }
   }
 
+
+}
+.mtvh-form-container {
+
+  --#{$prefix}form-max-width: unset;
+  --#{$prefix}form-group-padding-y: #{$form-group-margin-bottom};
+  --#{$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;
+  }
+
+
   .mtvh-form-container-required {
     font-size: $font-size-xs;
     padding: $mtvh-spacing-4 0 $mtvh-spacing-6 0;
@@ -57,5 +97,4 @@
       padding-bottom: $mtvh-spacing-7;
     }
   }
-
 }

package/assets/scss/components/_stepper.scss

@@ -23,8 +23,8 @@
   text-align: center;
 
   @include media-breakpoint-up($stepper-breakpoint) {
-     padding-bottom: 0;
-    margin: $mtvh-spacing-9 0 $mtvh-spacing-5 0;
+    padding-bottom: 0;
+    margin: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
   }
 
   .mtvh-stepper-item {

package/assets/scss/config/_variables.scss

@@ -48,7 +48,7 @@ $danger:        #DD080D;
 $primary:       #0072BF;
 $dark:          #000000;
 $secondary:     #9A9A9A;
-$light:         #0072BF;
+$light:         #ffffff;
 $stone:         #F9F2EA;
 
 $theme-colors: (
@@ -104,7 +104,18 @@ $spacers: (
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
-  6: $mtvh-spacing-8
+  6: $mtvh-spacing-8,
+  11: $mtvh-spacing-1,
+  12: $mtvh-spacing-2,
+  13: $mtvh-spacing-3,
+  14: $mtvh-spacing-4,
+  15: $mtvh-spacing-5,
+  16: $mtvh-spacing-6,
+  17: $mtvh-spacing-7,
+  18: $mtvh-spacing-8,
+  19: $mtvh-spacing-9,
+  20: $mtvh-spacing-10,
+  21: $mtvh-spacing-11
 );
 
 $icon-size-scale-xs     : 16px !default;
@@ -129,8 +140,8 @@ $breadcrumb-font-size: $font-size-xs;
 $breadcrumb-active-color: var(--#{$prefix}black);
 
 /* form  */
-$form-group-margin-top: 3.5rem;
-$form-group-xs-margin-top: 3rem;
+$form-group-lg-margin-bottom: 3.5rem;
+$form-group-margin-bottom: 3rem;
 $form-text-margin-top: 0;
 $form-label-font-size : $font-size-md;
 $form-label-font-weight: 700;
@@ -155,9 +166,10 @@ $input-placeholder-color: var(--#{$prefix}grey-06);
 $input-width-size-xxs : 64px;
 $input-width-size-xs : 80px;
 $input-width-size-sm : 96px;
-$input-width-size-md : 160px;
+$input-width-size-md : 130px;
 $input-width-size-lg : 336px;
-$input-width-size-xl : 451px;
+$input-width-size-xl : 450px;
+$input-width-size-l : 420px;
 
 /* form check */
 $form-check-bg-color: unset;
@@ -168,14 +180,19 @@ $form-check-min-height: 2.75rem;
 $form-check-margin-bottom: $mtvh-spacing-5;
 $form-check-input-checked-color: #fff;
 $form-check-padding-start: $form-check-input-width + 1rem;
-$form-check-input-checked-bg-color:       var(--#{$prefix}purple-05);
+$form-check-input-checked-bg-color:       var(--#{$prefix}purple-04);
 $form-check-input-hover-bg-color:         var(--#{$prefix}purple-04);
-$form-check-input-checked-border-color:   var(--#{$prefix}purple-05);
+$form-check-input-checked-border-color:   var(--#{$prefix}purple-04);
+$form-check-input-focus-border:           var(--#{$prefix}purple-05);
+$form-check-input-focus-bg-color:         var(--#{$prefix}purple-05);
 $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m6.813 13.492 9.9-9.848c.274-.275.587-.406.937-.393.35.012.663.156.938.43.274.275.412.587.412.937 0 .35-.137.661-.413.936l-10.8 10.784a1.313 1.313 0 0 1-1.912 0l-4.463-4.456c-.274-.274-.412-.587-.412-.936 0-.35.137-.662.413-.936.274-.275.587-.412.937-.412.35 0 .663.137.938.412l3.525 3.482Z'  fill='#{$form-check-input-checked-color}'/></svg>");
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
 $form-check-input-focus-box-shadow: "";
 $form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
 $form-check-wrapper-radio-invalid-border:  1px solid var(--#{$prefix}red-01);
+$form-select-indicator-color: "#000";
+$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
+
 
 /* list group */
 $list-group-item-padding-x: 0;
@@ -219,11 +236,15 @@ $banner-theme-colors: (
 
 $content-block-theme-colors: (
   "yellow-01": var(--#{$prefix}yellow-01),
+  "yellow-02": var(--#{$prefix}yellow-02),
   "red-01": var(--#{$prefix}red-01),
+  "red-02": var(--#{$prefix}red-02),
   "green-01": var(--#{$prefix}green-01),
+  "green-02": var(--#{$prefix}green-02),
   "grey-01": var(--#{$prefix}grey-01),
   "white": var(--#{$prefix}white),
   "purple-01": var(--#{$prefix}purple-01),
+  "purple-02": var(--#{$prefix}purple-02),
   "stone-02": var(--#{$prefix}stone-02)
 );
 

package/assets/scss/forms/_form-check.scss

@@ -5,7 +5,6 @@
 .form-check {
 
   display: flex;
-  align-items: center;
   margin-bottom: $mtvh-spacing-5;
 
   &:last-child {
@@ -17,14 +16,10 @@
     position: relative;
     display: flex;
     align-items: center;
-
+    @include field-focus();
     input {
       float: unset;
       align-self: start;
-      @include field-focus();
-    }
-    span {
-      align-self: center;
     }
 
     &:hover {
@@ -50,4 +45,13 @@
   &:hover {
     cursor: pointer;
   }
+  &:focus {
+    border-color: $form-check-input-focus-border;
+    @include field-focus();
+
+    &:checked {
+      background-color: $form-check-input-focus-bg-color;
+    }
+  }
+
 }

package/assets/scss/forms/_form-control.scss

@@ -1,5 +1,4 @@
 .form-control  {
-  height: auto;
 
   @include field-focus();
 
@@ -13,23 +12,38 @@
   }
 
   span[ref|="charcount"], .text-muted {
-    color : var(--mtvh-grey-06) !important;
+    color: var(--mtvh-grey-06) !important;
   }
-}
 
+  &:not(textarea, select) {
+    max-width: var(--#{$prefix}form-control-input-width);
+  }
 
-textarea {
-  &.form-control {
-    max-height: 496px;
-    @include media-breakpoint-up(md) {
-      max-height: 608px;
-    }
+  &[ref|="postCode"], &[inputmode|="decimal"], &[autocomplete|="tel"] {
+    max-width: $input-width-size-md;
   }
-}
 
-select {
-  &.form-control {
-    height: auto;
+  &textarea {
+
+      max-height: 496px;
+      @include media-breakpoint-up(md) {
+        max-height: 608px;
+      }
   }
+
 }
 
+select.form-control {
+
+  padding-right: 50px;
+
+  max-width: unset;
+  -o-appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99024 13.8513L18.4014 5.44069C18.5717 5.27035 18.7789 5.17873 19.0228 5.1658C19.267 5.15321 19.4885 5.24434 19.6874 5.4392C19.8862 5.63439 19.9898 5.84863 19.998 6.08193C20.0063 6.31489 19.911 6.53726 19.7122 6.74901L11.0779 15.3829C10.9085 15.5396 10.7375 15.6573 10.5649 15.7358C10.3922 15.814 10.2007 15.8531 9.99024 15.8531C9.77981 15.8531 9.58761 15.8137 9.41363 15.7348C9.23998 15.6559 9.07412 15.5376 8.91605 15.3799L0.290642 6.752C0.102411 6.56377 0.00614352 6.34671 0.00183483 6.10082C-0.00280383 5.85492 0.0942936 5.63438 0.293127 5.4392C0.491961 5.24434 0.707031 5.14691 0.938341 5.14691C1.16965 5.14691 1.38323 5.24484 1.57908 5.44069L9.99024 13.8513Z' fill='black'/%3E%3C/svg%3E%0A");
+  background-position: calc(100% - 12px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+}

package/assets/scss/forms/_formio.scss

@@ -24,3 +24,8 @@
       }
     }
 }
+
+.formio-wizard-nav-container {
+    display: block;
+}
+

package/assets/scss/forms/_mtvho_contact_email.scss

@@ -0,0 +1,8 @@
+.formio-component-mtvhoContactEmail {
+  select,
+  input {
+    @include media-breakpoint-up(lg) {
+      width: 50%;
+    }
+  }
+}

package/assets/scss/forms/_mtvho_contact_phone.scss

@@ -0,0 +1,8 @@
+.formio-component-mtvhoContactPhone {
+  select, input {
+
+    @include media-breakpoint-up(lg) {
+      width: 50%;
+    }
+  }
+}