mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-25 14:47:08 +00:00
17968826fa
Follow up to I4c2e115451c0a76c742734730712814c1f1d838d.
This will allow us to load the templates directly into skin.mustache
via {{>PartialName}}
Templates partials can only be resolved relative to the folder given
to the TemplateParser.
Change-Id: I5783d49c25d2efcf4781dd912500bf8b413b8cb6
96 lines
2.5 KiB
Plaintext
96 lines
2.5 KiB
Plaintext
// Component of ui.less
|
|
@import '../../minerva.less/minerva.variables.less';
|
|
@import '../../minerva.less/minerva.mixins.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: @width-breakpoint-tablet ) {
|
|
min-width: @width-breakpoint-mobile;
|
|
}
|
|
// It should always be possible to dismiss the menu by tapping outside of it.
|
|
max-width: 80%;
|
|
z-index: @z-indexDrawer;
|
|
// Add vertical scrollbar as needed.
|
|
overflow-y: auto;
|
|
background-color: @primaryNavBackgroundColor;
|
|
.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: @semiTransparent;
|
|
z-index: @z-indexAboveContent;
|
|
// 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: 1px 0 8px 0 @grayDrawerShadow;
|
|
.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 {
|
|
.transition(
|
|
// 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.
|
|
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
|