Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

fix(textfield): Fix textarea label from overlapping border. #1715

Merged
merged 13 commits into from
Jan 10, 2018
Merged

fix(textfield): Fix textarea label from overlapping border. #1715

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
88114ab
fix(textfield): Fix textarea label from overlapping border.
Dec 7, 2017
a9fd7b7
Merge branch 'master' into fix/textarea/label-overlap
Dec 7, 2017
6031890
Merge branch 'master' into fix/textarea/label-overlap
Dec 12, 2017
ff61672
fix(textfield): fixed css textarea resize handle not updating border.…
Dec 12, 2017
a7d7217
Merge branch 'master' into fix/textarea/label-overlap
Dec 12, 2017
08299f9
fix(textfield): textarea lint fixes
Dec 12, 2017
48c8568
Merge branch 'master' into fix/textarea/label-overlap
Dec 12, 2017
951578a
fix(textfield): textarea revert label background change to white
Dec 12, 2017
3bdaa5d
Merge branch 'master' into fix/textarea/label-overlap
Dec 21, 2017
15f7a5e
Merge branch 'master' into fix/textarea/label-overlap
moog16 Dec 22, 2017
902f534
Merge branch 'master' into fix/textarea/label-overlap
Jan 9, 2018
59865f4
Merge branch 'master' into fix/textarea/label-overlap
Jan 9, 2018
e1fab5d
Merge branch 'master' into fix/textarea/label-overlap
Jan 10, 2018
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
2 changes: 2 additions & 0 deletions packages/mdc-textfield/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ $mdc-text-field-outlined-hover-border: rgba(black, .87);
$mdc-textarea-border-on-light: rgba(black, .73);
$mdc-textarea-border-on-dark: rgba(white, 1);
$mdc-textarea-light-background: rgba(white, 1);
// cannot be transparent because multiline textarea input
// will make text unreadable
$mdc-textarea-dark-background: rgba(48, 48, 48, 1);
$mdc-textarea-disabled-background-on-light: rgba(249, 249, 249, 1);
$mdc-textarea-disabled-background-on-dark: rgba(47, 47, 47, 1);
Expand Down
7 changes: 7 additions & 0 deletions packages/mdc-textfield/mdc-text-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,6 +486,7 @@
$label-offset-x: $padding-inset;

display: flex;
width: fit-content;
height: initial;
transition: none;
border: 1px solid $mdc-textarea-border-on-light;
Expand All @@ -497,6 +498,7 @@

// stylelint-disable plugin/selector-bem-pattern
.mdc-text-field__input {
margin: 0;
padding: $padding-inset;
padding-top: $padding-inset * 2;
border: 1px solid transparent;
Copy link

@havenchyk havenchyk Dec 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

I'm not 100% sure, but in active state (:focus) textarea should have 2px border (now it's a sum of 1px div border and 1px textarea border) and if you just remove this border from textarea, the whole border will become 1px

screencast 2017-12-08 15-39-06

Expand Down Expand Up @@ -531,6 +533,7 @@
bottom: auto;
padding: 8px 16px;
background-color: $mdc-textarea-light-background;
line-height: 1.15;

@include mdc-theme-dark(".mdc-text-field") {
background-color: $mdc-textarea-dark-background;
Expand Down Expand Up @@ -600,6 +603,10 @@
}
}

.mdc-text-field__input {
resize: vertical;
}

@include mdc-theme-dark {
border-bottom: 1px solid $mdc-text-field-divider-on-dark;
}
Expand Down