mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 10:49:25 +00:00
Merge "Adjust table of contents margins at 1000-1200 breakpoint"
This commit is contained in:
commit
8a2f61ee02
|
@ -113,9 +113,12 @@
|
||||||
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
||||||
|
|
||||||
// Sidebar
|
// Sidebar
|
||||||
@margin-toc-start-content: 18.5em;
|
@width-sidebar-px: 220;
|
||||||
@space-end-sidebar: 3.25em;
|
@width-sidebar-px-wide: 244;
|
||||||
@width-sidebar: @margin-toc-start-content - @space-end-sidebar;
|
@margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );
|
||||||
|
@margin-toc-start-content-wide: unit( ( @width-sidebar-px-wide + 52 ) / @font-size-browser, em ); // 18.5em;
|
||||||
|
@width-sidebar: unit( @width-sidebar-px / @font-size-browser, em );
|
||||||
|
@width-sidebar-wide: unit( @width-sidebar-px-wide / @font-size-browser, em );
|
||||||
|
|
||||||
// Search
|
// Search
|
||||||
@min-width-search-button: 28px;
|
@min-width-search-button: 28px;
|
||||||
|
@ -172,4 +175,5 @@
|
||||||
// Layout
|
// Layout
|
||||||
//
|
//
|
||||||
@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
|
@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
|
||||||
@padding-horizontal-page-container: unit( 40px / @font-size-browser, em ); // 1.875em @ 16
|
@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
|
||||||
|
@padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em );
|
||||||
|
|
|
@ -34,15 +34,26 @@
|
||||||
// Temporary magic number, will be calculated after TOC specs are finalized
|
// Temporary magic number, will be calculated after TOC specs are finalized
|
||||||
padding: 12px 19px 12px 9px;
|
padding: 12px 19px 12px 9px;
|
||||||
margin-top: @top-margin-sidebar-content;
|
margin-top: @top-margin-sidebar-content;
|
||||||
margin-left: @margin-start-sidebar-content;
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: @border-color-sidebar;
|
background-color: @border-color-sidebar;
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||||
|
width: @width-sidebar-wide;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toc {
|
.sidebar-toc {
|
||||||
margin-top: @top-margin-sidebar-toc_title_inline;
|
margin-top: @top-margin-sidebar-toc_title_inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-sidebar,
|
||||||
|
.sidebar-toc {
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||||
margin-left: @margin-start-sidebar-content;
|
margin-left: @margin-start-sidebar-content;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 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 {
|
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container {
|
||||||
|
|
|
@ -13,7 +13,6 @@
|
||||||
transition: @transition-sticky-header;
|
transition: @transition-sticky-header;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: @max-width-page-container + @padding-horizontal-page-container + @padding-horizontal-page-container;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: @background-color-base;
|
background: @background-color-base;
|
||||||
background-color: #fffffff7;
|
background-color: #fffffff7;
|
||||||
|
@ -25,6 +24,12 @@
|
||||||
|
|
||||||
@media ( min-width: @width-breakpoint-desktop ) {
|
@media ( min-width: @width-breakpoint-desktop ) {
|
||||||
padding: 6px 25px;
|
padding: 6px 25px;
|
||||||
|
max-width: @max-width-page-container + ( @padding-horizontal-page-container * 2 );
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||||
|
padding: 6px 25px;
|
||||||
|
max-width: @max-width-page-container + ( @padding-horizontal-page-container-wide * 2 );
|
||||||
}
|
}
|
||||||
|
|
||||||
// T298836 Hide the sticky header at lower resolutions.
|
// T298836 Hide the sticky header at lower resolutions.
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
@import '../../common/variables.less';
|
@import '../../common/variables.less';
|
||||||
|
|
||||||
@subcategory-padding: 8px;
|
|
||||||
@fade-height: 40px;
|
@fade-height: 40px;
|
||||||
@vertical-padding: 20px;
|
@vertical-padding: 20px;
|
||||||
@toggle-icon-size: 1.834em;
|
@toggle-icon-size: 1.834em;
|
||||||
|
@ -9,11 +8,16 @@
|
||||||
display: none;
|
display: none;
|
||||||
width: @width-sidebar;
|
width: @width-sidebar;
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
padding: @vertical-padding @subcategory-padding @vertical-padding ~'calc( @{subcategory-padding} * 4 )';
|
padding: @vertical-padding 12px @vertical-padding 32px;
|
||||||
.box-sizing( border-box );
|
.box-sizing( border-box );
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: @border-color-sidebar;
|
background-color: @border-color-sidebar;
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||||
|
width: @width-sidebar-wide;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-toc-header {
|
.sidebar-toc-header {
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
@ -45,7 +49,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toc-text {
|
.sidebar-toc-text {
|
||||||
padding: ~'calc( @{subcategory-padding} / 2 )' 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toc-contents,
|
.sidebar-toc-contents,
|
||||||
|
@ -63,7 +67,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding-left: @subcategory-padding;
|
padding-left: 8px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
// smaller and will start horizontal scrolling instead.
|
// smaller and will start horizontal scrolling instead.
|
||||||
@min-width-supported:
|
@min-width-supported:
|
||||||
unit( 500px / @font-size-browser, em ) -
|
unit( 500px / @font-size-browser, em ) -
|
||||||
( 2 * @padding-horizontal-page-container );
|
( 2 * @padding-horizontal-page-container-wide );
|
||||||
// 31.25em - 3.75em = 27.5em @ 16
|
// 31.25em - 3.75em = 27.5em @ 16
|
||||||
@border-color-sidebar: @background-color-secondary--modern;
|
@border-color-sidebar: @background-color-secondary--modern;
|
||||||
@background-color-secondary--modern: #f8f9fa;
|
@background-color-secondary--modern: #f8f9fa;
|
||||||
|
@ -155,6 +155,10 @@ body {
|
||||||
// sidebar is flush with the edge of the screen at small widths.
|
// sidebar is flush with the edge of the screen at small widths.
|
||||||
left: -@padding-horizontal-page-container;
|
left: -@padding-horizontal-page-container;
|
||||||
z-index: @z-index-sidebar;
|
z-index: @z-index-sidebar;
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||||
|
left: -@padding-horizontal-page-container-wide;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update positioning when TOC is enabled
|
// Update positioning when TOC is enabled
|
||||||
|
@ -207,6 +211,16 @@ body {
|
||||||
// For devices too small, they should be more useable with horizontal scrolling.
|
// For devices too small, they should be more useable with horizontal scrolling.
|
||||||
// e.g. Portrait on an iPad
|
// e.g. Portrait on an iPad
|
||||||
min-width: @min-width-supported;
|
min-width: @min-width-supported;
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop ) {
|
||||||
|
padding-left: @padding-horizontal-page-container;
|
||||||
|
padding-right: @padding-horizontal-page-container;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||||
|
padding-left: @padding-horizontal-page-container-wide;
|
||||||
|
padding-right: @padding-horizontal-page-container-wide;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.skin--responsive .mw-page-container {
|
.skin--responsive .mw-page-container {
|
||||||
|
@ -287,13 +301,6 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Increase margin when TOC is enabled
|
|
||||||
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
|
|
||||||
.skin-vector-disable-max-width & {
|
|
||||||
margin-left: @margin-toc-start-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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.
|
||||||
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
|
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
|
||||||
|
@ -327,6 +334,7 @@ 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 .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .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-toc-visible .mw-workspace-container .mw-content-container,
|
||||||
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
|
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-toc-visible .mw-workspace-container .mw-article-toolbar-container,
|
||||||
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
|
.vector-toc-enabled .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
|
||||||
|
@ -334,12 +342,9 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
|
||||||
@media ( min-width: @width-breakpoint-desktop ) {
|
@media ( min-width: @width-breakpoint-desktop ) {
|
||||||
margin-left: @margin-toc-start-content;
|
margin-left: @margin-toc-start-content;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media ( min-width: @width-breakpoint-desktop ) {
|
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||||
.mw-page-container {
|
margin-left: @margin-toc-start-content-wide;
|
||||||
padding-left: @padding-horizontal-page-container;
|
|
||||||
padding-right: @padding-horizontal-page-container;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue