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(label): use primary color on focus for md input labels (#18183)

Browse Source 
fixes #15602
This commit is contained in:
Brandy Carney
2019-05-07 10:26:14 -04:00
committed by GitHub
parent 0c83fd3f1a
commit ddb8ef82f0
4 changed files with 42 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,13 +15,17 @@
:host(.label-stacked) {
@include transform-origin(start, top);
@include transform(translate3d(0, 50%, 0), scale(.75));
transition: color 150ms $label-md-transition-timing-function;
}
:host(.label-floating) {
@include transform(translate3d(0, 96%, 0));
@include transform-origin(start, top);
transition: transform 150ms cubic-bezier(.4,0,.2,1);
transition:
color 150ms $label-md-transition-timing-function,
transform 150ms $label-md-transition-timing-function;
}
:host(.label-stacked),
@ -39,6 +43,11 @@
@include transform(translate3d(0, 50%, 0), scale(.75));
}
:host-context(.item-has-focus).label-stacked,
:host-context(.item-has-focus).label-floating {
color: $label-md-text-color-focused;
}
// MD Typography
// --------------------------------------------------

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

@ -5,13 +5,13 @@
// --------------------------------------------------
/// @prop - Text color of the label by an input, select, or datetime
$label-md-text-color: $text-color-step-600 !default;
$label-md-text-color: $text-color-step-600 !default;
/// @prop - Text color of the stacked/floating label when it is focused
$label-md-text-color-focused: ion-color(primary, base) !default;
$label-md-text-color-focused: ion-color(primary, base) !default;
/// @prop - Line height of the label when the text wraps
$label-md-text-wrap-line-height: 1.5 !default;
$label-md-text-wrap-line-height: 1.5 !default;
/// @prop - Color of the item paragraph
$item-md-paragraph-text-color: $text-color-step-400 !default;
/// @prop - Transition timing function of the label (stacked / focused)
$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;