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(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

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

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

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;
}
.floating-label {
ion-label[floating] {
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
.stacked-label,
.floating-label {
ion-label[stacked],
ion-label[floating] {
margin-left: 0;
margin-bottom: 0;
}
.input-has-focus .stacked-label,
.input-has-focus .floating-label {
.input-has-focus ion-label[stacked],
.input-has-focus ion-label[floating] {
color: $label-md-text-color-focused;
}
.input-has-focus .floating-label,
.input-has-value .floating-label {
.input-has-focus ion-label[floating],
.input-has-value ion-label[floating] {
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] {
flex: 0;
flex: 0 0 30%;
width: 30%;
min-width: 100px;
max-width: 200px;