Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
May 7, 2019
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a96d6f
fix(label): use primary color on focus for md input labels
brandyscarney May 1, 2019
83b5ec7
style(item): remove some commented out CSS
brandyscarney May 1, 2019
5d76d1c
Merge branch 'master' into fix-input-label-focus
liamdebeasi May 6, 2019
3c31f17
style(label): move transition function to a scss variable
brandyscarney May 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 25 additions & 10 deletions core/src/components/input/test/spec/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
8 changes: 2 additions & 6 deletions core/src/components/item/item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
// --------------------------------------------------
Expand All @@ -287,6 +282,7 @@ button, a {
height: var(--inset-highlight-height);
}


// Item Input Focused
// --------------------------------------------------

Expand Down
11 changes: 10 additions & 1 deletion core/src/components/label/label.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,17 @@
:host(.label-stacked) {
@include transform-origin(start, top);
@include transform(translate3d(0, 50%, 0), scale(.75));

transition: color 150ms cubic-bezier(.4,0,.2,1);
}

: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 cubic-bezier(.4,0,.2,1),
brandyscarney marked this conversation as resolved.
Show resolved Hide resolved
transform 150ms cubic-bezier(.4,0,.2,1);
}

:host(.label-stacked),
Expand All @@ -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
// --------------------------------------------------
Expand Down