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;
}
ion-input[stacked-label],
ion-input[floating-label] {
flex-direction: column;
align-items: flex-start;
}
[stacked-label],
[floating-label] {
flex-direction: column;
align-items: flex-start;
ion-label {
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;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
[floating-label].input-focused ion-label,
[floating-label].input-has-value ion-label {
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: '';
}
ion-input.has-focus:after {
.input-focused:after {
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;
}
@ -59,8 +59,8 @@ ion-input.ng-invalid.ng-touched:after {
margin-left: 0;
}
[stacked-label].has-focus ion-label,
[floating-label].has-focus ion-label {
[stacked-label].input-focused ion-label,
[floating-label].input-focused ion-label {
color: $text-input-md-highlight-color;
}
@ -78,8 +78,8 @@ ion-input.ng-invalid.ng-touched:after {
transition: transform 150ms ease-in-out;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
[floating-label].input-focused ion-label,
[floating-label].input-has-value ion-label {
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">
</ion-input>
<ion-input floating-label class="has-value">
<ion-input floating-label class="input-has-value">
<ion-label>Floating Label 2</ion-label>
<input value="Has Value" type="text">
</ion-input>

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

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

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

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