Skip to content

fix(input): Fix floating label width #689

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

Merged
merged 7 commits into from
Jun 21, 2016
Merged

fix(input): Fix floating label width #689

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
12d1838
fix(input): Fix floating label width
jean-merelis Jun 15, 2016
d3bb9f6
transition width
jean-merelis Jun 15, 2016
1eca960
fix transition width
jean-merelis Jun 15, 2016
5d34583
fix transition width
jean-merelis Jun 15, 2016
e2deb54
moves the placeholder-scale-factor out into a variable
jean-merelis Jun 18, 2016
a60b3e2
move the variable to input.scss and removes calc function
jean-merelis Jun 21, 2016
8c20c1a
add overflow:hidden to the :host
jean-merelis Jun 21, 2016
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
7 changes: 4 additions & 3 deletions src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@import 'mixins';
@import 'variables';


// Placeholder colors. Required is used for the `*` star shown in the placeholder.
$md-input-placeholder-color: md-color($md-foreground, hint-text);
$md-input-floating-placeholder-color: md-color($md-primary);
Expand Down Expand Up @@ -33,7 +32,8 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
@mixin md-input-placeholder-floating {
visibility: visible;
padding-bottom: 5px;
transform: translateY(-100%) scale(0.75);
transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor);
width: calc(100% / #{$md-input-floating-placeholder-scale-factor});
Copy link
Contributor

Choose a reason for hiding this comment

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

No need for calc() AFAIK.


.md-placeholder-required {
color: $md-input-required-placeholder-color;
Expand Down Expand Up @@ -120,7 +120,8 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
transform-origin: bottom left;
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
scale $swift-ease-out-duration $swift-ease-out-timing-function,
color $swift-ease-out-duration $swift-ease-out-timing-function;
color $swift-ease-out-duration $swift-ease-out-timing-function,
width $swift-ease-out-duration $swift-ease-out-timing-function;

&.md-empty {
visibility: visible;
Expand Down
3 changes: 3 additions & 0 deletions src/core/style/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ $md-toggle-padding: 8px !default;
// Width and height of input toggles
$md-toggle-size: 20px !default;


$md-input-floating-placeholder-scale-factor: 0.75 !default;
Copy link
Contributor

Choose a reason for hiding this comment

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

Variables that are specific to a single component should live in that component's SCSS.

Just move this to the file where it's used.


// Easing Curves
// TODO(jelbourn): all of these need to be revisited

Expand Down