From f2c50cd646add59bfd5b85174a014faeabc6ddd1 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Fri, 16 Feb 2018 12:05:26 -0500
Subject: [PATCH] Update wiggle look
---
.../sprite-selector/sprite-selector.css | 58 ++++++++++---------
1 file changed, 32 insertions(+), 26 deletions(-)
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 964d86847..267757e7a 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -67,42 +67,48 @@
}
.raised {
- -webkit-box-shadow: 0px 0px 6px 2px rgba(0,222,7,1);
- -moz-box-shadow: 0px 0px 6px 2px rgba(0,222,7,1);
- box-shadow: 0px 0px 6px 2px rgba(0,222,7,1);
+ background-color: #cce1ff;
+ border-color: #8cbcff;
+ transition: all 0.25s ease;
}
.raised:hover {
- -webkit-animation-name: wiggle;
- -ms-animation-name: wiggle;
- -ms-animation-duration: 500ms;
- -webkit-animation-duration: 500ms;
- -webkit-animation-iteration-count: 1;
- -ms-animation-iteration-count: 1;
- -webkit-animation-timing-function: ease-in-out;
- -ms-animation-timing-function: ease-in-out;
+ background-color: #8cbcff;
+ transform: scale(1.05);
+}
+
+.raised:hover {
+ -webkit-animation-name: wiggle;
+ -ms-animation-name: wiggle;
+ -ms-animation-duration: 500ms;
+ -webkit-animation-duration: 500ms;
+ -webkit-animation-iteration-count: 1;
+ -ms-animation-iteration-count: 1;
+ -webkit-animation-timing-function: ease-in-out;
+ -ms-animation-timing-function: ease-in-out;
+ background-color: #8cbcff;
}
@-webkit-keyframes wiggle {
- 0% {-webkit-transform: rotate(3deg);}
- 25% {-webkit-transform: rotate(-3deg);}
- 50% {-webkit-transform: rotate(5deg);}
- 75% {-webkit-transform: rotate(-2deg);}
- 100% {-webkit-transform: rotate(0deg);}
+ 0% {-webkit-transform: rotate(3deg) scale(1.05);}
+ 25% {-webkit-transform: rotate(-3deg) scale(1.05);}
+ 50% {-webkit-transform: rotate(5deg) scale(1.05);}
+ 75% {-webkit-transform: rotate(-2deg) scale(1.05);}
+ 100% {-webkit-transform: rotate(0deg) scale(1.05);}
}
@-ms-keyframes wiggle {
- 0% {-ms-transform: rotate(3deg);}
- 25% {-ms-transform: rotate(-3deg);}
- 50% {-ms-transform: rotate(5deg);}
- 75% {-ms-transform: rotate(-2deg);}
- 100% {-ms-transform: rotate(0deg);}
+ 0% {-ms-transform: rotate(3deg) scale(1.05);}
+ 25% {-ms-transform: rotate(-3deg) scale(1.05);}
+ 50% {-ms-transform: rotate(5deg) scale(1.05);}
+ 75% {-ms-transform: rotate(-2deg) scale(1.05);}
+ 100% {-ms-transform: rotate(0deg) scale(1.05);}
}
@keyframes wiggle {
- 0% {transform: rotate(3deg);}
- 25% {transform: rotate(-3deg);}
- 50% {transform: rotate(5deg);}
- 75% {transform: rotate(-2deg);}
- 100% {transform: rotate(0deg);}
+ 0% {transform: rotate(3deg) scale(1.05);}
+ 25% {transform: rotate(-3deg) scale(1.05);}
+ 50% {transform: rotate(5deg) scale(1.05);}
+ 75% {transform: rotate(-2deg) scale(1.05);}
+ 100% {transform: rotate(0deg) scale(1.05);}
}
\ No newline at end of file
--
GitLab