edb4385345
A list that toggles visibility via the checkbox hack is needed in at least two spots: the page actions overflow menu and the user menu. This patch makes several refactors to turn what was previously hardcoded into page actions a reusable component: - Start a new components directory. Components are reusable and composable. The subdirectories are organized by function, not ResourceLoader module bundling which greatly improves the ability to see a component's full functionality in one directory instead of examining the entire codebase. See updates to README. - Extract pageactions.less into: - ToggleList.less: LESS for any checkbox hack list. - DropDownList.less: LESS for lists that open downwards. - MenuListItem.less: LESS for list items of menus. The division makes it easier to see concerns, dependencies, and change code. - Move pageActionMenu.mustache to a component and extract ToggleList template. - Extract ToggleList.js from Toolbar.js. Bug: T214540 Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8
23 lines
944 B
Plaintext
23 lines
944 B
Plaintext
// A DropDownList is a ToggleList that extends downward.
|
|
|
|
@import '../../minerva.less/minerva.mixins';
|
|
|
|
.toggle-list__list--drop-down {
|
|
transform: translateY( -8px );
|
|
|
|
// Animate menu visibility, opacity, and translation changes in and out. Visibility must be
|
|
// animated since it's a boolean and nothing can be seen in display hidden. Visibility itself
|
|
// cannot be animated as it causes a flash on page load in Chromium due to
|
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189. The effect is that the menu is
|
|
// animated in but not animated out.
|
|
.transition( opacity .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out; );
|
|
|
|
// 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__checkbox:checked ~ .toggle-list__list--drop-down {
|
|
transform: translateY( 0 );
|
|
}
|