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

refactor(text-input): renamed some classes and removed some nesting

Browse Source 
references #689
This commit is contained in:
Brandy Carney
2015-12-08 15:44:11 -05:00
parent 6a7f5fadc9
commit abc93bc355
6 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/text-input/label.scss
View File

@ -18,14 +18,10 @@ ion-label {
max-width: 200px; max-width: 200px;
} }
ion-input[stacked-label],
ion-input[floating-label] {
flex-direction: column;
align-items: flex-start;
}
[stacked-label], [stacked-label],
[floating-label] { [floating-label] {
flex-direction: column;
align-items: flex-start;
ion-label { ion-label {
align-self: stretch; align-self: stretch;

4
ionic/components/text-input/modes/ios.scss
View File

@ -48,8 +48,8 @@ ion-label + [text-input] {
transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out;
} }
[floating-label].has-focus ion-label, [floating-label].input-focused ion-label,
[floating-label].has-value ion-label { [floating-label].input-has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8); transform: translate3d(0, 0, 0) scale(0.8);
} }

12
ionic/components/text-input/modes/md.scss
View File

@ -37,11 +37,11 @@ ion-input:after {
content: ''; content: '';
} }
ion-input.has-focus:after { .input-focused:after {
border-bottom: 2px solid $text-input-md-highlight-color; border-bottom: 2px solid $text-input-md-highlight-color;
} }
ion-input.ng-valid.has-value:after { ion-input.ng-valid.input-has-value:after {
border-bottom: 2px solid $text-input-md-hightlight-color-valid; border-bottom: 2px solid $text-input-md-hightlight-color-valid;
} }
@ -59,8 +59,8 @@ ion-input.ng-invalid.ng-touched:after {
margin-left: 0; margin-left: 0;
} }
[stacked-label].has-focus ion-label, [stacked-label].input-focused ion-label,
[floating-label].has-focus ion-label { [floating-label].input-focused ion-label {
color: $text-input-md-highlight-color; color: $text-input-md-highlight-color;
} }
@ -78,8 +78,8 @@ ion-input.ng-invalid.ng-touched:after {
transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out;
} }
[floating-label].has-focus ion-label, [floating-label].input-focused ion-label,
[floating-label].has-value ion-label { [floating-label].input-has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8); transform: translate3d(0, 0, 0) scale(0.8);
} }

2
ionic/components/text-input/test/floating-labels/main.html
View File

@ -11,7 +11,7 @@
<input type="text"> <input type="text">
</ion-input> </ion-input>
<ion-input floating-label class="has-value"> <ion-input floating-label class="input-has-value">
<ion-label>Floating Label 2</ion-label> <ion-label>Floating Label 2</ion-label>
<input value="Has Value" type="text"> <input value="Has Value" type="text">
</ion-input> </ion-input>

2
ionic/components/text-input/text-input.scss
View File

@ -34,7 +34,7 @@ ion-input [text-input] {
pointer-events: none; pointer-events: none;
} }
ion-input.has-focus [text-input] { .input-focused [text-input] {
pointer-events: auto; pointer-events: auto;
} }

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

@ -372,7 +372,7 @@ export class TextInput {
* @private * @private
*/ */
focusChange(hasFocus) { focusChange(hasFocus) {
this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus); this.renderer.setElementClass(this.elementRef, 'input-focused', hasFocus);
if (!hasFocus) { if (!hasFocus) {
this.deregMove(); this.deregMove();
this.input.hideFocus(false); this.input.hideFocus(false);
@ -383,7 +383,7 @@ export class TextInput {
* @private * @private
*/ */
hasValue(inputValue) { hasValue(inputValue) {
this.renderer.setElementClass(this.elementRef, 'has-value', inputValue && inputValue !== ''); this.renderer.setElementClass(this.elementRef, 'input-has-value', inputValue && inputValue !== '');
} }
/** /**