javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(textarea): update label alignment for inputs and textareas (#18042)

Browse Source 
- aligns label and textarea to baseline
- updates floating and stacked labels in items to align closer to the md spec

fixes #16187
This commit is contained in:
Brandy Carney
2019-04-16 14:57:32 -04:00
committed by GitHub
parent 72be80cb58
commit 38ae3620a2
10 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/label/label.ios.scss
View File

@ -33,6 +33,12 @@
color: $label-ios-text-color-focused;
}
:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating {
@include transform(translate3d(0, 0, 0), scale(.8));
}
// iOS Typography
// --------------------------------------------------

19
core/src/components/label/label.md.scss
View File

@ -13,19 +13,30 @@
// --------------------------------------------------
:host(.label-stacked) {
font-size: 12.8px;
@include transform-origin(start, top);
@include transform(translate3d(0, 50%, 0), scale(.75));
}
:host(.label-floating) {
@include transform(translate3d(0, 27px, 0));
@include transform(translate3d(0, 96%, 0));
@include transform-origin(start, top);
transition: transform 150ms ease-in-out;
transition: transform 150ms cubic-bezier(.4,0,.2,1);
}
:host(.label-stacked),
:host(.label-floating) {
@include margin(null, null, 0, 0);
@include margin(0, 0, 0, 0);
}
:host-context(.item-select).label-floating {
@include transform(translate3d(0, 130%, 0));
}
:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating {
@include transform(translate3d(0, 50%, 0), scale(.75));
}

10
core/src/components/label/label.scss
View File

@ -46,6 +46,10 @@
pointer-events: none;
}
:host-context(.item-textarea) {
align-self: baseline;
}
// Fixed Inputs
// --------------------------------------------------
@ -71,12 +75,6 @@
max-width: 100%;
}
:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating {
@include transform(translate3d(0, 0, 0), scale(.8));
}
:host(.label-no-animate.label-floating) {
transition: none;
}