[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:
parent
8c4ed23069
commit
b8701a3b58
|
@ -17,8 +17,6 @@
|
||||||
.mw-header {
|
.mw-header {
|
||||||
// A min-height is set to account for projects where no icon is set.
|
// A min-height is set to account for projects where no icon is set.
|
||||||
min-height: @height-logo-icon;
|
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.
|
// Vertical centering of header elements (IE>=11), requires flex.
|
||||||
// Non-flex fallback for IE<=9: float rule on the child elements.
|
// Non-flex fallback for IE<=9: float rule on the child elements.
|
||||||
.flex-display();
|
.flex-display();
|
||||||
|
@ -26,6 +24,11 @@
|
||||||
// https://caniuse.com/#search=align-items
|
// https://caniuse.com/#search=align-items
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
.vector-layout-legacy & {
|
||||||
|
margin: @margin-top-header 0 @margin-bottom-header 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#mw-sidebar-button {
|
#mw-sidebar-button {
|
||||||
float: left; // Browser: IE9 support - button as flex-child fallback.
|
float: left; // Browser: IE9 support - button as flex-child fallback.
|
||||||
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
||||||
|
@ -34,7 +37,10 @@
|
||||||
.vector-search-box {
|
.vector-search-box {
|
||||||
float: left;
|
float: left;
|
||||||
z-index: @z-index-menu;
|
z-index: @z-index-menu;
|
||||||
flex-grow: 1;
|
|
||||||
|
.vector-layout-legacy & {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content,
|
&-content,
|
||||||
|
@ -53,7 +59,9 @@
|
||||||
|
|
||||||
@media ( min-width: @width-breakpoint-desktop ) {
|
@media ( min-width: @width-breakpoint-desktop ) {
|
||||||
.vector-search-box {
|
.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-.
|
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
|
||||||
width: 13.2em;
|
width: 13.2em;
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toc {
|
.vector-layout-legacy .sidebar-toc {
|
||||||
margin-top: @top-margin-sidebar-toc_title_inline;
|
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.
|
// 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 {
|
@{selector-checkbox-hack} {
|
||||||
.sidebar-toc {
|
|
||||||
margin-top: @top-margin-sidebar-toc;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media ( max-width: @width-breakpoint-desktop ) {
|
@media ( max-width: @width-breakpoint-desktop ) {
|
||||||
.mw-sidebar {
|
.mw-sidebar {
|
||||||
margin-top: 0;
|
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
|
// 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.
|
// 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;
|
margin-top: @top-margin-sidebar-toc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -75,7 +75,10 @@ body {
|
||||||
.mw-body,
|
.mw-body,
|
||||||
.parsoid-body {
|
.parsoid-body {
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
padding: @padding-content;
|
|
||||||
|
.vector-layout-legacy & {
|
||||||
|
padding: @padding-content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-body {
|
.mw-body {
|
||||||
|
@ -131,7 +134,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation Containers */
|
/* Navigation Containers */
|
||||||
.mw-article-toolbar-container {
|
.vector-layout-legacy .mw-article-toolbar-container {
|
||||||
// Clear the floats on #left-navigation and #right-navigation.
|
// Clear the floats on #left-navigation and #right-navigation.
|
||||||
.mixin-clearfix();
|
.mixin-clearfix();
|
||||||
// We want to keep the max-width of the article-toolbar-container the
|
// 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;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
// Sidebar is displaced from the workspace container so that the
|
// Sidebar is displaced from the workspace container so that the
|
||||||
|
@ -176,7 +179,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update positioning when TOC is enabled
|
// Update positioning when TOC is enabled
|
||||||
.vector-toc-enabled #mw-panel {
|
.vector-toc-enabled .vector-layout-legacy #mw-panel {
|
||||||
position: static;
|
position: static;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
@ -184,12 +187,15 @@ body {
|
||||||
.mw-table-of-contents-container {
|
.mw-table-of-contents-container {
|
||||||
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
||||||
position: sticky;
|
position: sticky;
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
// Defaults to -2em to account for the TOC's top margin
|
// Defaults to -2em to account for the TOC's top margin
|
||||||
// ensuring the TOC is 1.5em (24px) from the top of the viewport
|
// ensuring the TOC is 1.5em (24px) from the top of the viewport
|
||||||
// unless .mw-sticky-header-element overrides it.
|
// unless .mw-sticky-header-element overrides it.
|
||||||
top: calc( 1.5em - @top-margin-sidebar-toc_title_inline );
|
top: calc( 1.5em - @top-margin-sidebar-toc_title_inline );
|
||||||
|
|
||||||
|
.vector-layout-legacy & {
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.parsoid-body {
|
.parsoid-body {
|
||||||
|
@ -249,13 +255,16 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-workspace-container {
|
.mw-workspace-container {
|
||||||
max-width: @max-width-workspace-container;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
// The sidebar is absolutely positioned relative to the
|
// The sidebar is absolutely positioned relative to the
|
||||||
// mw-workspace-container.
|
// mw-workspace-container.
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
.vector-layout-legacy & {
|
||||||
|
max-width: @max-width-workspace-container;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
&.mw-footer-container {
|
&.mw-footer-container {
|
||||||
// T264679: There are elements (e.g. discussion tool popovers) in the main
|
// 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
|
// content container that we want to appear on top of the footer. We set the
|
||||||
|
@ -266,10 +275,12 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-content-container {
|
.mw-content-container {
|
||||||
display: flow-root;
|
.vector-layout-legacy & {
|
||||||
max-width: @max-width-content-container;
|
max-width: @max-width-content-container;
|
||||||
margin-left: auto;
|
display: flow-root;
|
||||||
margin-right: auto;
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
// For container logic specific to special pages and history pages.
|
// For container logic specific to special pages and history pages.
|
||||||
.skin-vector-disable-max-width & {
|
.skin-vector-disable-max-width & {
|
||||||
|
@ -311,8 +322,8 @@ body {
|
||||||
|
|
||||||
// Adjusts the content when sidebar is open regardless of the viewport width.
|
// 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. */
|
/* 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,
|
||||||
@{selector-workspace-container-sidebar-open} .mw-content-container {
|
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
|
||||||
// For container logic specific to special pages and history pages.
|
// For container logic specific to special pages and history pages.
|
||||||
.skin-vector-disable-max-width & {
|
.skin-vector-disable-max-width & {
|
||||||
margin-left: @margin-start-content;
|
margin-left: @margin-start-content;
|
||||||
|
@ -321,16 +332,16 @@ body {
|
||||||
|
|
||||||
@media ( max-width: @max-width-margin-start-content ) {
|
@media ( max-width: @max-width-margin-start-content ) {
|
||||||
// Adjusts the content and mw-article-toolbar-container.
|
// 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. */
|
/* 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;
|
margin-left: @margin-start-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Increase margin when TOC is enabled
|
// 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. */
|
/* 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;
|
margin-left: @margin-toc-start-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -366,13 +377,13 @@ body {
|
||||||
// HTML but only one is actually visible. Prevent the left margin from undesirably
|
// 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
|
// applying if bucketed into the control or unsampled groups which won't show
|
||||||
// the new TOC.
|
// the new TOC.
|
||||||
.skin-vector-disable-max-width .vector-toc-enabled @{selector-workspace-container-sidebar-open} .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-toc-visible .mw-workspace-container .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. */
|
/* 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,
|
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 @{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. */
|
/* 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 ) {
|
@media ( min-width: @width-breakpoint-desktop ) {
|
||||||
margin-left: @margin-toc-start-content;
|
margin-left: @margin-toc-start-content;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue