refactor(label): move label to its own folder and move mode specific styles for label to new files

closes #712

ionic/components.ios.scss

@@ -13,6 +13,7 @@
   "components/checkbox/checkbox.ios",
   "components/content/content.ios",
   "components/item/item.ios",
+  "components/label/label.ios",
   "components/list/list.ios",
   "components/menu/menu.ios",
   "components/modal/modal.ios",

ionic/components.md.scss

@@ -13,6 +13,7 @@
   "components/checkbox/checkbox.md",
   "components/content/content.md",
   "components/item/item.md",
+  "components/label/label.md",
   "components/list/list.md",
   "components/menu/menu.md",
   "components/modal/modal.md",

ionic/components.ts

@@ -13,7 +13,7 @@ export * from './components/menu/menu-types'
 export * from './components/menu/menu-toggle'
 export * from './components/menu/menu-close'
 export * from './components/text-input/text-input'
-export * from './components/text-input/label'
+export * from './components/label/label'
 export * from './components/list/list'
 export * from './components/show-hide-when/show-hide-when'
 export * from './components/modal/modal'

ionic/components/label/label.ios.scss

@@ -0,0 +1,55 @@
+@import "../../globals.ios";
+@import "./label";
+
+// iOS Label
+// --------------------------------------------------
+
+$label-ios-text-color:         #7f7f7f !default;
+
+// Default Label
+// --------------------------------------------------
+
+ion-label {
+  margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
+  color: $label-ios-text-color;
+}
+
+ion-label + .item-input {
+  margin-left: $item-ios-padding-left;
+}
+
+
+// Stacked & Floating Labels
+// --------------------------------------------------
+
+.stacked-label {
+  font-size: 1.2rem;
+  margin-bottom: 4px;
+}
+
+.floating-label {
+  margin-bottom: 0;
+  transform-origin: left top;
+  transform: translate3d(0, 27px, 0);
+  transition: transform 150ms ease-in-out;
+}
+
+.input-focused .floating-label,
+.input-has-value .floating-label {
+  transform: translate3d(0, 0, 0) scale(0.8);
+}
+
+ion-label + .stacked-input,
+ion-label + .floating-input {
+  margin-left: 0;
+}
+
+
+// Generate iOS Label colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  ion-label[#{$color-name}] {
+    color: $color-value !important;
+  }
+}

ionic/components/label/label.md.scss

@@ -0,0 +1,56 @@
+@import "../../globals.md";
+@import "./label";
+
+// Material Design Label
+// --------------------------------------------------
+
+$label-md-text-color:                 #999 !default;
+
+
+// Default Label
+// --------------------------------------------------
+
+ion-label {
+  margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
+  color: $label-md-text-color;
+}
+
+
+// Stacked & Floating Labela
+// --------------------------------------------------
+
+.stacked-label {
+  font-size: 1.2rem;
+}
+
+.floating-label {
+  transform-origin: left top;
+  transform: translate3d(0, 27px, 0);
+  transition: transform 150ms ease-in-out;
+}
+
+.stacked-label,
+.floating-label {
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+.input-focused .stacked-label,
+.input-focused .floating-label {
+  color: $text-input-md-highlight-color;
+}
+
+.input-focused .floating-label,
+.input-has-value .floating-label  {
+  transform: translate3d(0, 0, 0) scale(0.8);
+}
+
+
+// Generate Material Design Label colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  ion-label[#{$color-name}] {
+    color: $color-value !important;
+  }
+}

ionic/components/label/label.ts

@@ -1,7 +1,7 @@
 import {Directive, Optional, ElementRef, Renderer} from 'angular2/core';
 
 import {Config} from '../../config/config';
-import {TextInput} from './text-input';
+import {TextInput} from '../text-input/text-input';
 import {pointerCoord, hasPointerMoved} from '../../util/dom';
 import {Form} from '../../util/form';
 

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

@@ -1,12 +1,10 @@
 @import "../../globals.ios";
-@import "./label";
 @import "./text-input";
 
 // iOS Text Input
 // --------------------------------------------------
 
 $text-input-ios-background-color:    $list-ios-background-color !default;
-$text-input-ios-label-color:         #7f7f7f !default;
 
 
 // Default Input
@@ -18,15 +16,6 @@ $text-input-ios-label-color:         #7f7f7f !default;
   background-color: $text-input-ios-background-color;
 }
 
-ion-label {
-  margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
-  color: $text-input-ios-label-color;
-}
-
-ion-label + .item-input {
-  margin-left: $item-ios-padding-left;
-}
-
 
 // Inset Input
 // --------------------------------------------------
@@ -40,40 +29,8 @@ ion-label + .item-input {
 // Stacked & Floating Inputs
 // --------------------------------------------------
 
-.stacked-label {
-  font-size: 1.2rem;
-  margin-bottom: 4px;
-}
-
-.floating-label {
-  margin-bottom: 0;
-  transform-origin: left top;
-  transform: translate3d(0, 27px, 0);
-  transition: transform 150ms ease-in-out;
-}
-
 .stacked-input,
 .floating-input {
   margin-top: 8px;
   margin-bottom: 8px;
 }
-
-.input-focused .floating-label,
-.input-has-value .floating-label {
-  transform: translate3d(0, 0, 0) scale(0.8);
-}
-
-ion-label + .stacked-input,
-ion-label + .floating-input {
-  margin-left: 0;
-}
-
-
-// Generate iOS label colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  ion-label[#{$color-name}] {
-    color: $color-value !important;
-  }
-}

ionic/components/text-input/text-input.md.scss

@@ -1,12 +1,10 @@
 @import "../../globals.md";
-@import "./label";
 @import "./text-input";
 
 // Material Design Text Input
 // --------------------------------------------------
 
 $text-input-md-background-color:            $list-md-background-color !default;
-$text-input-md-label-color:                 #999 !default;
 $text-input-md-highlight-color:             map-get($colors-md, primary) !default;
 $text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !default;
 $text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
@@ -21,11 +19,6 @@ $text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default
   background-color: $text-input-md-background-color;
 }
 
-ion-label {
-  margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
-  color: $text-input-md-label-color;
-}
-
 
 // Inset Input
 // --------------------------------------------------
@@ -66,45 +59,9 @@ ion-input.ng-invalid.ng-touched:after {
 // Stacked & Floating Inputs
 // --------------------------------------------------
 
-.stacked-label {
-  font-size: 1.2rem;
-}
-
-.floating-label {
-  transform-origin: left top;
-  transform: translate3d(0, 27px, 0);
-  transition: transform 150ms ease-in-out;
-}
-
-.stacked-label,
-.floating-label {
-  margin-left: 0;
-  margin-bottom: 0;
-}
-
 .stacked-input,
 .floating-input {
   margin-left: 0;
   margin-top: 8px;
   margin-bottom: 8px;
 }
-
-.input-focused .stacked-label,
-.input-focused .floating-label {
-  color: $text-input-md-highlight-color;
-}
-
-.input-focused .floating-label,
-.input-has-value .floating-label  {
-  transform: translate3d(0, 0, 0) scale(0.8);
-}
-
-
-// Generate Material Design label colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  ion-label[#{$color-name}] {
-    color: $color-value !important;
-  }
-}

ionic/config/directives.ts

@@ -21,7 +21,7 @@ import {Icon} from '../components/icon/icon';
 import {Checkbox} from '../components/checkbox/checkbox';
 import {Toggle} from '../components/toggle/toggle';
 import {TextInput, TextInputElement} from '../components/text-input/text-input';
-import {Label} from '../components/text-input/label';
+import {Label} from '../components/label/label';
 import {Segment, SegmentButton} from '../components/segment/segment';
 import {RadioGroup, RadioButton} from '../components/radio/radio';
 import {Searchbar, SearchbarInput} from '../components/searchbar/searchbar';