From 741870c317d116fc82be4d9627063a6d4e4f807b Mon Sep 17 00:00:00 2001 From: williamernest Date: Wed, 10 Jan 2018 11:59:54 -0800 Subject: [PATCH 01/10] feat(select): Move colors to mixins --- packages/mdc-select/_mixins.scss | 98 +++++++++++++++++++++++++++++ packages/mdc-select/mdc-select.scss | 47 +++++--------- 2 files changed, 114 insertions(+), 31 deletions(-) create mode 100644 packages/mdc-select/_mixins.scss diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss new file mode 100644 index 00000000000..b20d5105407 --- /dev/null +++ b/packages/mdc-select/_mixins.scss @@ -0,0 +1,98 @@ +// +// Copyright 2018 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +// Public + +@mixin mdc-select-ink-color($color) { + :not(.mdc-select--disabled) { + @include mdc-select-ink-color_($color); + } +} + +@mixin mdc-select-fill-color($color) { + :not(.mdc-select--disabled) { + @include mdc-select-fill-color_($color); + } +} + +@mixin mdc-select-label-color($color, $opacity: .87) { + &:not(.mdc-select--disabled) { + @include mdc-select-label-color_($color, $opacity); + } +} + +@mixin mdc-select-bottom-line-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-bottom-line-color_($color); + } +} + +@mixin mdc-select-css-only-bottom-line-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-css-only-bottom-line-color_($color); + } +} + +@mixin mdc-select-selected-text-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-selected-text-color_($color); + } +} + +// Private + +@mixin mdc-select-ink-color_($color) { + .mdc-select__surface { + @include mdc-theme-prop(color, $color); + } +} + +@mixin mdc-select-fill-color_($color) { + .mdc-select__surface { + @include mdc-theme-prop(background-color, $color); + } +} + +@mixin mdc-select-label-color_($color, $opacity: .87) { + .mdc-select__label { + @include mdc-theme-prop(color, $color); + + opacity: $opacity; + } +} + +@mixin mdc-select-bottom-line-color_($color) { + .mdc-select__bottom-line { + @include mdc-theme-prop(background-color, $color); + } +} + +@mixin mdc-select-css-only-bottom-line-color_($color) { + .mdc-select__surface:not(.mdc-ripple-upgraded):focus .mdc-select__bottom-line, + .mdc-select__surface:not(.mdc-ripple-upgraded):focus ~ .mdc-select__bottom-line { + @include mdc-theme-prop(background-color, $color); + } +} + +@mixin mdc-select-selected-text-color_($color) { + .mdc-select__selected-text { + @include mdc-theme-prop(color, $color); + } +} + +@mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) { + 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); +} diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index 8f80d3adfb6..a00fd4c6f17 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/packages/mdc-select/mdc-select.scss @@ -14,6 +14,7 @@ // limitations under the License. // +@import "_mixins"; @import "@material/animation/functions"; @import "@material/animation/variables"; @import "@material/typography/mixins"; @@ -22,19 +23,27 @@ @import "@material/ripple/mixins"; @import "@material/rtl/mixins"; -@mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) { - 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); -} - $mdc-select-arrow-padding: 26px; $mdc-select-label-padding: 16px; $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timing-function; +.mdc-select { + @include mdc-select-dd-arrow-svg-bg_; + @include mdc-select-fill-color(rgba(white, .1)); + @include mdc-select-ink-color(primary); + @include mdc-select-label-color(rgba(black, .6)); + @include mdc-select-bottom-line-color(rgba(black, .5)); + @include mdc-select-css-only-bottom-line-color(primary); + @include mdc-select-selected-text-color(text-primary-on-light); +} + +.mdc-select--open { + @include mdc-select-bottom-line-color(primary); +} + // postcss-bem-linter: define select .mdc-select { @include mdc-typography(subheading2); - @include mdc-theme-prop(color, text-primary-on-light); - @include mdc-select-dd-arrow-svg-bg_; display: inline-flex; position: relative; @@ -54,12 +63,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin background-position: left 10px center; } - @include mdc-theme-dark(".mdc-select") { - @include mdc-select-dd-arrow-svg-bg_("fff", .54); - - background-color: rgba(white, .1); - } - &__menu { position: fixed; top: 0; @@ -71,7 +74,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin &__surface { @include mdc-typography(subheading2); - @include mdc-theme-prop(color, text-primary-on-light); @include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding, ".mdc-select"); @include mdc-ripple-surface; @include mdc-ripple-radius; @@ -93,7 +95,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin border: none; border-radius: 4px 4px 0 0; outline: none; - background-color: rgba(black, .04); // Resets for +
+ + +
@@ -197,6 +201,7 @@

Select Multiple - CSS Only

var boxDemoWrapper = document.getElementById('box-demo-wrapper'); var darkThemeCb = document.getElementById('dark-theme'); var rtlCb = document.getElementById('rtl'); + var alternateColorsCb = document.getElementById('alternate-colors'); var disabledCb = document.getElementById('disabled'); darkThemeCb.addEventListener('change', function() { @@ -209,6 +214,9 @@

Select Multiple - CSS Only

boxDemoWrapper.removeAttribute('dir'); } }); + alternateColorsCb.addEventListener('change', function() { + boxDemoWrapper.classList[alternateColorsCb.checked ? 'add' : 'remove']('demo-select-custom-colors'); + }); disabledCb.addEventListener('change', function() { select.disabled = disabledCb.checked; }); diff --git a/demos/select.scss b/demos/select.scss index 703a9ac18e2..96b084c1486 100644 --- a/demos/select.scss +++ b/demos/select.scss @@ -18,3 +18,17 @@ @import "../packages/mdc-list/mdc-list"; @import "../packages/mdc-menu/mdc-menu"; @import "../packages/mdc-select/mdc-select"; + +// stylelint-disable selector-class-pattern +.demo-select-custom-colors { + @include mdc-select-fill-color(rgba(blue, .1)); + @include mdc-select-ink-color(blue); + @include mdc-select-label-color(rgba(blue, .6)); + @include mdc-select-bottom-line-color(rgba(blue, .5)); + @include mdc-select-selected-text-color(rgba(blue, .8)); + + // Focused colors + @include mdc-select-focused-bottom-line-color(green); + @include mdc-select-focused-label-color(green); +} +// stylelint-enable selector-class-pattern diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index bbf9ded7677..86d2f4d04b3 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -258,7 +258,7 @@ If you'd like to maintain the width or height outside of the attribute, you'll n } ``` -#### Classes +#### CSS Classes | Class | Description | | ------------------------ | ----------------------------------------------- | @@ -269,6 +269,23 @@ If you'd like to maintain the width or height outside of the attribute, you'll n It is advised that dividers also set `role="presentation"` to disable selection and not cloud accessibility. +### Sass Mixins + +To customize the colors of any part of the select, use the following mixins. We recommend you apply +these mixins within CSS selectors like `.foo-select:not(.mdc-select--open)` to select your unfocused selects, +and `.foo-select.mdc-select--open` to select your focused selects. + +Mixin | Description +--- | --- +`mdc-select-ink-color($color)` | Customizes the text entered into the select. +>_NOTE_: This style applies to the css only version. +`mdc-select-fill-color($color)` | Customizes the backgrond color of the select. +`mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. +`mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional. +`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-selected-text-color($color)` | Customizes the color of the option that has been selected. + ### MDC Select Component API The MDC Select component API is modeled after a subset of the `HTMLSelectElement` functionality, and diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss index b20d5105407..b3d3a8d0aa8 100644 --- a/packages/mdc-select/_mixins.scss +++ b/packages/mdc-select/_mixins.scss @@ -28,9 +28,15 @@ } } -@mixin mdc-select-label-color($color, $opacity: .87) { +@mixin mdc-select-label-color($color) { &:not(.mdc-select--disabled) { - @include mdc-select-label-color_($color, $opacity); + @include mdc-select-label-color_($color); + } +} + +@mixin mdc-select-focused-label-color($color, $opacity: .87) { + &:not(.mdc-select--disabled) { + @include mdc-select-focused-label-color_($color, $opacity); } } @@ -40,9 +46,9 @@ } } -@mixin mdc-select-css-only-bottom-line-color($color) { +@mixin mdc-select-focused-bottom-line-color($color) { &:not(.mdc-select--disabled) { - @include mdc-select-css-only-bottom-line-color_($color); + @include mdc-select-focused-bottom-line-color_($color); } } @@ -66,10 +72,21 @@ } } -@mixin mdc-select-label-color_($color, $opacity: .87) { +@mixin mdc-select-label-color_($color) { .mdc-select__label { @include mdc-theme-prop(color, $color); + } +} + +@mixin mdc-select-focused-label-color_($color, $opacity: .87) { + .mdc-select__surface:focus .mdc-select__label { + @include mdc-theme-prop(color, $color); + } + // Separate parameter is used for opacity, because opacity is only applied when the + // label is floating, but the label is the same color when the select is focused + // but an option has not been selected. + .mdc-select__surface:focus .mdc-select__label--float-above { opacity: $opacity; } } @@ -80,9 +97,13 @@ } } -@mixin mdc-select-css-only-bottom-line-color_($color) { - .mdc-select__surface:not(.mdc-ripple-upgraded):focus .mdc-select__bottom-line, - .mdc-select__surface:not(.mdc-ripple-upgraded):focus ~ .mdc-select__bottom-line { +@mixin mdc-select-focused-bottom-line-color_($color) { + .mdc-select__surface:focus .mdc-select__bottom-line, + .mdc-select__surface:focus ~ .mdc-select__bottom-line { + @include mdc-theme-prop(background-color, $color); + } + + .mdc-select--open .mdc-select__bottom-line { @include mdc-theme-prop(background-color, $color); } } diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index a00fd4c6f17..ed67c68d8db 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/packages/mdc-select/mdc-select.scss @@ -14,7 +14,7 @@ // limitations under the License. // -@import "_mixins"; +@import "./_mixins"; @import "@material/animation/functions"; @import "@material/animation/variables"; @import "@material/typography/mixins"; @@ -33,12 +33,11 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin @include mdc-select-ink-color(primary); @include mdc-select-label-color(rgba(black, .6)); @include mdc-select-bottom-line-color(rgba(black, .5)); - @include mdc-select-css-only-bottom-line-color(primary); @include mdc-select-selected-text-color(text-primary-on-light); -} -.mdc-select--open { - @include mdc-select-bottom-line-color(primary); + // Focused state colors + @include mdc-select-focused-bottom-line-color(primary); + @include mdc-select-focused-label-color(primary); } // postcss-bem-linter: define select From cb5b8227a246c32e7dfdd7668656fde89cc9b9c2 Mon Sep 17 00:00:00 2001 From: williamernest Date: Wed, 10 Jan 2018 14:43:20 -0800 Subject: [PATCH 03/10] feat(select): Fix readme. --- packages/mdc-select/README.md | 12 ++++++------ packages/mdc-select/mdc-select.scss | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index 86d2f4d04b3..69f587af1ec 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -271,21 +271,21 @@ It is advised that dividers also set `role="presentation"` to disable selection ### Sass Mixins -To customize the colors of any part of the select, use the following mixins. We recommend you apply -these mixins within CSS selectors like `.foo-select:not(.mdc-select--open)` to select your unfocused selects, -and `.foo-select.mdc-select--open` to select your focused selects. +To customize the colors of any part of the select, use the following mixins. We recommend you use +these mixins within CSS selectors like `.foo-select` to apply styling. Mixin | Description --- | --- -`mdc-select-ink-color($color)` | Customizes the text entered into the select. ->_NOTE_: This style applies to the css only version. -`mdc-select-fill-color($color)` | Customizes the backgrond color of the select. +`mdc-select-ink-color($color)` | Customizes the text entered into the select.* +`mdc-select-fill-color($color)` | Customizes the background color of the select. `mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. `mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional. `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-selected-text-color($color)` | Customizes the color of the option that has been selected. +>_NOTE_: * - This style applies to the css only version. + ### MDC Select Component API The MDC Select component API is modeled after a subset of the `HTMLSelectElement` functionality, and diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index ed67c68d8db..0c67380fe3a 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/packages/mdc-select/mdc-select.scss @@ -14,7 +14,7 @@ // limitations under the License. // -@import "./_mixins"; +@import "./mixins"; @import "@material/animation/functions"; @import "@material/animation/variables"; @import "@material/typography/mixins"; From 219c2fa252f7a30122c72ad09569fb3774cd4047 Mon Sep 17 00:00:00 2001 From: williamernest Date: Thu, 11 Jan 2018 19:39:31 -0800 Subject: [PATCH 04/10] feat(select): Update readme. Move focus bottom line color mixin. Update demo. --- demos/select.html | 2 +- demos/select.scss | 2 +- packages/mdc-select/README.md | 6 ++---- packages/mdc-select/_mixins.scss | 23 +++++++++++++++-------- packages/mdc-select/mdc-select.scss | 8 +++----- 5 files changed, 22 insertions(+), 19 deletions(-) diff --git a/demos/select.html b/demos/select.html index 1e0dd0a813e..dd35ac319fb 100644 --- a/demos/select.html +++ b/demos/select.html @@ -215,7 +215,7 @@

Select Multiple - CSS Only

} }); alternateColorsCb.addEventListener('change', function() { - boxDemoWrapper.classList[alternateColorsCb.checked ? 'add' : 'remove']('demo-select-custom-colors'); + root.classList[alternateColorsCb.checked ? 'add' : 'remove']('demo-select-custom-colors'); }); disabledCb.addEventListener('change', function() { select.disabled = disabledCb.checked; diff --git a/demos/select.scss b/demos/select.scss index 96b084c1486..69f207c72d2 100644 --- a/demos/select.scss +++ b/demos/select.scss @@ -21,7 +21,7 @@ // stylelint-disable selector-class-pattern .demo-select-custom-colors { - @include mdc-select-fill-color(rgba(blue, .1)); + @include mdc-select-container-fill-color(rgba(blue, .1)); @include mdc-select-ink-color(blue); @include mdc-select-label-color(rgba(blue, .6)); @include mdc-select-bottom-line-color(rgba(blue, .5)); diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index 69f587af1ec..323358ace5e 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -276,16 +276,14 @@ these mixins within CSS selectors like `.foo-select` to apply styling. Mixin | Description --- | --- -`mdc-select-ink-color($color)` | Customizes the text entered into the select.* -`mdc-select-fill-color($color)` | Customizes the background color of the select. +`mdc-select-ink-color($color)` | Customizes the text entered into the select. This style applies only to the css version. +`mdc-select-container-fill-color($color)` | Customizes the background color of the select. `mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. `mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional. `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-selected-text-color($color)` | Customizes the color of the option that has been selected. ->_NOTE_: * - This style applies to the css only version. - ### MDC Select Component API The MDC Select component API is modeled after a subset of the `HTMLSelectElement` functionality, and diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss index b3d3a8d0aa8..b7e10caedd7 100644 --- a/packages/mdc-select/_mixins.scss +++ b/packages/mdc-select/_mixins.scss @@ -17,14 +17,14 @@ // Public @mixin mdc-select-ink-color($color) { - :not(.mdc-select--disabled) { + &:not(.mdc-select--disabled) { @include mdc-select-ink-color_($color); } } -@mixin mdc-select-fill-color($color) { - :not(.mdc-select--disabled) { - @include mdc-select-fill-color_($color); +@mixin mdc-select-container-fill-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-container-fill-color_($color); } } @@ -58,6 +58,14 @@ } } +@mixin mdc-select-focused-bottom-line { + // JS-enhanced and CSS-only Selects require different selectors for focused bottom-line due to different DOM structure + .mdc-select__surface:focus .mdc-select__bottom-line, + .mdc-select__surface:focus ~ .mdc-select__bottom-line { + @content; + } +} + // Private @mixin mdc-select-ink-color_($color) { @@ -66,7 +74,7 @@ } } -@mixin mdc-select-fill-color_($color) { +@mixin mdc-select-container-fill-color_($color) { .mdc-select__surface { @include mdc-theme-prop(background-color, $color); } @@ -98,12 +106,11 @@ } @mixin mdc-select-focused-bottom-line-color_($color) { - .mdc-select__surface:focus .mdc-select__bottom-line, - .mdc-select__surface:focus ~ .mdc-select__bottom-line { + @include mdc-select-focused-bottom-line { @include mdc-theme-prop(background-color, $color); } - .mdc-select--open .mdc-select__bottom-line { + &.mdc-select--open .mdc-select__bottom-line { @include mdc-theme-prop(background-color, $color); } } diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index 0c67380fe3a..41f55cd75de 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/packages/mdc-select/mdc-select.scss @@ -29,8 +29,8 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin .mdc-select { @include mdc-select-dd-arrow-svg-bg_; - @include mdc-select-fill-color(rgba(white, .1)); - @include mdc-select-ink-color(primary); + @include mdc-select-container-fill-color(rgba(white, .1)); + @include mdc-select-ink-color(text-primary-on-light); @include mdc-select-label-color(rgba(black, .6)); @include mdc-select-bottom-line-color(rgba(black, .5)); @include mdc-select-selected-text-color(text-primary-on-light); @@ -160,9 +160,7 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin } } - // JS-enhanced and CSS-only Selects require different selectors for focused bottom-line due to different DOM structure - &__surface:focus .mdc-select__bottom-line, - &__surface:focus ~ .mdc-select__bottom-line { + @include mdc-select-focused-bottom-line { transform: scaleY(2); &::after { From 68bd036d610ca3528b2684a04571b8cd5d920ac8 Mon Sep 17 00:00:00 2001 From: williamernest Date: Thu, 11 Jan 2018 19:46:14 -0800 Subject: [PATCH 05/10] feat(select): Combine mdc-select classes. --- packages/mdc-select/mdc-select.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index 41f55cd75de..6e23de01a45 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/packages/mdc-select/mdc-select.scss @@ -27,6 +27,7 @@ $mdc-select-arrow-padding: 26px; $mdc-select-label-padding: 16px; $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timing-function; +// postcss-bem-linter: define select .mdc-select { @include mdc-select-dd-arrow-svg-bg_; @include mdc-select-container-fill-color(rgba(white, .1)); @@ -38,10 +39,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin // Focused state colors @include mdc-select-focused-bottom-line-color(primary); @include mdc-select-focused-label-color(primary); -} - -// postcss-bem-linter: define select -.mdc-select { @include mdc-typography(subheading2); display: inline-flex; From 8b92157636c8f33a424269de2ebdb2a02460a601 Mon Sep 17 00:00:00 2001 From: williamernest Date: Fri, 12 Jan 2018 13:31:11 -0800 Subject: [PATCH 06/10] feat(select): Make bottom-line mixin private --- packages/mdc-select/_mixins.scss | 8 ++++---- packages/mdc-select/mdc-select.scss | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss index b7e10caedd7..aa07c4f54aa 100644 --- a/packages/mdc-select/_mixins.scss +++ b/packages/mdc-select/_mixins.scss @@ -58,7 +58,9 @@ } } -@mixin mdc-select-focused-bottom-line { +// Private + +@mixin mdc-select-focused-bottom-line_ { // JS-enhanced and CSS-only Selects require different selectors for focused bottom-line due to different DOM structure .mdc-select__surface:focus .mdc-select__bottom-line, .mdc-select__surface:focus ~ .mdc-select__bottom-line { @@ -66,8 +68,6 @@ } } -// Private - @mixin mdc-select-ink-color_($color) { .mdc-select__surface { @include mdc-theme-prop(color, $color); @@ -106,7 +106,7 @@ } @mixin mdc-select-focused-bottom-line-color_($color) { - @include mdc-select-focused-bottom-line { + @include mdc-select-focused-bottom-line_ { @include mdc-theme-prop(background-color, $color); } diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index 6e23de01a45..4a2aaa2c1f3 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/packages/mdc-select/mdc-select.scss @@ -157,7 +157,7 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin } } - @include mdc-select-focused-bottom-line { + @include mdc-select-focused-bottom-line_ { transform: scaleY(2); &::after { From 0b1296ddde459aff547001d4a2747972063d6d94 Mon Sep 17 00:00:00 2001 From: williamernest Date: Fri, 12 Jan 2018 13:48:49 -0800 Subject: [PATCH 07/10] feat(select): Consolidate selected item color and ink color mixins --- demos/select.scss | 1 - packages/mdc-select/README.md | 3 +-- packages/mdc-select/_mixins.scss | 15 ++------------- packages/mdc-select/mdc-select.scss | 1 - 4 files changed, 3 insertions(+), 17 deletions(-) diff --git a/demos/select.scss b/demos/select.scss index 69f207c72d2..206aa65848b 100644 --- a/demos/select.scss +++ b/demos/select.scss @@ -25,7 +25,6 @@ @include mdc-select-ink-color(blue); @include mdc-select-label-color(rgba(blue, .6)); @include mdc-select-bottom-line-color(rgba(blue, .5)); - @include mdc-select-selected-text-color(rgba(blue, .8)); // Focused colors @include mdc-select-focused-bottom-line-color(green); diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index 323358ace5e..a103bca8e71 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -276,13 +276,12 @@ these mixins within CSS selectors like `.foo-select` to apply styling. Mixin | Description --- | --- -`mdc-select-ink-color($color)` | Customizes the text entered into the select. This style applies only to the css version. +`mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select. On css version, this also customized the color of the label. `mdc-select-container-fill-color($color)` | Customizes the background color of the select. `mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. `mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional. `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-selected-text-color($color)` | Customizes the color of the option that has been selected. ### MDC Select Component API diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss index aa07c4f54aa..fa2c626a414 100644 --- a/packages/mdc-select/_mixins.scss +++ b/packages/mdc-select/_mixins.scss @@ -52,12 +52,6 @@ } } -@mixin mdc-select-selected-text-color($color) { - &:not(.mdc-select--disabled) { - @include mdc-select-selected-text-color_($color); - } -} - // Private @mixin mdc-select-focused-bottom-line_ { @@ -69,7 +63,8 @@ } @mixin mdc-select-ink-color_($color) { - .mdc-select__surface { + .mdc-select__surface, + .mdc-select__selected-text { @include mdc-theme-prop(color, $color); } } @@ -115,12 +110,6 @@ } } -@mixin mdc-select-selected-text-color_($color) { - .mdc-select__selected-text { - @include mdc-theme-prop(color, $color); - } -} - @mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) { 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); } diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss index 4a2aaa2c1f3..508f696f12c 100644 --- a/packages/mdc-select/mdc-select.scss +++ b/packages/mdc-select/mdc-select.scss @@ -34,7 +34,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin @include mdc-select-ink-color(text-primary-on-light); @include mdc-select-label-color(rgba(black, .6)); @include mdc-select-bottom-line-color(rgba(black, .5)); - @include mdc-select-selected-text-color(text-primary-on-light); // Focused state colors @include mdc-select-focused-bottom-line-color(primary); From 8dc389d533b0db5e3f8896bd638d07fe5b67849c Mon Sep 17 00:00:00 2001 From: williamernest Date: Fri, 12 Jan 2018 14:05:48 -0800 Subject: [PATCH 08/10] feat(select): Remove commented out code --- demos/select.html | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/demos/select.html b/demos/select.html index 20a9d705ae7..bd814d4c49e 100644 --- a/demos/select.html +++ b/demos/select.html @@ -154,27 +154,6 @@

CSS Only

- - - - - - - - - - - - - - - - - - - - -