mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 08:05:51 +00:00
bfc95effdb
* Moves the sidebar into the header so that user can tab directly from the sidebar button into the sidebar (when open). * Because the sidebar is absolutely positioned inside the header and the header applies a top-margin, we need to adjust the top position calculation for the sidebar. * Removes the checkbox from the accessibility tree through CSS `display: none;` instead of HTML attributes. * Given that the checkbox is not able to receive focus, the `#mw-sidebar-checkbox:focus ~ .mw-header .mw-checkbox-hack-button` CSS rule is obsolete and moved instead to the label button. An additional outline: 0 rule was added to remove the dotted outline that Firefox applies. * Makes the "Skip to navigation" jump link point to the sidebar now. After the sidebar has been tabbed through, the rest of the navigation can be tabbed to. Bug: T246420 Change-Id: I981da3650854568bb9cfbf3c6c59e7625e7d094c
91 lines
2.7 KiB
Plaintext
91 lines
2.7 KiB
Plaintext
@import '../../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import './layout.less';
|
|
@import 'legacy/Sidebar.less';
|
|
@import 'checkboxHack.less';
|
|
|
|
@margin-horizontal-sidebar-button-icon: 12px;
|
|
|
|
.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;
|
|
}
|
|
|
|
.mw-sidebar-action-link {
|
|
font-size: @font-size-portal-list-item;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#mw-sidebar-button {
|
|
// Override minimum dimensions set by mw-ui-icon.mw-ui-icon-element.
|
|
min-width: @size-sidebar-button;
|
|
min-height: @size-sidebar-button;
|
|
width: @size-sidebar-button;
|
|
height: @size-sidebar-button;
|
|
border: 1px solid transparent;
|
|
border-radius: @border-radius-base;
|
|
margin-left: -@margin-horizontal-sidebar-button-icon;
|
|
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
|
|
|
&:before {
|
|
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
|
|
// As soon as mediawiki.ui is standardized, remove this override. See T191021.
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
height: 100%;
|
|
// Center it horizontally.
|
|
margin: 0 @margin-horizontal-sidebar-button-icon;
|
|
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
|
opacity: 0.67;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @background-color-frameless--hover;
|
|
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
// Next three rules from OOUI, frameless, icon-only button widget.
|
|
outline: 0;
|
|
border-color: @color-primary;
|
|
.box-shadow( inset 0 0 0 1px @color-primary );
|
|
}
|
|
}
|
|
|
|
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
|
// checkbox input for the menu panel.
|
|
#mw-sidebar-checkbox:not( :checked ) ~ .mw-header .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% ) );
|
|
}
|
|
|
|
// 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 sidebar transitions on desktop width only.
|
|
.mw-sidebar {
|
|
@media ( min-width: @width-breakpoint-desktop ) {
|
|
@timing: @transition-duration-base ease-out;
|
|
.transition( transform @timing, opacity @timing, visibility @timing; );
|
|
}
|
|
}
|
|
|
|
// Enable sidebar button transitions.
|
|
#mw-sidebar-button {
|
|
.transition(
|
|
background-color @transition-duration-base,
|
|
border-color @transition-duration-base,
|
|
box-shadow @transition-duration-base;
|
|
);
|
|
}
|
|
}
|