mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-27 00:50:08 +00:00
2adab440a5
Replacing Less mixin calls of `.transition()`, deprecated since MW 1.37, with CSS property, but constituent properties. This has been an outcome of recent discussions around design tokens, which will be simpler to define, more modular, and better scoped. See T304443 for further information. Also clarifying, aligning comments. Bug: T308351 Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
48 lines
1.9 KiB
Plaintext
48 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;
|
|
// transition-property: transform, opacity, visibility;
|
|
// transition-duration: @transition-duration-base;
|
|
// transition-timing-function: ease-in-out;
|
|
// .transform( translateX( -100% ) );
|
|
// }
|
|
//
|
|
// - Show / hide the target instantly without animation:
|
|
//
|
|
// .mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-checkbox-hack-target {
|
|
// display: none;
|
|
// }
|
|
|
|
@import '../../common/variables.less';
|
|
|
|
.mw-checkbox-hack-checkbox {
|
|
// We don't want the browser to focus on the checkbox so we remove it from the
|
|
// accessibility tree. Instead, we want the label button to receive focus
|
|
// which has a tabindex of '0'.
|
|
display: none;
|
|
}
|
|
|
|
.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;
|
|
}
|