wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-27 17:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: Replace legacy Vector breakpoint tokens where applicable

Browse source 
Replacing the legacy Vector breakpoint tokens with the Codex
standard ones. All names have been unified, only some legacy values
remain for backwards compatibility.
Also
- replacing a wrongly applied min-width with the correct max-width
  token,
- replacing a width with an equal value min-width one and
- removing the now equal value mobile min-width one.

Note that we can't do some reference magic here alike
`@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as
this would take the Codex value from skin variables and not the legacy
value.
Also note, that we could move all those Vector legacy definitions into
Vector's 'mediawiki.skin.variables.less' file(s), but that would mean
that extensions don't rely on the Codex default values, but on Vector's
and we want latter to move to the standard, also in foresight of
further standardization to build for all feature teams like a
shared Grid.

Bug: T331403
Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
This commit is contained in:
Volker E 2023-10-19 00:10:22 -07:00 committed by VolkerE
parent 0eb580f4f7
commit b55d95c70c
28 changed files with 69 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
resources/skins.vector.styles.legacy/variables.less
View file

@ -2,14 +2,14 @@
//
// == Media query breakpoints ==
// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html
//
@min-width-mobile: @width-breakpoint-mobile; // Above 320px
@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px
@min-width-tablet: @width-breakpoint-tablet; // Above 720px
@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px
@min-width-desktop: @width-breakpoint-desktop; // Above 1000px
@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px
@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px
@max-width-breakpoint-mobile: 719px;
@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`.
@max-width-breakpoint-tablet: 999px;
@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`.
@max-width-breakpoint-desktop: 1199px;
@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`.
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.

10
resources/skins.vector.styles/components/Button.less
View file

@ -17,7 +17,7 @@
.vector-header .cdx-button.cdx-button--icon-only {
// Increase padding on small viewports
// FIXME: Replace with Codex solution i.e. `.cdx-button--size-large`
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
@min-size-interactive-touch: 44px;
min-width: @min-size-interactive-touch;
min-height: @min-size-interactive-touch;
@ -32,21 +32,21 @@
}
.vector-button-flush-left {
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
.cdx-mixin-button-layout-flush( 'start', true );
}
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
.cdx-mixin-button-layout-flush( 'start', true, 'large' );
}
}
.vector-button-flush-right {
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
.cdx-mixin-button-layout-flush( 'end', true );
}
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
.cdx-mixin-button-layout-flush( 'end', true, 'large' );
}
}

6
resources/skins.vector.styles/components/Header.less
View file

@ -24,7 +24,7 @@
// Ensures the button has a font size of 16px
font-size: unit( 16 / @font-size-browser, rem );
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
// Override .cdx-button styles
display: none !important; /* stylelint-disable-line declaration-no-important */
}
@ -33,12 +33,12 @@
.vector-typeahead-search-container {
display: none;
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
display: block;
}
}
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
/**
* Toggles the visibility of the search box at lower resolutions.
*/

4
resources/skins.vector.styles/components/Logo.less
View file

@ -28,7 +28,7 @@
width: @size-mw-logo-icon;
height: @size-mw-logo-icon;
@media ( min-width: @min-width-tablet ) {
@media ( min-width: @min-width-breakpoint-tablet ) {
display: block;
}
}
@ -49,7 +49,7 @@
width: 100%;
}
@media ( min-width: @min-width-tablet ) {
@media ( min-width: @min-width-breakpoint-tablet ) {
max-width: none;
img {

2
resources/skins.vector.styles/components/PageToolbar.less
View file

@ -11,7 +11,7 @@
.mw-portlet-views {
display: none;
@media ( min-width: @min-width-tablet ) {
@media ( min-width: @min-width-breakpoint-tablet ) {
&:not( .emptyPortlet ) {
display: block;
}

4
resources/skins.vector.styles/components/PageTools.less
View file

@ -31,14 +31,14 @@
.vector-page-tools .vector-more-collapsible-item {
display: block;
@media ( min-width: @min-width-tablet ) {
@media ( min-width: @min-width-breakpoint-tablet ) {
display: none;
}
}
// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present)
.vector-page-tools .vector-has-collapsible-items {
@media ( max-width: @max-width-mobile ) {
@media ( max-width: @max-width-breakpoint-mobile ) {
display: block;
}
}

2
resources/skins.vector.styles/components/PinnableHeader.less
View file

@ -48,7 +48,7 @@
}
// Pinnable behavior is only enabled when JS is enabled and on larger viewports
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
&.client-js {
.vector-pinnable-header-unpinned .vector-pinnable-header-pin-button,
.vector-pinnable-header-pinned .vector-pinnable-header-unpin-button {

2
resources/skins.vector.styles/components/SearchBox.less
View file

@ -15,7 +15,7 @@
}
}
@media ( min-width: @min-width-desktop-wide ) {
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
.client-js & .vector-search-box.vector-search-box-auto-expand-width {
// Ensure search box is aligned with content when it autoexpands (i.e. search thumbnails)
margin-left: -@size-search-expand;

2
resources/skins.vector.styles/components/StickyHeader.less
View file

@ -116,7 +116,7 @@
}
// T298836 Sticky header is only shown at higher resolutions
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
&.client-js.vector-sticky-header-enabled {
// T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the

2
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -141,7 +141,7 @@
// On smaller viewports the TOC will always be moved to the page titlebar via JS
// regardless of the TOC pinned classes
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
&.client-js .vector-page-titlebar .vector-toc-landmark {
display: block;
}

10
resources/skins.vector.styles/components/UserLinks.less
View file

@ -29,7 +29,7 @@
// as well as the dropdown menu itself when the menu is empty
&.user-links-collapsible-item,
.user-links-collapsible-item {
@media ( min-width: @min-width-tablet ) {
@media ( min-width: @min-width-breakpoint-tablet ) {
display: none;
}
}
@ -46,7 +46,7 @@
align-items: center;
}
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
// Right margin to separate overflow menu from dropdown
margin-right: 8px;
@ -56,7 +56,7 @@
}
}
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
// Only apply 8px spacing to normal links (i.e. Create account, User page)
// Links with button classes will have a larger touch area
// and therefore dont need additional spacing
@ -66,7 +66,7 @@
}
.user-links-collapsible-item {
@media ( max-width: @max-width-mobile ) {
@media ( max-width: @max-width-breakpoint-mobile ) {
display: none;
}
}
@ -109,7 +109,7 @@
// T287522#7295558: Increase the max-width of the username when viewport
// allows for it.
@media ( min-width: @min-width-desktop-wide ) {
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
max-width: unit( 200 / @font-size-browser / @font-size-user-links, em );
}
}

6
resources/skins.vector.styles/layouts/grid.less
View file

@ -2,7 +2,7 @@
// Grid layout
//
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
.mw-page-container-inner {
display: grid;
column-gap: @grid-column-gap;
@ -38,7 +38,7 @@
}
}
@media ( min-width: @min-width-desktop-wide ) {
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
.mw-page-container-inner {
grid-template-columns: @grid-template-column-desktop-wide;
}
@ -84,7 +84,7 @@
margin-right: auto;
}
@media ( min-width: @min-width-desktop ) {
@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';

2
resources/skins.vector.styles/layouts/toc/pinned.less
View file

@ -7,7 +7,7 @@
height: 100%;
}
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
&.vector-feature-toc-pinned-clientpref-1 #mw-panel-toc {
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).

6
resources/skins.vector.styles/layouts/toc/unpinned.less
View file

@ -47,7 +47,7 @@
}
&.client-js {
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
//
// TOC in page titlebar on narrow screens
//
@ -63,7 +63,7 @@
}
}
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
//
// TOC in page titlebar
//
@ -106,7 +106,7 @@
//
// Applies simplified TOC styles to No-JS pinned TOC on narrow viewports
//
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
&.vector-feature-toc-pinned-clientpref-1 {
.vector-sticky-pinned-container {
position: static;

4
resources/skins.vector.styles/mixins.less
View file

@ -81,12 +81,12 @@
background-color: @background-color-page-container;
box-sizing: border-box;
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
padding-left: @padding-horizontal-page-container-desktop;
padding-right: @padding-horizontal-page-container-desktop;
}
@media ( min-width: @min-width-desktop-wide ) {
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
padding-left: @padding-horizontal-page-container-desktop-wide;
padding-right: @padding-horizontal-page-container-desktop-wide;
}

14
resources/skins.vector.styles/variables.less
View file

@ -2,14 +2,14 @@
//
// == Media query breakpoints ==
// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html
//
@min-width-mobile: @width-breakpoint-mobile; // Above 320px
@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px
@min-width-tablet: @width-breakpoint-tablet; // Above 720px
@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px
@min-width-desktop: @width-breakpoint-desktop; // Above 1000px
@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px
@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px
@max-width-breakpoint-mobile: 719px;
@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`.
@max-width-breakpoint-tablet: 999px;
@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`.
@max-width-breakpoint-desktop: 1199px;
@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`.
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.

4
resources/skins.vector.zebra.styles/components/PageTools.less
View file

@ -8,14 +8,14 @@
.vector-page-tools .vector-more-collapsible-item {
display: block;
@media ( min-width: @min-width-tablet ) {
@media ( min-width: @min-width-breakpoint-tablet ) {
display: none;
}
}
// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present)
.vector-page-tools .vector-has-collapsible-items {
@media ( max-width: @max-width-mobile ) {
@media ( max-width: @max-width-breakpoint-mobile ) {
display: block;
}
}

2
resources/skins.vector.zebra.styles/components/PinnableElement.less
View file

@ -31,7 +31,7 @@
top: @grid-row-gap;
}
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
/**
* At lower resolutions, we want to hide the pinned containers when JS is enabled since these
* elements collapse (become unpinned) at this resolution via PinnableElement.js.

2
resources/skins.vector.zebra.styles/components/PinnableHeader.less
View file

@ -35,7 +35,7 @@
}
// Pinnable behavior is only enabled when JS is enabled and on larger viewports
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
&.client-js {
.vector-pinnable-header-unpinned .vector-pinnable-header-pin-button,
.vector-pinnable-header-pinned .vector-pinnable-header-unpin-button {

2
resources/skins.vector.zebra.styles/components/StickyHeader.less
View file

@ -116,7 +116,7 @@
}
// T298836 Sticky header is only shown at higher resolutions
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
&.client-js.vector-sticky-header-enabled {
// T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the

2
resources/skins.vector.zebra.styles/components/TableOfContents.less
View file

@ -112,7 +112,7 @@
// On smaller viewports the TOC will always be moved to the page titlebar via JS
// regardless of the TOC pinned classes
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
&.client-js .vector-page-titlebar .vector-toc-landmark {
display: block;
}

6
resources/skins.vector.zebra.styles/layouts/grid.less
View file

@ -2,7 +2,7 @@
// Grid layout
//
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
.mw-page-container-inner {
display: grid;
column-gap: @grid-column-gap;
@ -36,7 +36,7 @@
}
}
@media ( min-width: @min-width-desktop-wide ) {
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
.mw-page-container-inner {
grid-template-columns: @grid-template-column-desktop-wide;
}
@ -77,7 +77,7 @@
}
}
@media ( min-width: @min-width-desktop ) {
@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';

2
resources/skins.vector.zebra.styles/layouts/screen.less
View file

@ -19,7 +19,7 @@ html& {
--padding-horizontal-content: @padding-horizontal-content-box;
}
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
html& {
--padding-horizontal-content: @padding-horizontal-content-box-wide;
}

6
resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
View file

@ -27,7 +27,7 @@
}
&.client-js {
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
//
// TOC in page titlebar on narrow screens
//
@ -43,7 +43,7 @@
}
}
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
//
// TOC in page titlebar
//
@ -86,7 +86,7 @@
//
// Applies simplified TOC styles to No-JS pinned TOC on narrow viewports
//
@media ( max-width: @max-width-tablet ) {
@media ( max-width: @max-width-breakpoint-tablet ) {
&.vector-feature-toc-pinned-clientpref-1 {
.vector-sticky-pinned-container {
position: static;

4
resources/skins.vector.zebra.styles/mixins.less
View file

@ -77,12 +77,12 @@
background-color: @background-color-page-container;
box-sizing: border-box;
@media ( min-width: @min-width-desktop ) {
@media ( min-width: @min-width-breakpoint-desktop ) {
padding-left: @padding-horizontal-page-container-desktop;
padding-right: @padding-horizontal-page-container-desktop;
}
@media ( min-width: @min-width-desktop-wide ) {
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
padding-left: @padding-horizontal-page-container-desktop-wide;
padding-right: @padding-horizontal-page-container-desktop-wide;
}

14
resources/skins.vector.zebra.styles/variables.less
View file

@ -2,14 +2,14 @@
//
// == Media query breakpoints ==
// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html
//
@min-width-mobile: @width-breakpoint-mobile; // Above 320px
@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px
@min-width-tablet: @width-breakpoint-tablet; // Above 720px
@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px
@min-width-desktop: @width-breakpoint-desktop; // Above 1000px
@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px
@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px
@max-width-breakpoint-mobile: 719px;
@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`.
@max-width-breakpoint-tablet: 999px;
@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`.
@max-width-breakpoint-desktop: 1199px;
@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`.
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.

2
skinStyles/ext.echo.styles.alert.less
View file

@ -20,7 +20,7 @@
text-overflow: ellipsis;
}
@media ( max-width: @min-width-desktop-wide ) {
@media ( max-width: @max-width-breakpoint-desktop ) {
.mw-echo-alert {
.echo-alert-collapse();
}

2
skinStyles/mediawiki.special.search.interwikiwidget.less
View file

@ -4,7 +4,7 @@
@import 'mediawiki.skin.variables.less';
.vector-feature-main-menu-pinned-disabled .mw-searchresults-has-iw {
@media only screen and ( min-width: @width-breakpoint-desktop ) {
@media only screen and ( min-width: @min-width-breakpoint-desktop ) {
#mw-interwiki-results {
display: inline-block;
width: ~'calc( 100% / 12 * 3 )';