From 0d655541b4929dc3369a7af3a7f005314388f626 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Wed, 25 Oct 2023 14:00:39 +0200
Subject: [PATCH] Color dragged item yellow
---
example/src/ExampleAOverlay.vue | 42 +++++++++++++++++++++++++++++++--
1 file changed, 40 insertions(+), 2 deletions(-)
diff --git a/example/src/ExampleAOverlay.vue b/example/src/ExampleAOverlay.vue
index 14dfcef..f4dc3b2 100644
--- a/example/src/ExampleAOverlay.vue
+++ b/example/src/ExampleAOverlay.vue
@@ -154,7 +154,7 @@ export default {
@containerDragEnd="handleContainerDrag($event, 'end')"
>
<template #item="{ rawItem }">
- <div :class="{ container: true, disabled: rawItem.disabled }">
+ <div :class="{ container: true, disabled: rawItem.disabled, dragged: dragged[rawItem.key] }">
<span>{{ rawItem.data.name }}</span>
</div>
</template>
@@ -186,7 +186,7 @@ export default {
@containerDragEnd="handleContainerDrag($event, 'end')"
>
<template #item="{ rawItem }">
- <div :class="{ container: true, disabled: rawItem.disabled }">
+ <div :class="{ container: true, disabled: rawItem.disabled, dragged: dragged[rawItem.key] }">
<span>{{ rawItem.data.name }}</span>
</div>
</template>
@@ -253,6 +253,44 @@ div {
.container.goal {
background: #2ecc71;
box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
+ animation: breathe 2s infinite;
+}
+
+@keyframes breathe {
+ 0% {
+ background: #2ecc71;
+ box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
+ }
+ 50% {
+ background: #a3d9a5;
+ box-shadow: #2ecc71 0.1em 0.1em 0 0.1em;
+ }
+ 100% {
+ background: #2ecc71;
+ box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
+ }
+}
+
+.container.dragged {
+ animation: glare 2s infinite;
+ color: #222;
+ background: #f1c40f;
+ box-shadow: #f39c12 0.1em 0.1em 0 0.1em;
+}
+
+@keyframes glare {
+ 0% {
+ background: #f1c40f;
+ box-shadow: #f39c12 0.1em 0.1em 0 0.1em;
+ }
+ 50% {
+ background: #f7dd73;
+ box-shadow: #f1c40f 0.1em 0.1em 0 0.1em;
+ }
+ 100% {
+ background: #f1c40f;
+ box-shadow: #f39c12 0.1em 0.1em 0 0.1em;
+ }
}
button {
--
GitLab