javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brandy Carney
2016-01-26 14:00:43 -05:00
committed by Adam Bradley
parent e76b55994c
commit 2fc975354a
11 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/input/input.ios.scss
View File

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

4
ionic/components/input/input.md.scss
View File

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

4
ionic/components/input/input.scss
View File

@ -35,6 +35,10 @@ ion-textarea {
@include placeholder(); @include placeholder();
} }
textarea.text-input {
display: block;
}
input.text-input:-webkit-autofill { input.text-input:-webkit-autofill {
background-color: transparent; background-color: transparent;

2
ionic/components/input/input.ts
View File

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

4
ionic/components/input/native-input.ts
View File

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

2
ionic/components/input/test/form-inputs/main.html
View File

@ -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> <ion-content>

1
ionic/components/item/item.scss
View File

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

15
ionic/components/label/label.ios.scss
View File

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

18
ionic/components/label/label.md.scss
View File

@ -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; font-size: 1.2rem;
} }
.floating-label { ion-label[floating] {
transform-origin: left top; transform-origin: left top;
transform: translate3d(0, 27px, 0); transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out;
} }
.stacked-label, ion-label[stacked],
.floating-label { ion-label[floating] {
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.input-has-focus .stacked-label, .input-has-focus ion-label[stacked],
.input-has-focus .floating-label { .input-has-focus ion-label[floating] {
color: $label-md-text-color-focused; color: $label-md-text-color-focused;
} }
.input-has-focus .floating-label, .input-has-focus ion-label[floating],
.input-has-value .floating-label { .input-has-value ion-label[floating] {
transform: translate3d(0, 0, 0) scale(0.8); transform: translate3d(0, 0, 0) scale(0.8);
} }

2
ionic/components/label/label.scss
View File

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

6
ionic/components/list/list.md.scss
View File

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