mediawiki-skins-MinervaNeue/components/ToggleList/DropDownList.less
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00

25 lines
880 B
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;
}
.animations {
.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 .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out; );
}
}
.toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
transform: translateY( 0 );
}