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

Shadow over sidebar scrollable content

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-09-09 14:03:39 +03:00
parent 03ffe899fe
commit d82f591ac1
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/hotbar/hotbar-menu.scss
View File

@ -27,6 +27,7 @@
background: $clusterMenuBackground; background: $clusterMenuBackground;
padding-top: 1px; padding-top: 1px;
width: var(--hotbar-width); width: var(--hotbar-width);
overflow: hidden;
.HotbarItems { .HotbarItems {
--cellWidth: 40px; --cellWidth: 40px;

10
src/renderer/components/layout/sidebar.scss
View File

@ -28,6 +28,16 @@
padding-bottom: calc(var(--padding) * 3); padding-bottom: calc(var(--padding) * 3);
overflow: auto; overflow: auto;
/* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
background:
linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
background-attachment: local, local, scroll, scroll;
.Icon { .Icon {
--size: #{$iconSize}; --size: #{$iconSize};