derpin

components.html

@@ -986,6 +986,7 @@ document
 
     <!-- Push docs -->
     <article class="component" id="push">
+      <div class="informational">
         <h3 class="component-title">Push</h3>
         <p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p>
 
@@ -1004,6 +1005,7 @@ document
   {% endhighlight %}
 
         <p class="component-description">A working version of push:</p>
+      </div>
 
       <div class="component-example component-example-fullbleed">
         <header class="bar-nav">

dist/ratchet.css

@@ -958,7 +958,7 @@ input[type="button"] {
   -webkit-transform: translate3d(0, -15px, 0);
   transform: translate3d(0, -15px, 0);
 }
-.popover:after {
+.popover:before {
   position: absolute;
   top: -15px;
   left: 50%;

docs-assets/css/docs.css

@@ -1292,3 +1292,14 @@ hr {
     margin-right: -30px;
   }
 }
+@-webkit-keyframes fadeOverlay {
+  from {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+  }
+
+  to {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+  }
+}

lib/sass/docs.scss

@@ -641,3 +641,9 @@ hr {
     margin-right: -30px;
   }
 }
+
+// Animations
+@-webkit-keyframes fadeOverlay {
+  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
+  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
+}

lib/sass/popovers.scss

@@ -17,7 +17,7 @@
   @include transform(translate3d(0, -15px, 0));
 
   // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
-  &:after {
+  &:before {
     position: absolute;
     top: -15px;
     left: 50%;