@mtvh/mtvh-design-system 0.0.21 → 0.0.23

package/assets/scss/components/_form.scss

@@ -37,10 +37,16 @@
       }
     }
 
-    .form-group {
-      margin-bottom: var(--#{$prefix}form-group-padding-y);
+    .form-group, .formio-form-group.mb-2 {
+      margin-bottom: var(--#{$prefix}form-group-padding-y) !important;
+
       .formio-choices.choices {
-        margin-bottom: 0;
+        --#{$prefix}form-group-padding-y: 0;
+      }
+
+      &:empty {
+        display: none;
+        --#{$prefix}form-group-padding-y: 0;
       }
     }
 

package/assets/scss/components/_stepper.scss

@@ -15,12 +15,13 @@
 
   opacity: 0;
   position: absolute;
-  top: 50px;
+  top: 80px;
   left: 0;
   margin-left: auto;
   text-align: center;
   color: var(--#{$prefix}stepper-sm-font-color);
   width:100%;
+
 }
 
 
@@ -38,32 +39,40 @@
   display: flex;
   flex-wrap: nowrap;
   list-style: none;
-  width: 100%;
-  padding: 0 0 $mtvh-spacing-9 0;
-  margin: $mtvh-spacing-6 0 $mtvh-spacing-5 0;
+  align-items: stretch;
   justify-content: center;
+  width: 100%;
+  padding: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
+  margin: 0;
   color: var(--#{$prefix}stepper-font-color);
   text-align: center;
   position: relative;
-  padding-bottom: 0;
-  margin: $mtvh-spacing-8 0 $mtvh-spacing-5 0;
 
   @include stepper-small-container {
-    padding: 0 0 $mtvh-spacing-9 0;
-    margin: $mtvh-spacing-6 0 $mtvh-spacing-5 0;
-    position: unset;
+    padding: $mtvh-spacing-7 0 $mtvh-spacing-4 0;
+    min-height: 120px;
+    .mtvh-stepper-item {
+      height: 40px;
+    }
   }
 
   .mtvh-stepper-item {
 
-    counter-increment: count;
+    align-items: center;
+    display: flex;
+    justify-content: center;
     flex-basis: 100%;
-    margin-right: 1px;
+    counter-increment: count;
+    margin-right: 2px;
+    margin-bottom: 0;
     color: var(--#{$prefix}stepper-disabled-font-color);
     background-color: var(--#{$prefix}stepper-disabled-bg-color);
     font-size: var(--#{$prefix}stepper-font-size);
     padding: $mtvh-spacing-3 $mtvh-spacing-2;
-    position: relative;
+
+    @include media-breakpoint-up(md) {
+      margin-right: 4px;
+    }
 
     &:has( a + span), &:has( span + a ), &.completed {
       background-color: var(--#{$prefix}stepper-bg-color);
@@ -71,12 +80,6 @@
       font-weight: bold;
     }
 
-    &:has(a) {
-      &:hover {
-        background-color: var(--#{$prefix}blue-04);
-      }
-    }
-
     &:focus-within {
       outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
       outline-offset: var(--#{$prefix}btn-outline-border);
@@ -113,18 +116,18 @@
         border:0;
         outline: 0;
       }
-      &:after {
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 100;
+    }
+
+    &:has(a) {
+
+      &:hover {
+        background-color: var(--#{$prefix}blue-04);
+        cursor: pointer;
       }
     }
 
     &:has(a:not(.link-inactive)) {
+
       &:before {
         font-weight: $mtvh-font-weight-bold;
       }
@@ -133,7 +136,7 @@
     &:has(a.link-inactive) {
       color: var(--#{$prefix}stepper-disabled-font-color);
       background-color: var(--#{$prefix}stepper-disabled-bg-color);
-
+      font-weight: normal;
       a {
         color: var(--#{$prefix}stepper-disabled-font-color);
         background-color: var(--#{$prefix}stepper-disabled-bg-color);

package/assets/scss/config/_variables.scss

@@ -220,7 +220,7 @@ $btn-close-hover-opacity: 1;
 $stepper-bg-color: var(--#{$prefix}grey-06);
 $stepper-sm-font-color: var(--#{$prefix}purple-04);
 $stepper-active-bg-color: var(--#{$prefix}purple-04);
-$stepper-disabled-bg-color: var(--#{$prefix}grey-03);
+$stepper-disabled-bg-color: var(--#{$prefix}grey-02);
 $stepper-disabled-font-color: var(--#{$prefix}black);
 $stepper-font-size: $font-size-xs;
 $stepper-font-color: var(--#{$prefix}white);

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

@@ -55,4 +55,8 @@
     }
   }
 
+  &:checked {
+    border-color: $form-check-input-checked-border-color;
+    background-color: $form-check-input-focus-bg-color;
+  }
 }

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

@@ -7,10 +7,35 @@
   .form-check {
     padding: 0;
     margin: 0;
+  }
+
+  .form-check-input {
+    width: 5px;
+    opacity: 0;
+    position: absolute;
 
-    &.checkbox.radio-selected {
-     &:hover {
-        span {
+    &:focus {
+      + label  {
+        @include focus-style();
+        color: inherit;
+      }
+    }
+    &:checked {
+      + label  {
+        background-color: $form-check-input-checked-bg-color;
+        color: $form-check-input-checked-color;
+      }
+      &:focus {
+        + label  {
+          color: $form-check-input-checked-color;
+        }
+      }
+    }
+
+    &[type="checkbox"] {
+
+      &:checked + label  {
+        &:hover {
           position: relative;
           &:after {
             position: absolute;;
@@ -25,36 +50,25 @@
             height: $icon-size-scale-xs;
           }
         }
-
       }
     }
-  }
 
-  .form-check-input {
-    width: 5px;
-    opacity: 0;
-    position: absolute;
   }
+
   .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);
-    }
-  }
-
-  .form-check-input  {
-
-    &:checked + span {
-      background-color: $form-check-input-checked-bg-color;
-      color: $form-check-input-checked-color;
-    }
+   
   }
 
   &--fullwidth {
-
-    .radio, label, .form-check-label span {
+    .form-check {
+      width: 100%;
+    }
+    .form-check-label, .form-check-label span {
       width: 100%;
     }
   }

package/assets/scss/forms/_formio.scss

@@ -1,7 +1,8 @@
 .formio-component {
 
     &.formio-hidden{
-      margin-bottom:0;
+      margin-bottom: 0;
+      --#{$prefix}form-group-padding-y: 0;
     }
 
     &.formio-component-button:has(> button[type="submit"]),&.formio-component-form,&.formio-component-fieldset,&.formio-component-columns,&.formio-component-mtvhLogicSet{
@@ -32,8 +33,9 @@
 
 .formio-error-wrapper {
   background: unset;
+  padding: 0;
 }
 
-.formio-error-wrapper {
-  padding: 0;
+.choices__item.choices__item--selectable {
+  padding-right: 30px;
 }

package/assets/scss/forms/_validation.scss

@@ -7,7 +7,8 @@
 .was-validated .form-control:invalid, .form-control.is-invalid {
   padding-right: $input-padding-x;
 }
-.invalid-feedback, .formio-component.has-error .invalid-feedback {
+
+.invalid-feedback, .formio-component.has-error.has-message  .invalid-feedback  {
   font-weight: $mtvh-font-weight-bold;
   &:has(.error.form-text) {
     .form-text {
@@ -16,6 +17,7 @@
         font-size: $font-size-sm;
         font-weight: bold;
         margin: 0;
+        display: inline-block;
       }
     }
   }
@@ -25,6 +27,17 @@
   }
 }
 
+.mtvh-chips {
+  &.has-error, &.has-message {
+    .form-check-label {
+      color: $form-label-color;
+      span {
+        border-color: $form-feedback-invalid-color;
+      }
+    }
+  }
+}
+
 .form-check-input {
   &.is-invalid {
     border-color: var(--mtvh-form-invalid-border-color);

package/assets/scss/mixins/_form.scss

@@ -39,9 +39,12 @@
 
 @mixin field-focus() {
   &:focus {
-    box-shadow: none;
-    outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}primary-outline-color);
-    outline-offset: var(--#{$prefix}btn-outline-border);
-    color: $input-color;
+    @include focus-style();
   }
 }
+@mixin focus-style() {
+  box-shadow: none;
+  outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}primary-outline-color);
+  outline-offset: var(--#{$prefix}btn-outline-border);
+  color: $input-color;
+}