mediawiki-skins-MinervaNeue/includes/Skins/ToggleList/DropDownList.less
jdlrobson 17968826fa Move components files up one level into Skins directory
Follow up to I4c2e115451c0a76c742734730712814c1f1d838d.
This will allow us to load the templates directly into skin.mustache
via {{>PartialName}}

Templates partials can only be resolved relative to the folder given
to the TemplateParser.

Change-Id: I5783d49c25d2efcf4781dd912500bf8b413b8cb6
2021-10-22 18:45:38 +00:00

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 ) );
}