|
|
/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v1.1.1 */ .md-open-menu-container { position: fixed; left: 0; top: 0; z-index: 100; opacity: 0; border-radius: 2px; } .md-open-menu-container md-menu-divider { margin-top: 4px; margin-bottom: 4px; height: 1px; min-height: 1px; max-height: 1px; width: 100%; } .md-open-menu-container md-menu-content > * { opacity: 0; } .md-open-menu-container:not(.md-clickable) { pointer-events: none; } .md-open-menu-container.md-active { opacity: 1; -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); -webkit-transition-duration: 200ms; transition-duration: 200ms; } .md-open-menu-container.md-active > md-menu-content > * { opacity: 1; -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .md-open-menu-container.md-leave { opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-transition-duration: 250ms; transition-duration: 250ms; }
md-menu-content { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 8px 0; max-height: 304px; overflow-y: auto; } md-menu-content.md-dense { max-height: 208px; } md-menu-content.md-dense md-menu-item { height: 32px; min-height: 0px; }
md-menu-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; min-height: 48px; height: 48px; -webkit-align-content: center; align-content: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; /* * We cannot use flex on <button> elements due to a bug in Firefox, so we also can't use it on * <a> elements. Add some top padding to fix alignment since buttons automatically align their * text vertically. */ } md-menu-item > * { width: 100%; margin: auto 0; padding-left: 16px; padding-right: 16px; } md-menu-item > a.md-button { padding-top: 5px; } md-menu-item > .md-button { text-align: left; display: inline-block; border-radius: 0; margin: auto 0; font-size: 15px; text-transform: none; font-weight: 400; height: 100%; padding-left: 16px; padding-right: 16px; width: 100%; } md-menu-item > .md-button::-moz-focus-inner { padding: 0; border: 0; } [dir=rtl] md-menu-item > .md-button { text-align: right; } md-menu-item > .md-button md-icon { margin: auto 16px auto 0; } [dir=rtl] md-menu-item > .md-button md-icon { margin: auto 0 auto 16px; } md-menu-item > .md-button p { display: inline-block; margin: auto; } md-menu-item > .md-button span { margin-top: auto; margin-bottom: auto; } md-menu-item > .md-button .md-ripple-container { border-radius: inherit; }
md-toolbar .md-menu { height: auto; margin: auto; padding: 0; }
@media (max-width: 959px) { md-menu-content { min-width: 112px; } md-menu-content[width="3"] { min-width: 168px; } md-menu-content[width="4"] { min-width: 224px; } md-menu-content[width="5"] { min-width: 280px; } md-menu-content[width="6"] { min-width: 336px; } md-menu-content[width="7"] { min-width: 392px; } }
@media (min-width: 960px) { md-menu-content { min-width: 96px; } md-menu-content[width="3"] { min-width: 192px; } md-menu-content[width="4"] { min-width: 256px; } md-menu-content[width="5"] { min-width: 320px; } md-menu-content[width="6"] { min-width: 384px; } md-menu-content[width="7"] { min-width: 448px; } }
|