Refactor and implement order buttons on supplier list view

app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.css.sass

@@ -1,10 +1,3 @@
-@mixin button-icon-only
-  padding: 2px 5px
-  margin: 0
-
-@mixin table-fit
-  width: 1px
-  white-space: nowrap
 // Foundation by ZURB
 // foundation.zurb.com
 // Licensed under MIT Open Source

app/assets/stylesheets/supplier/foundation1/_mixins.css.sass

@@ -0,0 +1,7 @@
+@mixin button-icon-only
+  padding: 2px 5px
+  margin: 0
+
+@mixin table-fit
+  width: 1px
+  white-space: nowrap

app/assets/stylesheets/supplier/foundation1/application.css.sass

@@ -5,6 +5,7 @@
 @import bourbon
 @import ./qconstants
 @import ./foundation_and_overrides
+@import ./mixins
 @import ./qstructure
 @import ./qicons
 @import ./qdisplays

app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass

@@ -22,14 +22,6 @@ $button-spacing: 8px
       @extend .fa
       @extend .fa-2x
       @extend .fa-list
-.mark_list_as_helped
-  +button-icon-only
-  vertical-align: top
-  padding-left: 8px //do not ask me why, just looks
-  padding-right: 2px //do not ask me why, just looks
-  margin-right: $button-spacing
-  span
-    @extend .fa, .fa-2x, .fa-bell-slash-o
 .remove_list_needs_payment
   +button-icon-only
   vertical-align: top
@@ -40,19 +32,6 @@ $button-spacing: 8px
   +button-icon-only
 .active-orders-table
   width: 100%
-  .mark_order_active
-    +button-icon-only
-    margin-right: 0.6em
-  .mark_order_delivered
-    +button-icon-only
-  .remove-order
-    +button-icon-only
-    background-color: $alert-color
-    margin-left: $button-spacing
-    span
-      @extend .fa
-      @extend .fa-2x
-      @extend .fa-times
 .go-to-orders-list
   span
     @extend .fa

app/assets/stylesheets/supplier/foundation1/components/_order-buttons.css.sass

@@ -0,0 +1,21 @@
+.mark-list-as-helped-button
+  +button-icon-only
+  vertical-align: top
+  padding-left: 8px //do not ask me why, just looks
+  padding-right: 2px //do not ask me why, just looks
+  margin-right: $button-spacing
+  span
+    @extend .fa, .fa-2x, .fa-bell-slash-o
+.mark-order-active-button
+  +button-icon-only
+  margin-right: 0.6em
+.mark-order-delivered-button
+  +button-icon-only
+.mark-order-cancelled-button
+  +button($bg: $alert-color)
+  +button-icon-only
+  margin-left: $button-spacing
+  span
+    @extend .fa
+    @extend .fa-2x
+    @extend .fa-times