From c0b11bdc6113df1076c0d84d1a4331ce78b88e27 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sun, 9 Feb 2014 21:04:24 -0800
Subject: [PATCH] fixing up some example pages

---
 components.html    |  6 ++----
 dist/ratchet.css   | 10 ++++++----
 lib/sass/bars.scss |  6 ++++--
 one.html           | 13 ++-----------
 two.html           | 13 +++----------
 5 files changed, 17 insertions(+), 31 deletions(-)
diff --git a/components.html b/components.html
index 7e30871..2cfb74c 100644
--- a/components.html
+++ b/components.html
@@ -1123,8 +1123,7 @@ document
           <div class="card">
             <ul class="table-view">
               <li class="table-view-cell">
-                <a href="{{ page.base_url }}two.html" data-transition="slide-in">
-                  <span class="icon icon-right pull-right"></span>
+                <a class="push-right" href="{{ page.base_url }}two.html" data-transition="slide-in">
                   Load new page with push
                 </a>
               </li>
@@ -1141,8 +1140,7 @@ document
   <div class="card">
     <ul class="table-view">
       <li class="table-view-cell">
-        <a href="{{ page.base_url }}two.html" data-transition="slide-in">
-          <span class="icon icon-right pull-right"></span>
+        <a class="push-right" href="{{ page.base_url }}two.html" data-transition="slide-in">
           Load new page with push
         </a>
       </li>
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 08ac538..f0edc34 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -556,7 +556,7 @@ input[type="button"] {
 
 .bar-nav .btn {
   position: relative;
-  z-index: 10;
+  z-index: 20;
   padding: 6px 12px;
   margin-top: 8px;
   font-weight: 400;
@@ -612,14 +612,16 @@ input[type="button"] {
   margin: 0 auto;
 }
 
-.bar .icon {
+.bar > .icon {
+  position: relative;
+  z-index: 20;
   font-size: 24px;
   margin-top: 11px;
 }
-.bar .icon.pull-left {
+.bar > .icon.pull-left {
   margin-left: -3px;
 }
-.bar .icon.pull-right {
+.bar > .icon.pull-right {
   margin-right: -3px;
 }
 
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index ff29916..b19fda4 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -139,7 +139,7 @@
 
 .bar-nav .btn {
   position: relative;
-  z-index: 10; // Position the buttons on top of .title
+  z-index: 20; // Position the buttons on top of .title
   padding: 6px 12px;
   margin-top: 8px;
   font-weight: $font-weight-light;
@@ -221,7 +221,9 @@
 // Nav bars with Ratchicons
 // --------------------------------------------------
 
-.bar .icon {
+.bar > .icon {
+  position: relative;
+  z-index: 20; // Position the buttons on top of .title
   font-size: 24px;
   margin-top: 11px;
 
diff --git a/one.html b/one.html
index 5dc8466..ff13d4e 100644
--- a/one.html
+++ b/one.html
@@ -10,27 +10,18 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <link rel="stylesheet" href="../dist/ratchet.css">
-    <link rel="stylesheet" href="css/docs.css">
-    <link rel="stylesheet" href="css/prettify.css">
     <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-    <style>
-      .iphone [class*="bar"] {
-        position: absolute;
-      }
-    </style>
-
     <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
   </head>
   <body ontouchstart="">
-    <header class="bar-nav">
+    <header class="bar bar-nav">
       <h1 class="title">Push</h1>
     </header>
     <div class="content">
       <div class="card">
         <ul class="table-view">
           <li class="table-view-cell">
-            <a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
-                <span class="icon icon-right pull-right"></span>
+            <a class="push-right" href="two.html" data-transition="slide-in" data-selector=".device-content">
                 Load new page with push
             </a>
           </li>
diff --git a/two.html b/two.html
index 8e394fb..d1ae496 100644
--- a/two.html
+++ b/two.html
@@ -10,20 +10,13 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <link rel="stylesheet" href="../dist/ratchet.css">
-    <link rel="stylesheet" href="css/docs.css">
-    <link rel="stylesheet" href="css/prettify.css">
     <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-    <style>
-      .iphone [class*="bar"] {
-        position: absolute;
-      }
-    </style>
-
     <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
   </head>
   <body ontouchstart="">
-    <header class="bar-nav">
-      <h1 class="title">Push</h1>
+    <header class="bar bar-nav">
+      <a class="icon icon-lg-left pull-left" href="one.html" data-transition="slide-out"></a>
+      <h1 class="title">Page two</h1>
     </header>
     <div class="content">
       <div class="card">
