@mtvh/mtvh-design-system 0.0.27 → 0.0.29

package/assets/scss/config/_variables.scss

@@ -32,6 +32,7 @@ $link-color: #0072bf;
 $link-hover-color: #005792;
 $body-color: #000;
 $font-family-sans-serif: Arial, sans-serif;
+$font-family-paralucent: var(--mtvh-font), sans-serif;
 
 // MTVH Font
 $mtvh-base-font-size: $font-size-base;
@@ -101,13 +102,14 @@ $mtvh-spacing-8: 2.5rem;
 $mtvh-spacing-9: 3rem;
 $mtvh-spacing-10: 3.5rem;
 $mtvh-spacing-11: 3.75rem;
+$mtvh-spacing-12: 5rem;
 // custom added bs spacing value
 
 $spacer: 1rem;
 $spacers: (
   0: 0,
   1: $spacer * 0.25,
-  2: $spacer * 0.5,
+  2: $spacer * 0.375,
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
@@ -119,6 +121,10 @@ $spacers: (
   16: $mtvh-spacing-6,
   17: $mtvh-spacing-7,
   18: $mtvh-spacing-8,
+  19: $mtvh-spacing-9,
+  20: $mtvh-spacing-10,
+  21: $mtvh-spacing-11,
+  22: $mtvh-spacing-12,
 );
 
 $icon-size-scale-xs: 16px !default;
@@ -248,6 +254,7 @@ $content-block-theme-colors: (
   "purple-01": var(--#{$prefix}purple-01),
   "purple-02": var(--#{$prefix}purple-02),
   "stone-02": var(--#{$prefix}stone-02),
+  "grey-02": var(--#{$prefix}grey-02),
 );
 
 $content-block-theme-border: (
@@ -322,6 +329,37 @@ $badge-themes: (
   ),
 );
 
+
+$icon-color-themes: (
+  "green": (
+    "background": var(--#{$prefix}green-01),
+    "color": var(--#{$prefix}green-03),
+  ),
+  "red": (
+    "background": var(--#{$prefix}red-01),
+    "color": var(--#{$prefix}red-03),
+  ),
+  "grey": (
+    "background": var(--#{$prefix}grey-02),
+    "color": var(--#{$prefix}grey-05),
+  ),
+  "blue": (
+    "background": var(--#{$prefix}blue-01),
+    "color": var(--#{$prefix}blue-03),
+  ),
+  "purple": (
+    "background": var(--#{$prefix}purple-01),
+    "color": var(--#{$prefix}purple-03),
+  ),
+  "yellow": (
+    "background": var(--#{$prefix}yellow-01),
+    "color": var(--#{$prefix}yellow-03),
+  ),
+  "stone": (
+    "background": var(--#{$prefix}stone-01),
+    "color": var(--#{$prefix}stone-03),
+  ),
+);
 $badge-border-radius: 0;
 $badge-padding-x: $mtvh-spacing-1;
 $badge-padding-y: 0;
@@ -333,11 +371,16 @@ $notification-text-color: var(--#{$prefix}white);
 $box-shadow: 0 0.125rem 0.225rem rgba(0, 0, 0, 0.12);
 
 /* pagination */
-$pagination-padding-x: 18px;
-$pagination-padding-y: 10px;
+$pagination-padding-x: 0;
+$pagination-padding-y: 8px;
 $pagination-border-radius: 4px;
+$pagination-color: var(--#{$prefix}blue-04);
+$pagination-hover-color: var(--#{$prefix}blue-05);
+$pagination-hover-bg: var(--#{$prefix}white);
 $pagination-active-bg: var(--#{$prefix}purple-04);
 $pagination-active-color: var(--#{$prefix}white);
+$pagination-focus-color: var(--#{$prefix}blue-04);
+$pagination-focus-bg: transparent;
 $pagination-font-size: $font-size-sm;
 $pagination-focus-box-shadow: unset;
 $pagination-border-width: 0;

package/assets/scss/core/iconography/_icon.scss

@@ -26,7 +26,7 @@
           @include hover-animate($position: "right");
         }
       }
-      &.m-0 {
+      &.m-0, &.mtvh-icon--circle {
         &:after,
         &:before {
           margin-right: 0;
@@ -43,3 +43,17 @@
     }
   }
 }
+
+.mtvh-icon--circle {
+  @include mtvh-icon-circle($icon-size-scale-md, var(--#{$prefix}icon-background), var(--#{$prefix}icon-colour));
+}
+
+@each $state, $variable in $icon-color-themes {
+  $bg-colour: map-get($variable, "background");
+  $color: map-get($variable, "color");
+
+  .mtvh-icon--circle-#{$state} {
+    --#{$prefix}icon-colour: #{$color};
+    --#{$prefix}icon-background: #{$bg-colour};
+  }
+}

package/assets/scss/core/typography/_typography.scss

@@ -8,14 +8,15 @@ h4,
 h5,
 h6,
 .mtvh-h1,
-.mtvh-h2,
+mtvh-child-title-h1,
+mtvh-title-h1 .mtvh-h2,
 .mtvh-h3,
 .mtvh-h4,
 .mtvh-h5,
 .mtvh-h6 {
   margin: 0;
   padding: 0;
-  font-family: var(--mtvh-font);
+  font-family: $font-family-paralucent;
   font-weight: $mtvh-font-weight-bold;
 }
 
@@ -56,18 +57,28 @@ p {
 
 %child-title-h1 {
   margin-bottom: $mtvh-spacing-5;
-  margin-top: $mtvh-spacing-5;
-  display: block;
-  @include media-breakpoint-down("sm") {
-    font-size: 2.125rem;
-    line-height: 1.3;
+  margin-top: $mtvh-spacing-7;
+  font-size: 2.125rem;
+  line-height: 1.3;
+  font-weight: $mtvh-font-weight-semibold;
+  @include media-breakpoint-up("md") {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
+  @include media-breakpoint-up("lg") {
+    margin-top: $mtvh-spacing-8;
   }
 }
 
 %parent-title-h1 {
-  margin-top: $mtvh-spacing-5;
-  @include media-breakpoint-up("md") {
+  margin-bottom: $mtvh-spacing-5;
+  margin-top: $mtvh-spacing-7;
+  @include media-breakpoint-up("sm") {
     font-size: 3.25rem;
+    line-height: 1.2;
+  }
+  @include media-breakpoint-up("lg") {
+    margin-top: $mtvh-spacing-8;
   }
 }
 

package/assets/scss/forms/_credit-card-form.scss

@@ -0,0 +1,16 @@
+.credit-card-form {
+  background-color: var(--#{$prefix}white);
+  padding: $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-6 $mtvh-spacing-5;
+  border-radius: $border-radius-lg;
+  @include media-breakpoint-up(sm) {
+    padding-left: $mtvh-spacing-6;
+    padding-right: $mtvh-spacing-6;
+  }
+
+  .form-group {
+    --#{$prefix}form-group-padding-y: #{$mtvh-spacing-9};
+    @include media-breakpoint-up(sm) {
+      --mtvh-form-group-padding-y: #{$mtvh-spacing-10};
+    }
+  }
+}

package/assets/scss/forms/_mtvh-address.scss

@@ -0,0 +1,21 @@
+.formio-component-mtvhAddress {
+  label {
+    margin-bottom: $mtvh-spacing-3;
+  }
+
+  select,
+  textarea {
+    @include media-breakpoint-up(lg) {
+      max-width: $input-width-size-xl;
+    }
+  }
+
+   #postCodeSection {
+     .d-flex {
+       align-items: center;
+       > button {
+         margin-left: $mtvh-spacing-4;
+       }
+     }
+   }
+}

package/assets/scss/forms/{_mtvho_contact_email.scss → _mtvho-contact-email.scss}

@@ -2,7 +2,7 @@
   select,
   input {
     @include media-breakpoint-up(lg) {
-      width: 50%;
+      max-width: $input-width-size-xl;
     }
   }
 }

package/assets/scss/forms/{_mtvho_contact_phone.scss → _mtvho-contact-phone.scss}

@@ -2,7 +2,7 @@
   select,
   input {
     @include media-breakpoint-up(lg) {
-      width: 50%;
+      max-width: $input-width-size-xl;
     }
   }
 }

package/assets/scss/forms/_stripe.scss

@@ -0,0 +1,15 @@
+// MTVHO Stripe styles for Card Elements
+//
+form.mtvh-form.new_payment {
+  .stripe-element-placeholder {
+    @extend .form-control;
+  }
+
+  .StripeElement--focus {
+    @include focus-style;
+  }
+
+  .StripeElement--invalid {
+    @extend .form-control, .is-invalid;
+  }
+}

package/assets/scss/mixins/_butttons.scss

@@ -47,33 +47,28 @@
   }
 }
 
-@mixin button-circle() {
+@mixin button-circle($padding: $mtvh-spacing-4, $hover-bg: rgba(0, 0, 0, 0.08), $active-bg: rgba(0, 0, 0, 0.16)) {
   border: 0;
   border-radius: 50%;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  padding: $mtvh-spacing-4;
+  padding: $padding;
 
   &:focus-visible {
     box-shadow: none;
-    outline: solid var(--#{$prefix}btn-outline-border)
-      var(--#{$prefix}btn-close-focus-outline-color);
+    outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-close-focus-outline-color);
     outline-offset: calc(var(--mtvh-btn-outline-border) * -2);
     text-decoration: none;
     -webkit-tap-highlight-color: unset;
   }
-  &:focus:not(:focus-visible) {
+  &:focus:not(:focus-visible),
+  &:hover,
+  &:active:not(:disabled):not(.disabled) {
     outline: 0;
   }
   &:hover {
     cursor: pointer;
-    outline: 0;
-  }
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: $hover-bg;
   }
   &:active:not(:disabled):not(.disabled) {
-    outline: 0;
-    background-color: rgba(0, 0, 0, 0.16);
+    background-color: $active-bg;
   }
 }

package/assets/scss/mixins/_form.scss

@@ -12,7 +12,7 @@
     background-color: $danger;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
-    padding-right: $mtvh-spacing-6;
+    padding-right: $mtvh-spacing-7;
     margin-top: $mtvh-spacing-1;
     vertical-align: top;
   }
@@ -42,5 +42,5 @@
   outline: solid var(--#{$prefix}btn-outline-border)
     var(--#{$prefix}primary-outline-color);
   outline-offset: var(--#{$prefix}btn-outline-border);
-  color: $input-color;
+  color: inherit;
 }

package/assets/scss/mixins/_icon.scss

@@ -126,3 +126,30 @@
     background-size: contain;
   }
 }
+
+
+@mixin mtvh-icon-circle($size, $bg, $color) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  background-color: $bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $color;
+
+  &.mtvh-icon {
+    &:before,
+    &:after {
+      margin: 0;
+      vertical-align: middle;
+      height: $icon-size-scale-xs;
+      width: $icon-size-scale-xs;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-size: contain;
+    }
+  }
+}