From 41fb59c1dc4f8078095c8795b3a3cb01ec630d6e Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 18 Jan 2014 19:19:53 -0800
Subject: [PATCH] derpin

---
 components.html          | 28 +++++++++++++++-------------
 dist/ratchet.css         |  2 +-
 docs-assets/css/docs.css | 11 +++++++++++
 lib/sass/docs.scss       |  6 ++++++
 lib/sass/popovers.scss   |  2 +-
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/components.html b/components.html
index 4645627..1f3b600 100644
--- a/components.html
+++ b/components.html
@@ -986,24 +986,26 @@ document
 
     <!-- Push docs -->
     <article class="component" id="push">
-      <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>
+      <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>
 
-{% highlight html %}
-<!-- A one.html link -->
-<a href="two.html">Two</a>
-{% endhighlight %}
+  {% highlight html %}
+  <!-- A one.html link -->
+  <a href="two.html">Two</a>
+  {% endhighlight %}
 
-      <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
+        <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
 
-      <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
+        <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
 
-{% highlight html %}
-<!-- An one.html link that animates to two.html -->
-<a href="two.html" data-transition="fade">Two</a>
-{% endhighlight %}
+  {% highlight html %}
+  <!-- An one.html link that animates to two.html -->
+  <a href="two.html" data-transition="fade">Two</a>
+  {% endhighlight %}
 
-      <p class="component-description">A working version of push:</p>
+        <p class="component-description">A working version of push:</p>
+      </div>
 
       <div class="component-example component-example-fullbleed">
         <header class="bar-nav">
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 9db5fac..a0babc1 100644
--- a/dist/ratchet.css
+++ b/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%;
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 72e2f31..33af056 100644
--- a/docs-assets/css/docs.css
+++ b/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);
+  }
+}
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index 15cf450..eb43484 100644
--- a/lib/sass/docs.scss
+++ b/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)); }
+}
diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss
index 36e8743..e9f0777 100644
--- a/lib/sass/popovers.scss
+++ b/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%;