Skip to content

Commit

Permalink
fix(select): Add missing mixin (material-components#3435)
Browse files Browse the repository at this point in the history
Add missing `mdc-select-corner-radius` mixin for styling the corners of the `--box` variant.
  • Loading branch information
williamernest committed Aug 28, 2018
1 parent 5cbe68d commit e654526
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 14 deletions.
1 change: 1 addition & 0 deletions packages/mdc-select/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,7 @@ Mixin | Description
`mdc-select-focused-label-color($color)` | Customizes the label color of the select when focused.
`mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
`mdc-select-focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
`mdc-select-corner-radius($radius)` | Customizes the corner radius of the box variant of the select.
`mdc-select-hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.
`mdc-select-outline-color($color)` | Customizes the color of the notched outline.
`mdc-select-outline-corner-radius($radius)` | Sets the border radius of of the outlined select variant.
Expand Down
32 changes: 18 additions & 14 deletions packages/mdc-select/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,24 @@
}
}

@mixin mdc-select-corner-radius($radius) {
border-radius: $radius $radius 0 0;
}

@mixin mdc-select-outline-corner-radius($radius) {
// NOTE: idle and notched state border radius mixins
// are broken into 2 different mixins, otherwise
// we would be overly specific (big no, no). The cause of
// this is because .mdc-notched-outline and .mdc-notched-outline__idle
// are siblings. .mdc-notched-outline__idle needs to be a child of
// .mdc-notched-outline in order to remedy this issue.
.mdc-notched-outline {
@include mdc-notched-outline-corner-radius($radius);
}

@include mdc-notched-outline-idle-corner-radius($radius);
}

// Private
@mixin mdc-select-focused-line-ripple_ {
.mdc-select__native-control:focus ~ .mdc-line-ripple {
Expand Down Expand Up @@ -133,20 +151,6 @@
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
}

@mixin mdc-select-outline-corner-radius($radius) {
// NOTE: idle and notched state border radius mixins
// are broken into 2 different mixins, otherwise
// we would be overly specific (big no, no). The cause of
// this is because .mdc-notched-outline and .mdc-notched-outline__idle
// are siblings. .mdc-notched-outline__idle needs to be a child of
// .mdc-notched-outline in order to remedy this issue.
.mdc-notched-outline {
@include mdc-notched-outline-corner-radius($radius);
}

@include mdc-notched-outline-idle-corner-radius($radius);
}

@mixin mdc-select-outline-color_($color) {
// NOTE: outlined version of select wants the "idle" and
// "notched" outline to have the same color. This covers two cases:
Expand Down

0 comments on commit e654526

Please sign in to comment.