add new template to manage variant

- The aim of this template is to display unit price
 - Duplicate the angular directive
 - Add a question mark icon and its own file
 - Add some needed colors in the branding file

app/assets/javascripts/darkswarm/directives/shop_variant_with_unit_price.js.coffee

@@ -0,0 +1,7 @@
+Darkswarm.directive "shopVariantWithUnitPrice", ->
+  restrict: 'E'
+  replace: true
+  templateUrl: 'shop_variant_with_unit_price.html'
+  scope:
+    variant: '='
+  controller: 'ShopVariantCtrl'

app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml

@@ -0,0 +1,19 @@
+.variants.row
+  .small-4.medium-4.large-5.columns.variant-name
+    .inline{"ng-if" => "::variant.display_name"} {{ ::variant.display_name }}
+    .variant-unit {{ ::variant.unit_to_display }}
+  .small-3.medium-3.large-2.columns.variant-price
+    %price-breakdown{"price-breakdown" => "_", variant: "variant",
+      "price-breakdown-append-to-body" => "true",
+      "price-breakdown-placement" => "bottom",
+      "price-breakdown-animation" => true}
+    {{ variant.price_with_fees | localizeCurrency }}
+    .variant-unit-price
+      %span.question-mark-icon
+      {{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}
+        
+  .medium-2.large-2.columns.total-price
+    %span{"ng-class" => "{filled: variant.line_item.total_price}"}
+      {{ variant.line_item.total_price | localizeCurrency }}
+  %ng-include{src: "'partials/shop_variant_no_group_buy.html'"}
+  %ng-include{src: "'partials/shop_variant_with_group_buy.html'"}