diff --git a/packages/mdc-menu/simple/mdc-simple-menu.scss b/packages/mdc-menu/simple/mdc-simple-menu.scss index b1b9297df90..d664b03def8 100644 --- a/packages/mdc-menu/simple/mdc-simple-menu.scss +++ b/packages/mdc-menu/simple/mdc-simple-menu.scss @@ -138,7 +138,6 @@ $mdc-simple-menu-item-fade-duration: .3s; } position: relative; - padding: 0 16px; outline: none; color: inherit; text-decoration: none; @@ -159,52 +158,18 @@ $mdc-simple-menu-item-fade-duration: .3s; } } - // stylelint-disable selector-no-qualifying-type - &--selected.mdc-list-item, - &--selected.mdc-list-item .mdc-list-item__graphic { - @include mdc-theme-prop(color, primary); - } - // stylelint-enable selector-no-qualifying-type - - // TODO(sgomes): Revisit when we have interactive lists. - .mdc-list-item::before { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - transition: opacity 120ms $mdc-animation-deceleration-curve-timing-function; - border-radius: inherit; - background: currentColor; - opacity: 0; - pointer-events: none; - content: ""; - } - - .mdc-list-item:focus::before { - opacity: .12; - } - - .mdc-list-item:active::before { - // Slightly darker value for visual distinction. - // This allows a full base that has distinct modes. - // Progressive enhancement with ripples will provide complete button spec alignment. - opacity: .18; - } - .mdc-list-item[aria-disabled="true"] { @include mdc-theme-prop(color, text-disabled-on-light); - @include mdc-theme-dark(".mdc-select") { + @include mdc-theme-dark(".mdc-simple-menu") { @include mdc-theme-prop(color, text-disabled-on-dark); } cursor: default; - } + pointer-events: none; - .mdc-list-item[aria-disabled="true"] { - &:focus::before, - &:active::before { + // TODO(#1495): Disabled menu items shouldn't be focusable, so this style shouldn't be necessary. + &:focus::before { opacity: 0; } }