diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss index fd3074fdb4..df83042b56 100644 --- a/ionic/components.ios.scss +++ b/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", diff --git a/ionic/components.md.scss b/ionic/components.md.scss index c23171cd42..6007d622d3 100644 --- a/ionic/components.md.scss +++ b/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", diff --git a/ionic/components.ts b/ionic/components.ts index 832d43e319..5e060158f7 100644 --- a/ionic/components.ts +++ b/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' diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss new file mode 100644 index 0000000000..4495c0c85a --- /dev/null +++ b/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; + } +} diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss new file mode 100644 index 0000000000..18f981ad6e --- /dev/null +++ b/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; + } +} diff --git a/ionic/components/text-input/label.scss b/ionic/components/label/label.scss similarity index 100% rename from ionic/components/text-input/label.scss rename to ionic/components/label/label.scss diff --git a/ionic/components/text-input/label.ts b/ionic/components/label/label.ts similarity index 97% rename from ionic/components/text-input/label.ts rename to ionic/components/label/label.ts index 7eb7170fba..668ed560a1 100644 --- a/ionic/components/text-input/label.ts +++ b/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'; diff --git a/ionic/components/text-input/text-input.ios.scss b/ionic/components/text-input/text-input.ios.scss index 2301af039f..65a74e438c 100644 --- a/ionic/components/text-input/text-input.ios.scss +++ b/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; - } -} diff --git a/ionic/components/text-input/text-input.md.scss b/ionic/components/text-input/text-input.md.scss index 5a42d84898..f090bfc143 100644 --- a/ionic/components/text-input/text-input.md.scss +++ b/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; - } -} diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index ff080122fe..6caa5595af 100644 --- a/ionic/config/directives.ts +++ b/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'; diff --git a/scripts/docs/templates/api_menu_version.template.html b/scripts/docs/templates/api_menu_version.template.html index f9a387b32f..000a8dd4aa 100644 --- a/scripts/docs/templates/api_menu_version.template.html +++ b/scripts/docs/templates/api_menu_version.template.html @@ -176,7 +176,7 @@
  • - + Label