refactoring our buttons

dist/ratchet.css

@@ -631,44 +631,60 @@ select {
   vertical-align: top;
   cursor: pointer;
   background-color: white;
-  border: 1px solid #dddddd;
+  border: 1px solid #ccc;
   border-radius: 4px;
 }
-[class*="button"].button-filled {
-  background-color: white;
-}
 [class*="button"]:active, [class*="button"].active {
-  background-color: #ebebeb;
+  background-color: #ccc;
 }
-[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
+[class*="button"]:disabled, [class*="button"].disabled {
   opacity: .6;
 }
 
 .button-primary {
-  color: #428bca;
-  border: 1px solid #428bca;
-}
-.button-primary:active, .button-primary.active, .button-primary.button-filled {
   color: #fff;
+  border: 1px solid #428bca;
   background-color: #428bca;
 }
+.button-primary:active, .button-primary.active {
+  border: 1px solid #3071a9;
+  background-color: #3071a9;
+}
 
 .button-positive {
-  color: #5cb85c;
-  border: 1px solid #5cb85c;
-}
-.button-positive:active, .button-positive.active, .button-positive.button-filled {
   color: #fff;
+  border: 1px solid #5cb85c;
   background-color: #5cb85c;
 }
+.button-positive:active, .button-positive.active {
+  border: 1px solid #449d44;
+  background-color: #449d44;
+}
 
 .button-negative {
-  color: #d9534f;
+  color: #fff;
   border: 1px solid #d9534f;
+  background-color: #d9534f;
 }
-.button-negative:active, .button-negative.active, .button-negative.button-filled {
+.button-negative:active, .button-negative.active {
+  border: 1px solid #c9302c;
+  background-color: #c9302c;
+}
+
+.button-outlined {
+  background-color: transparent;
+}
+.button-outlined.button-primary {
+  color: #428bca;
+}
+.button-outlined.button-positive {
+  color: #5cb85c;
+}
+.button-outlined.button-negative {
+  color: #d9534f;
+}
+.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
   color: #fff;
-  background-color: #d9534f;
 }
 
 .button-link {
@@ -678,9 +694,6 @@ select {
 .button-link:active, .button-link.active {
   color: #3071a9;
 }
-.button-link.button-filled {
-  background-color: transparent;
-}
 
 .button-block {
   display: block;
@@ -689,6 +702,12 @@ select {
   font-size: 18px;
 }
 
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  width: 100%;
+}
+
 .bar-nav [class*="button"] {
   position: relative;
   z-index: 10;
@@ -725,12 +744,6 @@ select {
   font-size: 16px;
 }
 
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  width: 100%;
-}
-
 .popover .button-block {
   margin-bottom: 5px;
 }

index.html

@@ -609,22 +609,22 @@ layout: default
       <h3 class="component-title">Buttons with badges</h3>
 
       <div class="component-example">
-        <a class="button">Badge button<span class="badge badge-filled">1</span></a>
-        <a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a>
-        <a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a>
-        <a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a>
+        <a class="button">Badge button<span class="badge">1</span></a>
+        <a class="button-primary">Badge button<span class="badge-primary">1</span></a>
+        <a class="button-positive">Badge button<span class="badge-positive">1</span></a>
+        <a class="button-negative">Badge button<span class="badge-negative">1</span></a>
       </div>
 
 {% highlight html %}
-<a class="button">Badge button<span class="badge badge-filled">1</span></a>
-<a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a>
-<a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a>
-<a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a>
-
-<a class="button-filled">Badge button<span class="badge badge-filled">1</span></a>
-<a class="button-filled button-primary">Badge button<span class="badge-primary badge-filled">1</span></a>
-<a class="button-filled button-positive">Badge button<span class="badge-positive badge-filled">1</span></a>
-<a class="button-filled button-negative">Badge button<span class="badge-negative badge-filled">1</span></a>
+<a class="button">Badge button<span class="badge">1</span></a>
+<a class="button-primary">Badge button<span class="badge-primary">1</span></a>
+<a class="button-positive">Badge button<span class="badge-positive">1</span></a>
+<a class="button-negative">Badge button<span class="badge-negative">1</span></a>
+
+<a class="button-outlined">Badge button<span class="badge">1</span></a>
+<a class="button-outlined button-primary">Badge button<span class="badge-primary">1</span></a>
+<a class="button-outlined button-positive">Badge button<span class="badge-positive">1</span></a>
+<a class="button-outlined button-negative">Badge button<span class="badge-negative">1</span></a>
 {% endhighlight %}
 
     </article>
@@ -638,10 +638,10 @@ layout: default
         <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-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>
+        <a class="button-block button-outlined">Block button</a>
+        <a class="button-primary button-block button-outlined">Block button</a>
+        <a class="button-positive button-block button-outlined">Block button</a>
+        <a class="button-negative button-block button-outlined">Block button</a>
       </div>
 
 {% highlight html %}
@@ -650,10 +650,10 @@ layout: default
 <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-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>
+<a class="button-block button-outlined">Block button</a>
+<a class="button-primary button-block button-outlined">Block button</a>
+<a class="button-positive button-block button-outlined">Block button</a>
+<a class="button-negative button-block button-outlined">Block button</a>
 {% endhighlight %}
 
     </article>
@@ -725,10 +725,6 @@ layout: default
         <span class="badge-primary">2</span>
         <span class="badge-positive">3</span>
         <span class="badge-negative">4</span>
-        <span class="badge badge-filled">1</span>
-        <span class="badge-primary badge-filled">2</span>
-        <span class="badge-positive badge-filled">3</span>
-        <span class="badge-negative badge-filled">4</span>
       </div>
 
 
@@ -737,11 +733,6 @@ layout: default
 <span class="badge-primary">2</span>
 <span class="badge-positive">3</span>
 <span class="badge-negative">4</span>
-
-<span class="badge badge-filled">1</span>
-<span class="badge-primary badge-filled">2</span>
-<span class="badge-positive badge-filled">3</span>
-<span class="badge-negative badge-filled">4</span>
 {% endhighlight %}
 
 
@@ -756,7 +747,7 @@ layout: default
           <input type="text" placeholder="Full name">
           <input type="search" placeholder="Search">
           <textarea rows="5"></textarea>
-          <a class="button-positive button-block button-filled">Choose existing</a>
+          <a class="button-positive button-block button-outlined">Choose existing</a>
         </form>
       </div>
 
@@ -765,7 +756,7 @@ layout: default
   <input type="text" placeholder="Full name">
   <input type="search" placeholder="Search">
   <textarea rows="5"></textarea>
-  <a class="button-positive button-block button-filled">Choose existing</a>
+  <a class="button-positive button-block button-outlined">Choose existing</a>
 </form>
 {% endhighlight %}
 

lib/sass/buttons.scss

@@ -15,23 +15,18 @@
   vertical-align: top;
   cursor: pointer;
   background-color: $chrome-color;
-  border: $border-default;
+  border: 1px solid #ccc;
   border-radius: 4px;
 
-  &.button-filled {
-    background-color: $chrome-color;
-  }
-
   // Active & filled button styles
   &:active,
   &.active {
-    background-color: #ebebeb;
+    background-color: #ccc;
   }
 
   // Disabled styles & filled button active styles
   &:disabled,
-  &.disabled,
-  &.button-filled:active {
+  &.disabled {
     opacity: .6;
   }
 }
@@ -42,41 +37,63 @@
 
 // Primary button (Default color is blue)
 .button-primary {
-  color: $primary-color;
+  color: #fff;
   border: 1px solid $primary-color;
+  background-color: $primary-color;
 
   &:active,
-  &.active,
-  &.button-filled {
-    color: #fff;
-    background-color: $primary-color;
+  &.active {
+    border: 1px solid darken($primary-color, 10%);
+    background-color: darken($primary-color, 10%);
   }
 }
 
 // Positive button (Default color is green)
 .button-positive {
-  color: $positive-color;
+  color: #fff;
   border: 1px solid $positive-color;
+  background-color: $positive-color;
 
   &:active,
-  &.active,
-  &.button-filled {
-    color: #fff;
-    background-color: $positive-color;
+  &.active{
+    border: 1px solid darken($positive-color, 10%);
+    background-color: darken($positive-color, 10%);
   }
 }
 
 // Negative button (Default color is red)
 .button-negative {
-  color: $negative-color;
+  color: #fff;
   border: 1px solid $negative-color;
+  background-color: $negative-color;
 
   &:active,
-  &.active,
-  &.button-filled {
+  &.active {
+    border: 1px solid darken($negative-color, 10%);
+    background-color: darken($negative-color, 10%);
+  }
+}
+
+// Outline buttons 
+.button-outlined {
+  background-color: transparent;
+
+  &.button-primary {
+    color: $primary-color;
+  }
+  &.button-positive {
+    color: $positive-color;
+  }
+  &.button-negative {
+    color: $negative-color;
+  }
+  // Active states
+  &.button-primary:active,
+  &.button-positive:active,
+  &.button-negative:active {
     color: #fff;
-    background-color: $negative-color;
   }
+
 }
 
 // Link button (Buttons that look like links)
@@ -88,9 +105,6 @@
   &.active {
     color: darken($primary-color, 10%);
   }
-  &.button-filled {
-    background-color: transparent;
-  }
 }
 
 // Block level buttons (full width buttons)