google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make labels interact better with placeholders in textfields. Fixes #243.

master
Sérgio Gomes 2016-03-04 14:58:13 +00:00
parent f2b551d9fc
commit ef2260fdbd
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/textfield/_textfield.scss
View File

@ -113,7 +113,8 @@
white-space: nowrap;
text-align: left;
.mdl-textfield.is-dirty & {
.mdl-textfield.is-dirty &,
.mdl-textfield.has-placeholder & {
visibility: hidden;
}
@ -122,13 +123,18 @@
@include material-animation-default();
}
.mdl-textfield--floating-label.has-placeholder & {
transition: none;
}
fieldset[disabled] .mdl-textfield &,
.mdl-textfield.is-disabled.is-disabled & {
color: $input-text-disabled-text-color;
}
.mdl-textfield--floating-label.is-focused &,
.mdl-textfield--floating-label.is-dirty & {
.mdl-textfield--floating-label.is-dirty &,
.mdl-textfield--floating-label.has-placeholder & {
color: $input-text-highlight-color;
font-size : $input-text-floating-label-fontsize;
top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
@ -136,7 +142,8 @@
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder &,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &{
.mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder & {
top: -($input-text-floating-label-fontsize + $input-text-padding);
}

7
src/textfield/textfield.js
View File

@ -60,7 +60,8 @@
IS_FOCUSED: 'is-focused',
IS_DISABLED: 'is-disabled',
IS_INVALID: 'is-invalid',
IS_UPGRADED: 'is-upgraded'
IS_UPGRADED: 'is-upgraded',
HAS_PLACEHOLDER: 'has-placeholder'
};
/**
@ -238,6 +239,10 @@
}
}
if (this.input_.hasAttribute('placeholder')) {
this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER);
}
this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
this.boundFocusHandler = this.onFocus_.bind(this);
this.boundBlurHandler = this.onBlur_.bind(this);