Styling for checkout page and the hubs heading above shopping section

app/assets/stylesheets/darkswarm/checkout.css.sass

@@ -1,6 +1,13 @@
 @import mixins
 @import branding
 
+@mixin h5-valid
+  h5
+    
+@mixin h5-invalid
+  h5
+    background: #ff0000
+
 checkout
   display: block
   
@@ -10,7 +17,7 @@ checkout
   
   #details, #billing, #shipping, #payment
     border: 0
-    margin: 2em 0
+    margin: 1em 0
     padding: 0
     .content
       border: 1px solid #efefef
@@ -18,23 +25,28 @@ checkout
   h5
     margin: 0
     padding: 0.65em
-    background: $clr-brick-light-bright
-    //color: white
-
+    background: #f7f7f7
+  
     label, label.alert, label.success, &.valid label.alert, &.dirty label.success 
       @include csstrans
       display: none
+
     &.dirty label.alert 
       display: inline
     &.dirty.valid label.alert 
-      display: none  
+      display: none 
     &.valid label.success
       display: inline
+      @include h5-valid
+
+  h5.dirty
+    background: #f7ccc5
+  h5.valid, h5.dirty.valid
+    background: #bfefd1
 
   orderdetails table tr th
     text-align: left
 
-  
 
   dd
     span.accordion-up

app/assets/stylesheets/darkswarm/mixins.sass

@@ -81,4 +81,16 @@
 @mixin textsoftpress
   text-shadow: 0 0 3px rgba(0,0,0,0.35)
 
+// TO USE
+// Assign to :before or :after element
+// Assign content: "string"
+
+@mixin icon-font
+  font-family: "foundation-icons"
+  display: inline-block
+  font-weight: normal
+  font-style: normal
+  font-variant: normal
+  text-transform: none
+  font-size: 80%
 

app/assets/stylesheets/darkswarm/shop.css.sass

@@ -12,12 +12,12 @@ product
   display: block
   navigation
     display: block
-    background: #efefef
+    background: #f7f7f7
     distributor.details
       box-sizing: border-box
       display: block
       min-height: 150px
-      padding: 40px 0px 0px
+      padding: 30px 0px 20px 0px
       select
         width: 200px
       position: relative

app/assets/stylesheets/darkswarm/tabs.css.sass

@@ -1,14 +1,22 @@
-@import "darkswarm/typography"
+@import typography
+@import mixins
+@import branding
 
 #tabs
-  background: url("/assets/matte.png") top left repeat
+  background: url("/assets/gray_jean.png") top left repeat
+  @include box-shadow(inset 0 2px 3px 0 rgba(0,0,0,0.15))
   display: block
+
   dl dd a
     @include avenir
+    @include csstrans
     background: transparent
     text-transform: uppercase
     line-height: 50px
     font-size: 0.875em
+    text-shadow: 0 -1px 1px #ffffff
+    &:hover, &:focus, &:active
+      color: $clr-brick-bright
     @media all and (max-width: 768px)
       line-height: 30px !important
     border: none
@@ -17,6 +25,27 @@
     padding: 0px 2.2em
     @media all and (max-width: 768px)
       line-height: inherit !important
+  
+  // inactive link
+  dl  
+    dd
+      border-top: 4px solid transparent
+      a:after
+        padding-left: 8px
+        content: "\f109"
+        visibility: hidden
+        @include icon-font
+  
+  // active link
+  dl
+    dd.active
+      border-top: 4px solid $clr-brick-bright
+      a
+        color: $clr-brick-bright
+      a:after
+        content: "\f10c"
+        visibility: visible
+        @include icon-font
 
   .tabs-content
     margin-bottom: 0

app/assets/stylesheets/darkswarm/typography.css.sass

@@ -1,4 +1,5 @@
 @import branding
+//@import mixins
 
 @font-face
   font-family: 'AvenirBla_IE'

app/views/checkout/_form.html.haml

@@ -11,7 +11,10 @@
     -#{{ Order.order == order }}
 
   .small-12.columns
+    %p
+    %h3.text-center Checkout from !hub_name!
     = render partial: "checkout/details", locals: {f: f}
     = render partial: "checkout/billing", locals: {f: f}
     = render partial: "checkout/shipping", locals: {f: f}
     = render partial: "checkout/payment", locals: {f: f}
+    %p

app/views/checkout/_payment.html.haml

@@ -15,7 +15,8 @@
         .row
           .small-11.columns
             %em 
-              %small {{ Order.paymentMethod().name }}
+              %small
+                {{ Order.paymentMethod().name }}
           .small-1.columns.right
             %span.accordion-up.right
               %i.fi-arrow-up