Rewriting styling for new tabs components

app/assets/stylesheets/darkswarm/account.css.scss

@@ -10,7 +10,6 @@
 }
 
 .orders {
-  margin-top: 50px;
   margin-bottom: 100px;
 
   a {
@@ -27,6 +26,10 @@
     height: auto;
   }
 
+  &.active_table {
+    margin: 0px;
+  }
+
   .active_table_row {
     h3 {
       margin-top: 0.5em;

app/assets/stylesheets/darkswarm/tabset.css.scss

@@ -0,0 +1,71 @@
+@import "typography";
+@import "mixins";
+@import "branding";
+
+.tabset-ctrl {
+  .tab-view {
+    padding-top: 30px;
+  }
+
+  .tab {
+    text-align: center;
+
+    @media all and (max-width: 640px) {
+      text-align: left;
+    }
+
+    a {
+      @include headingFont;
+
+      background: transparent;
+      text-transform: uppercase;
+      font-size: 1.5em;
+      text-shadow: 0 -1px 1px #ffffff;
+      padding: 1em;
+      border: none;
+
+      @media all and (max-width: 640px) {
+        padding: 0.35em 0 0.65em 0;
+        text-shadow: none;
+      }
+    }
+
+    border-bottom: 4px solid transparent;
+
+    &:hover, &:focus, &:active {
+      transition: all 0.4s ease-in-out;
+      border-bottom: 4px solid $clr-brick-bright;
+      cursor: pointer;
+
+      @media all and (max-width: 640px) {
+        transition: none;
+        color: white;
+        background-color: $clr-brick-bright;
+      }
+
+      a {
+        color: $clr-brick-bright;
+
+        @media all and (max-width: 640px) {
+          color: #ffffff;
+        }
+      }
+    }
+
+    &.selected {
+      border-bottom: 4px solid $clr-brick;
+
+      @media all and (max-width: 640px) {
+        background-color: $clr-brick;
+      }
+
+      a {
+        color: $clr-brick;
+
+        @media all and (max-width: 640px) {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}

app/views/spree/users/_history.html.haml

@@ -1,12 +1,11 @@
 %script{ type: "text/ng-template", id: "account/history.html" }
-  .orders{"ng-controller" => "OrdersCtrl", "ng-cloak" => true}
-    .active_table
-      %h3.my-orders= t(:transaction_history)
-      %distributor.active_table_node.row.animate-repeat{"ng-if" => "Orders.orders_by_distributor.length > 0", "ng-repeat" => "(key, distributor) in Orders.orders_by_distributor",
-      "ng-controller" => "DistributorNodeCtrl",
-      "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !distributor.active}",
-      id: "{{distributor.hash}}"}
-        .small-12.columns
-          = render partial: "spree/users/skinny"
-          = render partial: "spree/users/fat"
-    .message{"ng-if" => "Orders.orders_by_distributor.length == 0", "ng-bind" => "::'you_have_no_orders_yet' | t"}
+  .active_table.orders{"ng-controller" => "OrdersCtrl", "ng-cloak" => true}
+    %h3.my-orders= t(:transaction_history)
+    %distributor.active_table_node.row.animate-repeat{"ng-if" => "Orders.orders_by_distributor.length > 0", "ng-repeat" => "(key, distributor) in Orders.orders_by_distributor",
+    "ng-controller" => "DistributorNodeCtrl",
+    "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !distributor.active}",
+    id: "{{distributor.hash}}"}
+      .small-12.columns
+        = render partial: "spree/users/skinny"
+        = render partial: "spree/users/fat"
+  .message{"ng-if" => "Orders.orders_by_distributor.length == 0", "ng-bind" => "::'you_have_no_orders_yet' | t"}

app/views/spree/users/show.html.haml

@@ -19,10 +19,14 @@
     = render 'cards'
 
   .row.tabset-ctrl#account-tabs{ style: 'margin-bottom: 100px', navigate: 'true', selected: 'orders', prefix: 'account' }
-    .small.12.medium-3.columns.tab{ name: "orders" } Orders
-    .small.12.medium-3.columns.tab{ name: "cards" } Cards
-    .small.12.medium-3.columns.tab{ name: "history" } History
-    .small.12.medium-3.columns.tab{ name: "details" } Details
+    .small.12.medium-3.columns.tab{ name: "orders" }
+      %a{ href: 'javascript:void(0)' } My Orders
+    .small.12.medium-3.columns.tab{ name: "cards" }
+      %a{ href: 'javascript:void(0)' } My Credit Cards
+    .small.12.medium-3.columns.tab{ name: "history" }
+      %a{ href: 'javascript:void(0)' } Transactions
+    .small.12.medium-3.columns.tab{ name: "details" }
+      %a{ href: 'javascript:void(0)' }My Details
     .small-12.columns.tab-view
 
   = render partial: "shared/footer"