mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 09:21:11 +00:00
5195f5fd67
Add a menu button that toggles the panel's (also referred to as a sidebar) collapse state. When the screen is wide enough, animate the transition. The menu icon from OOUI is copied into Vector to avoid two ResourceLoaders modules (collapseHorizontal icon isn't ready for inclusion in the OOUI icon pack and ResourceLoaderOOUIIconPackModule doesn't support images). Additional polish and collaboration is needed but this patch fulfills the scope of its referenced task. Bug: T246419 Depends-On: I8e153c0ab927f9d880a68fb9efb0bf37b91d26b2 Change-Id: Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a
81 lines
2.6 KiB
Plaintext
81 lines
2.6 KiB
Plaintext
@import '../../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import './layout.less';
|
|
@import 'legacy/Sidebar.less';
|
|
@import 'checkboxHack.less';
|
|
|
|
.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;
|
|
}
|
|
|
|
// FIXME please add a class, .mw-navigation, and use that instead of this identifier.
|
|
#mw-navigation {
|
|
.mw-checkbox-hack-checkbox,
|
|
.mw-checkbox-hack-button {
|
|
// The icon is only 44px tall but the header is 50px. Offset by the difference from the logo
|
|
// icon and center with respect to the header.
|
|
top: @height-logo-icon - @size-sidebar-button + ( @height-header - @height-logo-icon ) / 2;
|
|
// Some made up value to be revised by Alex.
|
|
left: 10px;
|
|
}
|
|
|
|
.mw-checkbox-hack-button {
|
|
position: absolute;
|
|
z-index: @z-index-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;
|
|
|
|
&:before {
|
|
// Center it.
|
|
margin: 12px;
|
|
// 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-height: 20px;
|
|
opacity: 0.87;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @background-color-frameless--hover;
|
|
}
|
|
|
|
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base; );
|
|
}
|
|
|
|
.mw-checkbox-hack-checkbox:focus ~ .mw-checkbox-hack-button {
|
|
// Next two rules from OOUI, frameless, icon-only button widget.
|
|
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-checkbox-hack-checkbox:not( :checked ) ~ .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% ) );
|
|
}
|
|
}
|
|
|
|
.mw-sidebar {
|
|
// Enable animations on desktop width only.
|
|
@media ( min-width: @width-breakpoint-desktop ) {
|
|
@timing: @transition-duration-base ease-out;
|
|
.transition( transform @timing, opacity @timing, visibility @timing; );
|
|
}
|
|
}
|