diff --git a/components/select/scss/_keyframes.scss b/components/select/scss/_keyframes.scss new file mode 100644 index 00000000..19f8cf13 --- /dev/null +++ b/components/select/scss/_keyframes.scss @@ -0,0 +1,27 @@ +// +// 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. +// + +@keyframes mdc-select-float-native-control { + 0% { + transform: translateY(8px); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } +} diff --git a/components/select/scss/_mixins.scss b/components/select/scss/_mixins.scss new file mode 100644 index 00000000..b789c6f1 --- /dev/null +++ b/components/select/scss/_mixins.scss @@ -0,0 +1,102 @@ +// +// 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. +// + +@import "@material/floating-label/mixins"; +@import "@material/theme/mixins"; +@import "@material/line-ripple/mixins"; + +// Public + +@mixin mdc-select-ink-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-ink-color_($color); + } +} + +@mixin mdc-select-container-fill-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-container-fill-color_($color); + } +} + +@mixin mdc-select-focused-label-color($color) { + &:not(.mdc-select--disabled) { + .mdc-select__native-control:focus ~ .mdc-floating-label { + @include mdc-floating-label-ink-color(mdc-theme-prop-value($color)); + } + } +} + +@mixin mdc-select-hover-bottom-line-color($color) { + &:not(.mdc-select--disabled) .mdc-select__native-control:hover { + @include mdc-select-native-control-bottom-line-color_($color); + } +} + +@mixin mdc-select-bottom-line-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-bottom-line-color_($color); + } +} + +@mixin mdc-select-focused-bottom-line-color($color) { + &:not(.mdc-select--disabled) { + @include mdc-select-focused-line-ripple-color_($color); + } +} + +@mixin mdc-select-label-color($color) { + &:not(.mdc-select--disabled) .mdc-floating-label { + @include mdc-floating-label-ink-color($color); + } +} + +// Private +@mixin mdc-select-focused-line-ripple_ { + .mdc-select__native-control:focus ~ .mdc-line-ripple { + @content; + } +} + +@mixin mdc-select-ink-color_($color) { + .mdc-select__native-control { + @include mdc-theme-prop(color, $color); + } +} + +@mixin mdc-select-container-fill-color_($color) { + @include mdc-theme-prop(background-color, $color); +} + +@mixin mdc-select-bottom-line-color_($color) { + .mdc-select__native-control { + @include mdc-select-native-control-bottom-line-color_($color); + } +} + +@mixin mdc-select-native-control-bottom-line-color_($color) { + border-bottom-color: $color; +} + +@mixin mdc-select-focused-line-ripple-color_($color) { + @include mdc-select-focused-line-ripple_ { + @include mdc-line-ripple-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/components/select/scss/_variables.scss b/components/select/scss/_variables.scss new file mode 100644 index 00000000..c12afc0b --- /dev/null +++ b/components/select/scss/_variables.scss @@ -0,0 +1,33 @@ +// +// Copyright 2017 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. +// + +@import "@material/animation/variables"; + +$mdc-select-arrow-padding: 26px; +$mdc-select-label-padding: 16px; + +$mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87); +$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37); + +$mdc-select-label-color: rgba(mdc-theme-prop-value(on-surface), .6); +$mdc-select-focused-label-color: rgba(mdc-theme-prop-value(primary), .87); +$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37); + +$mdc-select-bottom-line-idle-color: rgba(mdc-theme-prop-value(on-surface), .42); +$mdc-select-bottom-line-hover-color: rgba(mdc-theme-prop-value(on-surface), .87); + +$mdc-select-box-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%); +$mdc-select-box-disabled-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%); diff --git a/components/select/scss/mdc-select.scss b/components/select/scss/mdc-select.scss new file mode 100644 index 00000000..a3193870 --- /dev/null +++ b/components/select/scss/mdc-select.scss @@ -0,0 +1,159 @@ +// +// Copyright 2017 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. +// + +@import "./keyframes"; +@import "./mixins"; +@import "./variables"; +@import "@material/animation/variables"; +@import "@material/line-ripple/mdc-line-ripple"; +@import "@material/floating-label/mdc-floating-label"; +@import "@material/typography/mixins"; +@import "@material/ripple/common"; +@import "@material/ripple/mixins"; +@import "@material/rtl/mixins"; + +// postcss-bem-linter: define select +.mdc-select { + @include mdc-select-container-fill-color(transparent); + @include mdc-select-dd-arrow-svg-bg_; + @include mdc-select-ink-color($mdc-select-ink-color); + @include mdc-select-label-color($mdc-select-label-color); + @include mdc-select-bottom-line-color($mdc-select-bottom-line-idle-color); + + // Focused state colors + @include mdc-select-focused-bottom-line-color(primary); + @include mdc-select-focused-label-color($mdc-select-focused-label-color); + + // Hover state colors + @include mdc-select-hover-bottom-line-color($mdc-select-bottom-line-hover-color); + + display: inline-flex; + position: relative; + box-sizing: border-box; + height: 52px; + background-repeat: no-repeat; + background-position: right 8px bottom 12px; + overflow: hidden; + + @include mdc-rtl { + background-position: left 8px bottom 12px; + } + + &__native-control { + @include mdc-rtl-reflexive-property(padding, 0, $mdc-select-arrow-padding); + @include mdc-typography(subtitle1); + + &::-ms-expand { + display: none; + } + + // counteracts the extra text padding that Firefox adds by default + @-moz-document url-prefix("") { + text-indent: -2px; + } + + width: 100%; + padding-top: 20px; + padding-bottom: 4px; + border: none; + border-bottom: 1px solid; + border-radius: 0; + outline: none; + background-color: transparent; + white-space: nowrap; + cursor: pointer; + appearance: none; + } + + // stylelint-disable-next-line plugin/selector-bem-pattern + .mdc-floating-label { + pointer-events: none; + } + + @include mdc-select-focused-line-ripple_ { + &::after { + transform: scale(1, 2); + opacity: 1; + } + } +} + +.mdc-select--box { + @include mdc-select-container-fill-color($mdc-select-box-fill-color); + @include mdc-ripple-surface; + @include mdc-ripple-radius-bounded; + // Select Box intentionally omits press ripple, so each state needs to be specified individually + @include mdc-states-base-color($mdc-select-ink-color); + @include mdc-states-hover-opacity(mdc-states-opacity($mdc-select-ink-color, hover)); + @include mdc-states-focus-opacity( + mdc-states-opacity($mdc-select-ink-color, focus), + $has-nested-focusable-element: true + ); + + height: 56px; + border-radius: 4px 4px 0 0; + background-position: right 10px center; + + @include mdc-rtl { + background-position: left 10px center; + } + + .mdc-select__native-control { + @include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding); + + height: 56px; + border-radius: 4px 4px 0 0; + } + + // stylelint-disable plugin/selector-bem-pattern + .mdc-floating-label { + @include mdc-rtl-reflexive-position(left, 16px); + + bottom: 12px; + line-height: 1.75rem; + + &--float-above { + transform: translateY(-40%) scale(.75, .75); + } + } + // stylelint-enable plugin/selector-bem-pattern +} + +.mdc-select--disabled { + @include mdc-select-dd-arrow-svg-bg_($mdc-select-disabled-ink-color); + + &.mdc-select--box { + @include mdc-select-container-fill-color_($mdc-select-box-disabled-fill-color); + } + + .mdc-floating-label { + @include mdc-floating-label-ink-color($mdc-select-disabled-label-color); + } + + // stylelint-disable plugin/selector-bem-pattern + .mdc-line-ripple { + display: none; + } + // stylelint-enable plugin/selector-bem-pattern + + .mdc-select__native-control { + border-bottom-style: dotted; + } + + opacity: .38; + cursor: default; + pointer-events: none; +} diff --git a/components/select/styles.scss b/components/select/styles.scss index 2de98db4..1679d16c 100644 --- a/components/select/styles.scss +++ b/components/select/styles.scss @@ -1 +1,5 @@ -@import "@material/select/mdc-select"; +// @import "@material/select/mdc-select"; + +// temporary fix for postcss +@import "./scss/mdc-select"; +