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

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

@ -181,7 +181,7 @@ button, a {
display: flex; display: flex;
/* This is required to work with an inset highlight */ // This is required to work with an inset highlight
position: relative; position: relative;
flex: 1; flex: 1;
@ -261,11 +261,6 @@ button, a {
flex-direction: column; 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 // Item Input Highlight
// -------------------------------------------------- // --------------------------------------------------
@ -287,6 +282,7 @@ button, a {
height: var(--inset-highlight-height); height: var(--inset-highlight-height);
} }
// Item Input Focused // Item Input Focused
// -------------------------------------------------- // --------------------------------------------------

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

@ -15,13 +15,17 @@
:host(.label-stacked) { :host(.label-stacked) {
@include transform-origin(start, top); @include transform-origin(start, top);
@include transform(translate3d(0, 50%, 0), scale(.75)); @include transform(translate3d(0, 50%, 0), scale(.75));
transition: color 150ms $label-md-transition-timing-function;
} }
:host(.label-floating) { :host(.label-floating) {
@include transform(translate3d(0, 96%, 0)); @include transform(translate3d(0, 96%, 0));
@include transform-origin(start, top); @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), :host(.label-stacked),
@ -39,6 +43,11 @@
@include transform(translate3d(0, 50%, 0), scale(.75)); @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 // 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 /// @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 /// @prop - Transition timing function of the label (stacked / focused)
$item-md-paragraph-text-color: $text-color-step-400 !default; $label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;