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

chore(text-field): moved textarea sass into private mixins #1942

Merged
merged 11 commits into from
Jan 17, 2018
Merged

chore(text-field): moved textarea sass into private mixins #1942

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c0570b4
chore(text-field): moved textarea sass into private mixins
Jan 11, 2018
7920a8d
chore(text-field): removed stylelint comments and inlined scss selector
Jan 13, 2018
27cc1b0
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 16, 2018
430ea2d
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 16, 2018
8d712a2
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 16, 2018
d8b918f
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 16, 2018
2c0b483
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 17, 2018
a46a2f0
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 17, 2018
5a852db
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 17, 2018
1bed49f
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 17, 2018
7a78704
Merge branch 'master' into chore/textfield/textarea-sass-mixins
Jan 17, 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
102 changes: 102 additions & 0 deletions packages/mdc-textfield/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,108 @@
}
}

@mixin mdc-text-field-textarea-invalid_ {
// stylelint-disable plugin/selector-bem-pattern
Copy link
Contributor

Choose a reason for hiding this comment

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

you dont need this stylelint disable/enable comments any more


border-color: $mdc-text-field-error-on-light;

// stylelint-enable plugin/selector-bem-pattern
}

@mixin mdc-text-field-textarea-focused_ {
@include mdc-theme-prop(border-color, primary);
}

@mixin mdc-text-field-textarea_ {
@include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);

$padding-inset: 16px;
$label-offset-y: $padding-inset + 2;
$label-offset-x: $padding-inset;

display: flex;
width: fit-content;
height: initial;
transition: none;
border: 1px solid $mdc-textarea-border-on-light;
overflow: hidden;

@include mdc-theme-dark(".mdc-text-field") {
border-color: $mdc-textarea-border-on-dark;
}

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

&:focus {
@include mdc-theme-prop(border-color, primary);
}

&:invalid:not(:focus) {
border-color: $mdc-text-field-error-on-light;
}

@include mdc-theme-dark(".mdc-text-field") {
&:hover {
border-bottom-color: transparent;
}

&:focus {
@include mdc-theme-prop(border-color, secondary);
}

&:invalid:not(:focus) {
border-color: $mdc-text-field-error-on-dark;
}
}
}

.mdc-text-field__label {
@include mdc-rtl-reflexive-position(left, 1px);

top: $label-offset-y;
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;
}

&--float-above {
Copy link
Contributor

Choose a reason for hiding this comment

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

remove this & syntax and just use .mdc-text-field__label--float-above

// Translate above the top of the input, and compensate for the amount of offset needed
// to position the label within the bounds of the inset padding.
// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
transform: translateY(-50%) scale(.923, .923);
}
}

&.mdc-text-field--disabled {
@include mdc-text-field-textarea-disabled_;
}

&:not(.mdc-text-field--upgraded) {
.mdc-text-field__input {
padding-top: $padding-inset;
}
}

&.mdc-text-field--invalid {
@include mdc-text-field-textarea-invalid_;
}

&.mdc-text-field--focused {
@include mdc-text-field-textarea-focused_;
}
}

// stylelint-enable plugin/selector-bem-pattern

// Private Color Mixins

@mixin mdc-text-field-ink-color_($color) {
Expand Down
92 changes: 1 addition & 91 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 @@ -399,14 +399,6 @@
@include mdc-text-field-invalid_;
}

// stylelint-disable plugin/selector-bem-pattern

.mdc-text-field--invalid.mdc-text-field--textarea {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this was moved into the bottom of the main textarea mixins_.scss selector

border-color: $mdc-text-field-error-on-light;
}

// stylelint-enable plugin/selector-bem-pattern

.mdc-text-field--dense {
margin-top: 12px;
margin-bottom: 4px;
Expand All @@ -432,91 +424,9 @@
}

.mdc-text-field--textarea {
@include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is all a copy paste into mixins_.scss


$padding-inset: 16px;
$label-offset-y: $padding-inset + 2;
$label-offset-x: $padding-inset;

display: flex;
width: fit-content;
height: initial;
transition: none;
border: 1px solid $mdc-textarea-border-on-light;
overflow: hidden;

@include mdc-theme-dark(".mdc-text-field") {
border-color: $mdc-textarea-border-on-dark;
}

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

&:focus {
@include mdc-theme-prop(border-color, primary);
}

&:invalid:not(:focus) {
border-color: $mdc-text-field-error-on-light;
}

@include mdc-theme-dark(".mdc-text-field") {
&:hover {
border-bottom-color: transparent;
}

&:focus {
@include mdc-theme-prop(border-color, secondary);
}

&:invalid:not(:focus) {
border-color: $mdc-text-field-error-on-dark;
}
}
}

.mdc-text-field__label {
@include mdc-rtl-reflexive-position(left, 1px);

top: $label-offset-y;
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;
}

&--float-above {
// Translate above the top of the input, and compensate for the amount of offset needed
// to position the label within the bounds of the inset padding.
// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
transform: translateY(-50%) scale(.923, .923);
}
}

&.mdc-text-field--disabled {
@include mdc-text-field-textarea-disabled_;
}

&:not(.mdc-text-field--upgraded) {
.mdc-text-field__input {
padding-top: $padding-inset;
}
}
}

.mdc-text-field--textarea.mdc-text-field--focused {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this was also moved into the bottom of the main textarea mixins_.scss selector

@include mdc-theme-prop(border-color, primary);
@include mdc-text-field-textarea_;
}

// stylelint-enable plugin/selector-bem-pattern

.mdc-text-field--fullwidth {
width: 100%;

Expand Down