@mtvh/mtvh-design-system 0.0.33 → 0.0.35

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

@@ -2,15 +2,22 @@
   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;
   }
 
+  .mtvh-form-container-required {
+    @include media-breakpoint-down(sm) {
+      padding-bottom: $mtvh-spacing-6;
+    }
+  }
+
   .form-group {
-    --#{$prefix}form-group-padding-y: #{$mtvh-spacing-9};
+    --#{$prefix}form-group-padding-y: #{$mtvh-spacing-6};
     @include media-breakpoint-up(sm) {
-      --mtvh-form-group-padding-y: #{$mtvh-spacing-10};
+      --mtvh-form-group-padding-y: #{$mtvh-spacing-7};
     }
   }
 }

package/assets/scss/forms/_file-upload.scss

@@ -0,0 +1,119 @@
+.files-table {
+
+    --#{$prefix}list-group-item-padding-y: #{$mtvh-spacing-3};
+    display: none;
+    width: 100%;
+    border: 0;
+    font-size: $font-size-base;
+
+    &:has(tbody tr) {
+      display: block;
+    }
+
+    tr.row:not(thead tr.row){
+      border-top: 1px solid var(--#{$prefix}grey-03);;
+    }
+
+    tr.row{
+      position: relative;
+    }
+
+    tr.row > * {
+      padding-left:0;
+      padding-right:0;
+    }
+
+    thead, thead tr, tbody {
+      border:0;
+    }
+
+    thead {
+      @include media-breakpoint-down("md") {
+        opacity: 0;
+        position: absolute;
+      }
+    }
+
+    tbody {
+      border-bottom: 1px solid var(--#{$prefix}grey-03);
+
+      td {
+        @include media-breakpoint-down("md") {
+          padding-top: $mtvh-spacing-4;
+
+          > div:first-child {
+            width: 88%;
+          }
+        }
+        &:not(.col-md-1) {
+          padding-top: $mtvh-spacing-4;
+          padding-bottom: $mtvh-spacing-4;
+        }
+      }
+    }
+
+    .status-container {
+      position: absolute;
+      bottom:$mtvh-spacing-4;
+      left:0;
+      width:100%;
+    }
+    .status {
+      margin-top: $mtvh-spacing-3;
+      margin-bottom: $mtvh-spacing-3;
+      position: relative;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-bold;
+
+      &.text-danger {
+        font-weight: normal;
+      }
+    }
+
+    button, i {
+      @include media-breakpoint-down("md") {
+        position: absolute;
+        top:0;
+        right:0;
+      }
+    }
+    .bi {
+      @extend .btn-icon-circle;
+      min-height: $input-min-height;
+      padding: $mtvh-spacing-4 $mtvh-spacing-3 0 $mtvh-spacing-4;
+      display: block;
+      &.bi-ban {
+        background-image: get-icon("cancel", "black");
+        background-repeat: no-repeat;
+        background-position: center;
+        &:before {
+          content: "";
+        }
+      }
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .fileSelector {
+
+    padding: $mtvh-spacing-10;
+    margin: 0 auto;
+    text-align: center;
+    margin-top: $mtvh-spacing-4;
+    margin-bottom: $mtvh-spacing-4;
+    border-radius: $border-radius-lg;
+    border: 1px dashed var(--#{$prefix}grey-06);
+    background-color: var(--#{$prefix}grey-01);
+
+    a {
+      font-weight: $mtvh-font-weight-bold;
+      text-decoration: none;
+    }
+    a {
+      span {
+        text-decoration: underline;
+      }
+    }
+  }

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

@@ -1,4 +1,9 @@
 .mtvh-chips {
+
+  &.form-check {
+    padding-left:0;
+  }
+
   .form-radio.radio {
     display: flex;
     gap: $mtvh-spacing-4;
@@ -9,55 +14,72 @@
     margin: 0;
   }
 
+  .form-check-input:checked + span {
+    background-color: $form-check-input-checked-bg-color;
+    color: $form-check-input-checked-color;
+    border-color: $form-check-input-checked-bg-color;
+  }
+
+  .form-check-label span {
+    padding: $mtvh-spacing-3 $mtvh-spacing-6;
+    border: 1px solid var(--mtvh-grey-06);
+    border-radius: 0.5rem;
+    background-color: var(--mtvh-grey-01);
+  }
+
+  /* Custom template Formio specific focus and checked styles */
+  .form-check-label {
+    input {
+      &:focus {
+        + span {
+          @include focus-style();
+          color: inherit;
+        }
+      }
+      &:checked {
+        + span {
+          background-color: $form-check-input-checked-bg-color;
+          color: $form-check-input-checked-color;
+        }
+      }
+    }
+  }
+
+  /* Default form styles */
+  .form-check-input[type="checkbox"]:checked + .form-check-label span {
+      @include chip-checked-hover();
+  }
+
   .form-check-input {
     width: 5px;
     opacity: 0;
     position: absolute;
 
     &:focus {
-      + label {
+      + label, + label span {
         @include focus-style();
         color: inherit;
+        border-radius: 0.5rem;
       }
     }
     &:checked {
-      + label {
+      + label, + label span {
         background-color: $form-check-input-checked-bg-color;
         color: $form-check-input-checked-color;
-      }
-      &:focus {
-        + label {
-          color: $form-check-input-checked-color;
-        }
+        border-radius: 0.5rem;
       }
     }
-
     &[type="checkbox"] {
-      &:checked + label {
-        &:hover {
-          position: relative;
-          &:after {
-            position: absolute;
-            content: "";
-            background-image: get-icon("cancel", white);
-            background-repeat: no-repeat;
-            right: 5px;
-            top: 12px;
-            background-size: $icon-size-scale-xs;
-            background-position: 50%;
-            width: $icon-size-scale-xs;
-            height: $icon-size-scale-xs;
-          }
-        }
+
+      + span {
+        padding-left: $mtvh-spacing-6;
+        padding-right: $mtvh-spacing-6;
       }
-    }
-  }
 
-  .form-check-label {
-    padding: $mtvh-spacing-3 $mtvh-spacing-6;
-    border: 1px solid var(--mtvh-grey-06);
-    border-radius: 0.5rem;
-    background-color: var(--mtvh-grey-01);
+      &:checked + span {
+        @include chip-checked-hover();
+      }
+    }
   }
 
   &--fullwidth {

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

@@ -10,11 +10,6 @@
     background-image: none;
   }
 
-  span[ref|="charcount"],
-  .text-muted {
-    color: var(--mtvh-grey-06) !important;
-  }
-
   &:not(textarea, select, .dropdown) {
     max-width: var(--#{$prefix}form-control-input-width);
   }
@@ -56,3 +51,4 @@
     --#{$prefix}form-control-input-width: #{$input-width-size-xl};
   }
 }
+

package/assets/scss/forms/_formio.scss

@@ -41,3 +41,7 @@
 .choices__item.choices__item--selectable {
   padding-right: 30px;
 }
+
+.mtvh-none {
+  display: none;
+}

package/assets/scss/forms/_validation.scss

@@ -9,6 +9,12 @@
   padding-right: $input-padding-x;
 }
 
+.form-text {
+  &:has(.text-muted) {
+    margin-top: $mtvh-spacing-3;
+  }
+}
+
 .invalid-feedback,
 .formio-component.has-error.has-message .invalid-feedback {
   font-weight: $mtvh-font-weight-bold;
@@ -29,6 +35,12 @@
   }
 }
 
+.form-text.error {
+  color: $form-feedback-invalid-color;
+  font-size: $font-size-sm;
+  font-weight: bold;
+}
+
 .mtvh-chips {
   &.has-error,
   &.has-message {

package/assets/scss/mixins/_butttons.scss

@@ -57,7 +57,7 @@
 
   &: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, var(--#{$prefix}dark-outline-color));
     outline-offset: calc(var(--mtvh-btn-outline-border) * -2);
     text-decoration: none;
     -webkit-tap-highlight-color: unset;

package/assets/scss/mixins/_form.scss

@@ -3,7 +3,7 @@
   font-size: $font-size-sm;
   font-weight: bold;
   position: relative;
-  display: flex;
+  display: flex !important;
   margin: $mtvh-spacing-4 0 0 0;
   &:before {
     content: "";

package/assets/scss/mixins/_style.scss

@@ -24,3 +24,26 @@
   border-radius: $btn-border-radius;
   text-decoration: none;
 }
+
+
+@mixin chip-checked-hover(){
+
+      &:hover {
+        position: relative;
+        &:after {
+          position: absolute;
+          content: "";
+          background-image: get-icon("cancel", white);
+          background-repeat: no-repeat;
+          right: 5px;
+          top: 12px;
+          background-size: $icon-size-scale-xs;
+          background-position: 50%;
+          width: $icon-size-scale-xs;
+          height: $icon-size-scale-xs;
+        }
+      }
+
+
+}
+

package/assets/scss/mtvh.scss

@@ -53,7 +53,7 @@
 @import "bootstrap/scss/pagination";
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/badge";
-//@import "bootstrap/scss/progress";
+@import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";
 //@import "bootstrap/scss/toasts";