Material - Labels & Border Bottom animation

Author: alvarosabu

dev/styles/_vendors.scss

@@ -1,4 +1,4 @@
 //@import 'bootstrap/scss/bootstrap.scss';
 @import 'bootstrap/scss/bootstrap-grid.scss';
-@import '../../src/styles/themes/default.scss';
-// @import '../../src/styles/themes/material.scss';
+// @import '../../src/styles/themes/default.scss';
+@import '../../src/styles/themes/material.scss';

src/components/dynamic-input/DynamicInput.vue

@@ -33,20 +33,22 @@
       :formControl="formControl"
       @change="valueChange"
     />
-    <label
-      class="form-label"
-      :for="formControl.name"
-      v-if="formControl.type !== 'checkbox'"
-    >
-      {{ formControl.label }}
-    </label>
     <slot
+      v-if="formControl.type === 'custom-field'"
       :name="'custom-field'"
       :control="formControl"
       :valueChange="valueChange"
       :onFocus="onFocus"
       :onBlur="onBlur"
     />
+    <label
+      class="form-label"
+      :for="formControl.name"
+      v-if="formControl.type !== 'checkbox'"
+    >
+      {{ formControl.label }}
+    </label>
+    <span class="form-bar"></span>
     <div v-if="hasErrors">
       <p
         v-for="(errorText, $index) in errorMessages"

src/styles/themes/default.scss

@@ -25,12 +25,19 @@ $input-error-color: #dc3545;
 .form-label {
   display: inline-block;
   margin-bottom: 0.5rem;
+  order: 1;
 }
 
 .form-group {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   margin-bottom: 1rem;
 
+  & > div {
+    order: 2;
+  }
+
   &--error {
     .form-label {
       color: $input-error-color;
@@ -60,6 +67,7 @@ $input-error-color: #dc3545;
   );
   border: $input-border-width solid $input-border-color;
   border-radius: $input-border-radius;
+  order: 2;
 
   // Placeholder
   &::placeholder {

src/styles/themes/material.scss

@@ -26,25 +26,31 @@ $input-error-color: #dc3545;
 
   .form-label {
     position: absolute;
-    left: 0;
+    left: 15px;
     top: 7px;
     font-size: 16px;
     pointer-events: none;
     color: $base-color;
     transition: 0.2s ease all;
   }
+
+  .form-bar {
+    display: block;
+    width: 100%;
+    height: $input-border-width;
+    background-color: $input-border-color;
+  }
 }
 
 .form-control {
+  position: relative;
   width: 100%;
-  padding: $input-padding-y $input-padding-x;
   font-family: $font-family;
   font-size: $font-size;
   height: calc(
     #{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2}
   );
   border: 0;
-  border-bottom: $input-border-width solid $input-border-color;
   border-radius: $input-border-radius;
 
   // Placeholder
@@ -55,30 +61,67 @@ $input-error-color: #dc3545;
 
   &:focus {
     outline: none;
-    border-bottom: $input-border-width * 2 solid $input-border-color;
   }
 }
 
 /* active state */
+.form-group > div ~ .form-label,
 .form-control:focus ~ .form-label,
 .form-control--value ~ .form-label,
-.custom-select ~ .form-label,
+select.form-control ~ .form-label,
+.custom-field ~ .form-label,
 .checkbox-group ~ .form-label,
-.radio-group ~ .form-label,
-.datalist-input--searching ~ .form-label {
+.input-radio ~ .form-label {
   color: $theme-color;
   top: -18px;
   font-size: 12px;
 }
 
+.form-control ~ .form-bar {
+  position: relative;
+
+  &::before {
+    left: 50%;
+  }
+  &::after {
+    right: 50%;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    height: 2px;
+    width: 0;
+    bottom: 1px;
+    position: absolute;
+    background: $theme-color;
+    transition: 0.2s ease all;
+  }
+}
+
+.form-group > div ~ .form-bar,
+.form-control--value ~ .form-bar,
+.form-control:focus ~ .form-bar,
+.custom-field ~ .form-bar {
+  &::before,
+  &::after {
+    width: 50%;
+  }
+}
+
+.form-check ~ .form-bar,
+.input-radio ~ .form-bar {
+  display: none;
+}
+
 .checkbox-group,
-.radio-group {
+.input-radio {
   padding-top: 12px;
 }
 
-.form-control:focus {
+/* .form-control:focus {
   border-bottom: 1px solid $theme-color;
-}
+} */
 
 .custom-select {
   border-radius: 0;
@@ -90,10 +133,6 @@ $input-error-color: #dc3545;
   }
 }
 
-.datalist-input {
-  border-bottom: 1px solid $theme-color;
-}
-
 .custom-checkbox .custom-control-label {
   padding-left: 1rem;
 }