javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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

35
core/src/components/input/test/spec/index.html
View File

@ -15,37 +15,41 @@
<ion-app>
<ion-content class="ion-padding">
<ion-item>
<ion-label position="floating">Standard</ion-label>
<ion-label position="floating">Floating: input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Standard</ion-label>
<ion-item class="item-has-focus">
<ion-label position="floating">Floating: input focused value</ion-label>
<ion-input value="value"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-label position="stacked">Stacked: input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-label position="stacked">Stacked: input value</ion-label>
<ion-input value="value"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-label position="floating">Floating: textarea</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-label position="floating">Floating: textarea value</ion-label>
<ion-textarea value="value"></ion-textarea>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-label position="stacked">Stacked: textarea</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-item class="item-has-focus">
<ion-label position="stacked">Stacked: textarea focused value</ion-label>
<ion-textarea value="value"></ion-textarea>
</ion-item>
<ion-item class="custom item-has-focus">
<ion-label position="stacked">Stacked: textarea focus</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
</ion-content>
@ -54,6 +58,17 @@
--background: #f5f5f5;
}
.custom {
--background: lightblue;
}
.custom ion-label {
color: white !important;
}
.custom.item-has-focus ion-label {
color: purple !important;
}
</style>
</ion-app>
</body>

8
core/src/components/item/item.scss
View File

@ -181,7 +181,7 @@ button, a {
display: flex;
/* This is required to work with an inset highlight */
// This is required to work with an inset highlight
position: relative;
flex: 1;
@ -261,11 +261,6 @@ button, a {
flex-direction: column;
}
// :host(.item-input-has-focus) a,
// :host(.item-input-has-focus) button,
// :host(.item-input-has-focus) textarea {
// pointer-events: auto;
// }
// Item Input Highlight
// --------------------------------------------------
@ -287,6 +282,7 @@ button, a {
height: var(--inset-highlight-height);
}
// Item Input Focused
// --------------------------------------------------

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

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

@ -13,5 +13,5 @@ $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;
/// @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;