mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 11:17:35 +00:00
edd2f4ff85
Separating most LESS files into 2 ResourceLoader modules and a common folder: - skins.vector.styles - skins.vector.styles.legacy - common This changes aims to clearly separate the old (“legacy”), the new (“modern”) and the common styles which were previously all placed under `skins.vector.styles/`. Inside each directory are separate folders for `layouts` and `components`. The entry files, `skin.less` and `skin-legacy.less` are moved into the specific folders and a third, `common.less` entry file is created that contains the common imports for both old and new Vector. Aliases have been added to the Storybook Webpack config to avoid adding the story file changes to this patch. Images coming from CSS `url()`'s have also been temporarily disabled in Storybook until Storybook can be upgraded to use Webpack 5, and use array values for aliases, in a follow-up patch. This patch also slightly changes a footer layout specific rule so that existing `padding` remains unchanged in rendering due to new common and component structure. Bug: T264309 Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
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;
|
|
// @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 {
|
|
// 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;
|
|
}
|