2021-02-02 10:04:37 +00:00
|
|
|
@import '../../common/variables.less';
|
2020-03-30 20:07:35 +00:00
|
|
|
@import 'mediawiki.mixins.less';
|
2021-02-02 10:04:37 +00:00
|
|
|
@import '../layouts/screen.less';
|
|
|
|
|
@import '../../skins.vector.styles.legacy/components/Sidebar.less';
|
|
|
|
|
@import './checkboxHack.less';
|
2020-05-26 17:38:24 +00:00
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
2020-03-30 20:07:35 +00:00
|
|
|
|
2020-06-23 02:43:28 +00:00
|
|
|
#mw-sidebar-button {
|
|
|
|
|
&:before {
|
|
|
|
|
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
|
|
|
|
|
opacity: 0.67;
|
2020-08-13 01:19:51 +00:00
|
|
|
/* @embed */
|
2020-08-18 20:43:39 +00:00
|
|
|
background-image: url( images/chevronHorizontal-ltr.svg );
|
2020-08-13 01:19:51 +00:00
|
|
|
|
|
|
|
|
#mw-sidebar-checkbox:not( :checked ) ~ .mw-header & {
|
|
|
|
|
/* @embed */
|
2020-08-18 20:43:39 +00:00
|
|
|
background-image: url( images/menu.svg );
|
2020-08-13 01:19:51 +00:00
|
|
|
}
|
2020-03-30 20:07:35 +00:00
|
|
|
}
|
|
|
|
|
|
2020-06-23 02:43:28 +00:00
|
|
|
&:hover {
|
|
|
|
|
background-color: @background-color-frameless--hover;
|
2020-03-30 20:07:35 +00:00
|
|
|
|
|
|
|
|
&:before {
|
2020-06-23 02:43:28 +00:00
|
|
|
opacity: 1;
|
2020-05-29 21:52:36 +00:00
|
|
|
}
|
2020-03-30 20:07:35 +00:00
|
|
|
}
|
|
|
|
|
|
2020-06-23 16:21:25 +00:00
|
|
|
&:focus {
|
|
|
|
|
// Next three rules from OOUI, frameless, icon-only button widget.
|
2021-03-24 21:03:25 +00:00
|
|
|
border-color: @border-color-base--focus;
|
2020-06-23 16:21:25 +00:00
|
|
|
outline: 0;
|
2021-03-24 21:03:25 +00:00
|
|
|
box-shadow: @box-shadow-base--focus;
|
2020-06-23 16:21:25 +00:00
|
|
|
}
|
2020-06-23 02:43:28 +00:00
|
|
|
}
|
2020-03-30 20:07:35 +00:00
|
|
|
|
2020-06-23 02:43:28 +00:00
|
|
|
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
|
|
|
|
// checkbox input for the menu panel.
|
2020-10-02 17:43:21 +00:00
|
|
|
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
2020-06-23 02:43:28 +00:00
|
|
|
// 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% ) );
|
2020-03-30 20:07:35 +00:00
|
|
|
}
|
|
|
|
|
|
2020-05-28 20:19:06 +00:00
|
|
|
// 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 {
|
Implement Page, Workspace, Content, and Article Toolbar Containers
This patch closely follows the desired guidelines/desired
styles Alex Hollender has put forth in his prototype, but uses
multiple containers to achieve this look since our DOM order/structure
is different than the DOM structure in the prototype. The following
containers are used, but unlike his prototype, they are sometimes used
more than once:
* Page Container: Contains every other container and limits the overall
max-width of the white part of the page.
* Workspace Container: Contains the sidebar and content container. The
sidebar is displaced ~30 pixels to the start (left) of the workspace
container at all times.
* Content Container: Contains the content. The max-width of this changes
depending on whether you are on a special page/history page vs. other
pages.
* Article Toolbar Container: Contains the article toolbar. The max-width
of this is always the same as the max-width of the article content as we
don't want the toolbar to move when going from the article page to the
history/special page.
Changes to be aware:
* To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is
temporarily feature flagged and defaults to being "off".
* Note that layout-max-width.less is a temporary file made to meet the
feature flag requirement of T246420 (intended to derisk the deployment).
After the deploy, we should merge most if not all of the rules into
layout.less where the max-width design will become the default.
* Per Jon's code review comment, I have relaxed the indenting of
skin.mustache to make the diff easier to reason about. If desired, the
correct indenting can be achieved in a (much less risky) follow-up
commit.
Bug: T246420
Bug: T153043
Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-06-23 18:02:32 +00:00
|
|
|
// Enable transition on all widths by default.
|
2020-05-28 20:19:06 +00:00
|
|
|
.mw-sidebar {
|
Implement Page, Workspace, Content, and Article Toolbar Containers
This patch closely follows the desired guidelines/desired
styles Alex Hollender has put forth in his prototype, but uses
multiple containers to achieve this look since our DOM order/structure
is different than the DOM structure in the prototype. The following
containers are used, but unlike his prototype, they are sometimes used
more than once:
* Page Container: Contains every other container and limits the overall
max-width of the white part of the page.
* Workspace Container: Contains the sidebar and content container. The
sidebar is displaced ~30 pixels to the start (left) of the workspace
container at all times.
* Content Container: Contains the content. The max-width of this changes
depending on whether you are on a special page/history page vs. other
pages.
* Article Toolbar Container: Contains the article toolbar. The max-width
of this is always the same as the max-width of the article content as we
don't want the toolbar to move when going from the article page to the
history/special page.
Changes to be aware:
* To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is
temporarily feature flagged and defaults to being "off".
* Note that layout-max-width.less is a temporary file made to meet the
feature flag requirement of T246420 (intended to derisk the deployment).
After the deploy, we should merge most if not all of the rules into
layout.less where the max-width design will become the default.
* Per Jon's code review comment, I have relaxed the indenting of
skin.mustache to make the diff easier to reason about. If desired, the
correct indenting can be achieved in a (much less risky) follow-up
commit.
Bug: T246420
Bug: T153043
Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-06-23 18:02:32 +00:00
|
|
|
@timing: @transition-duration-base ease-out;
|
|
|
|
|
.transition( transform @timing, opacity @timing, visibility @timing; );
|
2020-05-28 20:19:06 +00:00
|
|
|
}
|
|
|
|
|
|
2020-10-01 22:55:52 +00:00
|
|
|
@media ( max-width: @width-breakpoint-tablet ) {
|
|
|
|
|
.mw-sidebar {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-28 20:19:06 +00:00
|
|
|
// Enable sidebar button transitions.
|
2020-06-23 02:43:28 +00:00
|
|
|
#mw-sidebar-button {
|
2020-05-28 20:19:06 +00:00
|
|
|
.transition(
|
|
|
|
|
background-color @transition-duration-base,
|
|
|
|
|
border-color @transition-duration-base,
|
|
|
|
|
box-shadow @transition-duration-base;
|
|
|
|
|
);
|
2020-03-30 20:07:35 +00:00
|
|
|
}
|
|
|
|
|
}
|