1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Fix drawer icons unexpected outline (#4364)

* Removing MenuItem border in MenuActions

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding hover effect to catalog details icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-17 11:30:54 +03:00 committed by GitHub
parent ca15919218
commit 0587301cc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions

View File

@ -87,6 +87,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
items.push(
<MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>
<Icon
interactive
tooltip={menuItem.title}
{...{ [key]: menuItem.icon }}
/>
@ -98,8 +99,8 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
<HotbarToggleMenuItem
key="hotbar-toggle"
entity={entity}
addContent={<Icon material="push_pin" small tooltip="Add to Hotbar"/>}
removeContent={<Icon svg="push_off" small tooltip="Remove from Hotbar"/>}
addContent={<Icon material="push_pin" interactive small tooltip="Add to Hotbar"/>}
removeContent={<Icon svg="push_off" interactive small tooltip="Remove from Hotbar"/>}
/>,
);

View File

@ -21,7 +21,7 @@
.MenuActions {
&.toolbar {
--flex-gap: #{$padding * 0.5};
--flex-gap: var(--padding);
position: static;
padding: 0;
@ -31,8 +31,8 @@
margin-right: var(--flex-gap) !important;
.Icon {
color: var(--textColorAccent);
padding-right: 0;
width: 21px;
height: 21px;
}
.title, .arrow {
@ -42,6 +42,10 @@
> .MenuItem {
background: none !important;
padding: 0;
margin-bottom: 0;
border: none;
width: 21px;
height: 21px;
> .SubMenu {
$offset: $margin;