mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-05 11:08:17 +00:00
8de58c546e
Impacts footer and main menu Bug: T173507 Change-Id: Ie519550c0657c2314ecccaca1d65ecf99d0a3f5f
288 lines
5.7 KiB
Plaintext
288 lines
5.7 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;
|
|
@menuBorderColor: #252525;
|
|
@menuLinkLineHeight: 24px;
|
|
@menuItemFontSize: 0.875em;
|
|
@menuItemBackgroundColor: @skinContentBgColor;
|
|
|
|
@pageLeftListDarkBorderColor: #3e3e3e;
|
|
@pageLeftListMediumBorderColor: #5c5c5c;
|
|
@pageLeftListLightBorderColor: #717171;
|
|
|
|
#mw-mf-viewport {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
#mw-mf-page-center {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
// 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: @deviceWidthTablet ) {
|
|
@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: @deviceWidthTablet ) {
|
|
.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;
|
|
}
|
|
}
|
|
}
|