fix(#16): add ripple effect to space action menu toggle button

src/animations.scss

@@ -0,0 +1,11 @@
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+  }
+  75% {
+    transform: scale(1.3);
+  }
+  100% {
+    opacity: 0;
+  }
+}

src/components/space-action-menu/SpaceActionMenu.scss

@@ -3,6 +3,23 @@
 
   &__btn {
     color: $color-tertiary-dark;
+
+    // Ripple effect
+    &.clicked {
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: $color-primary;
+        transform: scale(0);
+        animation-name: ripple;
+        animation-duration: 0.5s;
+      }
+    }
   }
 
   &__container {

src/components/space-action-menu/SpaceActionMenu.vue

@@ -2,6 +2,7 @@
   <div class="space-action-menu" v-click-away="closeMenu">
     <BIMDataButton color="default" ghost rounded icon
       class="space-action-menu__btn"
+      :class="{ clicked }"
       @click="toggleMenu">
       <BIMDataIcon name="ellipsis" size="l" />
     </BIMDataButton>
@@ -81,6 +82,12 @@ export default {
 
     const loading = createLoadingContext(`space-action-${props.space.id}`);
 
+    const clicked = ref(false);
+    const rippleEffect = () => {
+      clicked.value = true;
+      setTimeout(() => clicked.value = false, 500);
+    };
+
     const showMenu = ref(false);
     const closeMenu = () => {
       closeUpdateForm();
@@ -89,6 +96,7 @@ export default {
       showMenu.value = false;
     };
     const toggleMenu = () => {
+      rippleEffect();
       closeUpdateForm();
       closeDeleteGuard();
       loading.value = false;
@@ -117,6 +125,7 @@ export default {
 
     return {
       // References
+      clicked,
       loading,
       showDeleteGuard,
       showMenu,

src/global.scss

@@ -1,5 +1,7 @@
 @import '~@bimdata/design-system/dist/scss/elements/_BIMDataScrollbar.scss';
 
+@import './animations.scss';
+
 * {
   box-sizing: border-box;
 }