Filled button active states

docs/index.html

@@ -566,7 +566,7 @@
           <div class="component-example component-example-fullbleed">
             <ul class="table-view">
               <li>Item 1 <a class="button">Button</a></li>
-              <li>Item 2 <a class="button-main">Button</a></li>
+              <li>Item 2 <a class="button-primary">Button</a></li>
               <li>Item 3 <a class="button-positive">Button</a></li>
               <li>Item 4 <a class="button-negative">Button</a></li>
             </ul>
@@ -575,7 +575,7 @@
 <pre class="prettyprint">
 &lt;ul class=&quot;table-view&quot;&gt;
   &lt;li&gt;Item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;Item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;Item 2 &lt;a class=&quot;button-primary&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;Item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;Item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
@@ -666,14 +666,14 @@
 
           <div class="component-example">
             <a class="button">Button</a>
-            <a class="button-main">Button</a>
+            <a class="button-primary">Button</a>
             <a class="button-positive">Button</a>
             <a class="button-negative">Button</a>
           </div>
 
 <pre class="prettyprint">
 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;
-&lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;
+&lt;a class=&quot;button-primary&quot;&gt;Button&lt;/a&gt;
 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;
 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;
 </pre>
@@ -685,14 +685,14 @@
 
           <div class="component-example">
             <a class="button">Count button<span class="count">1</span></a>
-            <a class="button-main">Count button<span class="count">1</span></a>
+            <a class="button-primary">Count button<span class="count">1</span></a>
             <a class="button-positive">Count button<span class="count">1</span></a>
             <a class="button-negative">Count button<span class="count">1</span></a>
           </div>
 
 <pre class="prettyprint">
 &lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
-&lt;a class=&quot;button-main&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button-primary&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 &lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 &lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 </pre>
@@ -704,24 +704,24 @@
 
           <div class="component-example">
             <a class="button-block">Block button</a>
-            <a class="button-main button-block">Block button</a>
+            <a class="button-primary 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-primary 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">
 &lt;a class=&quot;button-block&quot;&gt;Block button&lt;/a&gt;
-&lt;a class=&quot;button-main button-block&quot;&gt;Block button&lt;/a&gt;
+&lt;a class=&quot;button-primary 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-primary 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>

lib/sass/buttons.scss

@@ -27,9 +27,10 @@
             transition: background-color .1s linear;
   }
 
-  // Disabled styles
+  // Disabled styles & filled button active styles
   &:disabled,
-  &.disabled {
+  &.disabled,
+  &.button-filled:active {
     opacity: .6;
   }
 }

test/components/index.html

@@ -300,7 +300,7 @@
 
   <!-- Button bar main -->
   <div class="bar-standard">
-    <a class="button-main button-block">Block level button</a>
+    <a class="button-primary button-block">Block level button</a>
   </div>
 
   <!-- Button bar positive -->
@@ -317,25 +317,25 @@
 
   <!-- Standard buttons -->
   <a class="button">Button</a>
-  <a class="button-main">Button</a>
+  <a class="button-primary">Button</a>
   <a class="button-positive">Button</a>
   <a class="button-negative">Button</a>
 
   <!-- Buttons w/ counts -->
   <a class="button">Button <span class="count">1</span></a>
-  <a class="button-main">Button <span class="count">1</span></a>
+  <a class="button-primary">Button <span class="count">1</span></a>
   <a class="button-positive">Button <span class="count">1</span></a>
   <a class="button-negative">Button <span class="count">1</span></a>
 
   <!-- Buttons at block level -->
   <a class="button-block">Block level button</a>
-  <a class="button-main button-block">Block level button</a>
+  <a class="button-primary button-block">Block level button</a>
   <a class="button-positive button-block">Block level button</a>
   <a class="button-negative button-block">Block level button</a>
 
   <!-- Buttons at block level w/ counts -->
   <a class="button-block">Block level button <span class="count">1</span></a>
-  <a class="button-main button-block">Block level button <span class="count">1</span></a>
+  <a class="button-primary button-block">Block level button <span class="count">1</span></a>
   <a class="button-positive button-block">Block level button <span class="count">1</span></a>
   <a class="button-negative button-block">Block level button <span class="count">1</span></a>
 
@@ -370,7 +370,7 @@
     <li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li>
     <li class="table-view-divider">With buttons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
-    <li>Item2 <a class="button-main">Button</a></li>
+    <li>Item2 <a class="button-primary">Button</a></li>
     <li>Item3 <a class="button-positive">Button</a></li>
     <li>Item4 <a class="button-negative">Button</a></li>
     <li class="table-view-divider">With a toggle</li>
@@ -415,7 +415,7 @@
     <li>Item3 <span class="chevron"></span><span class="count">1</span></li>
     <li class="table-view-divider">With buttons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
-    <li>Item2 <a class="button-main">Button</a></li>
+    <li>Item2 <a class="button-primary">Button</a></li>
     <li>Item3 <a class="button-positive">Button</a></li>
     <li>Item4 <a class="button-negative">Button</a></li>
     <li class="table-view-divider">With a toggle</li>