mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-26 08:35:42 +00:00
68e55542af
This was increasing the icon size from 44x44 to 46x46 Addresses topic 1 from Alex's feedback in: T191021#7228591 Bug: T191021 Change-Id: I03c80b5ceda9b23dfa53a245bed820ca22a1d95a
83 lines
2.3 KiB
Plaintext
83 lines
2.3 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import '../layouts/screen.less';
|
|
@import '../../skins.vector.styles.legacy/components/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;
|
|
}
|
|
|
|
#mw-sidebar-button {
|
|
&:before {
|
|
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
|
opacity: 0.67;
|
|
/* @embed */
|
|
background-image: url( images/chevronHorizontal-ltr.svg );
|
|
|
|
#mw-sidebar-checkbox:not( :checked ) ~ .mw-header & {
|
|
/* @embed */
|
|
background-image: url( images/menu.svg );
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @background-color-frameless--hover;
|
|
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
// Next three rules from OOUI, frameless, icon-only button widget.
|
|
border-color: @border-color-base--focus;
|
|
outline: 0;
|
|
box-shadow: @box-shadow-base--focus;
|
|
}
|
|
}
|
|
|
|
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
|
// checkbox input for the menu panel.
|
|
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .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 transition on all widths by default.
|
|
.mw-sidebar {
|
|
@timing: @transition-duration-base ease-out;
|
|
.transition( transform @timing, opacity @timing, visibility @timing; );
|
|
}
|
|
|
|
@media ( max-width: @width-breakpoint-tablet ) {
|
|
.mw-sidebar {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
// Enable sidebar button transitions.
|
|
#mw-sidebar-button {
|
|
.transition(
|
|
background-color @transition-duration-base,
|
|
border-color @transition-duration-base,
|
|
box-shadow @transition-duration-base;
|
|
);
|
|
}
|
|
}
|