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

Replacing click animations

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-05-05 11:59:05 +03:00
parent 96fd4921ec
commit 24716eaa09
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@
cursor: pointer; cursor: pointer;
transition: none; transition: none;
text-shadow: 0 0 4px #0000008f; text-shadow: 0 0 4px #0000008f;
position: relative;
div.MuiAvatar-colorDefault { div.MuiAvatar-colorDefault {
font-weight:500; font-weight:500;

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

@ -46,7 +46,7 @@
position: relative; position: relative;
&.isDraggingOver { &.isDraggingOver {
box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff; background-color: #3e4148;
&:not(.isDraggingOwner) { &:not(.isDraggingOwner) {
z-index: 50; z-index: 50;
@ -61,12 +61,16 @@
transform: translate(0px, -40px)!important; transform: translate(0px, -40px)!important;
} }
} }
&.animateDown {
> div {
transform: translate(0px, 40px);
}
}
} }
} }
&.animating { &.animating {
transform: translateZ(0); // Remove flickering artifacts
&:empty { &:empty {
animation: shake .6s cubic-bezier(.36,.07,.19,.97) both; animation: shake .6s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
@ -75,7 +79,9 @@
} }
&:not(:empty) { &:not(:empty) {
animation: outline 1s cubic-bezier(0.19, 1, 0.22, 1); .HotbarIcon {
animation: click .1s;
}
} }
} }
} }
@ -100,13 +106,12 @@
} }
} }
// TODO: Use theme-aware colors @keyframes click {
@keyframes outline {
0% { 0% {
box-shadow: 0 0 0px 11px $clusterMenuBackground, 0 0 0px 15px #ffffff00; margin-top: 0;
} }
100% { 100% {
box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #ffffff; margin-top: 2px;
} }
} }