mediawiki-skins-MinervaNeue/includes/Skins/components/ToggleList/DropDownList.less
jdlrobson aba173efc6 Remove non-standard components folder
For skins, all templates should be in the same folder. This
is for security reasons, to limit access of templates to files
that are not templates. This also adds consistency with other skins
where templates are all in the same subdirectory. It also allows
us to reduce the creation of TemplateParser instances.

Note: All styles and scripts should be in the resources folder but this
is not rectified by this patchset. Will be done in follow ups following
more discussion.

This begins this work in the least disruptive way possible and drops
the README note to avoid this pattern growing.

Bug: T292558
Change-Id: I4c2e115451c0a76c742734730712814c1f1d838d
2021-10-06 20:13:48 +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 ) );
}