@import "../base"; @import "./config"; .root { position: relative; display: inline-block; &.top-left { position: absolute; top: 0; left: 0; > .outline { transform-origin: 0 0; } } &.top-right { position: absolute; top: 0; right: 0; > .outline { transform-origin: 100% 0; } } &.bottom-left { position: absolute; bottom: 0; left: 0; > .outline { transform-origin: 0 100%; } } &.bottom-right { position: absolute; right: 0; bottom: 0; > .outline { transform-origin: 100% 100%; } } &:not(.static) { z-index: $z-index-higher; pointer-events: none; > .outline { opacity: 0; transition: transform $menu-expand-duration $animation-curve-default, opacity $menu-fade-duration $animation-curve-default; transform: scale(0); will-change: transform; } > .menu { position: absolute; top: 0; left: 0; opacity: 0; } &.rippled:not(.active) { > .outline { transition-delay: $menu-ripple-delay; } > .menu { transition-delay: $menu-ripple-delay; } } &.active { pointer-events: all; > .outline { opacity: 1; transform: scale(1); } > .menu { opacity: 1; transition: opacity $menu-fade-duration $animation-curve-default, clip $menu-expand-duration $animation-curve-default; } } } } .outline { @include shadow-2dp(); position: absolute; top: 0; left: 0; display: block; background-color: $menu-background-color; border-radius: $menu-outline-border-radius; } .menu { position: relative; display: block; padding: $menu-padding; text-align: left; white-space: nowrap; list-style: none; }