mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/mainmenu.less
jdlrobson ddc1e2a30d Content area needs a z-index
The content area is the sibling of the overlay.
For the overlay to overlay it and its children it
must explicitly setting a z-index

additional changes:
* Move UI styles from skins.minerva.mainMenu.styles
to their more logical place (note skins.minerva.mainMenu.styles
is loaded via JavaScript unncessarily)

Bug: T193444
Depends-On: I7c0d02f073a2fe165a6027e3c6d1455e22c1b563
Change-Id: I8be31c7daf254e22ccaed81704cbcd2b638c54f6
2018-05-03 18:01:51 +00:00

273 lines
5.5 KiB
Plaintext

// Component of ui.less
// FIXME: Move to components/
@import 'minerva.variables';
@import 'minerva.mixins';
/* stylelint-disable no-descending-specificity */
/* Left menu */
@menuSectionPadding: 22px;
@menuLinkLineHeight: 24px;
@menuItemFontSize: 0.875em;
@menuItemBackgroundColor: @skinContentBgColor;
// needs to be more specific than .overlay rules
.notifications-overlay.navigation-drawer {
right: 0;
height: 100%;
width: auto;
box-shadow: -5px 0 0 0 rgba( 0, 0, 0, 0.3 );
}
nav {
background-color: @primaryNavBackgroundColor;
float: left;
min-height: 100%;
.secondary-action {
border: 0;
// T170362 - reset font size
font-size: 16px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding-right: 0;
border-left: 1px solid @grayMediumLight;
}
.primary-action {
// 1px for the logout icon border-left
margin-right: @iconSize + @iconGutterWidth * 2;
}
ul {
padding-bottom: @menuSectionPadding;
&:first-child {
li:first-child {
border-top: 0;
}
}
li {
background-color: @menuItemBackgroundColor;
position: relative; // ensure the logout link in beta can be position absolute
border-top: 1px solid @colorGray14;
// offset the border for the icon by 1px
margin-top: -1px;
font-size: @menuItemFontSize;
&:first-child {
border-top: 0;
}
a {
color: @colorGray5;
display: block;
padding: @menuLinkLineHeight / 2 10px @menuLinkLineHeight / 2 15px;
&:hover {
box-shadow: inset 4px 0 0 0 @colorProgressive;
text-decoration: none;
}
&:visited,
&:active {
color: @colorGray5;
}
&.mw-ui-icon {
font-weight: bold;
line-height: 1.857; // equals `26px` at `font-size: 14px` above
&:before {
font-size: 16px;
}
}
}
}
&.hlist {
li {
background-color: transparent;
border: 0;
margin: 0;
font-size: 0.75em; // equals `12px` at base `font-size: 16px`
// T173507
&:after {
content: none;
}
a {
color: @colorProgressive;
padding: 0.7em 12px;
&:hover {
background-color: transparent;
box-shadow: none;
}
}
}
}
}
}
.navigation-enabled {
#mw-mf-viewport {
// disable horizontal scrolling
overflow: hidden;
// the two following properties are needed to override the height set
// by position: fixed fallback on scroll event
min-height: 100%;
height: auto !important;
}
#mw-mf-page-center {
// Since we change the color of the body tag above we need to ensure the content has a white background
background: #fff;
position: absolute;
height: 100%;
// Overriden in mainmenuAnimation
left: @menuWidth;
}
.navigation-drawer,
.transparent-shield {
visibility: visible;
}
.transparent-shield {
background: @semiTransparent;
opacity: 0.5;
.transition( opacity 0.25s ease-in-out );
}
}
.primary-navigation-enabled {
background-color: @primaryNavBackgroundColor;
nav {
width: @menuWidth;
}
// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
.drawer .position-fixed {
left: @menuWidth !important;
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
@rightDrawerLeftOffset: 100% - @rightDrawerWidth;
.secondary-navigation-enabled {
#mw-mf-page-center {
left: -@rightDrawerWidth !important;
right: @rightDrawerWidth !important;
width: auto;
.main-header-button {
visibility: hidden;
}
}
}
.notifications-overlay.navigation-drawer {
left: @rightDrawerLeftOffset;
}
}
// animated version
@duration: 0.25s;
@easing: ease-in-out;
// FIXME: Cleanup animation css
.animations {
#mw-mf-page-center {
min-height: 100%;
// *2 to avoid weird glitch of left nav flickering after closing
@transition: @duration @easing, height 0s ( @duration * 2 );
.transition-transform( @transition );
}
nav {
width: @menuWidth;
.transition( visibility 0s @duration );
}
// FIXME: Make animations a conditional class on the drawer itself
.notifications-overlay.navigation-drawer {
display: block;
// +2% to accommodate for the border/box-shadow
.transform( translate( 102%, 0 ) );
.transition-transform( @duration @easing, visibility 0s @duration; );
&.visible {
.transform( translate( 0, 0 ) );
}
}
}
.navigation-enabled.animations {
// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
.drawer .position-fixed,
#mw-mf-page-center {
.transition-transform( @duration @easing );
}
}
.primary-navigation-enabled.animations {
// FIXME: Menu shouldn't need to know about drawers
.drawer .position-fixed,
#mw-mf-page-center {
// override non-animated version
left: 0 !important;
.transform( translate( @menuWidth, 0 ) );
}
nav {
// make menu scrollable when open (on small screens)
position: static;
.transition( none );
}
}
.secondary-navigation-enabled.animations {
#mw-mf-page-center {
// override non-animated version
left: 0 !important;
.transform( translate( -@rightDrawerWidth, 0 ) );
width: 100%;
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
.navigation-enabled {
#mw-mf-page-center {
left: @menuWidthTablet;
}
}
.primary-navigation-enabled {
&.animations {
// FIXME: Menu shouldn't need to know about drawers
.drawer .position-fixed,
#mw-mf-page-center {
.transform( translate( @menuWidthTablet, 0 ) );
}
}
nav {
width: @menuWidthTablet;
}
// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
.drawer .position-fixed {
left: @menuWidthTablet !important;
}
}
}