hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

highlight hotbar-icon border on click

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2021-09-22 16:36:12 +03:00
parent 48059e903c
commit d54f1db990
1 changed files with 13 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/renderer/components/hotbar/hotbar-icon.scss
View File

@ -31,12 +31,20 @@
} }
.HotbarIcon { .HotbarIcon {
--iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
--iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
border-radius: 6px; border-radius: 6px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
transition: none; transition: none;
text-shadow: 0 0 4px #0000008f; text-shadow: 0 0 4px #0000008f;
position: relative; position: relative;
z-index: 0; // allows to catch state of :active pseudo-selector
&:active .MuiAvatar-root {
box-shadow: var(--iconActiveShadow) !important;
}
div.MuiAvatar-colorDefault { div.MuiAvatar-colorDefault {
font-weight:500; font-weight:500;
@ -64,20 +72,17 @@
box-shadow: none; box-shadow: none;
} }
div.MuiAvatar-root { .MuiAvatar-root {
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
border-radius: 6px;
&.active { &.active {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent); box-shadow: var(--iconActiveShadow);
} }
&.interactive { &.interactive:not(.active):hover {
&:hover { box-shadow: var(--iconHoverShadow);
&:not(.active) {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
}
}
} }
} }
@ -117,20 +122,6 @@
} }
} }
img {
border-radius: 6px;
&.active {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
}
&:hover {
&:not(.active) {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
}
}
}
.materialIcon { .materialIcon {
margin-left: 1px; margin-left: 1px;
margin-top: 1px; margin-top: 1px;