Skip to content
Permalink
Browse files

fix(label): use primary color on focus for md input labels (#18183)

fixes #15602
  • Loading branch information...
brandyscarney committed May 7, 2019
1 parent 0c83fd3 commit ddb8ef82f0b2d92d1158c293550e3646507c1bd5
@@ -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>
@@ -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
// --------------------------------------------------

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

0 comments on commit ddb8ef8

Please sign in to comment.
You can’t perform that action at this time.