redoing our buttons in nav bars

dist/ratchet.css

@@ -632,7 +632,7 @@ select {
   cursor: pointer;
   background-color: white;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 [class*="button"]:active, [class*="button"].active {
   background-color: #ccc;
@@ -688,11 +688,15 @@ select {
 }
 
 .button-link {
+  padding-top: 6px;
+  padding-bottom: 6px;
   color: #428bca;
+  background-color: transparent;
   border: none;
 }
 .button-link:active, .button-link.active {
   color: #3071a9;
+  background-color: transparent;
 }
 
 .button-block {
@@ -711,13 +715,9 @@ input[type="button"] {
 .bar-nav [class*="button"] {
   position: relative;
   z-index: 10;
-  padding: 0;
+  padding: 6px 12px;
-  font-size: 16px;
+  margin-top: 8px;
   font-weight: 400;
-  line-height: 44px;
-  color: #428bca;
-  background-color: transparent;
-  border: 0;
 }
 .bar-nav [class*="button"].pull-right {
   margin-left: 10px;
@@ -725,16 +725,17 @@ input[type="button"] {
 .bar-nav [class*="button"].pull-left {
   margin-right: 10px;
 }
-.bar-nav .button:active,
+.bar-nav .button-link {
-.bar-nav .button.active,
+  padding: 0;
-.bar-nav .button-primary:active,
+  margin-top: 0;
-.bar-nav .button-primary.active {
+  font-size: 16px;
   color: #428bca;
+  line-height: 44px;
   background-color: transparent;
-  opacity: .3;
+  border: none;
 }
-.bar-nav .button-primary {
+.bar-nav .button-link:active, .bar-nav .button-link.active {
-  font-weight: 500;
+  color: #3071a9;
 }
 
 [class*="bar"] .button-block {

index.html

@@ -102,10 +102,10 @@ layout: default
 
 {% highlight html %}
 <header class="bar-nav">
-  <a class="button pull-left">
+  <a class="button-primary pull-left">
     Left
   </a>
-  <a class="button pull-right">
+  <a class="button-link pull-right">
     Right
   </a>
   <h1 class="title">Title</h1>
@@ -594,6 +594,7 @@ layout: default
         <a class="button-primary">Button</a>
         <a class="button-positive">Button</a>
         <a class="button-negative">Button</a>
+        <a class="button-link">Button</a>
       </div>
 
 {% highlight html %}
@@ -601,6 +602,7 @@ layout: default
 <a class="button-primary">Button</a>
 <a class="button-positive">Button</a>
 <a class="button-negative">Button</a>
+<a class="button-link">Button</a>
 {% endhighlight %}
 
     </article>

lib/sass/buttons.scss

@@ -16,7 +16,7 @@
   cursor: pointer;
   background-color: $chrome-color;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 3px;
 
   // Active & filled button styles
   &:active,
@@ -98,12 +98,16 @@
 
 // Link button (Buttons that look like links)
 .button-link {
+  padding-top: 6px;
+  padding-bottom: 6px;
   color: $primary-color;
+  background-color: transparent;
   border: none;
 
   &:active,
   &.active {
     color: darken($primary-color, 10%);
+    background-color: transparent;
   }
 }
 
@@ -131,13 +135,9 @@ input[type="button"] {
   [class*="button"] {
     position: relative;
     z-index: 10; // Position the buttons on top of .title
-    padding: 0;
+    padding: 6px 12px;
-    font-size: 16px;
+    margin-top: 8px;
     font-weight: $font-weight-light;
-    line-height: $bar-base-height;
-    color: $primary-color;
-    background-color: transparent;
-    border: 0;
 
     &.pull-right { 
       margin-left: $bar-side-spacing; 
@@ -147,19 +147,20 @@ input[type="button"] {
     }
   }
 
-  // Override standard button active states
+  // Link button (Buttons that look like links)
-  .button:active,
+  .button-link {
-  .button.active,
+    padding: 0;
-  .button-primary:active,
+    margin-top: 0;
-  .button-primary.active {
+    font-size: 16px;
     color: $primary-color;
+    line-height: $bar-base-height;
     background-color: transparent;
-    opacity: .3;
+    border: none;
-  }
 
-  // Primary button in bars
+    &:active,
-  .button-primary {
+    &.active {
-    font-weight: $font-weight;
+      color: darken($primary-color, 10%);
+    }
   }
 }