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