e1f2d2896f
The max-width layout uses a mix of ems and px. the var `@max-width-margin-start-content` uses ems to define a max width breakpoint, however the workspace and content containers `@max-width-content-container` are defined in px. This leads to layout bugs like the sidebar ovelapping when the base em unit is not the assumed 16px. This patch changes the layout px units to ems. (There should be no visible difference at the assumed 16px font size). Bug: T270104 Change-Id: If8f284dc5e27c8e1c10f3a6897b7a5e4b8bb357d
78 lines
4.2 KiB
Plaintext
78 lines
4.2 KiB
Plaintext
// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
|
|
// The rules here should only define the layout, not color or typography.
|
|
@import '../../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Modern layout variables
|
|
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
|
|
@margin-top-sidebar: 0.5em;
|
|
|
|
@margin-horizontal-sidebar-button-icon: unit( 12 / @font-size-browser, em);
|
|
// Adjust the left position of the sidebar to align it with the sidebar menu button,
|
|
// in the header, while ensuring the background gradient still extends to the edge of the screen.
|
|
// note: the 1px comes from the transparent border of the sidebar button
|
|
@padding-left-sidebar: @margin-horizontal-sidebar-button-icon + unit( @border-width-base / @font-size-browser, em );
|
|
@border-color-sidebar: @background-color-secondary--modern;
|
|
|
|
// Header sizes defined in the description of T246170 and comment T246170#5957100
|
|
@padding-vertical-header: 0.125em;
|
|
@margin-top-header: 0.625em;
|
|
@margin-bottom-header: 0.3125em;
|
|
@height-logo-icon: 3.125em; // Logo sizes per specification in T245190.
|
|
@height-header: @height-logo-icon +
|
|
@margin-top-header + @margin-bottom-header +
|
|
2 * @padding-vertical-header;
|
|
@width-grid-column-one: 11em;
|
|
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
|
|
// Assumes various variables defined there.
|
|
|
|
// canonical version of spec: T270202
|
|
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em );
|
|
@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em );
|
|
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em );
|
|
@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em );
|
|
|
|
// The logo is variable width but typically consists of:
|
|
// - a icon (50x50)
|
|
// - a wordmark (approx 120px)
|
|
@min-width-logo: unit( 180px / @font-size-browser, em );
|
|
|
|
@min-width-personal-tools: unit( 300px / @font-size-browser, em );
|
|
|
|
@padding-horizontal-page-container: unit( 30px / @font-size-browser, em );
|
|
@padding-horizontal-page-container-total: 2 * @padding-horizontal-page-container;
|
|
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
|
|
|
|
// the width of the container if you exclude consideration for search
|
|
@min-width-container-base: @padding-horizontal-page-container + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container;
|
|
|
|
@min-width-supported: unit( 500px / @font-size-browser, em ) - @padding-horizontal-page-container-total;
|
|
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
|
|
|
|
@background-color-secondary--modern: #f8f9fa;
|
|
@max-width-page-container: unit( 1650px / @font-size-browser, em );
|
|
@min-width-page-container--padded: @max-width-page-container + @padding-horizontal-page-container-total;
|
|
@background-color-page-container: @background-color-base;
|
|
@max-width-workspace-container: unit( 1440px / @font-size-browser, em );
|
|
@max-width-content-container: unit( 960px / @font-size-browser, em );
|
|
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
|
// see T259331.
|
|
@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
|
|
// We want ~60px of space between the end of the sidebar and the start of the
|
|
// content container for aesthetic reasons. The sidebar is already displaced
|
|
// -30px so we simply add 30px of space to the width of the sidebar.
|
|
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em );
|
|
// Equivalent to 1432px. This determines the maximum width breakpoint at which
|
|
// the content will have a fixed start margin applied to it when the sidebar
|
|
// is open. The content can shift its position when the sidebar is open/closed
|
|
// at or below this breakpoint and will maintain its position above this
|
|
// breakpoint.
|
|
@max-width-margin-start-content: ( 2 * @margin-start-content ) + @padding-horizontal-page-container-total + @max-width-content-container;
|
|
|
|
// Default layout.
|
|
@import 'layout-default.less';
|
|
|
|
//
|
|
// Feature flag modifications to layout in new files (these should be additive)
|
|
//
|