Commit graph

18 commits

Author SHA1 Message Date
bwang 25f4bc2a37 Remove @font-size-base from vector-2022
Bug: T367899
Change-Id: I6ec44a10a7bfeb6b03912ca6d5a23eaed046db08
2024-09-26 11:44:57 -05:00
Volker E 783d67e077 Replace border-color-portal-heading with Codex border-color-subtle
Replacing Vector specific variable with standard token that is meant
for exactly the applied use cases.
Note, I've left `border-color-subtle-transparent` because of that
extra engineering leg. I assume it was meant for animating the property,
which is not there. It seems better to me to replace this variable too
with `border-color-transparent`.

Change-Id: If264e04e576f044b98ec0d61b085f65af0110b6d
2024-05-28 14:29:20 -05:00
Eric Gardner d60a644264 icons: restore "background-" CSS rules
Temporarily hard-codes some CSS background rules after Codex's
CSS-icon mixins stopped supplying them upstream (after changing
to use mask-image in icons).

Bug: T358160
Change-Id: I13be424c58b105472ef22f14e4381693f2985cd8
2024-02-21 21:42:46 -08:00
Volker E b55d95c70c styles: Replace legacy Vector breakpoint tokens where applicable
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
2023-10-25 22:03:46 +00:00
Jan Drewniak 751454d7a8 [Visual change] Normalize small font sizes in Vector 2022
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
2023-10-24 22:50:15 +00:00
bwang 5e15edb9a2 Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent
Bug: T345766
Change-Id: I2ae1d1668849a04520b73ac04fe16e1ff7f22fa6
2023-10-03 19:13:21 +00:00
Jon Robson 46dece0b56 Limit button only icon resizing to Vector header button icons
Bug: T342190
Change-Id: I5ccc1e83b28a6ffa63d351900eba02343fc48659
2023-07-24 16:00:46 -05:00
bwang 3a3c6120e2 Fix echo icon sizing after ULS enhances them
Bug: T341490
Change-Id: Ic9142c318d8046fc19ae2faa8005a625859446d5
2023-07-10 15:43:57 -05:00
bwang 6a57506ae8 Separate vector-menu classes from Dropdowns
Bug: T319358
Change-Id: Idf05c1664c026f58487ba34af5ede8a11e695baf
2023-06-27 10:14:29 -05:00
bwang edf2c78765 Ensure language button works for no js users,
* 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
2023-06-22 21:17:46 +00:00
Jon Robson 24d69726f3 Drop styles for cached HTML
Performance: This reclaims 1.3kb of CSS.

Bug: T336526
Change-Id: I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d
2023-06-14 10:52:44 -07:00
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
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
2023-06-12 16:26:28 -07:00
bwang d8bcb73647 Update user menu and watchstar buttons to be consistent with spec
Depends-on: Ibd762c810e1d89047e39ce3af792b43689bf11e3
Bug: T335909
Change-Id: I5b42780416b466cc3fc33d29220aef2979ac3239
2023-05-03 15:47:00 -07:00
bwang d150131561 Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable
This patch involves cached HTML changes
- Replace '-content-container' id with '-unpinned-container'
- Replace '-content' id with '-pinnable-element'
- Rename pinnableHeader.js to pinnableElement.js
- Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close
- Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close
- Rename .vector-dropdown-content to .vector-pinnable-element
- Add new PinnableElement.less stylesheet

Bug: T318013
Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
2022-11-30 17:17:20 -06:00
bwang 78b20092c4 Ensure more menu shows on lower resolutions
Bug: T323730
Change-Id: I874e93fed7287dd6276b8a47ba1ea15624b75d84
2022-11-23 20:58:23 +00:00
Jan Drewniak 69f3dcd7a7 Prepare styles for Page Tools menu
Makes the dropdown styles compatible with the pinned state of the
menu so that both states can share the same styles.

- New vector-menu-heading mixin shared between main menu headings
  and dropdown headings.
- New @font-size-dropdown variable so font-size is consistent in
  dropdown and pinned state.
- Ensure hidden 'more' menu works in both pinned and dropdown state.
- Removes extra <ul><li> from PinnableDropdownContents.mustache, as the
  child Menu template already contain <ul><li> elements.

Bug: T318434
Change-Id: Ie1a56d8584c1dc3f20c6643ff4cfc740be4007fa
2022-11-22 12:57:29 -05:00
bwang 099eed0487 Remove CSS classes and selectors from cached HTML
Bug: T316570
Depends-on: Ib4050768f20b1734d356104f18aa539f657099d8
Change-Id: I97f87b32402d7f4fd790f9a8b9abab42efd9d890
2022-11-03 11:12:39 -05:00
bwang 51457a78e7 Replace incorrectly mw- prefixed classes
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"

Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
2022-10-25 10:28:31 -05:00
Renamed from resources/skins.vector.styles/components/ArticleToolbar.less (Browse further)