mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-24 14:23:53 +00:00
6f98cc6460
Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
46 lines
1.8 KiB
Plaintext
46 lines
1.8 KiB
Plaintext
// A DropdownList is a ToggleList that extends downward.
|
|
|
|
.toggle-list__list--drop-down {
|
|
background: @background-color-base;
|
|
// The menu appears over the content and occupies no room within it.
|
|
position: absolute;
|
|
// If max-height is set and the height exceeds it, add a vertical scrollbar.
|
|
overflow-y: auto;
|
|
// The menu floats over content but below overlays.
|
|
z-index: @z-index-drawer;
|
|
box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
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;
|
|
|
|
.toggle-list-item:hover {
|
|
// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
|
|
// interactivity.
|
|
background: @background-color-interactive;
|
|
}
|
|
}
|
|
|
|
// 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 );
|
|
// Reveal the list when checked.
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|