:lipsticks: menu action

This commit is contained in:
Vanessa 2024-01-11 11:59:49 +08:00
parent 1e665b8c46
commit e304199b6f
3 changed files with 15 additions and 6 deletions

View file

@ -226,6 +226,7 @@
padding: 0 4px;
margin-left: 4px;
display: flex;
translate: var(--b3-transition);
svg {
height: 14px;

View file

@ -214,7 +214,7 @@
background-color: var(--b3-list-hover);
& > .b3-menu__action {
opacity: .68;
opacity: 1;
}
}
@ -236,15 +236,23 @@
&__action {
opacity: 0;
width: 16px;
height: 16px;
width: 22px;
height: 22px;
align-self: center;
margin-left: 8px;
color: var(--b3-theme-on-surface);
color: var(--b3-theme-on-surface-light);
border-radius: var(--b3-border-radius);
padding: 4px;
box-sizing: border-box;
translate: var(--b3-transition);
&:hover {
opacity: 1;
color: var(--b3-theme-on-background);
background-color: var(--b3-list-icon-hover);
}
&--close:hover {
background-color: transparent;
}
}

View file

@ -222,7 +222,7 @@ export class MenuItem {
html += `<span class="b3-menu__accelerator">${updateHotkeyTip(options.accelerator)}</span>`;
}
if (options.action) {
html += `<svg class="b3-menu__action"><use xlink:href="#${options.action}"></use></svg>`;
html += `<svg class="b3-menu__action${options.action === "iconCloseRound" ? " b3-menu__action--close" : ""}"><use xlink:href="#${options.action}"></use></svg>`;
}
this.element.innerHTML = html;
}