diff --git a/packages/mdc-menu-surface/_mixins.scss b/packages/mdc-menu-surface/_mixins.scss index b78f14afa8d..72bc2262a26 100644 --- a/packages/mdc-menu-surface/_mixins.scss +++ b/packages/mdc-menu-surface/_mixins.scss @@ -40,23 +40,24 @@ .mdc-menu-surface { @include mdc-menu-surface-base_($query); @include mdc-elevation($z-value: 8, $query: $query); - @include mdc-menu-surface-fill-color(surface, $query); @include mdc-menu-surface-ink-color(on-surface, $query); - @include mdc-menu-surface-shape-radius(medium, $query); + @include mdc-menu-surface-shape-radius(medium, false, $query); @include mdc-feature-targets($feat-structure) { @include mdc-rtl-reflexive-property(transform-origin, top left, top right); } } - @include mdc-feature-targets($feat-structure) { - .mdc-menu-surface--anchor { + .mdc-menu-surface--anchor { + @include mdc-feature-targets($feat-structure) { position: relative; overflow: visible; } + } - .mdc-menu-surface--fixed { + .mdc-menu-surface--fixed { + @include mdc-feature-targets($feat-structure) { position: fixed; } } @@ -109,13 +110,17 @@ overflow: auto; will-change: transform, opacity; z-index: $mdc-menu-surface-z-index; + } - &:focus { + &:focus { + @include mdc-feature-targets($feat-structure) { outline: none; } + } - // stylelint-disable-next-line selector-max-type - &--open { + // stylelint-disable-next-line selector-max-type + &--open { + @include mdc-feature-targets($feat-structure) { display: inline-block; transform: scale(1); opacity: 1; diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss index a563000e5cb..747c0f04095 100644 --- a/test/scss/feature-targeting.scss +++ b/test/scss/feature-targeting.scss @@ -42,6 +42,12 @@ @include mdc-menu($query: mdc-feature-any()); @include mdc-menu-width(0, $query: mdc-feature-any()); + // Menu surface + @include mdc-menu-surface($query: mdc-feature-any()); + @include mdc-menu-surface-fill-color(surface, $query: mdc-feature-any()); + @include mdc-menu-surface-ink-color(on-surface, $query: mdc-feature-any()); + @include mdc-menu-surface-shape-radius(medium, $query: mdc-feature-any()); + // Radio @include mdc-radio($query: mdc-feature-any()); @include mdc-radio-unchecked-stroke-color(red, $query: mdc-feature-any()); @@ -79,9 +85,4 @@ @include mdc-switch-toggled-on-thumb-color(on-surface, $query: mdc-feature-any()); @include mdc-switch-toggled-off-track-color(on-surface, $query: mdc-feature-any()); @include mdc-switch-toggled-off-thumb-color(on-surface, $query: mdc-feature-any()); - - // Menu surface - @include mdc-menu-surface-fill-color(surface, $query: mdc-feature-any()); - @include mdc-menu-surface-ink-color(on-surface, $query: mdc-feature-any()); - @include mdc-menu-surface-shape-radius(medium, $query: mdc-feature-any()); }