From 17626e97cc81f8fa43326391bc23edadcb6ef065 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 14 Sep 2013 19:28:42 -0700
Subject: [PATCH] Experimenting with filled buttons

---
 dist/ratchet.css      | 48 +++++++++++++------------------------
 dist/template.html    |  2 +-
 docs/index.html       | 10 ++++++++
 lib/sass/buttons.scss | 55 ++++++++++++++++++++-----------------------
 4 files changed, 53 insertions(+), 62 deletions(-)

diff --git a/dist/ratchet.css b/dist/ratchet.css
index 906f394..e03219f 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -559,54 +559,40 @@ select {
   vertical-align: top;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 4px;
 }
-[class*="button"]:active {
-  background-color: #333;
-  transition: background-color .1s linear;
-}
-
-.button-main,
-.button-positive,
-.button-negative {
+[class*="button"]:active, [class*="button"].button-filled {
   color: #fff;
+  background-color: #333;
+  transition: opacity .1s linear, background-color .1s linear;
+}
+[class*="button"]:active:active, [class*="button"].button-filled:active {
+  opacity: .6;
 }
 
 .button-main {
   color: #007aff;
   border: 1px solid #007aff;
 }
+.button-main:active, .button-main.button-filled {
+  background-color: #007aff;
+}
 
 .button-positive {
   color: #4cd964;
   border: 1px solid #4cd964;
 }
-
-.button-negative {
-  color: #e71e1e;
-  border: 1px solid #b51a1a;
-}
-
-[class*="button"]:active,
-.button-main:active,
-.button-positive:active,
-.button-negative:active {
-  color: #fff;
-}
-
-.button-main:active {
-  color: #fff;
-  background-color: #007aff;
-}
-
-.button-positive:active {
-  color: #fff;
+.button-positive:active, .button-positive.button-filled {
   background-color: #4cd964;
 }
 
-.button-negative:active {
-  background-color: #b21a1a;
+.button-negative {
+  color: #dd524d;
+  border: 1px solid #dd524d;
+}
+.button-negative:active, .button-negative.button-filled {
+  background-color: #dd524d;
 }
 
 .button-block {
diff --git a/dist/template.html b/dist/template.html
index 887c766..161e9e7 100644
--- a/dist/template.html
+++ b/dist/template.html
@@ -47,7 +47,7 @@
       <p class="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
     </div>
 
-    <ul class="list inset">
+    <ul class="table-view inset">
       <li>
         <a href="http://maker.github.com/ratchet/">
           <strong>Ratchet documentation</strong>
diff --git a/docs/index.html b/docs/index.html
index 1c098d2..1fb7c5b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -707,6 +707,11 @@
             <a class="button-main button-block">Block button</a>
             <a class="button-positive button-block">Block button</a>
             <a class="button-negative button-block">Block button</a>
+
+            <a class="button-block button-filled">Block button</a>
+            <a class="button-main button-block button-filled">Block button</a>
+            <a class="button-positive button-block button-filled">Block button</a>
+            <a class="button-negative button-block button-filled">Block button</a>
           </div>
 
 <pre class="prettyprint">
@@ -714,6 +719,11 @@
 &lt;a class=&quot;button-main button-block&quot;&gt;Block button&lt;/a&gt;
 &lt;a class=&quot;button-positive button-block&quot;&gt;Block button&lt;/a&gt;
 &lt;a class=&quot;button-negative button-block&quot;&gt;Block button&lt;/a&gt;
+
+&lt;a class=&quot;button-block button-filled&quot;&gt;Block button&lt;/a&gt;
+&lt;a class=&quot;button-main button-block button-filled&quot;&gt;Block button&lt;/a&gt;
+&lt;a class=&quot;button-positive button-block button-filled&quot;&gt;Block button&lt;/a&gt;
+&lt;a class=&quot;button-negative button-block button-filled&quot;&gt;Block button&lt;/a&gt;
 </pre>
 
         </article>
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 515945d..8a6f8f8 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -14,61 +14,56 @@
   vertical-align: top;
   cursor: pointer;
   background-color: transparent;
-  border: 1px solid rgba(0, 0, 0, .5);
+  border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 4px;
 
   // Active
-  &:active {
+  &:active,
+  &.button-filled  {
+    color: #fff;
     background-color: #333;
-    transition: background-color .1s linear;
+    transition: opacity .1s linear, background-color .1s linear;
+
+    &:active {
+      opacity: .6;
+    }
   }
 }
 
 // Buttons modifiers
 // --------------------------------------------------
 
-// Overriding styles for buttons with modifiers
-.button-main,
-.button-positive,
-.button-negative {
-  color: #fff;
-}
-
 // Main button
 .button-main {
   color: $app-color;
   border: 1px solid $app-color;
+
+  &:active,
+  &.button-filled {
+    background-color: $app-color;
+  }
 }
 
 // Positive button
 .button-positive {
   color: #4cd964;
   border: 1px solid #4cd964;
+
+  &:active,
+  &.button-filled {
+    background-color: #4cd964;
+  }
 }
 
 // Negative button
 .button-negative {
-  color: #e71e1e;
-  border: 1px solid #b51a1a;
-}
+  color: #dd524d;
+  border: 1px solid #dd524d;
 
-// Active state for buttons with modifiers
-[class*="button"]:active,
-.button-main:active,
-.button-positive:active,
-.button-negative:active {
-  color: #fff;
-}
-.button-main:active {
-  color: #fff;
-  background-color: $app-color;
-}
-.button-positive:active {
-  color: #fff;
-  background-color: #4cd964;
-}
-.button-negative:active {
-  background-color: #b21a1a;
+  &:active,
+  &.button-filled {
+    background-color: #dd524d;
+  }
 }
 
 // Block level buttons (full width buttons)