mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-17 20:52:14 +00:00
3003724a3a
There's a longstanding Chrome bug that causes CSS transitions to show in their terminal states. This patch works around the issue by limiting transitions to JavaScript users only via the `client-js` class which is added to the root `html` Node some time after page content loads. The effect is a better overall experience for everyone but transitions unfortunately no longer appear for no-JS devices. I am unable to reproduce this issue in Vector's configuration. This patch should only be merged as a last resort. Bug: T246419 Bug: T234570 Change-Id: Ifcb2bf1fddb85113a4858b7a210ded3954952e6e
100 lines
3.1 KiB
Plaintext
100 lines
3.1 KiB
Plaintext
@import '../../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import './layout.less';
|
|
@import 'legacy/Sidebar.less';
|
|
@import 'checkboxHack.less';
|
|
|
|
.mw-sidebar-action {
|
|
// Align with the portal heading/links
|
|
// `.portal` + `.portal .body`
|
|
margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
|
|
}
|
|
|
|
.mw-sidebar-action-link {
|
|
font-size: @font-size-portal-list-item;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// FIXME please add a class, .mw-navigation, and use that here and below instead of this identifier.
|
|
#mw-navigation {
|
|
.mw-checkbox-hack-checkbox,
|
|
.mw-checkbox-hack-button {
|
|
// The icon is only 44px tall but the header is 50px. Offset by the difference from the logo
|
|
// icon and center with respect to the header.
|
|
top: @margin-top-header + ( ( @height-logo-icon - @size-sidebar-button ) / 2 );
|
|
// FIXME: Replace by proper calculation and variable.
|
|
left: 14px;
|
|
}
|
|
|
|
.mw-checkbox-hack-button {
|
|
position: absolute;
|
|
z-index: @z-index-sidebar-button;
|
|
// Override minimum dimensions set by mw-ui-icon.mw-ui-icon-element.
|
|
min-width: @size-sidebar-button;
|
|
min-height: @size-sidebar-button;
|
|
width: @size-sidebar-button;
|
|
height: @size-sidebar-button;
|
|
border: 1px solid transparent;
|
|
border-radius: @border-radius-base;
|
|
|
|
&:before {
|
|
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
|
|
// As soon as mediawiki.ui is standardized, remove this override. See T191021.
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
height: 100%;
|
|
// Center it horizontally.
|
|
margin: 0 12px;
|
|
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
|
opacity: 0.67;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @background-color-frameless--hover;
|
|
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-checkbox-hack-checkbox:focus ~ .mw-checkbox-hack-button {
|
|
// Next two rules from OOUI, frameless, icon-only button widget.
|
|
border-color: @color-primary;
|
|
.box-shadow( inset 0 0 0 1px @color-primary );
|
|
}
|
|
|
|
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
|
// checkbox input for the menu panel.
|
|
.mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-sidebar {
|
|
// Turn off presentation so that screen readers get the same effect as visually hiding.
|
|
// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
|
|
// instead to avoid hidden rendering.
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
.transform( translateX( -100% ) );
|
|
}
|
|
}
|
|
|
|
// Disable transitions on page load. No-JS users will unfortunately miss out. A similar pattern is
|
|
// used in Minerva's DropDownList. See enableCssAnimations() in skin.vector.js/index.js for context
|
|
// and additional details on how this class is added.
|
|
.vector-animations-ready {
|
|
// Enable sidebar transitions on desktop width only.
|
|
.mw-sidebar {
|
|
@media ( min-width: @width-breakpoint-desktop ) {
|
|
@timing: @transition-duration-base ease-out;
|
|
.transition( transform @timing, opacity @timing, visibility @timing; );
|
|
}
|
|
}
|
|
|
|
// Enable sidebar button transitions.
|
|
#mw-navigation .mw-checkbox-hack-button {
|
|
.transition(
|
|
background-color @transition-duration-base,
|
|
border-color @transition-duration-base,
|
|
box-shadow @transition-duration-base;
|
|
);
|
|
}
|
|
}
|