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

Icon focus restyling

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-11-05 16:40:40 +03:00
parent d9abf871af
commit b4b3eafefd
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/drawer/drawer.scss
View File

@ -3,6 +3,7 @@
--size: 50%; --size: 50%;
--full-size: 75%; --full-size: 75%;
--spacing: #{$padding * 3}; --spacing: #{$padding * 3};
--icon-focus-color: white;
position: absolute; position: absolute;
background: $contentColor; background: $contentColor;

15
src/renderer/components/icon/icon.scss
View File

@ -5,6 +5,7 @@
--big-size: 32px; --big-size: 32px;
--color-active: #{$iconActiveColor}; --color-active: #{$iconActiveColor};
--bgc-active: #{$iconActiveBackground}; --bgc-active: #{$iconActiveBackground};
--focus-color: var(--icon-focus-color, #{$lensBlue});
display: inline-flex; display: inline-flex;
flex-shrink: 0; flex-shrink: 0;
@ -106,7 +107,7 @@
&.active { &.active {
color: var(--color-active); color: var(--color-active);
box-shadow: 0 0 0 3px $iconActiveBackground; box-shadow: 0 0 0 2px $iconActiveBackground;
background-color: $iconActiveBackground; background-color: $iconActiveBackground;
} }
@ -115,8 +116,16 @@
transition: 250ms color, 250ms opacity, 150ms background-color, 150ms box-shadow; transition: 250ms color, 250ms opacity, 150ms background-color, 150ms box-shadow;
border-radius: 50%; border-radius: 50%;
&.focusable:focus { &.focusable:focus:not(:hover) {
@extend .active; box-shadow: 0 0 0 2px var(--focus-color);
.mouse-intent & {
box-shadow: none;
&.active {
box-shadow: 0 0 0 2px $iconActiveBackground;
}
}
} }
&:hover { &:hover {