mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-17 19:21:39 +00:00
c22eab914e
Per T234570, browser support for animations is solid now so we no longer need to check for browser support. However, due to some browsers firing css transitions on page load (see https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still need JS to add this wrapping class after CSS transitions are loaded to prevent the transitions firing on page load for some components (DropDownList and MainMenu). See MainMenu.less or DropDownList.less for an example of how this is used. MobileFrontend adds an animations class too rn, but that will be removed in in I58f754740f7146f09c38220a7614285e57684924. Bug: T234570 Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
29 lines
1.2 KiB
Plaintext
29 lines
1.2 KiB
Plaintext
// A DropDownList is a ToggleList that extends downward.
|
|
|
|
@import '../../minerva.less/minerva.mixins.less';
|
|
|
|
.toggle-list__list--drop-down {
|
|
.transform( translateY( -8px ) );
|
|
|
|
// When cursor is pointer and -webkit-tap-highlight-color is set, the color does not seem to
|
|
// transition. Clear it.
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
// Without the minerva-animations-ready class, DropDownList can appear and
|
|
// perform its exit animation when the page loads in chrome (and possibly
|
|
// others).
|
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189
|
|
.minerva-animations-ready {
|
|
.toggle-list__list--drop-down {
|
|
// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
|
|
// cannot be animated initially as it causes a flash on page load in Chromium due to
|
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
|
|
.transition( opacity @transition-duration-base ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform @transition-duration-base ease-in-out, visibility @transition-duration-base ease-in-out; );
|
|
}
|
|
}
|
|
|
|
.toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
|
|
.transform( translateY( 0 ) );
|
|
}
|