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

Making sidebar resizing indicator visible on hover

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-05-26 16:26:22 +03:00
parent 59f93590c6
commit 50d0b74dfd
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/components/resizing-anchor/resizing-anchor.scss
View File

@ -31,6 +31,23 @@ body.resizing {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
&::after {
content: " ";
display: block;
width: 3px;
height: 100%;
margin-left: 50%;
background: transparent;
transition: all 0.2s 0s;
}
&:hover {
&::after {
background: var(--blue);
transition: all 0.2s 0.5s;
}
}
&.disabled { &.disabled {
display: none; display: none;
} }
@ -56,6 +73,17 @@ body.resizing {
cursor: col-resize; cursor: col-resize;
width: $dimension; width: $dimension;
// Expand hoverable area while resizing to keep highlighting resizer.
// Otherwise, cursor can move far away dropping hover indicator.
.resizing & {
$expandedWidth: 200px;
width: $expandedWidth;
&.trailing {
right: -$expandedWidth / 2;
}
}
&.leading { &.leading {
left: -$dimension / 2; left: -$dimension / 2;
} }