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

floating labels

Browse Source
This commit is contained in:
Adam Bradley
2015-09-04 12:37:20 -05:00
parent b44c46dc59
commit f60084f16e
7 changed files with 120 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,9 +28,22 @@ ion-card[mode=ios] {
margin-bottom: 4px;
}
[stacked-label] .text-input {
[stacked-label] .text-input,
[floating-label] .text-input {
margin-top: 8px;
margin-bottom: 8px;
}
[floating-label] ion-label {
margin-bottom: 0;
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8);
}
}

18
ionic/components/text-input/modes/material.scss
View File

@ -43,14 +43,28 @@ ion-card[mode=md] {
margin-bottom: 0;
}
[stacked-label].has-focus ion-label {
[stacked-label].has-focus ion-label,
[floating-label].has-focus ion-label {
color: $text-input-highlight-color;
}
[stacked-label] .text-input {
[stacked-label] .text-input,
[floating-label] .text-input {
margin-bottom: 8px;
margin-top: 8px;
}
[floating-label] ion-label {
margin-bottom: 0;
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8);
}
}
.list[mode=md][inset] ion-input.item {