From 5f42b8fa74a98b3e6839d9d76bba1fa671a78958 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 20 Dec 2013 12:56:21 -0800
Subject: [PATCH] fixing up buttons

---
 dist/ratchet.css      | 6 +++++-
 index.html            | 6 +++---
 lib/sass/bars.scss    | 6 +++++-
 lib/sass/buttons.scss | 3 ++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/dist/ratchet.css b/dist/ratchet.css
index 5fefa23..a165180 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -315,10 +315,14 @@ strong {
 }
 
 .title {
+  position: absolute;
   display: block;
   width: 100%;
   padding: 0;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: -10px;
+  margin-right: -10px;
   font-size: 17px;
   font-weight: 500;
   line-height: 44px;
diff --git a/index.html b/index.html
index bfe44ea..3976175 100644
--- a/index.html
+++ b/index.html
@@ -935,7 +935,7 @@ document
       <h3 class="component-title">Modals</h3>
 
       <div class="component-example">
-        <a href="#myModalexample" class="button">Open modal</a>
+        <a href="#myModalexample" class="button pull-left">Open modal</a>
         <div id="myModalexample" class="modal">
           <header class="bar-nav">
             <h1 class="title">Modal</h1>
@@ -954,10 +954,10 @@ document
 <a href="#myModalexample" class="button">Open modal</a>
 <div id="myModalexample" class="modal">
   <header class="bar-nav">
-    <h1 class="title">Modal</h1>
-    <a class="button" href="#myModalexample">
+    <a class="button pull-left" href="#myModalexample">
       Close
     </a>
+    <h1 class="title">Modal</h1>
   </header>
   
   <div class="content content-padded">
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index 405178a..f715602 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -46,10 +46,14 @@
 
 // Centered text in the .bar-nav 
 .title {
+  position: absolute;
   display: block;
   width: 100%;
   padding: 0;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: -$bar-side-spacing;
+  margin-right: -$bar-side-spacing;
   font-size: $font-size-default;
   font-weight: $font-weight;
   line-height: $bar-base-height;
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index e7ab2f7..ebf6b9c 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -107,7 +107,8 @@
 .bar-nav {
   // Generic style for all buttons in .bar-title
   [class*="button"] {
-    float: left; // Places buttons to the left by default
+    position: relative;
+    z-index: 10; // Position the buttons on top of .title
     padding: 0;
     font-size: 16px;
     font-weight: $font-weight-light;