mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-24 14:23:53 +00:00
Merge "[fix] [LESS] remove main menu styles duplicate"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
15434e6267
|
|
@ -1,287 +0,0 @@
|
|||
// Component of ui.less
|
||||
// FIXME: Move to components/
|
||||
@import '../../minerva.less/minerva.variables';
|
||||
@import '../../minerva.less/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 );
|
||||
}
|
||||
|
||||
#mw-mf-page-left {
|
||||
background-color: @primaryNavBackgroundColor;
|
||||
float: left;
|
||||
height: 100%;
|
||||
// Add vertical scrollbar as needed.
|
||||
overflow-y: auto;
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
#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 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
// FIXME: overrides the .has-drawer background color when a drawer is open.
|
||||
// Should be removed when T214045 is resolved.
|
||||
.primary-navigation-enabled.has-drawer {
|
||||
background-color: @primaryNavBackgroundColor;
|
||||
}
|
||||
|
||||
.primary-navigation-enabled {
|
||||
background-color: @primaryNavBackgroundColor;
|
||||
|
||||
#mw-mf-page-left {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-overlay.navigation-drawer {
|
||||
left: @rightDrawerLeftOffset;
|
||||
|
||||
.overlay-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0; // T210191
|
||||
width: 100%; // T218731
|
||||
// T170903
|
||||
max-width: none;
|
||||
|
||||
.cancel {
|
||||
// 0 because we want to have some tappable area to the left of the icon
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 );
|
||||
}
|
||||
|
||||
#mw-mf-page-left {
|
||||
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 ) );
|
||||
}
|
||||
|
||||
#mw-mf-page-left {
|
||||
// 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 ) );
|
||||
}
|
||||
}
|
||||
|
||||
#mw-mf-page-left {
|
||||
width: @menuWidthTablet;
|
||||
}
|
||||
|
||||
// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
|
||||
.drawer .position-fixed {
|
||||
left: @menuWidthTablet !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue