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.

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(input): Fix floating label width #689

Merged
merged 7 commits into from
Jun 21, 2016
Merged
Changes from 3 commits
Commits
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
4 changes: 3 additions & 1 deletion src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
visibility: visible;
padding-bottom: 5px;
transform: translateY(-100%) scale(0.75);

transition: width 150ms ease-in-out;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this will overwrite or be overwritten by the transition already on the .md-input-placeholder. The transition should be added to line 125 AND use material transition functions.

width: 133%; // 100/75 of the original space now available
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of magic number, please use a scale constant and make the width 100% / placeholderScaleFactor.

Also please transition the width as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not a magic number. It is just 100% / placeholderScaleFactor. 100/75=1.33

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I'm saying is that this is a good time to move the 0.75 out into a variable and use that variable in the width calculation. This will clean up stuff and make it clear what the intent is. The comment 100 / 75 doesn't tell us anything about where 75 came from. Nor what is the purpose of 75.

Also, if we change the 0.75 scale, we can't possibly know what else to change.


.md-placeholder-required {
color: $md-input-required-placeholder-color;
}
Expand Down