Experimenting with filled buttons

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 {

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>

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>

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)