Parcourir la source

Add shake to highlight class

sbkwgh il y a 8 ans
Parent
commit
8d83d83dee
1 fichiers modifiés avec 20 ajouts et 1 suppressions
  1. 20 1
      src/components/ThreadPost.vue

+ 20 - 1
src/components/ThreadPost.vue

@@ -98,14 +98,33 @@
 <style lang='scss' scoped>
 	@import '../assets/scss/variables.scss';
 
-	.post {
+	@keyframes shake {
+		0% {
+			left: 0rem;
+		}
+		25% {
+			left: -0.5rem;
+		}
+		75% {
+			left: 0.5rem;
+		}
+		100% {
+			left: 0rem;
+		}
+	}
 
+	.post {
+		position: relative;
 		border-top: thin solid $color__gray--primary;
 		transition: background-color 0.5s;
 		margin: 0.5rem 0;
 
 		@at-root #{&}--highlighted {
 			background-color: $color__lightgray--darkest;
+			animation-name: shake;
+			animation-iteration-count: 5;
+			animation-timing-function: linear;
+			animation-duration: 0.25s;
 		}
 
 		@at-root #{&}--last {