Page MenuHomeWickedGov Phorge
Files F4111501

grid.less
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

grid.less
View Options

//
// Grid layout
//
@media ( min-width: @min-width-breakpoint-desktop ) {
.mw-page-container-inner {
display: grid;
column-gap: @grid-column-gap;
grid-template: ~'min-content 1fr min-content / @{grid-template-column-desktop}';
// stylelint-disable-next-line @stylistic/declaration-colon-space-after
grid-template-areas:
'siteNotice siteNotice'
'columnStart pageContent'
'footer footer';
}
.vector-sitenotice-container {
grid-area: siteNotice;
}
.vector-column-start {
grid-area: columnStart;
overflow-anchor: none; // T330108
}
.mw-content-container {
grid-area: pageContent;
}
.mw-footer-container {
grid-area: footer;
}
.vector-feature-page-tools-pinned-enabled .vector-column-end,
.vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
width: @width-column-desktop;
}
// Align the pinnable header bottom border with the bottom-border of the
// toolbar (below the page title) by pushing down the sidebar content
.vector-column-start,
.vector-column-end {
margin-top: 2.8rem;
border-top: 1px solid transparent;
}
}
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
.mw-page-container-inner {
grid-template-columns: @grid-template-column-desktop-wide;
}
.mw-header {
display: grid;
column-gap: @grid-column-gap;
grid-template: ~'auto / @{grid-template-column-desktop-wide}';
grid-template-areas: 'headerStart headerEnd';
.vector-header-start {
grid-area: headerStart;
}
.vector-header-end {
grid-area: headerEnd;
}
}
.vector-feature-page-tools-pinned-enabled .vector-column-end,
.vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
width: @width-column-desktop-wide;
}
}
// Single column grid when column start is empty (i.e. no pinned ToC or pinned main menu)
.vector-feature-main-menu-pinned-disabled.vector-toc-not-available .mw-page-container-inner,
.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-page-container-inner {
grid-template-columns: @width-page-content;
// stylelint-disable-next-line @stylistic/declaration-colon-space-after
grid-template-areas:
'siteNotice'
'pageContent'
'columnStart'
'footer';
// Horizontally center content when single column
.mw-body {
justify-content: center;
}
}
@media ( min-width: @min-width-breakpoint-desktop ) {
.mw-body {
display: grid;
grid-template: ~'min-content min-content min-content 1fr / minmax(0, @{max-width-content-container}) min-content';
/**
* NOTE: T327715 - 'titlebar-cx' grid area is a temporary workaround to accommodate
* the Content Translation extension and should not be used beyond that.
* FIXME: This can be removed when T322740 is resolved.
*/
// stylelint-disable-next-line @stylistic/declaration-colon-space-after
grid-template-areas:
'titlebar-cx .'
'titlebar columnEnd'
'toolbar columnEnd'
'content columnEnd';
.vector-page-titlebar {
grid-area: titlebar;
}
.vector-page-toolbar {
grid-area: toolbar;
}
#bodyContent {
grid-area: content;
}
.vector-column-end {
grid-area: columnEnd;
overflow-anchor: none;
}
}
.vector-feature-page-tools-pinned-enabled .mw-body,
.vector-feature-appearance-pinned-clientpref-1 .mw-body {
column-gap: @grid-column-gap;
}
.vector-feature-limited-width-clientpref-0 .mw-body,
.vector-feature-limited-width-content-disabled .mw-body {
grid-template-columns: ~'minmax(0, 1fr) min-content';
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 22:22 (1 d, 4 h)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
a5/49/f1dbc6dfc8b1e04cd1b25328859d
Default Alt Text
grid.less (3 KB)

Event Timeline