diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss new file mode 100644 index 00000000000..c010a34e0a6 --- /dev/null +++ b/src/lib/core/style/_menu-common.scss @@ -0,0 +1,45 @@ +@import './variables'; +@import './elevation'; +@import './list-common'; + +/** The mixins below are shared between md-menu and md-select */ + +// menu width must be a multiple of 56px +$md-menu-overlay-min-width: 112px !default; // 56 * 2 +$md-menu-overlay-max-width: 280px !default; // 56 * 5 + +$md-menu-item-height: 48px !default; +$md-menu-font-size: 16px !default; +$md-menu-side-padding: 16px !default; +$md-menu-vertical-padding: 8px !default; + +@mixin md-menu-base() { + @include md-elevation(2); + min-width: $md-menu-overlay-min-width; + max-width: $md-menu-overlay-max-width; + + overflow: auto; + -webkit-overflow-scrolling: touch; // for momentum scroll on mobile + + padding-top: $md-menu-vertical-padding; + padding-bottom: $md-menu-vertical-padding; +} + +@mixin md-menu-item-base() { + @include md-truncate-line(); + + display: flex; + flex-direction: row; + align-items: center; + height: $md-menu-item-height; + padding: 0 $md-menu-side-padding; + + font-size: $md-menu-font-size; + font-family: $md-font-family; + text-align: start; + text-decoration: none; // necessary to reset anchor tags + + &[disabled] { + cursor: default; + } +} diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss index fafa964c6c2..06192753143 100644 --- a/src/lib/menu/menu.scss +++ b/src/lib/menu/menu.scss @@ -1,55 +1,22 @@ // TODO(kara): update vars for desktop when MD team responds // TODO(kara): animation for menu opening -@import '../core/style/variables'; -@import '../core/style/elevation'; + @import '../core/style/button-common'; @import '../core/style/sidenav-common'; -@import '../core/style/list-common'; - - -// menu width must be a multiple of 56px -$md-menu-overlay-min-width: 112px !default; // 56 * 2 -$md-menu-overlay-max-width: 280px !default; // 56 * 5 - -$md-menu-item-height: 48px !default; -$md-menu-font-size: 16px !default; -$md-menu-side-padding: 16px !default; -$md-menu-vertical-padding: 8px !default; +@import '../core/style/menu-common'; .md-menu-panel { - @include md-elevation(2); - min-width: $md-menu-overlay-min-width; - max-width: $md-menu-overlay-max-width; + @include md-menu-base(); // max height must be 100% of the viewport height + one row height max-height: calc(100vh + 48px); - overflow: auto; - -webkit-overflow-scrolling: touch; // for momentum scroll on mobile - - padding-top: $md-menu-vertical-padding; - padding-bottom: $md-menu-vertical-padding; } [md-menu-item] { @include md-button-reset(); - @include md-truncate-line(); - - display: flex; - flex-direction: row; - align-items: center; - height: $md-menu-item-height; - padding: 0 $md-menu-side-padding; - - font-size: $md-menu-font-size; - font-family: $md-font-family; - text-align: start; - text-decoration: none; // necessary to reset anchor tags - - &[disabled] { - cursor: default; - } + @include md-menu-item-base(); } button[md-menu-item] { width: 100%; -} \ No newline at end of file +}