Skip to content

Commit

Permalink
feat(line-ripple): add active/inactive states to line-ripple
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: `mdc-line-ripple-color()` mixin has been renamed to `mdc-line-ripple-active-color()`
  • Loading branch information
@asyncLiz
asyncLiz authored Jan 31, 2020
1 parent 3a85313 commit b6c7f62
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 63 deletions.
53 changes: 40 additions & 13 deletions packages/mdc-line-ripple/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,39 +34,66 @@
// postcss-bem-linter: define line-ripple
.mdc-line-ripple {
@include feature-targeting-mixins.targets($feat-structure) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
opacity: 0;
z-index: 2;
&::before,
&::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom-style: solid;
content: "";
}

&::before {
border-bottom-width: 1px;
z-index: 1;
}

&::after {
transform: scaleX(0);
border-bottom-width: 2px;
opacity: 0;
z-index: 2;
}
}

@include feature-targeting-mixins.targets($feat-animation) {
transition: functions.transition-value(transform), functions.transition-value(opacity);
&::after {
transition: functions.transition-value(transform), functions.transition-value(opacity);
}
}
}

.mdc-line-ripple--active {
.mdc-line-ripple--active::after {
@include feature-targeting-mixins.targets($feat-structure) {
transform: scaleX(1);
opacity: 1;
}
}

.mdc-line-ripple--deactivating {
.mdc-line-ripple--deactivating::after {
@include feature-targeting-mixins.targets($feat-structure) {
opacity: 0;
}
}
}

@mixin color($color, $query: feature-targeting-functions.all()) {
@mixin active-color($color, $query: feature-targeting-functions.all()) {
$feat-color: feature-targeting-functions.create-target($query, color);

@include feature-targeting-mixins.targets($feat-color) {
@include theme-mixins.prop(background-color, $color);
&::after {
@include theme-mixins.prop(border-bottom-color, $color);
}
}
}

@mixin inactive-color($color, $query: feature-targeting-functions.all()) {
$feat-color: feature-targeting-functions.create-target($query, color);

@include feature-targeting-mixins.targets($feat-color) {
&::before {
@include theme-mixins.prop(border-bottom-color, $color);
}
}
}
2 changes: 1 addition & 1 deletion packages/mdc-line-ripple/test/feature-targeting-any.test.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@mixin test($query) {
.test {
@include line-ripple.core-styles($query: $query);
@include line-ripple.color(red, $query: $query);
@include line-ripple.active-color(red, $query: $query);
}
}

Expand Down
27 changes: 11 additions & 16 deletions packages/mdc-select/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
}

@mixin hover-bottom-line-color($color) {
&:not(.mdc-select--disabled) .mdc-select__selected-text:hover {
@include native-control-bottom-line-color_($color);
&:not(.mdc-select--disabled):hover {
@include bottom-line-color_($color);
}
}

Expand Down Expand Up @@ -180,18 +180,14 @@
}

@mixin bottom-line-color_($color) {
.mdc-select__selected-text {
@include native-control-bottom-line-color_($color);
.mdc-line-ripple {
@include line-ripple-mixins.inactive-color($color);
}
}

@mixin native-control-bottom-line-color_($color) {
@include theme-mixins.prop(border-bottom-color, $color);
}

@mixin focused-line-ripple-color_($color) {
@include focused-line-ripple_ {
@include line-ripple-mixins.color($color);
@include line-ripple-mixins.active-color($color);
}
}

Expand Down Expand Up @@ -305,7 +301,6 @@
padding-top: 20px;
padding-bottom: 4px;
border: none;
border-bottom: 1px solid;
outline: none;
background-color: transparent;
color: inherit; // Override default user agent stylesheet
Expand All @@ -327,7 +322,12 @@
}

.mdc-line-ripple {
display: none;
@include line-ripple-mixins.inactive-color(variables.$disabled-ink-color);

&::before {
// TODO(b/146080006)
border-bottom-style: dotted;
}
}

.mdc-select__icon {
Expand All @@ -337,17 +337,12 @@
.mdc-select__selected-text {
@include theme-mixins.prop(color, variables.$disabled-ink-color);

border-bottom-style: dotted;
pointer-events: none;
}

&.mdc-select--outlined {
@include container-fill-color_(transparent);
@include outline-color_(variables.$outlined-disabled-border);

.mdc-select__selected-text {
border-bottom-style: none;
}
}

cursor: default;
Expand Down
48 changes: 15 additions & 33 deletions packages/mdc-textfield/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,8 @@
padding:
variables.$input-padding-top
variables.$input-padding
variables.$input-padding-bottom;
variables.$input-padding-bottom + variables.$input-border-bottom;
border: none;
border-bottom: 1px solid;
border-radius: 0;
background: none;
appearance: none;
Expand Down Expand Up @@ -165,7 +164,7 @@
.mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) & {
@include feature-targeting-mixins.targets($feat-structure) {
padding-top: 16px;
padding-bottom: 16px;
padding-bottom: 16px + variables.$input-border-bottom;
}
}
}
Expand Down Expand Up @@ -755,8 +754,11 @@
@include icon-mixins.trailing-icon-color_(variables.$disabled-icon, $query: $query);
@include fill-color_(variables.$disabled-background, $query: $query);

@media screen and (-ms-high-contrast: active) {
@include bottom-line-color_(GrayText, $query: $query);
}

@include feature-targeting-mixins.targets($feat-structure) {
border-bottom: none;
pointer-events: none;
}

Expand Down Expand Up @@ -938,16 +940,8 @@
// Outlined

@mixin outlined-disabled_($query: feature-targeting-functions.all()) {
$feat-structure: feature-targeting-functions.create-target($query, structure);

@include notched-outline-mixins.color(variables.$outlined-disabled-border, $query: $query);
@include fill-color_(transparent, $query);

.mdc-text-field__input {
@include feature-targeting-mixins.targets($feat-structure) {
border-bottom: none;
}
}
}

@mixin outlined-invalid_($query: feature-targeting-functions.all()) {
Expand Down Expand Up @@ -1008,7 +1002,6 @@
@include fill-color(transparent, $query: $query);

@include feature-targeting-mixins.targets($feat-structure) {
border: none;
overflow: visible;
}

Expand All @@ -1034,13 +1027,9 @@
}

@mixin hover-outline-color_($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-text-field--focused) {
// stylelint-disable-next-line selector-combinator-space-after
.mdc-text-field__input:hover ~,
.mdc-text-field__icon:hover ~ {
.mdc-notched-outline {
@include notched-outline-mixins.color($color, $query: $query);
}
&:not(.mdc-text-field--focused):hover {
.mdc-notched-outline {
@include notched-outline-mixins.color($color, $query: $query);
}
}
}
Expand Down Expand Up @@ -1212,7 +1201,7 @@

.mdc-text-field__input {
@include feature-targeting-mixins.targets($feat-structure) {
padding: 0;
padding: 0 0 variables.$input-border-bottom;
}
}
}
Expand Down Expand Up @@ -1276,7 +1265,6 @@
height: auto;
margin: $padding-inset / 2 1px 1px 0;
padding: 0 $padding-inset $padding-inset;
border: none;
}

@include feature-targeting-mixins.targets($feat-typography) {
Expand Down Expand Up @@ -1385,28 +1373,22 @@
}

@mixin bottom-line-color_($color, $query: feature-targeting-functions.all()) {
$feat-color: feature-targeting-functions.create-target($query, color);

.mdc-text-field__input {
@include feature-targeting-mixins.targets($feat-color) {
@include theme-mixins.prop(border-bottom-color, $color);
}
.mdc-line-ripple {
@include line-ripple-mixins.inactive-color($color, $query: $query);
}
}

@mixin hover-bottom-line-color_($color, $query: feature-targeting-functions.all()) {
$feat-color: feature-targeting-functions.create-target($query, color);

.mdc-text-field__input:hover {
@include feature-targeting-mixins.targets($feat-color) {
@include theme-mixins.prop(border-bottom-color, $color);
}
&:hover .mdc-line-ripple {
@include line-ripple-mixins.inactive-color($color, $query: $query);
}
}

@mixin line-ripple-color_($color, $query: feature-targeting-functions.all()) {
.mdc-line-ripple {
@include line-ripple-mixins.color($color, $query: $query);
@include line-ripple-mixins.active-color($color, $query: $query);
}
}

Expand Down

0 comments on commit b6c7f62

Please sign in to comment.