label colors

ionic/components/text-input/label.scss

@@ -0,0 +1,33 @@
+
+// Label
+// --------------------------------------------------
+
+
+ion-label {
+  display: block;
+  max-width: 200px;
+  font-size: inherit;
+  white-space: nowrap;
+}
+
+[fixed-label] ion-label {
+  width: 30%;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+ion-input[stacked-label] {
+  flex-direction: column;
+  align-items: flex-start;
+
+  ion-label {
+    align-self: stretch;
+    margin-bottom: 0;
+    max-width: 100%;
+  }
+
+  .text-input {
+    align-self: stretch;
+    width: auto;
+  }
+}

ionic/components/text-input/label.ts

@@ -0,0 +1,64 @@
+import {Directive} from 'angular2/angular2';
+
+import {IonicConfig} from '../../config/config';
+import {pointerCoord, hasPointerMoved} from '../../util/dom';
+
+/**
+ * TODO
+ */
+@Directive({
+  selector: 'ion-label',
+  properties: [
+    'id'
+  ],
+  host: {
+    '[attr.id]': 'id',
+    'class': 'input-label',
+    '(touchstart)': 'pointerStart($event)',
+    '(touchend)': 'pointerEnd($event)',
+    '(mousedown)': 'pointerStart($event)',
+    '(mouseup)': 'pointerEnd($event)'
+  }
+})
+export class Label {
+  /**
+   * TODO
+   * @param {IonicConfig} config
+   */
+  constructor(config: IonicConfig) {
+    this.scrollAssist = config.setting('keyboardScrollAssist');
+  }
+
+  /**
+   * TODO
+   * @param {TODO} ev  TODO
+   */
+  pointerStart(ev) {
+    if (this.scrollAssist) {
+      // remember where the touchstart/mousedown started
+      this.startCoord = pointerCoord(ev);
+    }
+  }
+
+  /**
+   * TODO
+   * @param {TODO} ev  TODO
+   */
+  pointerEnd(ev) {
+    if (this.container) {
+
+      // get where the touchend/mouseup ended
+      let endCoord = pointerCoord(ev);
+
+      // focus this input if the pointer hasn't moved XX pixels
+      if (!hasPointerMoved(20, this.startCoord, endCoord)) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.container.focus();
+      }
+
+      this.startCoord = null;
+    }
+  }
+
+}

ionic/components/text-input/modes/ios.scss

@@ -2,6 +2,8 @@
 // iOS Text Input
 // --------------------------------------------------
 
+$input-label-ios-color:         #7f7f7f !default;
+
 
 .list[mode=ios],
 ion-card[mode=ios] {
@@ -18,6 +20,7 @@ ion-card[mode=ios] {
 
   ion-label {
     margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
+    color: $input-label-ios-color;
   }
 
 }

ionic/components/text-input/modes/material.scss

@@ -2,6 +2,9 @@
 // Material Design Text Input
 // --------------------------------------------------
 
+$text-input-highlight-color:      map-get($colors, primary) !default;
+$input-label-md-color:            #999 !default;
+
 
 .list[mode=md],
 ion-card[mode=md] {
@@ -18,14 +21,15 @@ ion-card[mode=md] {
 
   ion-label {
     margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
+    color: $input-label-md-color;
   }
 
   ion-input.has-focus:after {
-    border-top: 2px solid blue;
+    border-top: 2px solid $text-input-highlight-color;
   }
 
   ion-input.has-focus + ion-input:before {
-    border-top-color: blue;
+    border-top-color: $text-input-highlight-color;
   }
 
 }

ionic/components/text-input/text-input.ts

@@ -3,7 +3,7 @@ import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList
 import {IonicDirective} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
 import {IonInput} from '../form/input';
-import {Label} from '../form/label';
+import {Label} from './label';
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';