mediawiki-skins-Vector/resources/skins.vector.js/limitedWidthToggle.less
Jan Drewniak 6b67e9adda Limited width toggle (0eb8811 follow-up)
Refactors styles for limited width toggle and
fixes issue with close icon not appearing.

Bug: T319449
Change-Id: If53c3921e54565c47eb0868329e0b79f60073792
2022-11-14 21:29:18 +00:00

35 lines
1.1 KiB
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.
*/
//NOTE: Currently, the limited width toggle is feature flagged.
.vector-feature-visual-enhancement-next-enabled {
// 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 );
}
}
}