mediawiki-skins-Vector/resources/skins.vector.styles/components/Sidebar.less

188 lines
5.7 KiB
Plaintext

@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
@import '../layouts/screen.less';
@import './checkboxHack.less';
// T305069 Layout adjustments of sidebar elements:
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
@margin-top-sidebar-toc_title_inline: 3.5em;
// Default spacing separating the sidebar TOC from the main menu or viewport.
@margin-top-sidebar-toc: 1.5em;
.mw-sidebar {
box-sizing: border-box;
// Hide #p-navigation label
#p-navigation .vector-menu-heading {
display: none;
}
}
// FIXME: Delete this selector when .vector-toc-enabled is removed (T310527)
body:not( .vector-toc-enabled ) .mw-sidebar {
width: @width-grid-column-one;
// To avoid the white part of the gradient colliding with the sidebar links
// we apply top and bottom padding.
padding: 8px 0 40px @padding-left-sidebar;
background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% );
}
// Update styling when TOC is enabled
.vector-toc-enabled {
.mw-sidebar,
.sidebar-toc,
.sidebar-toc:after {
// Match styles between TOC and fade element to ensure the fade covers the correct area
width: @width-sidebar;
margin-left: 0;
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-wide;
margin-left: @margin-start-sidebar-content;
}
}
.mw-sidebar {
// Temporary magic number, will be calculated after TOC specs are finalized
padding: 12px 19px 12px 9px;
background-image: none;
background-color: @background-color-secondary--modern;
}
& .vector-layout-grid {
@media ( min-width: @min-width-desktop ) {
.mw-sidebar {
// Prevent grid row gap from affecting TOC spacing when main menu is open
margin-bottom: -@grid-row-gap;
}
}
.sidebar-toc {
// Use margin-top to align TOC rather than grid row gap
// Applies when the TOC sticky and when the main menu is both open and closed.
margin-top: @margin-top-sidebar-toc;
}
}
}
// FIXME: Merge margin-top styles with above when .vector-toc-enabled is removed (T310527)
.sidebar-toc {
.vector-toc-enabled .vector-layout-legacy & {
// Main menu is closed
margin-top: @margin-top-sidebar-toc_title_inline;
}
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
// Main menu is open
margin-top: @margin-top-sidebar-toc;
}
.vector-toc-enabled.vector-sticky-header-visible .vector-layout-legacy & {
// Sticky header is visible
margin-top: @margin-top-sidebar-toc;
}
}
.mw-sidebar-action {
// Align with the portal heading/links
// `.portal` + `.portal .body`
margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
// Styles for SidebarAction template.
.mw-sidebar-action-item {
h3.mw-sidebar-action-heading {
display: block;
background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% @border-width-base;
color: @color-base--subtle;
margin: 0.75em 0;
border: 0;
padding: 0.3em 0;
font-size: @font-size-nav-main-heading;
font-weight: normal;
cursor: default;
}
.mw-sidebar-action-content {
> * {
font-size: @font-size-portal-list-item;
}
> a {
font-weight: bold;
}
}
// T295555 style overrides for temporary language switch alert (can be removed later ).
.vector-language-sidebar-alert {
padding: 0.75em;
}
}
}
#mw-sidebar-button {
&:before {
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
opacity: 0.67;
/* @embed */
background-image: url( images/chevronHorizontal-ltr.svg );
#mw-sidebar-checkbox:not( :checked ) ~ .mw-header & {
/* @embed */
background-image: url( images/menu.svg );
}
}
&:hover {
&:before {
opacity: 1;
}
}
}
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
// checkbox input for the menu panel.
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
// Turn off presentation so that screen readers get the same effect as visually hiding.
// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
// instead to avoid hidden rendering.
visibility: hidden;
opacity: 0;
transform: translateX( -100% );
}
@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
.mw-sidebar {
background: @background-color-page-container;
border-right: @border-width-base @border-style-base @border-color-sidebar;
}
}
// Disable transitions on page load. No-JS users will unfortunately miss out. A similar pattern is
// used in Minerva's DropDownList. See enableCssAnimations() in skin.vector.js/index.js for context
// and additional details on how this class is added.
.vector-animations-ready {
// Enable transition on all widths by default.
.mw-sidebar {
transition-property: transform, opacity, visibility;
transition-duration: @transition-duration-base;
transition-timing-function: ease-out;
}
@media ( max-width: @max-width-mobile ) {
.mw-sidebar {
transition: none;
}
}
// Enable sidebar button transitions.
#mw-sidebar-button {
transition-property: background-color, border-color, box-shadow;
transition-duration: @transition-duration-base;
}
}