Add delete strike animation for local rules
This commit is contained in:
@@ -955,7 +955,27 @@ p {
|
||||
|
||||
.client-local-rule.is-removing {
|
||||
pointer-events: none;
|
||||
animation: client-local-rule-leave 360ms cubic-bezier(0.7, 0, 0.84, 0) both;
|
||||
animation: client-local-rule-leave 760ms cubic-bezier(0.7, 0, 0.84, 0) both;
|
||||
}
|
||||
|
||||
.client-deletable-row::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
z-index: 6;
|
||||
height: 2px;
|
||||
background: oklch(0.67 0.24 27);
|
||||
box-shadow: 0 0 4px oklch(0.67 0.24 27), 0 0 12px oklch(0.67 0.24 27 / 0.8);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.client-deletable-row.is-removing::after {
|
||||
animation: client-delete-strike 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.client-local-rule-enabled {
|
||||
@@ -1271,8 +1291,14 @@ p {
|
||||
}
|
||||
|
||||
@keyframes client-local-rule-leave {
|
||||
from { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
|
||||
to { opacity: 0; filter: blur(8px); transform: translateX(18px) scale(0.97); }
|
||||
0%, 48% { opacity: 1; filter: blur(0); }
|
||||
100% { opacity: 0; filter: blur(8px); }
|
||||
}
|
||||
|
||||
@keyframes client-delete-strike {
|
||||
0% { opacity: 1; transform: scaleX(0); }
|
||||
38%, 58% { opacity: 1; transform: scaleX(1); }
|
||||
100% { opacity: 0; transform: scaleX(1); }
|
||||
}
|
||||
|
||||
@keyframes client-local-rules-notice {
|
||||
@@ -2961,6 +2987,7 @@ p {
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.client-operation-progress::before,
|
||||
.client-deletable-row::after,
|
||||
.client-power,
|
||||
.client-power::before,
|
||||
.client-power::after,
|
||||
|
||||
Reference in New Issue
Block a user