Create inline fields and disabled

src/components/mdInputContainer/mdInputContainer.scss

@@ -23,7 +23,7 @@ $input-size: 32px;
   label {
     position: absolute;
     top: 23px;
-    left: 2px;
+    left: 0;
     pointer-events: none;
     transition: $swift-ease-out;
     transition-duration: .3s;
@@ -35,11 +35,12 @@ $input-size: 32px;
   input {
     width: 100%;
     height: $input-size;
+    padding: 0;
     display: block;
     border: none;
     background: none;
     border-bottom: 1px solid rgba(#000, .12);
-    transition: .3s $swift-ease-out-timing-function;
+    transition: $swift-ease-out;
     transition-property: font-size, line-height;
     color: rgba(#000, .54);
     font-size: 0;
@@ -48,30 +49,56 @@ $input-size: 32px;
     &:focus {
       outline: none;
     }
-
-    &::-webkit-input-placeholder {
-      position: relative;
-      top: 6px;
-      color: rgba(#000, .54);
-      font-size: 16px;
-      line-height: $input-size;
-      text-shadow: none;
-      -webkit-text-fill-color: initial;
-    }
   }
 }
 
 .md-input-focused,
 .md-has-value {
+  label {
+    pointer-events: auto;
+    top: 0;
+    font-size: 12px;
+  }
+
   input {
     font-size: 16px;
     line-height: $input-size;
   }
+}
 
-  label {
-    pointer-events: auto;
-    top: 0;
-    left: 0;
-    font-size: 12px;
+.md-has-value {
+  input {
+    color: rgba(#000, .87);
+  }
+}
+
+.md-input-inline {
+  &.md-input-focused {
+    label {
+      top: 23px;
+      font-size: 16px;
+    }
+  }
+
+  &.md-has-value {
+    label {
+      opacity: 0;
+    }
+  }
+}
+
+.md-input-disabled {
+  label,
+  input {
+    color: rgba(#000, .38);
+  }
+
+  input {
+    color: rgba(#000, .38);
+    border-bottom-color: transparent;
+    background-image: linear-gradient(to right, rgba(#000, .38) 0%, rgba(#000, .38) 33%, transparent 0%);
+    background-position: bottom -1px left 0;
+    background-size: 4px 1px;
+    background-repeat: repeat-x;
   }
 }

src/components/mdInputContainer/mdInputContainer.theme

@@ -2,6 +2,12 @@
   .md-input-container,
   &.md-input-container {
     &.md-input-focused {
+      &.md-input-inline {
+        label {
+          color: rgba(#000, .54);
+        }
+      }
+
       &:after {
         height: 2px;
         background-color: PRIMARY-COLOR;
@@ -14,7 +20,6 @@
       }
 
       label {
-        opacity: 1;
         color: PRIMARY-COLOR;
       }
     }

src/components/mdInputContainer/mdInputContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-input-container">
+  <div class="md-input-container" :class="classes">
     <slot></slot>
   </div>
 </template>
@@ -8,10 +8,13 @@
 
 <script>
   let focusedClass = 'md-input-focused';
+  let inlineClass = 'md-input-inline';
+  let disabledClass = 'md-input-disabled';
   let hasValueClass = 'md-has-value';
 
   let focusBindFunction;
   let blurBindFunction;
+  let inputBindFunction;
 
   let manageHasValueClass = function(element, parent) {
     if (element.value.length > 0) {
@@ -21,7 +24,34 @@
     }
   };
 
+  let manageDisabled = function(disabled, element) {
+    if (disabled) {
+      element.setAttribute('disabled', 'true');
+    } else {
+      element.removeAttribute('disabled');
+    }
+  };
+
   export default {
+    props: {
+      mdInline: Boolean,
+      mdDisabled: Boolean
+    },
+    computed: {
+      classes() {
+        let cssClasses = [];
+
+        this.mdInline && cssClasses.push(inlineClass);
+        this.mdDisabled && cssClasses.push(disabledClass);
+
+        return cssClasses.join(' ');
+      }
+    },
+    watch: {
+      mdDisabled(disabled) {
+        manageDisabled(disabled, this.input);
+      }
+    },
     data() {
       return {
         input: false
@@ -41,10 +71,16 @@
         manageHasValueClass(this, container);
       };
 
+      inputBindFunction = function() {
+        manageHasValueClass(this, container);
+      };
+
       this.input.addEventListener('focus', focusBindFunction);
       this.input.addEventListener('blur', blurBindFunction);
+      this.input.addEventListener('input', inputBindFunction);
 
       manageHasValueClass(this.input, container);
+      manageDisabled(this.mdDisabled, this.input);
     }
   };
 </script>

src/docs/pages/Input.vue

@@ -2,11 +2,25 @@
   <section v-md-theme="'blue'">
     <md-input-container>
       <label>Username</label>
-      <input type="text" v-model="test" value="test">
+      <input type="text" value="test">
     </md-input-container>
 
-    <md-button class="md-icon-button" @click="togglePassword">
+    <md-input-container md-inline>
+      <label>Username</label>
+      <input type="text">
+    </md-input-container>
+
+    <md-input-container :md-disabled="disabledInput">
+      <label>Username</label>
+      <input type="text">
+    </md-input-container>
+
+    <!-- <md-button class="md-icon-button" @click="togglePassword">
       <md-icon>visibility</md-icon>
+    </md-button> -->
+
+    <md-button class="md-icon-button" @click="toggleDisabled">
+      <md-icon>visibility_off</md-icon>
     </md-button>
   </section>
 </template>
@@ -21,10 +35,13 @@
   export default {
     data() {
       return {
-        test: ''
+        disabledInput: false
       };
     },
     methods: {
+      toggleDisabled() {
+        this.disabledInput = !this.disabledInput;
+      },
       togglePassword() {
         let passwordField = document.querySelector('#password');
         let type = passwordField.type;