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
33 lines
752 B
Plaintext
33 lines
752 B
Plaintext
// A MenuListItem is a ToggleList item for menus.
|
|
|
|
@import '../../minerva.less/minerva.variables';
|
|
@import '../../minerva.less/minerva.mixins';
|
|
|
|
.toggle-list-item__anchor--menu {
|
|
font-size: @pageActionFontSize;
|
|
font-weight: bold;
|
|
// Fill the list item cell.
|
|
.box-sizing( border-box );
|
|
display: block;
|
|
width: 100%;
|
|
//
|
|
padding: 1em;
|
|
white-space: nowrap;
|
|
// Left-align text. Button elements are centered.
|
|
text-align: left;
|
|
//
|
|
color: @grayMediumDark;
|
|
|
|
&:visited, &:active {
|
|
// Visited and active links need extra specificity.
|
|
color: @grayMediumDark;
|
|
}
|
|
//
|
|
// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
|
|
// interactivity.
|
|
&:hover {
|
|
text-decoration: none;
|
|
background: @grayLightest;
|
|
}
|
|
}
|