Page MenuHomeWickedGov Phorge
Files F4131235

MainMenu.less
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

MainMenu.less
View Options

// Component of ui.less
@import '../../minerva.less/minerva.variables.less';
// stylelint-disable no-descending-specificity, selector-max-id
// .menu
#mw-mf-page-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
min-width: 275px;
visibility: hidden;
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
min-width: @min-width-breakpoint-mobile;
}
// It should always be possible to dismiss the menu by tapping outside of it.
max-width: 80%;
z-index: @z-index-drawer;
// Add vertical scrollbar as needed.
overflow-y: auto;
background-color: @background-color-interactive;
transform: translate( -100%, 0 );
ul {
padding-bottom: 22px;
}
}
// TODO: combined with `.mw-mf-page-center__mask` & create a separate "masks" module.
.main-menu-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
bottom: 0;
background: @opaque;
z-index: @z-index-above-content;
// don't use display: none because it's not animatable
visibility: hidden;
}
#main-menu-input:checked ~ .main-menu-mask {
visibility: visible;
opacity: 0.5;
}
#main-menu-input:checked ~ #mw-mf-page-left {
visibility: visible;
box-shadow: @box-shadow-drop-medium;
transform: translate( 0, 0 );
}
// Without the minerva-animations-ready class, the main menu can appear and
// perform its exit animation when the page loads in chrome (and possibly
// others).
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189
.minerva-animations-ready {
#mw-mf-page-left {
// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
// cannot be animated initially as it causes a flash on page load in Chromium due to
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
transition: opacity @transition-duration-medium @transition-timing-function-menu, visibility @transition-duration-medium @transition-timing-function-menu, transform @transition-duration-medium @transition-timing-function-menu;
}
.main-menu-mask {
transition: opacity @transition-duration-base @transition-timing-function-menu, visibility 0ms linear @transition-duration-base;
}
#main-menu-input:checked ~ .main-menu-mask {
transition: opacity @transition-duration-base @transition-timing-function-menu;
}
}
// T264376 - disable animations on browsers impacted by bug
.hotfix-T264376 {
.main-menu-mask {
display: none;
}
#main-menu-input:checked ~ .main-menu-mask {
display: block;
}
}
// stylelint-enable no-descending-specificity, selector-max-id

File Metadata

Mime Type
text/plain
Expires
Wed, Aug 19, 10:47 (3 w, 8 h ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
da/d1/8bdbe5a0a6ce09d5fa12d2a974dd
Default Alt Text
MainMenu.less (2 KB)

Event Timeline