style deletion progress bar

HectorVilas · Jan 6, 2023 · 47d3703 · 47d3703
1 parent 4091664
commit 47d3703
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/style.css b/src/style.css
@@ -499,12 +499,15 @@ body {background-color: var(--bgc-page);}
 .icon-trash-lid { transform-origin: 250% 0%;}
 .delete-icon:hover .icon-trash { rotate: -7deg;}
 .delete-icon:hover .icon-trash-lid { rotate: 7deg; }
+.delete-icon:active .icon-trash { transition: rotate 2s; rotate: -18deg; }
+.delete-icon:active .icon-trash-lid { transition: rotate 2s; rotate: 10deg; }
 
 .delete-icon.deleting {
   /*item is deleted after animation ends*/
   animation: deleting var(--deletion-delay) linear;
 }
-.delete-icon.deleting::after {
+.delete-icon.deleting::after,
+.delete-icon.deleting::before {
   position: absolute;
   content: "⚠️Deleting...⚠️";
   font-size: 1.5rem;
@@ -513,9 +516,14 @@ body {background-color: var(--bgc-page);}
   box-shadow: var(--card-shadow);
   pointer-events: none;
   transform: translate(-100%, -10%);
-  background-color: red;
+  background-color: #444;
+  animation: deleting-bg var(--deletion-delay) ease-out;
   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+}
+.delete-icon.deleting::after {
+  background-color: red;
   animation: deleting-text var(--deletion-delay) ease-out;
+
 }
 
 @keyframes deleting {
@@ -527,6 +535,9 @@ body {background-color: var(--bgc-page);}
   from {clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}
   to {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
 }
+@keyframes deleting-bg { /* this disappears the bar if fav cancels deletion*/
+  0%, 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
+}
 
 .card-icon.icon-edit:hover,
 .card-icon.icon-pin:hover {