Commit graph

5 commits

Author SHA1 Message Date
Jan Drewniak 3c0559a71d Refactor chevron across components + separate watchstar
Consolidates the CSS responsible for styling chevrons into one
implementation. This removes the need for custom padding and
background positioning for the following components:

- "more" menu
- user menu
- watchstar
- language button
- languge button in sticky header

Instead of absolutely positioning the chevron on these components,
the parent label element is set to `display: inline-flex` so that
the chevron is vertically aligned and given enough space by default.

The watchstar, although not a chevron, is also given the
`display: inline-flex` treatment so that it can be aligned with
other elements in the toolbar.

This new implementation requires splitting the watchstar
component into legacy and modern due to a quirk in Firefox that
causes a bug with the watchstar in legacy Vector.

NOTE: This change causes visual changes due to the difference in
centering the chevrons via flexbox vs percentage positions.

Bug: T308344, T310838
Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
2022-07-21 10:14:21 -04:00
Jan Drewniak c5cfd4dce8 Restyle Vector tabs in modern Vector
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.

Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
2022-06-08 11:26:17 -07:00
jdlrobson e1d0f1e61c Storybook: Consistent styling
- Make sure common styles are loaded for all components
- Add icon in user menu

Fixes renders of:
- Language button (no top margin and button styles)
- MenuPortal (no left margins)


Change-Id: I98b4820b6d91d46fd27a1d433d5bacd187a7cbb0
2021-05-27 19:27:21 +00:00
jdlrobson e4a4050b81 Organize CSS by common, layout, typography and components
Moving styles from the existing styles to common/layout
or components stylesheets they should be associated with.

Components are identified using PascalCase. Lowercase names are used for things
that are not components. This distinction should help us reason with the code
better and make it clearer where CSS belongs, saving us lots of wasted
effort discussing conventions.

Patch isn't making actual CSS changes themselves - for testing purposes this
should be a NOOP.

In preparation for the gradient removal,
'background-gradient.less' is marked as legacy.

Merged 'externalLinks.less' into content.less, they belong to content.

Bug: T249073
Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798
2020-05-07 22:57:13 +00:00
jdlrobson a43e79c1d3 Refactor: Merge VectorTabs into Menu
Bug: T249372
Change-Id: Ib6ae191b31564dc23a3b1d6aedf48cbaaad006af
2020-05-06 10:23:58 -07:00
Renamed from stories/VectorTabs.stories.js (Browse further)