@mtvh/mtvh-design-system 0.0.3 → 0.0.5

package/assets/scss/config/_variables.scss

@@ -0,0 +1,159 @@
+// Font
+$prefix: mtvh-;
+$enable-important-utilities: true !default;
+$data-svg-prefix: 'data:image/svg+xml;utf-8,';
+
+$font-size-base: 1rem;
+$font-size-xs: $font-size-base;
+$font-size-sm: $font-size-base * 1.125;
+$font-size-md: $font-size-base * 1.375;
+$font-size-lg: $font-size-base * 1.625;
+$h1-font-size: $font-size-base * 2.5;
+$h2-font-size: $font-size-base * 2;
+$h3-font-size: $font-size-base * 1.75;
+$h4-font-size: $font-size-base * 1.5;
+
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $font-size-lg,
+  5: $font-size-md,
+  6: $font-size-sm,
+  7: $font-size-xs
+);
+
+$line-height-base: 1.5;
+$link-color: #0072BF;
+$link-hover-color: #005792;
+$body-color: #000;
+$font-family-sans-serif: Arial, sans-serif;
+
+
+// MTVH Font
+$mtvh-base-font-size: $font-size-base;
+$mtvh-font-weight-lighter: lighter !default;
+$mtvh-font-weight-light: 300 !default;
+$mtvh-font-weight-normal: 400 !default;
+$mtvh-font-weight-medium: 500 !default;
+$mtvh-font-weight-semibold: 600 !default;
+$mtvh-font-weight-bold: 700 !default;
+$mtvh-font-weight-bolder: bolder !default;
+
+
+
+//button
+$input-btn-font-family:$font-family-sans-serif;
+$btn-border-radius: 3rem;
+$btn-font-weight: bold;
+$btn-padding-x: 1rem;
+$btn-padding-y: 0.438rem;
+$btn-font-size: 1rem;
+$btn-border-width: 3px;
+
+//spacing
+$button-icon-spacing: 0.75rem;
+$button-icon-small-spacing: 8px;
+$link-icon-spacing: 0.5rem;
+
+$border-width-sm: 0.15rem;
+$border-width-md: 0.19rem;
+
+$mtvh-spacing-1: 0.125rem;
+$mtvh-spacing-2: 0.25rem;
+$mtvh-spacing-3: 0.5rem;
+$mtvh-spacing-4: 0.75rem;
+$mtvh-spacing-5: 1rem;
+$mtvh-spacing-6: 1.5rem;
+$mtvh-spacing-7: 2rem;
+$mtvh-spacing-8: 2.5rem;
+$mtvh-spacing-9: 3rem;
+// custom added bs spacing value
+
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+  6: $mtvh-spacing-8
+);
+
+$icon-size-scale-xs     : 16px !default;
+$icon-size-scale-sm     : 20px !default;
+$icon-size-scale-md     : 28px !default;
+$icon-size-scale-lg     : 42px !default;
+$icon-size-scale-xl     : 56px !default;
+$breadcrumb-item-padding-x: $mtvh-spacing-4;
+$breadcrumb-font-size: $font-size-xs;
+
+$mtvh-icon-sizes: (
+  "xs"                 : $icon-size-scale-xs,
+  "sm"                 : $icon-size-scale-sm,
+  "md"                 : $icon-size-scale-md,
+  "lg"                 : $icon-size-scale-lg,
+  "xl"                 : $icon-size-scale-xl
+) !default;
+
+
+$success:       #23870B;
+$info:          #895ED0;
+$warning:       #D8B000; //--mtvh-purple-04
+$danger:        #DD080D;
+$primary:       #0072BF;
+$btn-color: $primary;
+
+/* breadcrumb */
+$breadcrumb-margin-bottom: $mtvh-spacing-6;
+
+/* form  */
+$form-label-font-size : $font-size-md;
+$form-label-font-weight: 700;
+$form-label-color: #000000;
+$form-text-font-size: $font-size-sm;
+$form-label-margin-bottom: $mtvh-spacing-3;
+$form-select-focus-border-color: var( --mtvh-grey-06);
+$form-feedback-font-size: $font-size-sm;
+$form-feedback-invalid-color: $danger;
+$form-feedback-icon-invalid: '';
+$form-feedback-margin-top: $mtvh-spacing-4;
+$input-line-height: 1.5;
+$input-font-size: $font-size-sm;
+$input-padding-y: $mtvh-spacing-4;
+$input-padding-x: $mtvh-spacing-5;
+$input-focus-color: var(--mtvh-blue-05);
+$input-focus-border-color: var( --mtvh-grey-06);
+$input-border-color: var( --mtvh-grey-06);
+$input-border-radius: 0.25rem;
+$input-color: $body-color;
+$input-placeholder-color: var( --mtvh-grey-06);
+
+/* form check */
+$form-check-bg-color: var(--mtvh-grey-01);
+$form-check-hover-bg-color: var(--mtvh-grey-02);
+$form-check-input-width: 2em;
+$form-check-input-height: 2em;
+$form-check-margin-bottom: $mtvh-spacing-5;
+$form-check-input-checked-color: var(--mtvh-white);
+$form-check-input-checked-color: #fff;
+$form-check-padding-start: $form-check-input-width + 1em;
+$form-check-input-checked-bg-color:       var(--mtvh-purple-04);
+$form-check-input-hover-bg-color:         var(--mtvh-purple-05);
+$form-check-input-checked-border-color:   var(--mtvh-purple-04);
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></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>");
+
+
+$line-height-md: 1.3;
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+);
+
+$font-path: "./fonts/" !default;
+$asset-icon-path: "./images/icons/" !default;

package/assets/scss/core/_all.scss

@@ -0,0 +1,2 @@
+@import 'iconography/icon';
+@import 'typography/typography';

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

@@ -0,0 +1,32 @@
+
+.mtvh-icon {
+
+  @each $mtvh-icon, $property-map in $mtvh-icons{
+    &-#{$mtvh-icon} {
+      &:not(.mtvh-icon--right) { //default to use left position
+        @include mtvh-icon($icon: $mtvh-icon, $position: 'left', $width:  map-get($property-map, width),
+        $height: map-get($property-map, height), $svg-path:  map-get($property-map, svg-path));
+        &.mtvh-icon--hover {
+          @include hover-animate;
+        }
+      }
+      &.mtvh-icon--right {
+        @include mtvh-icon($icon: $mtvh-icon, $position: 'right', $width: map-get($property-map, width),
+        $height: map-get($property-map, height), $svg-path:  map-get($property-map, svg-path));
+        &.mtvh-icon--hover {
+          @include hover-animate($position: 'right');
+        }
+      }
+
+    }
+
+  }
+
+  // create all sizes for the icons
+  @each $size, $value in $mtvh-icon-sizes {
+    &.mtvh-icon--#{$size} {
+      @include icon-size($value,$value);
+    }
+  }
+
+}

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

@@ -0,0 +1,107 @@
+h1, h2, h3, h4, h5, h6, dt,
+.mtvh-h1,
+.mtvh-h2,
+.mtvh-h3,
+.mtvh-h4,
+.mtvh-h5,
+.mtvh-h6 {
+  margin: 0;
+  padding: 0;
+  font-family: var(--mtvh-font);
+  font-weight: var(--mtvh-font-bold);
+}
+
+h1, .mtvh-h1 {
+  @extend %h1;
+}
+.mtvh-title-h1 {
+  @extend %h1;
+  @extend %parent-title-h1;
+
+}
+
+h2, .mtvh-h2 {
+  @extend %h2;
+}
+h3, .mtvh-h3 {
+  @extend %h3;
+}
+h4, .mtvh-h4 {
+  @extend %h4;
+}
+p {
+  @extend %p;
+}
+
+%h1 {
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
+  line-height: 1.2;
+  display: block;
+}
+
+%parent-title-h1 {
+  @include media-breakpoint-up('md') {
+    font-size: 3.25rem;
+  }
+}
+
+%h2 {
+  margin-bottom: 1rem;
+  font-size: 2rem;
+  line-height: 1.25;
+  display: block;
+}
+
+%h3 {
+  margin-bottom: 0.375rem;
+  font-size: 1.625rem;
+  line-height: 1.3;
+  display: block;
+}
+
+%h4 {
+  margin-bottom: 0.375rem;
+  font-size: 1.375rem;
+  line-height: 1.4;
+  display: block;
+}
+
+%p  {
+  margin-bottom: 1rem;
+  display: block;
+  font-size: $font-size-sm;
+}
+
+.mtvh-intro {
+  margin-bottom: 1rem;
+  font-size: 1.375rem;
+  line-height: 1.4;
+}
+
+.small {
+  margin-bottom: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+a {
+  font-weight: bold;
+  outline-color:  var(--mtvh-btn-outline-color);
+}
+
+ul,
+ol,
+ {
+  margin: 0 0 1rem 0;
+  padding-right: 0;
+  padding-left: 1.75rem;
+}
+
+
+ul,
+ol {
+  li {
+    margin-bottom: 0.25rem;
+  }
+}

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

@@ -0,0 +1,48 @@
+//
+// Check/radio
+//
+
+.form-check {
+  label, .form-check-input {
+    &:hover {
+      cursor: pointer;
+
+      .form-check-input {
+        cursor: pointer;
+      }
+    }
+  }
+  padding:$mtvh-spacing-4 $mtvh-spacing-5;
+  background-color: $form-check-bg-color;
+  border-radius: $border-radius;
+
+  &:hover {
+      background-color: $form-check-hover-bg-color;
+  }
+}
+
+.form-check-input {
+  float: none;
+  margin-left: 0;
+  margin-right: $mtvh-spacing-3;
+  &:hover {
+
+    &[type="checkbox"] {
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+      }
+    }
+
+    &[type="radio"] {
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+      }
+      background-color: $form-check-input-hover-bg-color;
+    }
+  }
+
+}

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

@@ -0,0 +1,38 @@
+.form-control  {
+  height: auto;
+  &: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);
+  }
+
+  span[ref|="charcount"], .text-muted {
+    color : var(--mtvh-grey-06) !important;
+  }
+}
+
+
+textarea {
+  &.form-control {
+    max-height: 496px;
+    @include media-breakpoint-up(md) {
+      max-height: 608px;
+    }
+  }
+}
+
+select {
+  &.form-control {
+    height: auto;
+  }
+}

package/assets/scss/forms/_formio.scss

@@ -0,0 +1,36 @@
+.formio-component {
+
+    margin-bottom: $mtvh-spacing-9;
+
+    &.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;
+    }
+
+    &.has-message.has-error {
+      .text-danger {
+        color: var(--mtvh-red-04) !important;
+      }
+    }
+
+    //Remove padding from last child
+    div.formio-component-form{
+      & .formio-component:last-child {
+        margin-bottom:0!important;
+        border: 1px red solid;
+      }
+
+      div[ref="element"] {
+        .form-text.text-right, .form-text.pull-right {
+          float: none;
+          margin-top: 12px;
+          margin-bottom: 0;
+          text-align: left !important;
+        }
+      }
+    }
+
+}

package/assets/scss/forms/_labels.scss

@@ -0,0 +1,4 @@
+.col-form-label {
+  font-size: $form-label-font-size;
+  font-weight: $form-label-font-weight;
+}

package/assets/scss/forms/_validation.scss

@@ -0,0 +1,22 @@
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server-side validation.
+
+.invalid-feedback {
+  font-weight: $mtvh-font-weight-bold;
+}
+.form-control {
+  &.is-invalid {
+    background-color: var(--mtvh-red-01)
+  }
+}
+.form-text {
+  font-size: $font-size-sm;
+  margin-bottom: $mtvh-spacing-4;
+  &.error {
+    @include form-invalid-text();
+  }
+}

package/assets/scss/mtvh.scss

@@ -0,0 +1,68 @@
+// Source: https://getbootstrap.com/docs/5.3/customize/sass/#importing
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+@import "config/variables";
+@import "config/font";
+@import 'config/palette';
+@import 'config/theme';
+@import "config/map-list";
+@import 'base/all';
+
+// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+@import "bootstrap/scss/variables";
+//@import "bootstrap/scss/variables-dark";
+//$theme-colors: map-remove($theme-colors, "light");
+
+// 4. Include any default map overrides here
+@import "config/map-amends";
+
+// 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+// 6. Optionally include any other parts as needed
+
+// Layout & components
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+//@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/alert";
+//@import "bootstrap/scss/progress";
+//@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+//@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+//@import "bootstrap/scss/carousel";
+//@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "bootstrap/scss/utilities/api";
+
+// 8. Add additional custom code here
+@import 'components/all';
+
+@import 'core/all';