mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 16:40:33 +00:00
87959c8a59
In preparation for 856718 where pinnableElement.js makes use of features.js, move features.js and limitedWidthToggle.js out of the skins.vector.js module and into the skins.vector.es6 module. This will make it easier to use by pinnableElement.js without needing the es6 module to depend on the es5 module. This does have the negative side-effect of causing the limited width feature to not be supported by IE11 (and other non-ES6 browsers), however this tradeoff was discussed with our product manager to be acceptable. Additionally, this maintains the status quo as the toggle button does not currently show in IE11 (which may be a bug). Bug: T322051 Change-Id: If0e8cb98deabe847c2cc71fddb90ca36d15e5f8f
32 lines
981 B
Plaintext
32 lines
981 B
Plaintext
/**
|
|
* Limited width toggle - a button which lets users change the layout from
|
|
* a fixed-width content column to a layout where the content takes up the
|
|
* full window width.
|
|
*/
|
|
|
|
// By default, toggle should be hidden unless the breakpoint below is reached.
|
|
.vector-limited-width-toggle {
|
|
display: none;
|
|
}
|
|
|
|
// Note on certain pages the control will have no effect e.g. Special:RecentChanges
|
|
// Defining this at 1600px was a product decision so do not change it
|
|
// (more context at https://phabricator.wikimedia.org/T319449#8346630)
|
|
@media ( min-width: 1600px ) {
|
|
.vector-limited-width-toggle {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
}
|
|
|
|
//NOTE: enabled/disabled class on body.
|
|
&.vector-feature-limited-width-disabled .vector-limited-width-toggle:before {
|
|
background-image: url( images/fullscreen-close.svg );
|
|
}
|
|
|
|
&.vector-feature-limited-width-enabled .vector-limited-width-toggle:before {
|
|
background-image: url( images/fullscreen.svg );
|
|
}
|
|
}
|