mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 23:55:53 +00:00
fd250975c4
It's advisable to rely on default icon color and set it's color by opacity. With that we've got a better playing field to respond to user interaction with icon color changes, not relying on several icons at once for different states and also being backwards-compatible for a variety of browsers. Change-Id: Iaff869774007ed962104d704103f0392a3516f4f Bug: T246419
87 lines
2.8 KiB
Plaintext
87 lines
2.8 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 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;
|
|
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base, opacity @transition-duration-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% ) );
|
|
}
|
|
}
|
|
|
|
.mw-sidebar {
|
|
// Enable animations on desktop width only.
|
|
@media ( min-width: @width-breakpoint-desktop ) {
|
|
@timing: @transition-duration-base ease-out;
|
|
.transition( transform @timing, opacity @timing, visibility @timing; );
|
|
}
|
|
}
|