jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Grid preparation] Restrict certain rules to old layout 

Having a clean slate to work from will help with the development of
introducing the grid

Bug: T303484
Change-Id: I8fb9a9d958e4e73e8bfbf4b797cee1353c915db5
This commit is contained in:
Jon Robson 2022-05-12 09:29:56 -07:00 committed by Jdlrobson
parent 8c4ed23069
commit b8701a3b58
3 changed files with 59 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/skins.vector.styles/components/Header.less
View File

@ -17,8 +17,6 @@
.mw-header {
// A min-height is set to account for projects where no icon is set.
min-height: @height-logo-icon;
margin: @margin-top-header 0 @margin-bottom-header 0;
padding: 0;
// Vertical centering of header elements (IE>=11), requires flex.
// Non-flex fallback for IE<=9: float rule on the child elements.
.flex-display();
@ -26,6 +24,11 @@
// https://caniuse.com/#search=align-items
align-items: center;
.vector-layout-legacy & {
margin: @margin-top-header 0 @margin-bottom-header 0;
padding: 0;
}
#mw-sidebar-button {
float: left; // Browser: IE9 support - button as flex-child fallback.
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
@ -34,7 +37,10 @@
.vector-search-box {
float: left;
z-index: @z-index-menu;
flex-grow: 1;
.vector-layout-legacy & {
flex-grow: 1;
}
}
&-content,
@ -53,7 +59,9 @@
@media ( min-width: @width-breakpoint-desktop ) {
.vector-search-box {
margin-right: @margin-end-search;
.vector-layout-legacy & {
margin-right: @margin-end-search;
}
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;

19
resources/skins.vector.styles/components/Sidebar.less
View File

@ -46,7 +46,7 @@
}
}
.sidebar-toc {
.vector-layout-legacy .sidebar-toc {
margin-top: @top-margin-sidebar-toc_title_inline;
}
@ -59,12 +59,9 @@
}
}
@selector-checkbox-hack: ~'.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container';
// T305069 Apply different top spacing to the topmost sidebar element during menu toggling when sidebar is open.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container {
.sidebar-toc {
margin-top: @top-margin-sidebar-toc;
}
@{selector-checkbox-hack} {
@media ( max-width: @width-breakpoint-desktop ) {
.mw-sidebar {
margin-top: 0;
@ -78,9 +75,17 @@
}
}
.vector-layout-legacy @{selector-checkbox-hack} {
.sidebar-toc {
.vector-layout-legacy {
margin-top: @top-margin-sidebar-toc;
}
}
}
// T305069 When scrolling down, override the top margin of the sticky TOC
// so that the top of sticky TOC remains at the top of the viewport with normal padding.
&.vector-sticky-header-visible .sidebar-toc {
&.vector-sticky-header-visible .vector-layout-legacy .sidebar-toc {
margin-top: @top-margin-sidebar-toc;
}
}

59
resources/skins.vector.styles/layouts/screen.less
View File

@ -75,7 +75,10 @@ body {
.mw-body,
.parsoid-body {
direction: ltr;
padding: @padding-content;
.vector-layout-legacy & {
padding: @padding-content;
}
}
.mw-body {
@ -131,7 +134,7 @@ body {
}
/* Navigation Containers */
.mw-article-toolbar-container {
.vector-layout-legacy .mw-article-toolbar-container {
// Clear the floats on #left-navigation and #right-navigation.
.mixin-clearfix();
// We want to keep the max-width of the article-toolbar-container the
@ -162,7 +165,7 @@ body {
}
}
#mw-panel {
.vector-layout-legacy #mw-panel {
position: absolute;
top: 0;
// Sidebar is displaced from the workspace container so that the
@ -176,7 +179,7 @@ body {
}
// Update positioning when TOC is enabled
.vector-toc-enabled #mw-panel {
.vector-toc-enabled .vector-layout-legacy #mw-panel {
position: static;
float: left;
}
@ -184,12 +187,15 @@ body {
.mw-table-of-contents-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
float: left;
clear: both;
// Defaults to -2em to account for the TOC's top margin
// ensuring the TOC is 1.5em (24px) from the top of the viewport
// unless .mw-sticky-header-element overrides it.
top: calc( 1.5em - @top-margin-sidebar-toc_title_inline );
.vector-layout-legacy & {
float: left;
clear: both;
}
}
.parsoid-body {
@ -249,13 +255,16 @@ body {
}
.mw-workspace-container {
max-width: @max-width-workspace-container;
margin-left: auto;
margin-right: auto;
// The sidebar is absolutely positioned relative to the
// mw-workspace-container.
position: relative;
.vector-layout-legacy & {
max-width: @max-width-workspace-container;
margin-left: auto;
margin-right: auto;
}
&.mw-footer-container {
// T264679: There are elements (e.g. discussion tool popovers) in the main
// content container that we want to appear on top of the footer. We set the
@ -266,10 +275,12 @@ body {
}
.mw-content-container {
display: flow-root;
max-width: @max-width-content-container;
margin-left: auto;
margin-right: auto;
.vector-layout-legacy & {
max-width: @max-width-content-container;
display: flow-root;
margin-left: auto;
margin-right: auto;
}
// For container logic specific to special pages and history pages.
.skin-vector-disable-max-width & {
@ -311,8 +322,8 @@ body {
// Adjusts the content when sidebar is open regardless of the viewport width.
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
@{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container,
@{selector-workspace-container-sidebar-open} .mw-content-container {
.vector-layout-legacy @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container,
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
// For container logic specific to special pages and history pages.
.skin-vector-disable-max-width & {
margin-left: @margin-start-content;
@ -321,16 +332,16 @@ body {
@media ( max-width: @max-width-margin-start-content ) {
// Adjusts the content and mw-article-toolbar-container.
@{selector-workspace-container-sidebar-open} .mw-content-container,
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
@{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
.vector-layout-legacy @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
margin-left: @margin-start-content;
}
// Increase margin when TOC is enabled
.vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-content-container,
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
.vector-toc-enabled @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
margin-left: @margin-toc-start-content;
}
@ -366,13 +377,13 @@ body {
// HTML but only one is actually visible. Prevent the left margin from undesirably
// applying if bucketed into the control or unsampled groups which won't show
// the new TOC.
.skin-vector-disable-max-width .vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-content-container,
.skin-vector-disable-max-width .vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-layout-legacy .vector-toc-visible .mw-workspace-container .mw-content-container,
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible #mw-navigation .mw-article-toolbar-container,
.vector-toc-enabled @{selector-workspace-container-sidebar-open} .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-layout-legacy .vector-toc-visible #mw-navigation .mw-article-toolbar-container,
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
/* FIXME: The following selector can be removed when the option to disable `VectorTitleAboveTabs` is removed. */
.vector-toc-enabled @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
.vector-toc-enabled .vector-layout-legacy @{selector-workspace-container-sidebar-open} #mw-navigation .mw-article-toolbar-container {
@media ( min-width: @width-breakpoint-desktop ) {
margin-left: @margin-toc-start-content;
}