From 2fc975354a7b4bbc17aef8df58b32ee8d2c43b15 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 26 Jan 2016 14:00:43 -0500 Subject: [PATCH] fix(input): clean up CSS on inputs and labels --- ionic/components/input/input.ios.scss | 5 +++-- ionic/components/input/input.md.scss | 4 ++-- ionic/components/input/input.scss | 6 +++++- ionic/components/input/input.ts | 2 ++ ionic/components/input/native-input.ts | 4 ++++ .../input/test/form-inputs/main.html | 2 +- ionic/components/item/item.scss | 1 - ionic/components/label/label.ios.scss | 15 +++++---------- ionic/components/label/label.md.scss | 18 +++++++++--------- ionic/components/label/label.scss | 2 +- ionic/components/list/list.md.scss | 6 +----- 11 files changed, 33 insertions(+), 32 deletions(-) diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss index c95d93bb55..6062b319ef 100644 --- a/ionic/components/input/input.ios.scss +++ b/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; } diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss index 357cdfb67a..68e83a3fa9 100644 --- a/ionic/components/input/input.md.scss +++ b/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; diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss index 073a86aaec..4e83f603c6 100644 --- a/ionic/components/input/input.scss +++ b/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; -} \ No newline at end of file +} diff --git a/ionic/components/input/input.ts b/ionic/components/input/input.ts index 763d905435..3db192ea87 100644 --- a/ionic/components/input/input.ts +++ b/ionic/components/input/input.ts @@ -222,6 +222,8 @@ export class TextInputBase { this.onTouched(textInputHasFocus); } }); + + this.checkHasValue(nativeInput.getValue()); } /** diff --git a/ionic/components/input/native-input.ts b/ionic/components/input/native-input.ts index 16bed35236..55df00643c 100644 --- a/ionic/components/input/native-input.ts +++ b/ionic/components/input/native-input.ts @@ -113,6 +113,10 @@ export class NativeInput { return hasFocus(this.element()); } + getValue(): string { + return this.element().value; + } + /** * @private */ diff --git a/ionic/components/input/test/form-inputs/main.html b/ionic/components/input/test/form-inputs/main.html index c010237b79..6efa711fe3 100644 --- a/ionic/components/input/test/form-inputs/main.html +++ b/ionic/components/input/test/form-inputs/main.html @@ -1,5 +1,5 @@ -Inline Label Text Input +Form Inputs diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 0ea7f6823e..37f43a28ef 100644 --- a/ionic/components/item/item.scss +++ b/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; diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss index b9b904c128..c07280e7b6 100644 --- a/ionic/components/label/label.ios.scss +++ b/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 // -------------------------------------------------- diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss index d98fae4d58..78609f2dc1 100644 --- a/ionic/components/label/label.md.scss +++ b/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); } diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss index 5add0dd4e1..7aedbed7ad 100644 --- a/ionic/components/label/label.scss +++ b/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; diff --git a/ionic/components/list/list.md.scss b/ionic/components/list/list.md.scss index 3820ee78bb..68ed986f4b 100644 --- a/ionic/components/list/list.md.scss +++ b/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] {