Fix animation and layout issues in zen-components and zen-styles

This commit is contained in:
mr. M
2024-10-30 13:18:27 +01:00
parent d978d35533
commit 2b18df8398
3 changed files with 21 additions and 20 deletions

View File

@@ -244,28 +244,28 @@
}
30% {
top: -5px;
top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%, -50%);
}
70% {
/* make the box grow to full width/height */
opacity: 1;
transform: translateX(-50%);
top: -5px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 78%;
height: 103%;
width: 87%;
height: 87%;
}
100% {
/* make the box shrink to final width/height and x/y coordinates */
transform: translateX(-50%);
transform: translate(-50%, -50%);
opacity: 1;
width: 75%;
height: 100%;
top: -5px;
width: 85%;
height: 85%;
top: 50%;
left: 50%;
}
}
@@ -284,22 +284,22 @@
}
100% {
transform: translateX(-50%);
transform: translate(-50%, -50%);
opacity: 1;
width: 75%;
height: 100%;
top: -5px;
width: 85%;
height: 85%;
top: 50%;
left: 50%;
}
}
@keyframes zen-glance-buttons-animation-full {
from {
width: 75%;
height: 100%;
top: -5px;
width: 85%;
height: 85%;
top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%, -50%);
}
to {

View File

@@ -60,6 +60,7 @@
width: var(--initial-width);
height: var(--initial-height);
position: absolute;
border-radius: var(--zen-border-radius);
opacity: 0;
top: 0;
left: 0;
@@ -126,7 +127,7 @@
&[animate-full='true'] {
opacity: 1;
animation: zen-glance-buttons-animation-full 0.2s ease-in-out forwards !important;
animation: zen-glance-buttons-animation-full 0.3s ease-in-out forwards !important;
& #zen-glance-sidebar-container {
opacity: 0 !important;