fix(input): clean up CSS on inputs and labels

ionic/components/input/input.ios.scss

@@ -33,8 +33,9 @@ $text-input-ios-input-clear-icon-size:     18px !default;
 // iOS Stacked & Floating Inputs
 // --------------------------------------------------
 
-.stacked-input,
-.floating-input {
+.item-label-stacked .text-input,
+.item-label-floating .text-input {
+  margin-left: 0;
   margin-top: 8px;
   margin-bottom: 8px;
 }

ionic/components/input/input.md.scss

@@ -64,8 +64,8 @@ ion-input.ng-invalid.ng-touched:after {
 // Material Design Stacked & Floating Inputs
 // --------------------------------------------------
 
-.stacked-input,
-.floating-input {
+.item-label-stacked .text-input,
+.item-label-floating .text-input {
   margin-left: 0;
   margin-top: 8px;
   margin-bottom: 8px;

ionic/components/input/input.scss

@@ -35,6 +35,10 @@ ion-textarea {
   @include placeholder();
 }
 
+textarea.text-input {
+  display: block;
+}
+
 
 input.text-input:-webkit-autofill {
   background-color: transparent;
@@ -109,4 +113,4 @@ input.text-input:-webkit-autofill {
   position: absolute;
   top: 0;
   pointer-events: none;
-}
+}

ionic/components/input/input.ts

@@ -222,6 +222,8 @@ export class TextInputBase {
         this.onTouched(textInputHasFocus);
       }
     });
+
+    this.checkHasValue(nativeInput.getValue());
   }
 
   /**

ionic/components/input/native-input.ts

@@ -113,6 +113,10 @@ export class NativeInput {
     return hasFocus(this.element());
   }
 
+  getValue(): string {
+    return this.element().value;
+  }
+
   /**
    * @private
    */

ionic/components/input/test/form-inputs/main.html

@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Inline Label Text Input</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Form Inputs</ion-title></ion-toolbar>
 
 
 <ion-content>

ionic/components/item/item.scss

@@ -62,7 +62,6 @@ ion-item-divider {
 
 ion-label {
   margin: 0;
-  flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

ionic/components/label/label.ios.scss

@@ -22,7 +22,7 @@ ion-label {
   color: $label-ios-text-color;
 }
 
-.item-input ion-label + .item-input {
+ion-label + ion-input .text-input {
   margin-left: $item-ios-padding-left;
 }
 
@@ -30,28 +30,23 @@ ion-label {
 // iOS Stacked & Floating Labels
 // --------------------------------------------------
 
-.stacked-label {
+ion-label[stacked] {
   font-size: 1.2rem;
   margin-bottom: 4px;
 }
 
-.floating-label {
+ion-label[floating] {
   margin-bottom: 0;
   transform-origin: left top;
   transform: translate3d(0, 27px, 0);
   transition: transform 150ms ease-in-out;
 }
 
-.input-has-focus .floating-label,
-.input-has-value .floating-label {
+.input-has-focus ion-label[floating],
+.input-has-value ion-label[floating] {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
-.item-input ion-label + .stacked-input,
-.item-input ion-label + .floating-input {
-  margin-left: 0;
-}
-
 
 // Generate iOS Label colors
 // --------------------------------------------------

ionic/components/label/label.md.scss

@@ -25,32 +25,32 @@ ion-label {
 }
 
 
-// Material Design Stacked & Floating Labela
+// Material Design Stacked & Floating Labels
 // --------------------------------------------------
 
-.stacked-label {
+ion-label[stacked] {
   font-size: 1.2rem;
 }
 
-.floating-label {
+ion-label[floating] {
   transform-origin: left top;
   transform: translate3d(0, 27px, 0);
   transition: transform 150ms ease-in-out;
 }
 
-.stacked-label,
-.floating-label {
+ion-label[stacked],
+ion-label[floating] {
   margin-left: 0;
   margin-bottom: 0;
 }
 
-.input-has-focus .stacked-label,
-.input-has-focus .floating-label {
+.input-has-focus ion-label[stacked],
+.input-has-focus ion-label[floating] {
   color: $label-md-text-color-focused;
 }
 
-.input-has-focus .floating-label,
-.input-has-value .floating-label  {
+.input-has-focus ion-label[floating],
+.input-has-value ion-label[floating]  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 

ionic/components/label/label.scss

@@ -20,7 +20,7 @@ ion-label {
 // --------------------------------------------------
 
 ion-label[fixed] {
-  flex: 0;
+  flex: 0 0 30%;
   width: 30%;
   min-width: 100px;
   max-width: 200px;

ionic/components/list/list.md.scss

@@ -116,13 +116,9 @@ ion-list[inset] {
     border-bottom-left-radius: $list-inset-md-border-radius;
   }
 
-  ion-input.item {
+  .item-input {
     padding-right: 0;
     padding-left: 0;
-
-    &:after {
-      left: 0;
-    }
   }
 
   + ion-list[inset] {