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
Replaces font-sizes that are between 12-14
px with ones that equal 14px. This involved
converting some values to rems as well as changing
their size.
@font-size-tabs (a computed 13px value) is removed
in favour of unit( @font-size-small, rem).
This removal requires the following changes:
* Removing max-height & box-sizing from tabs, since
they used @font-size-tabs for size calculations
* modifying .mixin-vector-arrowed-dropdown-toggle()
to use `unit( 12 / @font-size-browser, rem )` instead
of `unit( 16 / @font-size-tabs / @font-size-browser, em )`
* Changes to the position of `.vector-toc-toggle` since
it's width/height depended on
.mixin-vector-arrowed-dropdown-toggle()
Opportunistic refactor:
- `.mixin-vector-legacy-menu-heading-arrow()`
is removed from Zebra
Expected visual changes:
font-sizes below refer to computed values, actual values
are now set in rems.
* Text in tabs is 14px not 13px
* #siteSub is 14px not 12.8px
* #contentSub is 14px not 11.76px
* #contentSub line height is default, not 1.2
* dropdown [hide] labels are 14px instead of 13px
*************************
*****VISUAL CHANGE*****
*************************
: 91 changes in Pixel due to content being pushed
down due to bigger font-size in toolbar.
Bug: T346062
Bug: T261334
Change-Id: I6cfc800bb8dfed206670e5365bdc55e5d7357a4a
* Factor out mixin for right aligning menus
VISUAL CHANGE:
Results in a slight change to the alignment of the user menu.
Bug: T339321
Change-Id: I5c3a03161b1f2372d2ca25ba47dcd40065f4f2cc
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php
85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons
PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.
Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
- Refactor the TOC toggle button position
- Move the TOC/pinnable scrollable element from
`.vector-pinnable-element` to `.vector-pinned-container`
and `.vector-dropdown-content`.
- Applies The Fade™️, as well as a vh max-height, to both
pinned menus and dropdowns.
Changes the way The Fade™️ is positioned by using
position:sticky so that it can be applied to
dropdowns, sidebar menus as well as all ToC permutations.
Bug: T335155
Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
Implements the zebra design update via the
skins.vector.zebra.styles module.
Refactors:
- Moves common variable and mixin imports from
individual files to skin.less file.
- Applies font-sizes to menu containers instead
of individual menu links.
- Adds mixins for dropdown and content-box styles.
- Unifies padding for pinned and unpinned menu states
(including TOC).
Bug: T332600
Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
Creates a new skins.vector.zebra.styles module that
will hold style modifications for the Vector Zebra update.
Affected files are copied from skins.vector.styles
without modification (at this point) to improve
revision history in git.
The new module should compile without error and existing
styles should not be affected.
Bug: T332600
Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
