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

fix(text-input): added highlight colors for valid/invalid forms, updated sass variable names

Browse Source 
references #678
This commit is contained in:
Brandy Carney
2015-12-02 19:28:35 -05:00
parent 6cba1b0f89
commit 357074502b
2 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/list/modes/md.scss
View File

@@ -56,7 +56,7 @@ ion-list {
}
}
> ion-input.has-focus:last-child:after {
> ion-input:last-child:after {
left: 0;
}

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

@@ -3,8 +3,11 @@
// Material Design Text Input
// --------------------------------------------------
$text-input-highlight-color: map-get($colors, primary) !default;
$input-label-md-color: #999 !default;
$text-input-highlight-color: color(primary) !default;
$text-input-label-md-color: #999 !default;
$text-input-hightlight-color-valid: color(secondary) !default;
$text-input-hightlight-color-invalid: color(danger) !default;
[text-input] {
@@ -12,11 +15,6 @@ $input-label-md-color: #999 !default;
padding: 0;
}
ion-input.item:before,
ion-input.item:after {
left: 0;
}
ion-input[inset] [text-input] {
margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
@@ -24,18 +22,30 @@ ion-input[inset] [text-input] {
ion-label {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
color: $input-label-md-color;
color: $text-input-label-md-color;
}
ion-input.has-focus:after {
ion-input:after {
position: absolute;
bottom: 0;
right: 0;
left: $item-md-padding-left;
border-bottom: 2px solid $text-input-highlight-color;
border-bottom: 2px solid transparent;
content: '';
}
ion-input.has-focus:after {
border-bottom: 2px solid $text-input-highlight-color;
}
ion-input.ng-valid.has-value:after {
border-bottom: 2px solid $text-input-hightlight-color-valid;
}
ion-input.ng-invalid.ng-touched:after {
border-bottom: 2px solid $text-input-hightlight-color-invalid;
}
[stacked-label] ion-label {
font-size: 1.2rem;
margin-bottom: 0;