mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-13 17:57:06 +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
49 lines
1.9 KiB
Plaintext
49 lines
1.9 KiB
Plaintext
// This file is being considered for Core as part of T252774.
|
|
|
|
// Notes:
|
|
//
|
|
// - Usage requires three elements: a hidden checkbox input, a button, and a show / hide target.
|
|
// - By convention, the checked state is considered expanded or visible. Unchecked is considered
|
|
// hidden.
|
|
// - Please see additional documentation in checkboxHack.js for example HTML and JavaScript
|
|
// integration.
|
|
//
|
|
// Example supplemental styles (to be added on a per use case basis):
|
|
//
|
|
// - Animate target in and out from start (left in LTR) to end (right in LTR):
|
|
//
|
|
// .mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-checkbox-hack-target {
|
|
// // Turn off presentation so that screen readers get the same effect as visually
|
|
// // hiding. Visibility and opacity can be animated. If animation is unnecessary, all
|
|
// // of this can be replaced with `display: none` instead to avoid hidden rendering.
|
|
// visibility: hidden;
|
|
// opacity: 0;
|
|
// @timing: @transition-duration-base ease-in-out;
|
|
// .transition( transform @timing, opacity @timing, visibility @timing; );
|
|
// .transform( translateX( -100% ) );
|
|
// }
|
|
//
|
|
// - Show / hide the target instantly without animation:
|
|
//
|
|
// .mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-checkbox-hack-target {
|
|
// display: none;
|
|
// }
|
|
|
|
@import 'mediawiki.ui/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
.mw-checkbox-hack-checkbox {
|
|
position: absolute;
|
|
// Always lower the checkbox behind the foreground content.
|
|
z-index: -1;
|
|
// The checkbox `display` cannot be `none` since its focus state is used for other selectors.
|
|
opacity: 0;
|
|
}
|
|
|
|
.mw-checkbox-hack-button {
|
|
// Labels are inlined by default but are also an icon having width and height specified.
|
|
display: inline-block;
|
|
// Use the hand icon for the toggle button which is actually a checkbox label.
|
|
cursor: pointer;
|
|
}
|