Commit graph

5 commits

Author SHA1 Message Date
Jan Drewniak 036e1295ec [Zebra] Unify ToC & menu scroll behaviour
- 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
2023-05-04 16:19:00 -04:00
bwang bae8b3d717 Consolidate sticky pinned element styles under .vector-sticky-pinned-container class
Bug: T335155
Change-Id: I988f3c7e70d602b4dbd5fd2cbd124b86b104caa7
2023-04-24 19:08:49 +00:00
Jan Drewniak bd05ff4ae5 Add initial Zebra design update for page layout
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
2023-04-21 11:02:56 -05:00
Jan Drewniak 3cea6d4132 Scope styles related to zebra feature flag
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e

.vector-feature-zebra-design-enabled {
    @import "./screen.less"
}

To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.

getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.

Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
2023-04-19 23:09:08 -04:00
Jan Drewniak 5852e320a3 Create skins.vector.zebra.styles module
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
2023-04-19 15:12:53 -04:00