Merge pull request sidekiq#2469 from antstorm/fix-beacon-alignment

Fix dashboard pulsing beacon alignment [ci skip]
wking1986 · Jul 30, 2015 · dccd5df · dccd5df
2 parents 26fd9a2 + 52ac947
commit dccd5df
Showing 1 changed file with 20 additions and 27 deletions.
diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
@@ -471,16 +471,22 @@ div.interval-slider input {
 
 .beacon {
   position: relative;
+  width: 20px;
   height: 20px;
   display: inline-block;
 }
 
-.beacon .dot {
+.beacon .dot,
+.beacon .ring {
   position: absolute;
-  top: 5px;
-  left: 10px;
+  top: 50%;
+  left: 50%;
+}
+
+.beacon .dot {
   width: 10px;
   height: 10px;
+  margin: -5px 0 0 -5px;
   background-color: #80002d;
   border-radius: 10px;
   box-shadow: 0 0 9px #666;
@@ -563,14 +569,13 @@ div.interval-slider input {
 }
 
 .beacon .ring {
-  position: absolute;
-  top: 7px;
-  left: 12px;
-  width: 0;
-  height: 0;
-  border-radius: 3px;
+  width: 28px;
+  height: 28px;
+  margin: -14px 0 0 -14px;
+  border-radius: 28px;
   border: 3px solid #80002d;
   z-index: 5;
+  opacity: 0;
 }
 
 .beacon .ring.pulse {
@@ -585,45 +590,33 @@ div.interval-slider input {
 @-webkit-keyframes beacon-ring-pulse {
   0% {
       opacity: 1;
-      -webkit-transform: scale(0);
+      -webkit-transform: scale(0.3);
   }
   100% {
       opacity: 0;
-      border-radius: 15px;
-      padding: 8px;
-      top: 0;
-      left: 4px;
-      -webkit-transform: scale(1.5);
+      -webkit-transform: scale(1);
   }
 }
 
 @-moz-keyframes beacon-ring-pulse {
   0% {
       opacity: 1;
-      -moz-transform: scale(0);
+      -moz-transform: scale(0.3);
   }
   100% {
       opacity: 0;
-      border-radius: 15px;
-      padding: 8px;
-      top: 2px;
-      left: 7px;
-      -moz-transform: scale(1.6);
+      -moz-transform: scale(1);
   }
 }
 
 @keyframes beacon-ring-pulse {
   0% {
       opacity: 1;
-      transform: scale(0);
+      transform: scale(0.3);
   }
   100% {
       opacity: 0;
-      border-radius: 15px;
-      padding: 8px;
-      top: 0;
-      left: 5px;
-      transform: scale(1.5);
+      transform: scale(1);
   }
 }