diff --git a/components/select/styles.scss b/components/select/styles.scss index 8c64068b..09ef3061 100644 --- a/components/select/styles.scss +++ b/components/select/styles.scss @@ -8,94 +8,72 @@ // TODO: MDCFIX // implement new select .mdc-multi-select { - @include mdc-theme-prop(border-color, text-hint-on-light); - - width: 250px; - padding: 0; - border-width: 1px; - border-style: solid; - outline: none; - appearance: none; - - @include mdc-theme-dark { - @include mdc-theme-prop(border-color, text-hint-on-dark); - } - - // stylelint-disable plugin/selector-bem-pattern - .mdc-list-group { - @include mdc-theme-prop(color, text-hint-on-light); - - margin: 16px 0 0; - padding: 0 0 0 16px; - font-weight: normal; - - @include mdc-theme-dark { - @include mdc-theme-prop(color, text-hint-on-dark); - } - - &:last-child { - margin-bottom: 16px; - } - - .mdc-list-divider { - margin-left: -16px; - } - // stylelint-enable plugin/selector-bem-pattern + @include mdc-theme-prop(border-color, text-hint-on-light); + + width: 250px; + padding: 0; + border-width: 1px; + border-style: solid; + outline: none; + appearance: none; + + .mdc-list-divider { + margin-bottom: 8px; + padding-top: 8px; + font-size: 0; + } + + .mdc-list-group { + @include mdc-theme-prop(color, text-hint-on-light); + + margin: 16px 0 0; + padding: 0 0 0 16px; + font-weight: normal; + + &:last-child { + margin-bottom: 16px; } - - // stylelint-disable plugin/selector-bem-pattern - .mdc-list-item { - @include mdc-theme-prop(color, text-primary-on-light); - - margin: 0 0 0 -16px; - padding: 0 16px; - - @include mdc-theme-dark { - @include mdc-theme-prop(color, text-primary-on-dark); - } - - &:first-child { - margin-top: 12px; - } - - &:last-child { - margin-bottom: 8px; - } - - // Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the - // OS-determined selection color, which states styles are not going to play well with. - // Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements - // that we use for ripple/states to position and size themselves relative to the entire body instead. - // Disabling states-specific styles on multi-select options altogether is the most straightforward recourse. - &::before, - &::after { - content: none; - } + + .mdc-list-divider { + margin-left: -16px; } - // stylelint-enable plugin/selector-bem-pattern - - // stylelint-disable plugin/selector-bem-pattern - .mdc-list-item:checked { - @include mdc-theme-prop(background-color, background); - - @include mdc-theme-dark { - @include mdc-theme-prop(background-color, text-primary-on-dark); - } + } + + .mdc-list-item { + @include mdc-theme-prop(color, text-primary-on-light); + + margin: 0 0 0 -16px; + padding: 0 16px; + + &:first-child { + margin-top: 12px; } - - .mdc-list-divider { + + &:last-child { margin-bottom: 8px; - padding-top: 8px; - font-size: 0; } - // stylelint-enable plugin/selector-bem-pattern - } - - .mdc-multi-select:focus .mdc-list-item:checked { - @include mdc-theme-prop(background-color, primary); - - @include mdc-theme-dark { - @include mdc-theme-prop(background-color, text-primary-on-dark); + + // Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the + // OS-determined selection color, which states styles are not going to play well with. + // Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements + // that we use for ripple/states to position and size themselves relative to the entire body instead. + // Disabling states-specific styles on multi-select options altogether is the most straightforward recourse. + &::before, + &::after { + content: none; } } - \ No newline at end of file + + .mdc-list-item:checked { + @include mdc-theme-prop(background-color, background); + } + +} + +.mdc-multi-select:focus .mdc-list-item:checked { + @include mdc-theme-prop(background-color, primary); + + @include mdc-theme-dark { + @include mdc-theme-prop(background-color, text-primary-on-dark); + } +}