Add animations

primefaces · Feb 3, 2021 · 3cd5591 · 3cd5591
1 parent 6a2d4a6
commit 3cd5591
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
@@ -12,7 +12,9 @@
         <ul ref="topbarMenu" class="topbar-menu">
             <li><router-link to="/setup">Get Started</router-link></li>
             <li class="topbar-submenu">
-                <a tabindex="0" @click="toggleMenu($event, 0)">Themes</a>
+                <a tabindex="0" @click="toggleMenu($event, 0)">
+                    <span v-badge.danger>Themes</span>
+                </a>
                 <transition name="p-connected-overlay" @enter="onMenuEnter">
                     <ul v-show="activeMenuIndex === 0">
                         <li class="topbar-submenu-header">THEMING</li>

diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss
@@ -48,6 +48,10 @@
             border-top-right-radius: 3px;
             border-bottom-left-radius: 3px;
             border-bottom-right-radius: 3px;
+            animation-name: rubberBand;
+            animation-duration: 1s;
+            animation-iteration-count: 3;
+            animation-delay: 5s;
             box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
             i {
@@ -167,4 +171,34 @@
             }
         }
     }
-}
+}
+
+@keyframes rubberBand {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+      transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+      transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+      transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+      transform: scale3d(.95, 1.05, 1);
+    }
+
+    75% {
+      transform: scale3d(1.05, .95, 1);
+    }
+
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
@@ -133,16 +133,6 @@ export default {
                     document.getElementById(this.appendTo).removeChild(this.overlay);
             }
         },
-        bindOutsideClickListener() {
-            if (!this.outsideClickListener) {
-                this.outsideClickListener = (event) => {
-                    if (this.overlayVisible && this.overlay && this.isOutsideClicked(event)) {
-                        this.hideOverlay();
-                    }
-                };
-                document.addEventListener('click', this.outsideClickListener);
-            }
-        },
         testStrength(str) {
             let level = 0;