Updating translations for config/locales/sv.yml [skip ci]

squashme

Gemfile

@@ -63,6 +63,7 @@ gem 'wkhtmltopdf-binary'
 
 gem 'foreigner'
 gem 'immigrant'
+gem 'roo', '~> 2.7.0'
 
 gem 'whenever', require: false
 
@@ -90,6 +91,7 @@ gem 'jquery-rails'
 gem 'jquery-migrate-rails'
 gem 'css_splitter'
 
+gem 'ofn-qz', github: 'openfoodfoundation/ofn-qz'
 
 group :test, :development do
   # Pretty printed test output

Gemfile.lock

@@ -21,6 +21,13 @@ GIT
       paypal-sdk-merchant (= 1.106.1)
       spree_core (~> 1.3.4)
 
+GIT
+  remote: git://github.com/openfoodfoundation/ofn-qz.git
+  revision: 024680ccea429b2e5428d7b964fa67c52add34ec
+  specs:
+    ofn-qz (0.1.0)
+      railties (~> 3.1)
+
 GIT
   remote: git://github.com/openfoodfoundation/spree.git
   revision: a4c439570b77afa50f9e36299811f293232bd281
@@ -551,6 +558,9 @@ GEM
     roadie-rails (1.0.3)
       rails (>= 3.0, < 4.2)
       roadie (~> 3.0)
+    roo (2.7.1)
+      nokogiri (~> 1)
+      rubyzip (~> 1.1, < 2.0.0)
     rspec (2.14.1)
       rspec-core (~> 2.14.0)
       rspec-expectations (~> 2.14.0)
@@ -569,6 +579,7 @@ GEM
     rspec-retry (0.4.2)
       rspec-core
     ruby-progressbar (1.7.1)
+    rubyzip (1.2.0)
     safe_yaml (0.9.5)
     sass (3.3.14)
     sass-rails (3.2.6)
@@ -694,6 +705,7 @@ DEPENDENCIES
   momentjs-rails
   newrelic_rpm
   nokogiri (>= 1.6.7.1)
+  ofn-qz!
   oj
   paper_trail (~> 3.0.8)
   paperclip
@@ -709,6 +721,7 @@ DEPENDENCIES
   redcarpet
   representative_view
   roadie-rails (~> 1.0.3)
+  roo (~> 2.7.0)
   rspec-rails
   rspec-retry
   sass (~> 3.3)
@@ -737,4 +750,4 @@ RUBY VERSION
    ruby 2.1.5p273
 
 BUNDLED WITH
-   1.13.6
+   1.14.3

app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee

@@ -11,7 +11,7 @@ angular.module("admin.enterprises")
     $scope.StatusMessage = StatusMessage
 
     $scope.$watch 'enterprise_form.$dirty', (newValue) ->
-      StatusMessage.display 'notice', 'You have unsaved changes' if newValue
+      StatusMessage.display 'notice', t('admin.unsaved_changes') if newValue
 
     $scope.setFormDirty = ->
       $scope.$apply ->
@@ -24,13 +24,12 @@ angular.module("admin.enterprises")
       $scope.navClear()
       enterprise_form.submit()
 
-
     # Provide a callback for generating warning messages displayed before leaving the page. This is passed in
     # from a directive "nav-check" in the page - if we pass it here it will be called in the test suite,
     # and on all new uses of this contoller, and we might not want that.
     enterpriseNavCallback = ->
-      if $scope.Enterprise.$dirty
-        "Your changes to the enterprise are not saved yet."
+      if $scope.enterprise_form.$dirty
+        t('admin.unsaved_confirm_leave')
 
     # Register the NavigationCheck callback
     NavigationCheck.register(enterpriseNavCallback)
@@ -39,6 +38,8 @@ angular.module("admin.enterprises")
       if manager.id?
         for i, user of $scope.Enterprise.users when user.id == manager.id
           $scope.Enterprise.users.splice i, 1
+        if $scope.enterprise_form?
+          $scope.enterprise_form.$setDirty()
 
     $scope.addManager = (manager) ->
       if manager.id? and manager.email?

app/assets/javascripts/admin/enterprises/directives/enterprise_switcher.js.coffee

@@ -0,0 +1,16 @@
+angular.module('admin.enterprises').directive 'enterpriseSwitcher', (NavigationCheck) ->
+  restrict: 'A'
+  require: 'ngModel'
+  link: (scope, element, attr, ngModel) ->
+    initial = element[0].getAttribute('data-initial')
+
+    element.on 'change', ->
+      if not NavigationCheck.confirmLeave()
+        # Reset the current dropdown selection if staying on page
+        ngModel.$setViewValue initial
+        ngModel.$render()
+        element.select2 'val', initial
+        return
+
+      NavigationCheck.clear() # Don't ask twice if leaving
+      window.location = element[0].querySelector('option[selected]').getAttribute('data-url')

app/assets/javascripts/admin/product_import/controllers/dropdown_panels.js.coffee

@@ -0,0 +1,5 @@
+angular.module("ofn.admin").controller "DropdownPanelsCtrl", ($scope) ->
+  $scope.active = false
+
+  $scope.togglePanel = ->
+    $scope.active = !$scope.active

app/assets/javascripts/admin/product_import/controllers/import_options_form.js.coffee

@@ -0,0 +1,15 @@
+angular.module("ofn.admin").controller "ImportOptionsFormCtrl", ($scope, $rootScope, ProductImportService) ->
+
+  $scope.toggleResetAbsent = () ->
+    confirmed = confirm 'This will set stock level to zero on all products for this \n' +
+      'enterprise that are not present in the uploaded file.' if $scope.resetAbsent
+
+    if confirmed or !$scope.resetAbsent
+      ProductImportService.updateResetAbsent($scope.supplierId, $scope.resetCount, $scope.resetAbsent)
+    else
+      $scope.resetAbsent = false
+
+  $scope.resetTotal = ProductImportService.resetTotal
+
+  $rootScope.$watch 'resetTotal', (newValue) ->
+    $scope.resetTotal = newValue if newValue || newValue == 0

app/assets/javascripts/admin/product_import/services/product_import_service.js.coffee

@@ -0,0 +1,15 @@
+angular.module("ofn.admin").factory "ProductImportService", ($rootScope) ->
+  new class ProductImportService
+    suppliers: {}
+    resetTotal: 0
+
+    updateResetAbsent: (supplierId, resetCount, resetAbsent) ->
+      if resetAbsent
+        @suppliers[supplierId] = resetCount
+        @resetTotal += resetCount
+      else
+        @suppliers[supplierId] = null
+        @resetTotal -= resetCount
+
+      $rootScope.resetTotal = @resetTotal
+

app/assets/javascripts/admin/products/products.js.coffee

@@ -1 +1 @@
-angular.module("admin.products", [])
+angular.module("admin.products", ["textAngular", "admin.utils"])

app/assets/javascripts/admin/tag_rules/controllers/tag_rules_controller.js.coffee

@@ -38,7 +38,6 @@ angular.module("admin.tagRules").controller "TagRulesCtrl", ($scope, $http, $fil
         newRule.peferred_exchange_tags = []
         newRule.preferred_matched_order_cycles_visibility = "visible"
     tagGroup.rules.push(newRule)
-    $scope.enterprise_form.$setDirty()
     $scope.updateRuleCounts()
 
   $scope.addNewTag = ->
@@ -58,3 +57,4 @@ angular.module("admin.tagRules").controller "TagRulesCtrl", ($scope, $http, $fil
         .success ->
           tagGroup.rules.splice(index, 1)
           $scope.updateRuleCounts()
+          $scope.enterprise_form.$setDirty()

app/assets/javascripts/admin/utils/directives/textangular_strip.js.coffee

@@ -0,0 +1,5 @@
+angular.module("admin.utils").directive "textangularStrip", () ->
+  restrict: 'CA'
+  link: (scope, element, attrs) ->
+    scope.stripFormatting = ($html) ->
+      return String($html).replace(/<[^>]+>/gm, '')

app/assets/javascripts/admin/utils/services/navigation_check.js.coffee

@@ -10,7 +10,6 @@ angular.module("admin.utils")
 
         $rootScope.$on "$locationChangeStart", @locationChangeStartHandler
 
-
       # Action for regular browser navigation.
       onBeforeUnloadHandler: ($event) =>
         message = @getMessage()
@@ -21,13 +20,17 @@ angular.module("admin.utils")
 
       # Action for angular navigation.
       locationChangeStartHandler: ($event) =>
-        message = @getMessage()
-        if message and not $window.confirm(message)
+        if not @confirmLeave()
           $event.stopPropagation() if $event.stopPropagation
           $event.preventDefault() if $event.preventDefault
           $event.cancelBubble = true
           $event.returnValue = false
 
+      # Check if leaving is okay
+      confirmLeave: =>
+        message = @getMessage()
+        !message or $window.confirm(message)
+
       # Runs callback functions to retreive most recently added non-empty message.
       getMessage: ->
         message = null

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

@@ -15,7 +15,7 @@ Darkswarm.directive 'mapOsmTiles', ($timeout) ->
           if x < 0
             x = tilesPerGlobe + x
           # Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
-          'http://tile.openstreetmap.org/' + zoom + '/' + x + '/' + coord.y + '.png'
+          'https://a.tile.openstreetmap.org/' + zoom + '/' + x + '/' + coord.y + '.png'
         tileSize: new google.maps.Size(256, 256)
         name: 'OpenStreetMap'
         maxZoom: 18

app/assets/javascripts/templates/admin/links_dropdown.html.haml

@@ -1,7 +1,7 @@
 .ofn-drop-down
   %span
     %i.icon-check
-    Actions
+    = t('admin.actions')
     %i{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
   %div.menu{ 'ng-show' => "expanded" }
     %a.menu_item{ 'ng-repeat' => "link in links", href: '{{link.url}}', target: "{{link.target || '_self'}}", data: { method: "{{ link.method || 'get' }}", confirm: "{{link.confirm}}" } }

app/assets/javascripts/templates/admin/modals/tag_rule_help.html.haml

@@ -1,18 +1,19 @@
 #tag-rule-help
   .margin-bottom-30.text-center
-    .text-big Tag Rules
+    .text-big
+      = t('js.admin.modals.tag_rule_help.title')
 
   .margin-bottom-30
-    .text-normal Overview
-    %p Tag rules provide a way to describe which items are visible or otherwise to which customers. Items can be Shipping Methods, Payment Methods, Products and Order Cycles.
+    .text-normal= t('js.admin.modals.tag_rule_help.overview')
+    %p= t('js.admin.modals.tag_rule_help.overview_text')
 
   .margin-bottom-30
-    .text-normal 'By Default...' Rules
-    %p Default rules allow you to hide items so that they are not visible by default. This behaviour can then be overriden by non-default rules for customers with particular tags.
+    .text-normal= t('js.admin.modals.tag_rule_help.by_default_rules')
+    %p= t('js.admin.modals.tag_rule_help.by_default_rules_text')
 
   .margin-bottom-30
-    .text-normal 'Customers Tagged...' Rules
-    %p By creating rules related to a specific customer tag, you can override the default behaviour (whether it be to show or to hide items) for customers with the specified tag.
+    .text-normal= t('js.admin.modals.tag_rule_help.customer_tagged_rules')
+    %p= t('js.admin.modals.tag_rule_help.customer_tagged_rules_text')
 
   .text-center
-    %input.button.red.icon-plus{ type: 'button', value: 'Got it', ng: { click: 'close()' } }
+    %input.button.red.icon-plus{ type: 'button', value: t('js.admin.modals.got_it'), ng: { click: 'close()' } }

app/assets/javascripts/templates/admin/new_tag_rule_dialog.html.haml

@@ -1,6 +1,6 @@
 #new-tag-rule-dialog
   .text-normal.margin-bottom-30.text-center
-    Select a rule type:
+    = t('js.admin.new_tag_rule_dialog.select_rule_type')
 
   .text-center.margin-bottom-30
     -# %select.fullwidth{ 'select2-min-search' => 5, 'ng-model' => 'newRuleType', 'ng-options' => 'ruleType.id as ruleType.name for ruleType in availableRuleTypes' }

app/assets/javascripts/templates/admin/panels/enterprise_package.html.haml

@@ -2,130 +2,128 @@
   .alpha.eight.columns
     %div{ ng: { if: "!enterprise.is_primary_producer", switch: "enterprise.sells" } }
       .info{ ng: { switch: { when: "none" } } }
-        %h3 Hub Profile
+        %h3= t('js.admin.panels.enterprise_package.hub_profile')
 
         %p
-          %strong COST: ALWAYS FREE
+          %strong= t('js.admin.panels.enterprise_package.hub_profile_cost')
 
-        %p People can find and contact you on the Open Food Network. Your enterprise will be visible on the map, and will be searchable in listings.
+        %p= t('js.admin.panels.enterprise_package.hub_profile_text1')
 
-        %p Having a profile, and making connections within your local food system through the Open Food Network will always be free.
+        %p= t('js.admin.panels.enterprise_package.hub_profile_text2')
 
       .info{ ng: { switch: { when: "any" } } }
-        %h3 Hub Shop
+        %h3= t('js.admin.panels.enterprise_package.hub_shop')
 
         %p
           %strong
             %monthly-pricing-description{ joiner: "comma" }
 
-        %p Your enterprise is the backbone of your local food system. You aggregate produce from other enterprises and can sell it through your shop on the Open Food Network.
+        %p= t('js.admin.panels.enterprise_package.hub_shop_text1')
 
-        %p Hubs can take many forms, whether they be a food co-op, a buying group, a veggie-box program, or a local grocery store.
+        %p= t('js.admin.panels.enterprise_package.hub_shop_text2')
 
-        %p If you also want to sell your own products, you will need to switch this enterprise to be a producer.
+        %p= t('js.admin.panels.enterprise_package.hub_shop_text3')
 
       .info{ ng: { switch: { default: true } } }
         %h3
-          Please Choose a Package
+          = t('js.admin.panels.enterprise_package.choose_package')
           %i.icon-arrow-right
 
         %p
-          %strong Your enterprise will not be fully activated until a package is selected from the options on the left.
+          %strong= t('js.admin.panels.enterprise_package.choose_package_text1')
 
         %p
-          Click on an option to see more detailed information about each package, and hit the red SAVE button when you are done!
-
-
+          = t('js.admin.panels.enterprise_package.choose_package_text2')
 
     %div{ ng: { if: "enterprise.is_primary_producer", switch: "enterprise.sells" } }
       .info{ ng: { switch: { when: "none" } } }
-        %h3 Profile Only
+        %h3= t('js.admin.panels.enterprise_package.profile_only')
 
         %p
-          %strong COST: ALWAYS FREE
+          %strong= t('js.admin.panels.enterprise_package.profile_only_cost')
 
-        %p A profile makes you visible and contactable to others and is a way to share your story.
+        %p= t('js.admin.panels.enterprise_package.profile_only_text1')
 
-        %p If you prefer to focus on producing food, and want to leave the work of selling it to someone else, you won't require a shop on the Open Food Network.
+        %p= t('js.admin.panels.enterprise_package.profile_only_text2')
 
-        %p Add your products to Open Food Network, allowing hubs to stock your products in their stores.
+        %p= t('js.admin.panels.enterprise_package.profile_only_text3')
 
       .info{ ng: { switch: { when: "own" } } }
-        %h3 Producer Shop
+        %h3= t('js.admin.panels.enterprise_package.producer_shop')
 
         %p
           %strong
             %monthly-pricing-description{ joiner: "comma" }
 
-        %p Sell your products directly to customers through your very own Open Food Network shopfront.
+        %p= t('js.admin.panels.enterprise_package.producer_shop_text1')
 
-        %p A Producer Shop is for your produce only, if you want to sell produce grown/produced off site, please select 'Producer Hub'.
+        %p= t('js.admin.panels.enterprise_package.producer_shop_text2')
 
       .info{ ng: { switch: { when: "any" } } }
-        %h3 Producer Hub
+        %h3= t('js.admin.panels.enterprise_package.producer_hub')
 
         %p
           %strong
             %monthly-pricing-description{ joiner: "comma" }
 
-        %p Your enterprise is the backbone of your local food system. You can sell your own produce as well as produce aggregated from other enterprises through your shopfront on the Open Food Network.
+        %p= t('js.admin.panels.enterprise_package.producer_hub_text1')
 
-        %p Producer Hubs can take many forms, whether they be a CSA, a veggie-box program, or a food co-op with a rooftop garden.
+        %p= t('js.admin.panels.enterprise_package.producer_hub_text2')
 
-        %p The Open Food Network aims to support as many hub models as possible, so no matter your situation, we want to provide the tools you need to run your organisation or local food business.
+        %p= t('js.admin.panels.enterprise_package.producer_hub_text3')
 
       .info{ ng: { switch: { default: true } } }
         %h3
-          Please Choose a Package
+          = t('js.admin.panels.enterprise_package.choose_package')
           %i.icon-arrow-right
 
         %p
-          %strong Your producer enterprise will not be fully activated until a package is selected from the options on the left.
+          %strong= t('js.admin.panels.enterprise_package.choose_package_text1')
 
         %p
-          Click on an option to see more detailed information about each package, and hit the red SAVE button when you are done!
+          = t('js.admin.panels.enterprise_package.choose_package_text2')
 
   .omega.eight.columns{ ng: { switch: "enterprise.is_primary_producer" } }
     %div{ ng: { switch: { when: "false" } } }
       %a.button.selector.hub-profile{ ng: { click: "enterprise.owned && (enterprise.sells='none')", class: "{selected: enterprise.sells=='none', disabled: !enterprise.owned}" } }
         .top
-          %h3 Profile Only
-          %p Get a listing
-        .bottom ALWAYS FREE
+          %h3= t('js.admin.panels.enterprise_package.profile_only')
+          %p= t('js.admin.panels.enterprise_package.get_listing')
+        .bottom= t('js.admin.panels.enterprise_package.always_free')
       %a.button.selector.hub{ ng: { click: "enterprise.owned && (enterprise.sells='any')", class: "{selected: enterprise.sells=='any', disabled: !enterprise.owned}" } }
         .top
-          %h3 Hub Shop
-          %p Sell produce from others
+          %h3= t('js.admin.panels.enterprise_package.hub_shop')
+          %p= t('js.admin.panels.enterprise_package.sell_produce_others')
         .bottom
           %monthly-pricing-description{ joiner: "newline" }
 
     %div{ ng: { switch: { when: "true" } } }
       %a.button.selector.producer-profile{ ng: { click: "enterprise.owned && (enterprise.sells='none')", class: "{selected: enterprise.sells=='none', disabled: !enterprise.owned}" } }
         .top
-          %h3 Profile Only
-          %p Get a listing
-        .bottom ALWAYS FREE
+          %h3= t('js.admin.panels.enterprise_package.profile_only')
+          %p= t('js.admin.panels.enterprise_package.get_listing')
+        .bottom= t('js.admin.panels.enterprise_package.always_free')
       %a.button.selector.producer-shop{ ng: { click: "enterprise.owned && (enterprise.sells='own')", class: "{selected: enterprise.sells=='own', disabled: !enterprise.owned}" } }
         .top
-          %h3 Producer Shop
-          %p Sell your own produce
+          %h3= t('js.admin.panels.enterprise_package.producer_shop')
+          %p= t('js.admin.panels.enterprise_package.sell_own_produce')
         .bottom
           %monthly-pricing-description{ joiner: "newline" }
 
       %a.button.selector.producer-hub{ ng: { click: "enterprise.owned && (enterprise.sells='any')", class: "{selected: enterprise.sells=='any', disabled: !enterprise.owned}" } }
         .top
-          %h3 Producer Hub
-          %p Sell produce from self and others
+          %h3= t('js.admin.panels.enterprise_package.producer_hub')
+          %p= t('js.admin.panels.enterprise_package.sell_both')
         .bottom
           %monthly-pricing-description{ joiner: "newline" }
 
     %a.button.update.fullwidth{ ng: { show: "enterprise.owned", class: "{disabled: saved() && !saving, saving: saving}", click: "save()" } }
       %span{ ng: {hide: "saved() || saving" } }
-        SAVE
+        = t('js.admin.panels.save')
         %i.icon-save
       %span{ ng: {show: "saved() && !saving" } }
-        SAVED
+        = t('js.admin.panels.saved')
         %i.icon-ok-sign
       %span{ ng: {show: "saving" } }
-        SAVING
+        = t('js.admin.panels.saving')
         %i.icon-refresh

app/assets/javascripts/templates/admin/panels/enterprise_producer.html.haml

@@ -1,39 +1,37 @@
 .row.enterprise_producer_panel{ ng: { controller: 'indexProducerPanelCtrl' } }
-
   .alpha.eight.columns
     .info{ ng: { show: "enterprise.is_primary_producer==true" } }
-      %h3 Producer
-      %p Producers make yummy things to eat &/or drink. You're a producer if you grow it, raise it, brew it, bake it, ferment it, milk it or mould it.
-
-      %p Producers can also perform other functions, such as aggregating food from other enterprises and selling it through a shop on the Open Food Network.
+      %h3= t('js.admin.panels.enterprise_producer.producer')
+      %p= t('js.admin.panels.enterprise_producer.producer_text1')
 
+      %p= t('js.admin.panels.enterprise_producer.producer_text2')
 
     .info{ ng: { show: "enterprise.is_primary_producer==false" } }
-      %h3 Non-Producer
-      %p Non-producers do not produce any food themselves, meaning that they cannot create their own products for sale through the Open Food Network.
+      %h3= t('js.admin.panels.enterprise_producer.non_producer')
+      %p= t('js.admin.panels.enterprise_producer.non_producer_text1')
 
-      %p Instead, non-producers specialise in linking producers to the end eater, whether it be by aggregating, grading, packing, selling or delivering food.
+      %p= t('js.admin.panels.enterprise_producer.non_producer_text2')
 
   .omega.eight.columns
     %a.button.selector.producer{ ng: { click: 'enterprise.owned && changeToProducer()', class: "{selected: enterprise.is_primary_producer==true, disabled: !enterprise.owned}" } }
       .top
-        %h3 PRODUCER
-        %p Producers of food
-      .bottom eg. GROWERS, BAKERS, BREWERS, MAKERS
+        %h3= t('js.admin.panels.enterprise_producer.producer')
+        %p= t('js.admin.panels.enterprise_producer.producer_desc')
+      .bottom= t('js.admin.panels.enterprise_producer.producer_example')
 
     %a.button.selector.non-producer{ ng: { click: 'enterprise.owned && changeToNonProducer()', class: "{selected: enterprise.is_primary_producer==false, disabled: !enterprise.owned}" } }
       .top
-        %h3 Non-Producer
-        %p All other food enterprises
-      .bottom eg. Grocery stores, Food co-ops, Buying groups
+        %h3= t('js.admin.panels.enterprise_producer.non_producer')
+        %p= t('js.admin.panels.enterprise_producer.non_producer_desc')
+      .bottom= t('js.admin.panels.enterprise_producer.non_producer_example')
 
     %a.button.update.fullwidth{ ng: { show: "enterprise.owned", class: "{disabled: saved() && !saving, saving: saving}", click: "save()" } }
       %span{ ng: {hide: "saved() || saving" } }
-        SAVE
+        = t('js.admin.panels.save')
         %i.icon-save
       %span{ ng: {show: "saved() && !saving" } }
-        SAVED
+        = t('js.admin.panels.saved')
         %i.icon-ok-sign
       %span{ ng: {show: "saving" } }
-        SAVING
+        = t('js.admin.panels.saving')
         %i.icon-refresh

app/assets/javascripts/templates/admin/panels/enterprise_status.html.haml

@@ -1,18 +1,17 @@
 .row.enterprise_status_panel{ ng: { controller: 'indexStatusPanelCtrl' } }
   .alpha.omega.sixteen.columns
-
     %h4.status-ok.text-center{ ng: { show: "issues.length == 0 && warnings.length == 0" } }
       %i.icon-ok-sign
-      {{ object.name }} is set up and ready to go!
+      = t('js.admin.panels.enterprise_status.status_title', name: '{{ object.name }}')
 
     %table{ ng: { show: "issues.length > 0 || warnings.length > 0" } }
       %thead
         %th.severity
-          Severity
+          = t('js.admin.panels.enterprise_status.severity')
         %th.description
-          Description
+          = t('js.admin.panels.enterprise_status.description')
         %th.resolve
-          Resolve
+          = t('js.admin.panels.enterprise_status.resolve')
       %tr{ ng: { repeat: "issue in issues"} }
         %td.severity
           %i.icon-warning-sign.issue

app/assets/javascripts/templates/admin/show_more.html.haml

@@ -1,4 +1,4 @@
 %div{ ng: { show: "data.length > limit" } }
-  %input{ type: 'button', value: 'Show More', ng: { click: 'limit = limit + increment' } }
+  %input{ type: 'button', value: t(:show_more), ng: { click: 'limit = limit + increment' } }
   or
-  %input{ type: 'button', value: "Show All ({{ data.length - limit }}  More)", ng: { click: 'limit = data.length' } }
+  %input{ type: 'button', value: t(:show_more_with_more, num: '{{ data.length - limit }}'), ng: { click: 'limit = data.length' } }

app/assets/javascripts/templates/admin/tag_autocomplete.html.haml

@@ -3,9 +3,9 @@
     {{$getDisplayText()}}
     %span.tag-with-rules{ ng: { if: "data.rules == 1" } }
       —
-      = t 'admin.has_one_rule'
+      = t('admin.has_one_rule')
     %span.tag-with-rules{ ng: { if: "data.rules > 1" } }
       —
-      = t 'admin.has_n_rules', { num: '{{data.rules}}' }
+      = t('admin.has_n_rules', { num: '{{data.rules}}' })
   %span{ ng: { if: "!data.rules" } }
     {{$getDisplayText()}}

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

@@ -1,13 +1,13 @@
 %a.close-reveal-modal{"ng-click" => "$close()"}
   %i.ofn-i_009-close
 
-%h3 Reduced stock available
+%h3= t('js.out_of_stock.reduced_stock_available')
 
-%p While you've been shopping, the stock levels for one or more of the products in your cart have reduced. Here's what's changed:
+%p= t('js.out_of_stock.out_of_stock_text')
 
 %p{'ng-repeat' => "v in variants"}
   %em {{ v.name_to_display }} - {{ v.unit_to_display }}
   %span{'ng-if' => "v.count_on_hand == 0"}
-    is now out of stock.
+    = t('js.out_of_stock.now_out_of_stock')
   %span{'ng-if' => "v.count_on_hand > 0"}
-    now only has {{ v.count_on_hand }} remaining.
+    = t('js.out_of_stock.only_n_remainging', num: '{{ v.count_on_hand }}')

app/assets/javascripts/templates/partials/contact.html.haml

@@ -3,9 +3,9 @@
     %p.modal-header {{'contact' | t}}
     %p{"ng-if" => "::enterprise.phone", "ng-bind" => "::enterprise.phone"}
 
-    %p.word-wrap{"ng-if" => "::enterprise.email_address"}
+    %p{"ng-if" => "::enterprise.email_address"}
       %a{"ng-href" => "{{::enterprise.email_address | stripUrl}}", target: "_blank", mailto: true}
         %span.email{"ng-bind" => "::enterprise.email_address | stripUrl"}
 
-    %p.word-wrap{"ng-if" => "enterprise.website"}
+    %p{"ng-if" => "enterprise.website"}
       %a{"ng-href" => "http://{{::enterprise.website | stripUrl}}", target: "_blank", "ng-bind" => "::enterprise.website | stripUrl"}

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

@@ -14,9 +14,9 @@
     .filter-shopfront.property-selectors.inline-block
       %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }
 
-    %div{"ng-if" => "product.description"}
+    %div{"ng-if" => "product.description_html"}
       %hr
-      %p.text-small{"ng-bind" => "::product.description"}
+      %p.text-small{"ng-bind-html" => "::product.description_html"}
       %hr
 
   .columns.small-12.large-6

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

@@ -1,10 +0,0 @@
-%div#registration-modal{"ng-controller" => "RegistrationCtrl"}
-  %div{ ng: { show: "currentStep() == 'introduction'" } }
-    %ng-include{ src: "'registration/introduction.html'" }
-  %div{ ng: { repeat: 'step in steps', show: "currentStep() == step" } }
-    %ng-include{ src: "'registration/'+ step + '.html'" }
-  %div{ ng: { show: "currentStep() == 'finished'" } }
-    %ng-include{ src: "'registration/finished.html'" }
-        
-%a.close-reveal-modal{"ng-click" => "$close()"}  
-  %i.ofn-i_009-close

app/assets/javascripts/templates/registration/about.html.haml

@@ -1,57 +0,0 @@
-.container#registration-about
-  %ng-include{ src: "'registration/steps.html'" }
-  .row
-    .small-12.columns
-      %header
-        %h2 {{'enterprise_about_headline' | t}}
-        %h5
-          {{'enterprise_about_message' | t}}
-          %span{ ng: { class: "{brick: !enterprise.is_primary_producer, turquoise: enterprise.is_primary_producer}" } }
-            {{ enterprise.name }}
-
-  %form{ name: 'about', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('images',about)" } }
-    .row
-      .small-12.columns
-        .alert-box.info{ "ofn-inline-alert" => true, ng: { show: "visible" } }
-          %h6{ "ng-bind" => "'enterprise_success' | t:{enterprise: enterprise.name}" }
-          %span {{'enterprise_registration_exit_message' | t}}
-          %a.close{ ng: { click: "close()" } } ×
-
-      .small-12.large-8.columns
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_description' } {{'enterprise_description' | t}}:
-              %input.chunky{ id: 'enterprise_description', placeholder: "{{'enterprise_description_placeholder' | t}}", ng: { model: 'enterprise.description' } }
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_long_desc' } {{'enterprise_long_desc' | t}}:
-              %textarea.chunky{ id: 'enterprise_long_desc',  rows: 6, placeholder: "{{'enterprise_long_desc_placeholder' | t}}", ng: { model: 'enterprise.long_description' } }
-                %small{ "ng-bind" => "'enterprise_long_desc_length' | t:{num: enterprise.long_description.length}" }
-      .small-12.large-4.columns
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_abn' } {{'enterprise_abn' | t}}:
-              %input.chunky{ id: 'enterprise_abn', placeholder: "{{'enterprise_abn_placeholder' | t}}", ng: { model: 'enterprise.abn' } }
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_acn' } {{'enterprise_acn' | t}}:
-              %input.chunky{ id: 'enterprise_acn', placeholder: "{{'enterprise_acn_placeholder' | t}}", ng: { model: 'enterprise.acn' } }
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_charges_sales_tax' }= t(:charges_sales_tax)
-              %input{ id: 'enterprise_charges_sales_tax_true', type: 'radio', name: 'charges_sales_tax', value: 'true', required: true, ng: { model: 'enterprise.charges_sales_tax' } }
-              %label{ for: 'enterprise_charges_sales_tax_true' } {{'say_yes' | t}}
-              %input{ id: 'enterprise_charges_sales_tax_false', type: 'radio', name: 'charges_sales_tax', value: 'false', required: true, ng: { model: 'enterprise.charges_sales_tax' } }
-              %label{ for: 'enterprise_charges_sales_tax_false' } {{'say_no' | t}}
-              %span.error.small-12.columns{ ng: { show: "about.charges_sales_tax.$error.required && submitted" } }
-                {{'enterprise_tax_required' | t}}
-
-    .row.buttons.pad-top
-      .small-12.columns
-        %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" }
-        

app/assets/javascripts/templates/registration/contact.html.haml

@@ -1,31 +0,0 @@
-.container#registration-contact
-  %ng-include{ src: "'registration/steps.html'" }
-  .row
-    .small-12.columns
-      %header
-        %h2 {{'registration_greeting' | t}}
-        %h5{ "ng-bind" => "'who_is_managing_enterprise' | t:{enterprise: enterprise.name}" }
-  
-  %form{ name: 'contact', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('type',contact)" } }
-    .row.content
-      .small-12.medium-12.large-7.columns
-        .row
-          .small-12.columns.field
-            %label{ for: 'enterprise_contact' } {{'enterprise_contact' | t}}:
-            %input.chunky.small-12.columns{ id: 'enterprise_contact', name: 'contact', required: true, placeholder: "Contact Name", ng: { model: 'enterprise.contact' } }
-            %span.error.small-12.columns{ ng: { show: "contact.contact.$error.required && submitted" } }
-              {{'enterprise_contact_required' | t}}
-        .row
-          .small-12.columns.field
-            %label{ for: 'enterprise_email_address' } {{'enterprise_email_address' | t}}:
-            %input.chunky.small-12.columns{ id: 'enterprise_email_address', name: 'email_address', type: 'email', placeholder: "eg. charlie@thefarm.com", ng: { model: 'enterprise.email_address' } }
-        .row
-          .small-12.columns.field
-            %label{ for: 'enterprise_phone' } {{'enterprise_phone' | t}}:
-            %input.chunky.small-12.columns{ id: 'enterprise_phone', name: 'phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.phone' } }
-      .small-12.medium-12.large-5.hide-for-small-only
-
-    .row.buttons
-      .small-12.columns
-        %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('details')" } }
-        %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" }

app/assets/javascripts/templates/registration/details.html.haml

@@ -1,64 +0,0 @@
-.container#registration-details
-  %ng-include{ src: "'registration/steps.html'" }
-  .row
-    .small-12.columns
-      %header
-        %h2 {{'registration_detail_headline' | t}}
-        %h5{ ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_enterprise' | t}}
-        %h5{ ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_producer' | t}}
-
-  %form{ name: 'details', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('contact',details)" } }
-
-    .row
-      .small-12.medium-9.large-12.columns.end
-        .field
-          %label{ for: 'enterprise_name', ng: { if: "::enterprise.type != 'own'" } } {{'registration_detail_name_enterprise' | t}}
-          %label{ for: 'enterprise_name', ng: { if: "::enterprise.type == 'own'" } } {{'registration_detail_name_producer' | t}}
-          %input.chunky{ id: 'enterprise_name', name: 'name', placeholder: "{{'registration_detail_name_placeholder' | t}}", required: true, ng: { model: 'enterprise.name' } }
-          %span.error{ ng: { show: "details.name.$error.required && submitted" } }
-            {{'registration_detail_name_error' | t}}
-
-    .row
-      .small-12.medium-9.large-6.columns
-        .field
-          %label{ for: 'enterprise_address' } {{'registration_detail_address1' | t}}
-          %input.chunky{ id: 'enterprise_address', name: 'address1', required: true, placeholder: "{{'registration_detail_address1_placeholder' | t}}", required: true, ng: { model: 'enterprise.address.address1' } }
-          %span.error{ ng: { show: "details.address1.$error.required && submitted" } }
-            {{'registration_detail_address1_error' | t}}
-        .field
-          %label{ for: 'enterprise_address2' } {{'registration_detail_address2' | t}}
-          %input.chunky{ id: 'enterprise_address2', name: 'address2', required: false, placeholder: "", required: false, ng: { model: 'enterprise.address.address2' } }
-
-      .small-12.medium-9.large-6.columns.end
-        .row
-          .small-12.medium-8.large-8.columns
-            .field
-              %label{ for: 'enterprise_city' } {{'registration_detail_suburb' | t}}
-              %input.chunky{ id: 'enterprise_city', name: 'city', required: true, placeholder: "{{'registration_detail_suburb_placeholder' | t}}", ng: { model: 'enterprise.address.city' } }
-              %span.error{ ng: { show: "details.city.$error.required && submitted" } }
-                {{'registration_detail_suburb_error' | t}}
-          .small-12.medium-4.large-4.columns
-            .field
-              %label{ for: 'enterprise_zipcode' } {{'registration_detail_postcode' | t}}
-              %input.chunky{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "{{'registration_detail_postcode_placeholder' | t}}", ng: { model: 'enterprise.address.zipcode' } }
-              %span.error{ ng: { show: "details.zipcode.$error.required && submitted" } }
-                {{'registration_detail_postcode_error' | t}}
-        .row
-          .small-12.medium-4.large-4.columns
-            .field
-              %label{ for: 'enterprise_state' } {{'registration_detail_state' | t}}
-              %select.chunky{ id: 'enterprise_state', name: 'state', ng: { model: 'enterprise.address.state_id', options: 's.id as s.abbr for s in enterprise.country.states', show: 'countryHasStates()', required: 'countryHasStates()' } }
-              %span.error{ ng: { show: "details.state.$error.required && submitted" } }
-                {{'registration_detail_state_error' | t}}
-          .small-12.medium-8.large-8.columns
-            .field
-              %label{ for: 'enterprise_country' } {{'registration_detail_country' | t}}
-              %select.chunky{ id: 'enterprise_country', name: 'country', required: true, ng: { model: 'enterprise.country', options: 'c as c.name for c in countries' } }
-              %span.error{ ng: { show: "details.country.$error.required && submitted" } }
-                {{'registration_detail_country_error' | t}}
-
-
-    .row.buttons
-      .small-12.columns
-        %hr
-        %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" }

app/assets/javascripts/templates/registration/finished.html.haml

@@ -1,15 +0,0 @@
-.container#registration-finished
-  .row
-    .small-12.columns.pad-top
-      %header
-        %h2 {{'registration_finished_headline' | t}}
-        .panel.callout
-          %p{ "ng-bind" => "'registration_finished_thanks' | t:{enterprise: enterprise.name}" }
-          %p {{'registration_finished_login' | t}}
-  .row
-    .small-12.columns.text-center
-      %h4{ "ng-bind" => "'registration_finished_activate' | t:{enterprise: enterprise.name}" }
-
-      %p{ "ng-bind-html" => "'registration_finished_activate_instruction_html' | t:{email: enterprise.email}"}
-
-      %a.button.primary{ type: "button", href: "/" } {{'registration_finished_action' | t}} >

app/assets/javascripts/templates/registration/images.html.haml

@@ -1,22 +0,0 @@
-.container#registration-images{ 'nv-file-drop' => true, uploader: "imageUploader", options:"{ alias: imageStep }", ng: { controller: "EnterpriseImageCtrl" } }
-  %ng-include{ src: "'registration/steps.html'" }
-  .row
-    .small-12.columns
-      %header
-        %h2 {{'registration_images_headline' | t}}
-        %h5 {{'registration_images_description' | t}}
-        
-  %form{ name: 'images', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "select('social')" } }
-    .row{ ng: { repeat: 'image_step in imageSteps', show: "imageStep == image_step" } }
-      %ng-include{ src: "'registration/images/'+ image_step + '.html'" }
-
-    .row.buttons.pad-top{ ng: { if: "imageStep == 'logo'" } }
-      .small-12.columns
-        %input.button.secondary{ type: "button", value: "Back", ng: { click: "select('about')" } }
-         
-        %input.button.primary.right{ type: "button", value: "Continue", ng: { click: "imageSelect('promo')" } }
-
-    .row.buttons.pad-top{ ng: { if: "imageStep == 'promo'" } }
-      .small-12.columns
-        %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "imageSelect('logo')" } }
-          %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" }

app/assets/javascripts/templates/registration/images/logo.html.haml

@@ -1,45 +0,0 @@
-.small-12.medium-12.large-6.columns
-  .row
-    .small-12.columns.center
-      .row
-        .small-12.columns.center
-          %h4
-            {{'select_logo' | t}}
-      .row
-        .small-12.columns.center
-          %span.small
-            {{'logo_tip' | t}}
-      .row.pad-top
-        .small-12.columns
-          .image-select.small-12.columns
-            %label.small-12.columns.button{ for: 'image-select' } {{'logo_label' | t}}
-            %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' }
-  .row.show-for-large-up
-    .large-12.columns
-      %span#or.large-12.columns
-        {{'action_or' | t}}
-  .row.show-for-large-up
-    .large-12.columns
-      #image-over{ 'nv-file-over' => true, uploader: "imageUploader" }
-        {{'logo_drag' | t}}
-.small-12.medium-12.large-6.columns
-  .row
-    .small-12.columns.center
-      .row
-        .small-12.columns.center
-          %h4
-            {{'review_logo' | t}}
-      .row
-        .small-12.columns.center
-          %span.small
-            {{'review_logo_tip' | t}}
-      .row.pad-top
-        .small-12.columns.center
-          #image-placeholder.logo
-            %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } }
-            .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
-              {{'logo_placeholder' | t}}
-            .loading{ ng: { hide: "!imageUploader.isUploading" } }
-              %img.spinner{ src: "/assets/spinning-circles.svg" }
-              %br/
-              {{'uploading' | t}}

app/assets/javascripts/templates/registration/images/promo.html.haml

@@ -1,43 +0,0 @@
-.small-12.medium-12.large-12.columns
-  .row
-    .small-12.columns.center
-      %h4
-        {{'select_promo_image' | t}}
-  .row
-    .small-12.medium-12.large-5.columns.center
-      .row
-        .small-12.columns.center
-          %span.small
-            {{'promo_image_tip' | t}}
-      .row.pad-top
-        .small-12.columns
-          .image-select.small-12.columns
-            %label.small-12.columns.button{ for: 'image-select' } {{'promo_image_label' | t}}
-            %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' }
-    .large-2.columns
-      %span#or.horizontal.large-12.columns
-        {{'action_or' | t}}
-    .large-5.columns
-      #image-over{ 'nv-file-over' => true, uploader: "imageUploader" }
-        {{'promo_image_drag' | t}}
-.small-12.medium-12.large-12.columns.pad-top
-  .row
-    .small-12.columns.center
-      %h4
-        {{'review_promo_image' | t}}
-  .row
-    .small-12.columns.center
-      .row
-        .small-12.columns.center
-          %span.small
-            {{'review_promo_image_tip' | t}}
-      .row.pad-top
-        .small-12.columns.center
-          #image-placeholder.promo
-            %img{ ng: { show: "imageSrc() && !imageUploader.isUploading", src: '{{ imageSrc() }}' } }
-            .message{ ng: { hide: "imageSrc() || imageUploader.isUploading" } }
-              {{'promo_image_placeholder' | t}}
-            .loading{ ng: { hide: "!imageUploader.isUploading" } }
-              %img.spinner{ src: "/assets/spinning-circles.svg" }
-              %br/
-              {{'uploading' | t}}

app/assets/javascripts/templates/registration/introduction.html.haml

@@ -1,41 +0,0 @@
-.row
-  .small-12.columns
-    %header
-      %h2 {{'registration_greeting' | t}}
-      %h4
-        %small
-          %i.ofn-i_040-hub
-        {{'registration_intro' | t}}
-    .hide-for-large-up
-      %hr
-      %input.button.small.primary{ type: "button", value: "{{'registration_action' | t}}", ng: { click: "select('details')" } } 
-    %hr 
-
-.row{ 'data-equalizer' => true }
-  .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
-    %h5 {{'registration_checklist' | t}}:
-    %ul.check-list
-      %li 
-        {{'registration_time' | t}}
-      %li 
-        {{'registration_enterprise_address' | t}}
-      %li 
-        {{'registration_contact_details' | t}}
-      %li 
-        {{'registration_logo' | t}}
-      %li 
-        {{'registration_promo_image' | t}}
-      %li 
-        {{'registration_about_us' | t}}
-
-  .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true}
-    %h5
-      {{'registration_outcome_headline' | t}}
-    %p{ "ng-bind-html" => "t('registration_outcome1_html')" }
-    %p {{'registration_outcome2' | t}}
-    %p {{'registration_outcome3' | t}}
-
-.row.show-for-large-up
-  .small-12.columns
-    %hr
-    %input.button.primary.right{ type: "button", value: "{{'registration_action' | t}}", ng: { click: "select('details')" } }

app/assets/javascripts/templates/registration/limit_reached.html.haml

@@ -1,16 +0,0 @@
-.row
-  .small-12.columns
-    %header
-      %h2 {{'limit_reached_headline' | t}}
-      %h4 {{'limit_reached_message' | t}}
-.row
-  .small-12.medium-3.large-2.columns.text-right.hide-for-small-only
-    %img{:src => "/assets/potatoes.png"}
-  .small-12.medium-9.large-10.columns
-    %p
-      {{'limit_reached_text' | t}}
-      %strong Open Food Network.
-.row
-  .small-12.columns
-    %hr
-    %input.button.primary{ type: "button", value: "{{'limit_reached_action' | t}}", ng: { click: "close()" } }

app/assets/javascripts/templates/registration/social.html.haml

@@ -1,45 +0,0 @@
-.container#registration-social
-  %ng-include{ src: "'registration/steps.html'" }
-
-  .row
-    .small-12.columns
-      %header
-        %h2 {{'enterprise_final_step' | t}}
-        %h5{ "ng-bind" => "'enterprise_social_text' | t:{enterprise: enterprise.name}" }
-
-  %form{ name: 'social', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('finished',social)" } }
-    .row.content
-      .small-12.large-7.columns
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_website' } {{'website' | t}}:
-              %input.chunky{ id: 'enterprise_website', placeholder: "{{'website_placeholder' | t}}", ng: { model: 'enterprise.website' } }
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_facebook' } {{'facebook' | t}}:
-              %input.chunky{ id: 'enterprise_facebook', placeholder: "{{'facebook_placeholder' | t}}", ng: { model: 'enterprise.facebook' } }
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_linkedin' } {{'linkedin' | t}}:
-              %input.chunky{ id: 'enterprise_linkedin', placeholder: "{{'linkedin_placeholder' | t}}", ng: { model: 'enterprise.linkedin' } }
-      .small-12.large-5.columns
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_twitter' } {{'twitter' | t}}:
-              %input.chunky{ id: 'enterprise_twitter', placeholder: "{{'twitter_placeholder' | t}}", ng: { model: 'enterprise.twitter' } }
-        .row
-          .small-12.columns
-            .field
-              %label{ for: 'enterprise_instagram' } {{'instagram' | t}}:
-              %input.chunky{ id: 'enterprise_instagram', placeholder: "{{'instagram_placeholder' | t}}", ng: { model: 'enterprise.instagram' } }
-
-    .row.buttons
-      .small-12.columns
-        %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('images')" } }
-          %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" }
-
-

app/assets/javascripts/templates/registration/steps.html.haml

@@ -1,3 +0,0 @@
-.row#progress-bar
-  .small-12.medium-2.columns.item{ ng: { repeat: 'step in steps', class: "{active: (currentStep() == step),'show-for-medium-up': (currentStep() != step)}" } }
-    {{ $index+1 + ". " + step }}

app/assets/javascripts/templates/registration/type.html.haml

@@ -1,47 +0,0 @@
-.container#registration-type
-
-  %ng-include{ src: "'registration/steps.html'" }
-
-  .row
-    .small-12.columns
-      %header
-        %h2{ "ng-bind" => "'registration_type_headline' | t:{enterprise: enterprise.name}" }
-        %h4
-          {{'registration_type_question' | t}}
-
-  %form{ name: 'type', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(type)" } }
-    .row#enterprise-types{ 'data-equalizer' => true, ng: { if: "::enterprise.type != 'own'" } }
-      .small-12.columns.field
-        .row
-          .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true }
-            %a.btnpanel#producer-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = true", class: "{selected: enterprise.is_primary_producer}" } }
-              %i.ofn-i_059-producer
-              %h4 {{'registration_type_producer' | t}}
-
-          .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true }
-            %a.btnpanel#hub-panel{ href: "#", ng: { click: "enterprise.is_primary_producer = false", class: "{selected: enterprise.is_primary_producer == false}" } }
-              %i.ofn-i_063-hub
-              %h4 {{'registration_type_no_producer' | t}}
-
-        .row
-          .small-12.columns
-            %input.chunky{ id: 'enterprise_is_primary_producer', name: 'is_primary_producer', hidden: true, required: true, ng: { model: 'enterprise.is_primary_producer' } }
-            %span.error{ ng: { show: "type.is_primary_producer.$error.required && submitted" } }
-              {{'registration_type_error' | t}}
-        .row
-          .small-12.columns
-            .panel.callout
-              .left
-                %i.ofn-i_013-help
-                 
-              %p {{'registration_type_producer_help' | t}}
-            .panel.callout
-              .left
-                %i.ofn-i_013-help
-                 
-              %p {{'registration_type_no_producer_help' | t}}
-
-    .row.buttons
-      .small-12.columns
-        %input.button.secondary{ type: "button", value: "{{'back' | t}}", ng: { click: "select('contact')" } }
-        %input.button.primary.right{ type: "submit", value: "{{'create_profile' | t}}" }

app/assets/stylesheets/admin/alert.css.sass

@@ -1,15 +0,0 @@
-.alert
-  border: 3px solid #919191
-  border-radius: 6px
-  margin-bottom: 20px
-  color: #919191
-  padding: 5px 10px
-  h6
-    color: #919191
-  .message
-    font-weight: bold
-  &:hover
-    border-color: #DA5354
-    color: #DA5354
-    h6
-      color: #DA5354

app/assets/stylesheets/admin/alert.css.scss

@@ -0,0 +1,24 @@
+.alert {
+  border: 3px solid #919191;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  color: #919191;
+  padding: 5px 10px;
+
+  h6 {
+    color: #919191;
+  }
+
+  .message {
+    font-weight: bold;
+  }
+
+  &:hover {
+    border-color: #DA5354;
+    color: #DA5354;
+
+    h6 {
+      color: #DA5354;
+    }
+  }
+}

app/assets/stylesheets/admin/animations.css.scss

@@ -1,10 +1,14 @@
-@-webkit-keyframes slideInUp
-  0%
-    -webkit-transform: translateY(20px)
-    transform: translateY(20px)
-  100%
-    -webkit-transform: translateY(0)
-    transform: translateY(0)
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
 
 // @-webkit-keyframes slideOutDown
 //   0%
@@ -14,13 +18,14 @@
 //     -webkit-transform: translateY(20px)
 //     transform: translateY(20px)
 
-.animate-show
-  -webkit-animation-name: slideInUp
-  animation-name: slideInUp
-  -webkit-animation-duration: 0.3s
-  animation-duration: 0.3s
-  -webkit-animation-fill-mode: both
-  animation-fill-mode: both
+.animate-show {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+
   // line-height: 20px
   // opacity: 1
 
@@ -33,3 +38,4 @@
   //   animation-fill-mode: both
   //   // line-height: 20px
   //   // opacity: 1
+}

app/assets/stylesheets/admin/change_type_form.css.sass

@@ -1,72 +0,0 @@
-@import ../darkswarm/branding
-@import ../darkswarm/mixins
-
-#change_type
-  section
-    margin: 2em 0 0 0
-    &, & *
-      color: #5498da
-
-  .description
-    background-color: #eff5fc
-    margin-top: -2em
-    padding: 4em 2em 2em 1em
-    @media all and (max-width: 786px)
-      margin-bottom: 2em
-
-  .admin-cta
-    border: 1px solid #5498da
-    @include border-radius(3px)
-    text-align: center
-    padding: 1em
-
-  .error
-    display: block
-    color: #f57e80
-    border: 1px solid #f57e80
-    background-color: #fde6e7
-    @include border-radius(3px)
-    margin-bottom: 1em
-    padding: 0.5em
-
-  a.selector
-    position: relative
-    border: 2px solid black
-    text-align: center
-    width: 100%
-    cursor: pointer
-    &, & *
-      color: white
-    &:after, &:before
-      top: 100%
-      left: 50%
-      border: solid transparent
-      content: " "
-      height: 0
-      width: 0
-      position: absolute
-      pointer-events: none
-    &:after
-      border-color: rgba(136, 183, 213, 0)
-      border-top-color: #5498da
-      border-width: 12px
-      margin-left: -12px
-    &:hover
-      &:after
-        border-top-color: #9fc820
-    &:before
-      border-color: rgba(84, 152, 218, 0)
-      border-top-color: black
-      border-width: 15px
-      margin-left: -15px
-    .bottom
-      background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px)
-      margin-top: 1em
-      margin-left: -15px
-      margin-right: -15px
-      padding: 5px
-      text-transform: uppercase
-    &.selected
-      background-color: black
-      &:after, &:hover &:after
-        border-top-color: black

app/assets/stylesheets/admin/change_type_form.css.scss

@@ -0,0 +1,103 @@
+@import "../darkswarm/branding";
+@import "../darkswarm/mixins";
+
+#change_type {
+  section {
+    margin: 2em 0 0 0;
+
+    &, & * {
+      color: #5498da;
+    }
+  }
+
+  .description {
+    background-color: #eff5fc;
+    margin-top: -2em;
+    padding: 4em 2em 2em 1em;
+
+    @media all and (max-width: 786px) {
+      margin-bottom: 2em;
+    }
+  }
+
+  .admin-cta {
+    border: 1px solid #5498da;
+
+    @include border-radius(3px);
+
+    text-align: center;
+    padding: 1em;
+  }
+
+  .error {
+    display: block;
+    color: #f57e80;
+    border: 1px solid #f57e80;
+    background-color: #fde6e7;
+
+    @include border-radius(3px);
+
+    margin-bottom: 1em;
+    padding: 0.5em;
+  }
+
+  a.selector {
+    position: relative;
+    border: 2px solid black;
+    text-align: center;
+    width: 100%;
+    cursor: pointer;
+
+    &, & * {
+      color: white;
+    }
+
+    &:after, &:before {
+      top: 100%;
+      left: 50%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &:after {
+      border-color: rgba(136, 183, 213, 0);
+      border-top-color: #5498da;
+      border-width: 12px;
+      margin-left: -12px;
+    }
+
+    &:hover {
+      &:after {
+        border-top-color: #9fc820;
+      }
+    }
+
+    &:before {
+      border-color: rgba(84, 152, 218, 0);
+      border-top-color: black;
+      border-width: 15px;
+      margin-left: -15px;
+    }
+
+    .bottom {
+      background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px);
+      margin-top: 1em;
+      margin-left: -15px;
+      margin-right: -15px;
+      padding: 5px;
+      text-transform: uppercase;
+    }
+
+    &.selected {
+      background-color: black;
+
+      &:after, &:hover &:after {
+        border-top-color: black;
+      }
+    }
+  }
+}

app/assets/stylesheets/admin/components/save_bar.sass

@@ -1,14 +0,0 @@
-#save-bar
-  position: fixed
-  width: 100%
-  z-index: 100
-  bottom: 0px
-  left: 0
-  padding: 8px 8px
-  font-weight: bold
-  background-color: #eff5fc
-  color: #5498da
-  h5
-    color: #5498da
-  input
-    margin-right: 5px

app/assets/stylesheets/admin/components/save_bar.scss

@@ -0,0 +1,19 @@
+#save-bar {
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  bottom: 0px;
+  left: 0;
+  padding: 8px 8px;
+  font-weight: bold;
+  background-color: #eff5fc;
+  color: #5498da;
+
+  h5 {
+    color: #5498da;
+  }
+
+  input {
+    margin-right: 5px;
+  }
+}

app/assets/stylesheets/admin/components/trial_progess_bar.sass

@@ -1,9 +0,0 @@
-#trial_progress_bar
-  position: fixed
-  left: 0px
-  bottom: 0px
-  width: 100vw
-  padding: 8px 10px
-  font-weight: bold
-  background-color: #5498da
-  color: white

app/assets/stylesheets/admin/components/trial_progess_bar.scss

@@ -0,0 +1,10 @@
+#trial_progress_bar {
+  position: fixed;
+  left: 0px;
+  bottom: 0px;
+  width: 100vw;
+  padding: 8px 10px;
+  font-weight: bold;
+  background-color: #5498da;
+  color: white;
+}

app/assets/stylesheets/admin/dashboard-single-ent.css.sass

@@ -1,33 +0,0 @@
-@import ../darkswarm/mixins
-
-.alert-box
-  position: relative
-  display: block
-  background-color: #eff5dc
-  border: 1px solid #9fc820
-  color: #666
-  margin-top: 1em
-  margin-bottom: 1em
-  @include border-radius(3px)
-  transition: opacity 300ms ease-out
-  padding: 0.77778em 1.33333em 0.77778em 0.77778em
-  a.close
-    position: absolute
-    right: 5px
-    top: 0px
-    font-size: 1.5em
-
-
-.dashboard_item.single-ent
-  .header
-    padding: 0.77778em 1.33333em 0.77778em 0.77778em
-    height: auto !important
-  .list
-    .button.bottom
-      width: 100%
-
-.button.big
-  width: 100%
-  font-size: 1rem
-  @include border-radius(25px)
-  padding: 15px

app/assets/stylesheets/admin/dashboard-single-ent.css.scss

@@ -0,0 +1,45 @@
+@import "../darkswarm/mixins";
+
+.alert-box {
+  position: relative;
+  display: block;
+  background-color: #eff5dc;
+  border: 1px solid #9fc820;
+  color: #666;
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  @include border-radius(3px);
+
+  transition: opacity 300ms ease-out;
+  padding: 0.77778em 1.33333em 0.77778em 0.77778em;
+
+  a.close {
+    position: absolute;
+    right: 5px;
+    top: 0px;
+    font-size: 1.5em;
+  }
+}
+
+.dashboard_item.single-ent {
+  .header {
+    padding: 0.77778em 1.33333em 0.77778em 0.77778em;
+    height: auto !important;
+  }
+
+  .list {
+    .button.bottom {
+      width: 100%;
+    }
+  }
+}
+
+.button.big {
+  width: 100%;
+  font-size: 1rem;
+
+  @include border-radius(25px);
+
+  padding: 15px;
+}

app/assets/stylesheets/admin/dashboard_item.css.sass

@@ -1,159 +0,0 @@
-div.dashboard_item
-  margin-bottom: 30px
-
-  .centered
-    text-align: center
-
-  .text-icon
-    margin-top: 8px
-    display: block
-    font-size: 16px
-    font-weight: bold
-    color: #fff
-    padding: 0px 6px
-    border-radius: 10px
-    &.green
-      background-color: #9fc820
-    &.red
-      background-color: #DA5354
-    &.orange
-      background-color: #DA7F52
-
-  div.header
-    height: 50px
-    border-radius: 6px 6px 0px 0px
-    border: 1px solid #5498da
-    position: relative
-
-    a[ofn-with-tip]
-      position: absolute
-      right: 5px
-      bottom: 5px
-
-    &.red
-      border-color: #DA5354
-      border-width: 3px
-      h3
-        color: #DA5354
-
-    &.orange
-      border-color: #DA7F52
-      border-width: 3px
-      h3
-        color: #DA7F52
-
-    h3.alpha
-      height: 100%
-      padding: 10px 5px 0px 3%
-
-    a
-      border-radius: 0px 4px 0px 0px
-      margin-left: 8px
-      height: 100%
-      padding: 15px 2px 0px 2px
-
-  .tabs
-    height: 30px
-    border: solid #5498da
-    border-width: 0px 0px 1px 0px
-    margin-top: 3px
-    div.dashboard_tab
-      cursor: pointer
-      height: 30px
-      color: #fff
-      background-color: #5498da
-      padding: 5px 5px 0px 5px
-      text-align: center
-      font-weight: bold
-      border: solid #5498da
-      border-width: 1px 1px 0px 1px
-      &:hover
-        background-color: #9fc820
-      &.selected
-        color: #5498da
-        background-color: #fff
-
-  .list
-    max-height: 250px
-    overflow-y: auto
-    overflow-x: hidden
-
-  .list-title
-    border: solid #5498da
-    border-width: 0px 1px 0px 1px
-    span
-      font-size: 105%
-      padding: 10px 0px
-      font-weight: bold
-    span.alpha
-      padding: 10px 2px 10px 5%
-
-  .list-item
-    border: solid #5498da
-    border-width: 0px 1px 0px 1px
-    height: 38px
-    span.alpha
-      font-weight: bold
-      margin-left: -3px
-      padding: 10px 2px 0px 5%
-    span.omega
-      padding-right: 13px
-      margin-right: -3px
-      text-align: right
-    .icon-arrow-right
-      padding-top: 6px
-      font-size: 20px
-    .icon-warning-sign
-      color: #DA7F52
-      font-size: 30px
-    .icon-remove-sign
-      color: #DA5354
-      font-size: 30px
-    .icon-ok-sign
-      color: #9fc820
-      font-size: 30px
-    &.orange
-      color: #DA7F52
-      border: solid #DA7F52
-    &.red
-      color: #DA5354
-      border: solid #DA5354
-    &.orange, &.red
-      border-width: 0px 3px 0px 3px
-    &.even
-      background-color: #fff
-    &.odd
-      background-color: #eff5fc
-    &.even, &.odd
-      &:hover
-        color: #ffffff
-        background-color: #9fc820
-        .icon-arrow-right
-          color: #fff
-        .icon-remove-sign
-          color: #fff
-        .icon-warning-sign
-          color: #fff
-        .icon-ok-sign
-          color: #fff
-        .text-icon
-          &.green
-            color: #9fc820
-            background-color: #fff
-
-  a.button
-    color: #fff
-    font-size: 110%
-    font-weight: bold
-    text-align: center
-    &.orange
-      background-color: #DA7F52
-    &.blue
-      background-color: #5498da
-    &.red
-      background-color: #DA5354
-    &:hover
-      background-color: #9fc820
-    &.bottom
-      border-radius: 0px 0px 6px 6px
-      padding: 15px 15px

app/assets/stylesheets/admin/dashboard_item.css.scss

@@ -0,0 +1,239 @@
+div.dashboard_item {
+  margin-bottom: 30px;
+
+  .centered {
+    text-align: center;
+  }
+
+  .text-icon {
+    margin-top: 8px;
+    display: block;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    padding: 0px 6px;
+    border-radius: 10px;
+
+    &.green {
+      background-color: #9fc820;
+    }
+
+    &.red {
+      background-color: #DA5354;
+    }
+
+    &.orange {
+      background-color: #DA7F52;
+    }
+  }
+
+  div.header {
+    height: 50px;
+    border-radius: 6px 6px 0px 0px;
+    border: 1px solid #5498da;
+    position: relative;
+
+    a[ofn-with-tip] {
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+    }
+
+    &.red {
+      border-color: #DA5354;
+      border-width: 3px;
+
+      h3 {
+        color: #DA5354;
+      }
+    }
+
+    &.orange {
+      border-color: #DA7F52;
+      border-width: 3px;
+
+      h3 {
+        color: #DA7F52;
+      }
+    }
+
+    h3.alpha {
+      height: 100%;
+      padding: 10px 5px 0px 3%;
+    }
+
+    a {
+      border-radius: 0px 4px 0px 0px;
+      margin-left: 8px;
+      height: 100%;
+      padding: 15px 2px 0px 2px;
+    }
+  }
+
+  .tabs {
+    height: 30px;
+    border: solid #5498da;
+    border-width: 0px 0px 1px 0px;
+    margin-top: 3px;
+
+    div.dashboard_tab {
+      cursor: pointer;
+      height: 30px;
+      color: #fff;
+      background-color: #5498da;
+      padding: 5px 5px 0px 5px;
+      text-align: center;
+      font-weight: bold;
+      border: solid #5498da;
+      border-width: 1px 1px 0px 1px;
+
+      &:hover {
+        background-color: #9fc820;
+      }
+
+      &.selected {
+        color: #5498da;
+        background-color: #fff;
+      }
+    }
+  }
+
+  .list {
+    max-height: 250px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .list-title {
+    border: solid #5498da;
+    border-width: 0px 1px 0px 1px;
+
+    span {
+      font-size: 105%;
+      padding: 10px 0px;
+      font-weight: bold;
+    }
+
+    span.alpha {
+      padding: 10px 2px 10px 5%;
+    }
+  }
+
+  .list-item {
+    border: solid #5498da;
+    border-width: 0px 1px 0px 1px;
+    height: 38px;
+
+    span.alpha {
+      font-weight: bold;
+      margin-left: -3px;
+      padding: 10px 2px 0px 5%;
+    }
+
+    span.omega {
+      padding-right: 13px;
+      margin-right: -3px;
+      text-align: right;
+    }
+
+    .icon-arrow-right {
+      padding-top: 6px;
+      font-size: 20px;
+    }
+
+    .icon-warning-sign {
+      color: #DA7F52;
+      font-size: 30px;
+    }
+
+    .icon-remove-sign {
+      color: #DA5354;
+      font-size: 30px;
+    }
+
+    .icon-ok-sign {
+      color: #9fc820;
+      font-size: 30px;
+    }
+
+    &.orange {
+      color: #DA7F52;
+      border: solid #DA7F52;
+    }
+
+    &.red {
+      color: #DA5354;
+      border: solid #DA5354;
+    }
+
+    &.orange, &.red {
+      border-width: 0px 3px 0px 3px;
+    }
+
+    &.even {
+      background-color: #fff;
+    }
+
+    &.odd {
+      background-color: #eff5fc;
+    }
+
+    &.even, &.odd {
+      &:hover {
+        color: #ffffff;
+        background-color: #9fc820;
+
+        .icon-arrow-right {
+          color: #fff;
+        }
+
+        .icon-remove-sign {
+          color: #fff;
+        }
+
+        .icon-warning-sign {
+          color: #fff;
+        }
+
+        .icon-ok-sign {
+          color: #fff;
+        }
+
+        .text-icon {
+          &.green {
+            color: #9fc820;
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  a.button {
+    color: #fff;
+    font-size: 110%;
+    font-weight: bold;
+    text-align: center;
+
+    &.orange {
+      background-color: #DA7F52;
+    }
+
+    &.blue {
+      background-color: #5498da;
+    }
+
+    &.red {
+      background-color: #DA5354;
+    }
+
+    &:hover {
+      background-color: #9fc820;
+    }
+
+    &.bottom {
+      border-radius: 0px 0px 6px 6px;
+      padding: 15px 15px;
+    }
+  }
+}

app/assets/stylesheets/admin/enterprise_index_panels.css.scss

@@ -111,3 +111,27 @@
     }
   }
 }
+
+tags-input .tags li.tag-item  {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  margin: 2px 0 2px 3px;
+  background-image: none;
+  background-color: #5fa5e8;
+  border: none;
+  box-shadow: none;
+  color: white !important;
+  font-size: 85%;
+  height: 25px;
+}
+
+tags-input .tags .tag-item .remove-button {
+  color: white;
+}
+
+table th.actions .no-text[class*="icon-"], table td.actions .no-text[class*="icon-"] {
+  cursor: pointer;
+}

app/assets/stylesheets/admin/openfoodnetwork.css.scss

@@ -200,6 +200,13 @@ table#listing_enterprise_groups {
 
 // textAngular wysiwyg
 text-angular {
+  .ta-toolbar {
+    border: 1px solid #cdd9e4;
+    padding: 0.4em;
+    margin-bottom: -1px;
+    background-color: #f1f1f1;
+    border-radius: 0.25em 0.25em 0 0;
+  }
   .ta-scroll-window > .ta-bind {
     max-height: 400px;
     min-height: 100px;
@@ -210,12 +217,18 @@ text-angular {
   }
   .ta-scroll-window.form-control {
     min-height: 100px;
+    box-shadow: none !important;
   }
   .btn-group {
     display: inline;
     margin-right: 8px;
     button {
       padding: 5px 10px;
+      margin-right: 0.25em;
+    }
+    button.active:not(:hover) {
+      box-shadow: 0 0 0.7em rgba(0,0,0,0.3) inset;
+      background-color: #4583bf;
     }
   }
 }

app/assets/stylesheets/admin/product_import.css.scss

@@ -0,0 +1,225 @@
+div.panel-section {
+
+  .neutral {
+    color: #bfbfbf;
+  }
+  .warning {
+    color: #da5354;
+  }
+  .success {
+    color: #86d83a;
+  }
+  .info {
+    color: #68b7c0;
+  }
+
+  div.panel-header {
+    width: 100%;
+    //font-size: 1.5em;
+    clear: both;
+    //border: 1px solid #ccc;
+    float: left;
+    padding: 0.5em;
+
+    div {
+      font-size: 1.25em;
+      float: left;
+    }
+
+    div.header-caret {
+      width: 2em;
+      text-align: center;
+      min-height: 0.1em; //Empty div fix
+    }
+
+    div.header-icon {
+      width: 2.5em;
+      text-align: center;
+      padding-top: 0.18em;
+
+      i {
+        font-size: 1.5em;
+        line-height: 0.9em;
+      }
+    }
+
+    div.header-count {
+      min-width: 2em;
+      text-align: right;
+      padding-right: 0.5em;
+    }
+
+    div.header-description {
+      width: auto;
+    }
+
+  }
+
+  div.panel-header:hover {
+    cursor: pointer;
+    background-color: #f7f7f7;
+  }
+
+  div.panel-header.active {
+    background-color: #efefef;
+    text-shadow: 1px 1px 0px rgba(255,255,255,0.75);
+  }
+
+  div.panel-content {
+    width: 100%;
+    clear: both;
+    //border: 1px solid #ccc;
+    margin-bottom: 0.5em;
+    background-color: #f9f9f9;
+    padding: 1.5em;
+
+    div.table-wrap {
+      width: 100%;
+      overflow: auto;
+      border-right: 1px solid #ceede3;
+      max-height: 23em;
+    }
+
+    table {
+      background-color: white;
+      margin-bottom: 0;
+      td, th {
+        white-space: nowrap;
+      }
+      tr.error {
+        //background-color: #ffe6e4;
+        //color: #ee4728;
+        color: #c84C4c;
+      }
+      tr:hover td.invalid {
+        background-color: #ed5135;
+      }
+      tr i {
+        display: block;
+        margin-bottom: -0.2em;
+        font-size: 1.4em !important;
+      }
+      td.invalid {
+        background-color: #f05c51;
+        box-shadow: inset 0px 0px 1px red;
+        color: white;
+      }
+    }
+
+    div.import-errors {
+      margin-bottom: 0.85em;
+
+      p.line {
+        font-size: 1.15em;
+        margin-bottom: 0.2em;
+        color: #577084;
+      }
+      p.error {
+        color: #cb1b1b;
+        margin-bottom: 0.2em;
+      }
+    }
+
+  }
+
+}
+
+br.panels.clearfix {
+  clear: both;
+}
+
+table.import-settings {
+  background-color: transparent !important;
+  width: auto;
+
+  //select {
+  //  width: 100%;
+  //}
+  tr {
+
+  }
+  tbody tr:hover td {
+    background-color: #f3f3f3;
+  }
+  td {
+    border: 0;
+    border-bottom: 1px solid #eee;
+    text-align: left;
+
+    input {
+      width: 15em;
+    }
+    input[type="checkbox"] {
+      width: auto;
+    }
+
+  }
+  td.description {
+    font-weight: bold;
+    padding-right: 2.5em;
+  }
+  tr:first-child td {
+    //border-top: 1px solid #eee;
+    border-top: 0;
+  }
+  tr:last-child td {
+    //border-top: 1px solid #eee;
+    border-bottom: 0;
+  }
+
+}
+
+.panel-section.import-settings {
+
+  .header-description {
+    padding-left: 1em;
+  }
+
+  span.header-error {
+    font-size: 0.85em;
+    color: #da5354;
+  }
+
+  .select2-search {
+    display: none;
+  }
+
+  .select2-results {
+    margin: 0;
+  }
+}
+
+
+
+.post-save-results {
+  p {
+    font-size: 1.25em;
+    margin-bottom: 0.5em;
+
+    strong {
+      margin-right: 0.2em;
+      min-width: 1.8em;
+      display: inline-block;
+      text-align: right;
+    }
+
+    i {
+      font-size: 1.4em;
+      vertical-align: middle;
+      position: relative;
+    }
+
+    i.fa-check-circle {
+      color: #86d83a;
+    }
+    i.fa-info-circle {
+      color: #68b7c0;
+    }
+  }
+
+  p.save-error {
+    color: #ee4728;
+    font-size: 1.05em;
+    margin-top: 0.4em;
+  }
+}

app/assets/stylesheets/admin/relationships.css.sass

@@ -1,23 +0,0 @@
-// TODO: Provide -moz- and -o- directives
-@-webkit-keyframes alert-flash
-  0%
-    background-color: #f9f1ae
-
-  100%
-    background-color: #fff
-
-
-table#enterprise-relationships, table#enterprise-roles
-  ul
-    list-style-type: none
-
-  th.actions, td.actions
-    width: 16%
-    .errors
-      color: #f00
-
-  tr.ng-enter
-    -webkit-animation-name: alert-flash
-    -webkit-animation-duration: 1200ms
-    -webkit-animation-iteration-count: 1
-    -webkit-animation-timing-function: ease-in-out

app/assets/stylesheets/admin/relationships.css.scss

@@ -0,0 +1,31 @@
+// TODO: Provide -moz- and -o- directives
+@-webkit-keyframes alert-flash {
+  0% {
+    background-color: #f9f1ae;
+  }
+
+  100% {
+    background-color: #fff;
+  }
+}
+
+table#enterprise-relationships, table#enterprise-roles {
+  ul {
+    list-style-type: none;
+  }
+
+  th.actions, td.actions {
+    width: 16%;
+
+    .errors {
+      color: #f00;
+    }
+  }
+
+  tr.ng-enter {
+    -webkit-animation-name: alert-flash;
+    -webkit-animation-duration: 1200ms;
+    -webkit-animation-iteration-count: 1;
+    -webkit-animation-timing-function: ease-in-out;
+  }
+}

app/assets/stylesheets/admin/side_menu.css.sass

@@ -1,18 +0,0 @@
-.side_menu
-  border-right: 2px solid #f6f6f6
-  border-top: 2px solid #f6f6f6
-  .menu_item
-    display: block
-    padding: 8px 15px
-    font-size: 120%
-    cursor: pointer
-    text-transform: uppercase
-    &:nth-child(odd)
-      background-color: #ebf3fb
-    &:nth-child(even)
-      background-color: #ffffff
-    &:hover
-      background-color: #eaf0f5
-    &.selected
-      background-color: #5498da
-      color: #ffffff

app/assets/stylesheets/admin/side_menu.css.scss

@@ -0,0 +1,29 @@
+.side_menu {
+  border-right: 2px solid #f6f6f6;
+  border-top: 2px solid #f6f6f6;
+
+  .menu_item {
+    display: block;
+    padding: 8px 15px;
+    font-size: 120%;
+    cursor: pointer;
+    text-transform: uppercase;
+
+    &:nth-child(odd) {
+      background-color: #ebf3fb;
+    }
+
+    &:nth-child(even) {
+      background-color: #ffffff;
+    }
+
+    &:hover {
+      background-color: #eaf0f5;
+    }
+
+    &.selected {
+      background-color: #5498da;
+      color: #ffffff;
+    }
+  }
+}

app/assets/stylesheets/admin/sidebar-item.css.sass

@@ -1,77 +0,0 @@
-div.sidebar_item
-  margin-bottom: 30px
-
-  .centered
-    text-align: center
-
-  div.header
-    font-size: 105%
-    color: #fff
-    padding: 10px 0px
-    position: relative
-    &.blue
-      background-color: #5498da
-    &.red
-      background-color: #DA5354
-
-  .list
-    max-height: 400px
-    overflow-y: auto
-    overflow-x: hidden
-    &.red
-      color: #DA5354
-      .list-item
-        border: solid #DA5354
-        border-width: 0px 3px 0px 3px
-        a.alpha, span.alpha
-          margin-left: -3px
-        &.odd
-          background-color: #fcf6ef
-          &:hover
-            background-color: #9fc820
-      a
-        color: #DA5354
-
-  .list-item
-    .icon-arrow-right
-      padding-top: 6px
-      font-size: 20px
-    border: solid #5498da
-    border-width: 0px 1px 0px 1px
-    a.alpha, span.alpha
-      font-weight: bold
-      margin-left: -1px
-      padding: 10px 2px 10px 5%
-      overflow: hidden
-      text-overflow: ellipsis
-    span.omega
-      padding: 8px 18px 8px 0px
-      margin-right: -3px
-      text-align: right
-    .icon-remove-sign
-      color: #DA5354
-      font-size: 18px
-    &.even
-      background-color: #fff
-    &.odd
-      background-color: #eff5fc
-    &.even, &.odd
-      &:hover
-        color: #ffffff
-        background-color: #9fc820
-        a
-          color: #ffffff
-
-  a.button
-    color: #fff
-    padding: 15px 15px
-    font-weight: bold
-    text-align: center
-    border-radius: 0px
-    &.blue
-      background-color: #5498da
-    &.red
-      background-color: #DA5354
-    &:hover
-      background-color: #9fc820
-      

app/assets/stylesheets/admin/sidebar-item.css.scss

@@ -0,0 +1,121 @@
+div.sidebar_item {
+  margin-bottom: 30px;
+
+  .centered {
+    text-align: center;
+  }
+
+  div.header {
+    font-size: 105%;
+    color: #fff;
+    padding: 10px 0px;
+    position: relative;
+
+    &.blue {
+      background-color: #5498da;
+    }
+
+    &.red {
+      background-color: #DA5354;
+    }
+  }
+
+  .list {
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &.red {
+      color: #DA5354;
+
+      .list-item {
+        border: solid #DA5354;
+        border-width: 0px 3px 0px 3px;
+
+        a.alpha, span.alpha {
+          margin-left: -3px;
+        }
+
+        &.odd {
+          background-color: #fcf6ef;
+
+          &:hover {
+            background-color: #9fc820;
+          }
+        }
+      }
+
+      a {
+        color: #DA5354;
+      }
+    }
+  }
+
+  .list-item {
+    .icon-arrow-right {
+      padding-top: 6px;
+      font-size: 20px;
+    }
+
+    border: solid #5498da;
+    border-width: 0px 1px 0px 1px;
+
+    a.alpha, span.alpha {
+      font-weight: bold;
+      margin-left: -1px;
+      padding: 10px 2px 10px 5%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    span.omega {
+      padding: 8px 18px 8px 0px;
+      margin-right: -3px;
+      text-align: right;
+    }
+
+    .icon-remove-sign {
+      color: #DA5354;
+      font-size: 18px;
+    }
+
+    &.even {
+      background-color: #fff;
+    }
+
+    &.odd {
+      background-color: #eff5fc;
+    }
+
+    &.even, &.odd {
+      &:hover {
+        color: #ffffff;
+        background-color: #9fc820;
+
+        a {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  a.button {
+    color: #fff;
+    padding: 15px 15px;
+    font-weight: bold;
+    text-align: center;
+    border-radius: 0px;
+
+    &.blue {
+      background-color: #5498da;
+    }
+
+    &.red {
+      background-color: #DA5354;
+    }
+
+    &:hover {
+      background-color: #9fc820;
+    }
+  }
+}

app/assets/stylesheets/admin/variant_overrides.css.sass

@@ -1,6 +0,0 @@
-.variant-override-unit
-  float: right
-  font-style: italic
-
-button.hide:hover
-  background-color: #DA5354

app/assets/stylesheets/admin/variant_overrides.css.scss

@@ -0,0 +1,8 @@
+.variant-override-unit {
+  float: right;
+  font-style: italic;
+}
+
+button.hide:hover {
+  background-color: #DA5354;
+}

app/assets/stylesheets/admin/welcome.css.sass

@@ -1,16 +0,0 @@
-@import ../darkswarm/mixins
-
-#welcome_page
-  header
-    text-align: center
-    padding: 4em 2em
-    @include fullbg
-    background-image: url('/assets/home/tagline-bg.jpg')
-    background-repeat: no-repeat
-    background-position: center center
-    margin-bottom: 2em
-    p
-      text-transform: uppercase
-      font-weight: 300
-    &, & *
-      color: white

app/assets/stylesheets/admin/welcome.css.scss

@@ -0,0 +1,24 @@
+@import "../darkswarm/mixins";
+
+#welcome_page {
+  header {
+    text-align: center;
+    padding: 4em 2em;
+
+    @include fullbg;
+
+    background-image: url("/assets/home/tagline-bg.jpg");
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin-bottom: 2em;
+
+    p {
+      text-transform: uppercase;
+      font-weight: 300;
+    }
+
+    &, & * {
+      color: white;
+    }
+  }
+}

app/assets/stylesheets/darkswarm/_shop-filters.css.sass

@@ -1,125 +0,0 @@
-@import mixins
-@import branding
-@import big-input
-@import animations
-
-@mixin filter-selector($base-clr, $border-clr, $hover-clr)
-  &.inline-block, ul.inline-block
-    display: inline-block
-
-  li
-    display: inline-block
-    @include border-radius(0)
-    padding: 0
-    margin: 0 0 0.25rem 0.25rem
-    &:hover, &:focus
-      background: transparent
-    &.active
-      box-shadow: none
-
-    a, a.button
-      display: block
-      padding-top: 0.5rem
-      @include border-radius(0.5em)
-      border: 1px solid $border-clr
-      padding: 0.5em 0.625em
-      font-size: 0.875em
-      color: $base-clr
-      font-size: 0.75em
-      background: white
-      margin: 0
-      i
-        padding-left: 0.25rem
-
-      render-svg
-        &, & svg
-          width: 1rem
-          height: 1rem
-          float: left
-          padding-right: 0.25rem
-          path
-            @include csstrans
-            fill: $base-clr
-
-      &:hover, &:focus
-        border-color: $hover-clr
-        color: $hover-clr
-        render-svg
-          svg
-            path
-              fill: $hover-clr
-
-      &.disabled
-        opacity: 0.6
-
-        &:hover, &:focus
-          border-color: $border-clr
-          color:  $base-clr
-          render-svg
-            svg
-              path
-                fill: $base-clr
-
-
-      &.active, &.active:hover, &.active:focus
-        border: 1px solid $base-clr
-        background: $base-clr
-        color: white
-        render-svg
-          svg
-            path
-              fill: white
-
-
-// Alert when search, taxon, filter is triggered
-
-.alert-box.search-alert
-  background-color: $clr-yellow-light
-  border-color: $clr-yellow-light
-  color: #777
-  font-size: 0.75rem
-  padding: 0.5rem 0.75rem
-
-  span.applied-properties
-    color: #333
-
-  span.applied-taxons
-    color: $clr-blue
-
-  span.applied-search
-    color: $clr-brick
-
-  span.filter-label
-    opacity: 0.75
-
-// singleLineSelectors directive provides a drop-down that can overlap
-// content. Ensure that the dropdown appears above the content.
-.filter-row
-  position: relative
-  z-index: 90
-
-.filter-shopfront
-  &.taxon-selectors, &.property-selectors
-    background: transparent
-
-    single-line-selectors
-      overflow-x: hidden
-      white-space: nowrap
-
-      .f-dropdown
-        overflow-x: auto
-        white-space: normal
-
-    ul
-      margin: 0
-      display: inline-block
-    ul, ul li
-      list-style: none
-
-  // Shopfront taxons
-  &.taxon-selectors
-    @include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright)
-
-  // Shopfront properties
-  &.property-selectors
-    @include filter-selector(#666, #ccc, #777)

app/assets/stylesheets/darkswarm/_shop-filters.css.scss

@@ -0,0 +1,173 @@
+@import "mixins";
+@import "branding";
+@import "big-input";
+@import "animations";
+
+@mixin filter-selector($base-clr, $border-clr, $hover-clr) {
+  &.inline-block, ul.inline-block {
+    display: inline-block;
+  }
+
+  li {
+    display: inline-block;
+
+    @include border-radius(0);
+
+    padding: 0;
+    margin: 0 0 0.25rem 0.25rem;
+
+    &:hover, &:focus {
+      background: transparent;
+    }
+
+    &.active {
+      box-shadow: none;
+    }
+
+    a, a.button {
+      display: block;
+      padding-top: 0.5rem;
+
+      @include border-radius(0.5em);
+
+      border: 1px solid $border-clr;
+      padding: 0.5em 0.625em;
+      font-size: 0.875em;
+      color: $base-clr;
+      font-size: 0.75em;
+      background: white;
+      margin: 0;
+
+      i {
+        padding-left: 0.25rem;
+      }
+
+      render-svg {
+        &, & svg {
+          width: 1rem;
+          height: 1rem;
+          float: left;
+          padding-right: 0.25rem;
+
+          path {
+            @include csstrans;
+
+            fill: $base-clr;
+          }
+        }
+      }
+
+      &:hover, &:focus {
+        border-color: $hover-clr;
+        color: $hover-clr;
+
+        render-svg {
+          svg {
+            path {
+              fill: $hover-clr;
+            }
+          }
+        }
+      }
+
+      &.disabled {
+        opacity: 0.6;
+
+        &:hover, &:focus {
+          border-color: $border-clr;
+          color: $base-clr;
+
+          render-svg {
+            svg {
+              path {
+                fill: $base-clr;
+              }
+            }
+          }
+        }
+      }
+
+      &.active, &.active:hover, &.active:focus {
+        border: 1px solid $base-clr;
+        background: $base-clr;
+        color: white;
+
+        render-svg {
+          svg {
+            path {
+              fill: white;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Alert when search, taxon, filter is triggered
+
+.alert-box.search-alert {
+  background-color: $clr-yellow-light;
+  border-color: $clr-yellow-light;
+  color: #777;
+  font-size: 0.75rem;
+  padding: 0.5rem 0.75rem;
+
+  span.applied-properties {
+    color: #333;
+  }
+
+  span.applied-taxons {
+    color: $clr-blue;
+  }
+
+  span.applied-search {
+    color: $clr-brick;
+  }
+
+  span.filter-label {
+    opacity: 0.75;
+  }
+}
+
+// singleLineSelectors directive provides a drop-down that can overlap
+// content. Ensure that the dropdown appears above the content.
+.filter-row {
+  position: relative;
+  z-index: 90;
+}
+
+.filter-shopfront {
+  &.taxon-selectors, &.property-selectors {
+    background: transparent;
+
+    single-line-selectors {
+      overflow-x: hidden;
+      white-space: nowrap;
+
+      .f-dropdown {
+        overflow-x: auto;
+        white-space: normal;
+      }
+    }
+
+    ul {
+      margin: 0;
+      display: inline-block;
+    }
+
+    ul, ul li {
+      list-style: none;
+    }
+  }
+
+  // Shopfront taxons
+  &.taxon-selectors {
+    @include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright);
+  }
+
+  // Shopfront properties
+  &.property-selectors {
+    @include filter-selector(#666, #ccc, #777);
+  }
+}

app/assets/stylesheets/darkswarm/_shop-inputs.css.sass

@@ -1,85 +0,0 @@
-@import mixins
-@import variables
-@import branding
-@import big-input
-
-
-.darkswarm
-  // #search
-  @include placeholder(rgba(0,0,0,0.4), #777)
-  
-  input#search
-    @include medium-input(rgba(0,0,0,0.3), #777, $clr-brick)
-
-  // ordering
-  product
-    
-    input
-      @include border-radius(0) 
-      @include csstrans
-      margin: 0
-      width: 10rem
-      display: inline
-      @include box-shadow(none)
-      border-color: #b3b3b3
-      text-align: right
-      
-      @media all and (max-width: 1024px)
-        width: 8rem
-
-      @media all and (max-width: 768px)
-        width: 7rem
-
-      @media all and (max-width: 640px) 
-        float: left !important
-        font-size: 0.75rem
-        padding-left: 0.25rem
-        padding-right: 0.25rem
-     
-      @media all and (max-width: 480px) 
-        width: 5.8rem
-
-      &:hover
-        @include box-shadow(none)
-        border-color: #888
-        background-color: #fafafa
-
-      &:active, &:focus, &.active
-        @include box-shadow(none)
-        background-color: #f9f4b9
-        border-color: #666
-
-
-    // BULK
-
-    input.bulk
-      width: 5rem
-
-      @media all and (max-width: 1024px)
-        width: 4rem
-
-      @media all and (max-width: 768px)
-        width: 3.5rem
-
-      @media all and (max-width: 480px) 
-        width: 2.8rem
-
-    input.bulk.first
-      border-right: 0
-
-    input.bulk.second
-      border-left: 0
-      
-    .bulk-input-container
-      float: right
-
-      @media all and (max-width: 640px) 
-        float: left !important
-
-      .bulk-input
-        float: left
-
-      
-
-
-

app/assets/stylesheets/darkswarm/_shop-inputs.css.scss

@@ -0,0 +1,102 @@
+@import "mixins";
+@import "variables";
+@import "branding";
+@import "big-input";
+
+.darkswarm {
+  // #search
+  @include placeholder(rgba(0, 0, 0, 0.4), #777);
+
+  input#search {
+    @include medium-input(rgba(0, 0, 0, 0.3), #777, $clr-brick);
+  }
+
+  // ordering
+  product {
+    input {
+      @include border-radius(0);
+
+      @include csstrans;
+
+      margin: 0;
+      width: 10rem;
+      display: inline;
+
+      @include box-shadow(none);
+
+      border-color: #b3b3b3;
+      text-align: right;
+
+      @media all and (max-width: 1024px) {
+        width: 8rem;
+      }
+
+      @media all and (max-width: 768px) {
+        width: 7rem;
+      }
+
+      @media all and (max-width: 640px) {
+        float: left !important;
+        font-size: 0.75rem;
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
+      }
+
+      @media all and (max-width: 480px) {
+        width: 5.8rem;
+      }
+
+      &:hover {
+        @include box-shadow(none);
+
+        border-color: #888;
+        background-color: #fafafa;
+      }
+
+      &:active, &:focus, &.active {
+        @include box-shadow(none);
+
+        background-color: #f9f4b9;
+        border-color: #666;
+      }
+    }
+
+    // BULK
+
+    input.bulk {
+      width: 5rem;
+
+      @media all and (max-width: 1024px) {
+        width: 4rem;
+      }
+
+      @media all and (max-width: 768px) {
+        width: 3.5rem;
+      }
+
+      @media all and (max-width: 480px) {
+        width: 2.8rem;
+      }
+    }
+
+    input.bulk.first {
+      border-right: 0;
+    }
+
+    input.bulk.second {
+      border-left: 0;
+    }
+
+    .bulk-input-container {
+      float: right;
+
+      @media all and (max-width: 640px) {
+        float: left !important;
+      }
+
+      .bulk-input {
+        float: left;
+      }
+    }
+  }
+}

app/assets/stylesheets/darkswarm/_shop-modals.css.sass

@@ -1,6 +0,0 @@
-
-.product-header
-	h1, h2, h3, h4, h5, h6
-		margin: 0
-	hr
-		margin: 0.5em 0

app/assets/stylesheets/darkswarm/_shop-modals.css.scss

@@ -0,0 +1,9 @@
+.product-header {
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+  }
+
+  hr {
+    margin: 0.5em 0;
+  }
+}

app/assets/stylesheets/darkswarm/_shop-navigation.css.sass

@@ -33,16 +33,18 @@
         
 
       ordercycle
-        p.text-right
+        text-align: right
+        p
           max-width: 400px
         @media all and (max-width: 640px)
           float: left
           clear: left
+          text-align: left
           padding: 12px 10px
           width: 100%
           margin-top: 10px
           background: #e5e5e5
-          p.text-right
+          p
             max-width: 100%
         float: right
         form.custom 

app/assets/stylesheets/darkswarm/_shop-popovers.css.sass

@@ -1,112 +0,0 @@
-@import mixins
-@import branding
-
-// .darkswarm
-//   product
-
-ordercycle
-  .joyride-tip-guide 
-    background-color: $clr-brick
-    .joyride-nub.right
-      border-color: $clr-brick !important
-      border-top-color: transparent !important
-      border-right-color: transparent !important
-      border-bottom-color: transparent !important
-    p
-      margin: 0
-      font-weight: 700
-
-// Pop over
-// Foundation overrides
-.joyride-tip-guide.price_breakdown
-  // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
-  background-color: #999
-  color: #1f1f1f
-  margin-left: -8px
-  @include box-shadow(0 1px 2px 0 rgba(0,0,0,0.7))
-
-  .joyride-content-wrapper
-    padding: 1.125rem 1.25rem 1.5rem
-    padding: 1rem
-    margin: 1%
-    width: 98%
-    background-color: white
-
-  h1, h2, h3, h4, h5, h6
-    color: #1f1f1f
-
-  .joyride-nub.right
-    top: 38px
-    border-color: #999 !important
-    border-top-color: transparent !important
-    border-right-color: transparent !important
-    border-bottom-color: transparent !important
-
-  .progress
-    background-color: #13bf85
-    padding: 0
-    border: none
-    color: white
-    font-size: 0.75rem
-    font-style: oblique
-    line-height: 1
-    height: auto
-    .right
-      padding: 0.5rem 0.25rem 0 0 
-    .meter
-      background-color: #0b8c61
-      padding: 0.5rem 0.25rem
-      border-right: 1px solid #539f92
-  
-  .expanded 
-    ul, li
-      list-style: none
-      margin: 0
-      font-size: 0.875rem
-    li
-      background-color: #13bf85
-      padding: 0 0.25rem
-      margin-bottom: 2px
-      color: white
-    li.cost
-      background-color: #0b8c61
-    li:last-child
-      margin-bottom: 0.75rem
-
-
-button.graph-button
-  // z-index: 9999999
-  border: 1px solid transparent
-  padding: 0
-  margin: 0
-  display: inline
-  background-color: rgba(255,255,255,0.5)
-  padding: 4px 
-  @include box-shadow(none)
-  @include border-radius(999rem)
-  &:before
-    @include icon-font
-    content: '\e639'
-    color: #999
-  &:focus
-    border: 1px solid #e0e0e0
-    background-color: rgba(255,255,255,1)
-    &:before
-      color: #666
-  &:hover, &:active
-    background-color: rgba(255,255,255,1)
-    border: 1px solid transparent
-    &:before
-      color: $clr-brick-bright
-  @media all and (max-width: 768px) 
-    // Hide for small
-    display: none
-
-button.graph-button.open
-  border: 1px solid transparent
-  background-color:  $clr-brick-bright
-  &:before
-    content: '\e608'
-    color: white
-
-

app/assets/stylesheets/darkswarm/_shop-popovers.css.scss

@@ -0,0 +1,152 @@
+@import "mixins";
+@import "branding";
+
+// .darkswarm
+//   product
+
+ordercycle {
+  .joyride-tip-guide {
+    background-color: $clr-brick;
+
+    .joyride-nub.right {
+      border-color: $clr-brick !important;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+    }
+
+    p {
+      margin: 0;
+      font-weight: 700;
+    }
+  }
+}
+
+// Pop over
+// Foundation overrides
+.joyride-tip-guide.price_breakdown {
+  // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
+  background-color: #999;
+  color: #1f1f1f;
+  margin-left: -8px;
+
+  @include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.7));
+
+  .joyride-content-wrapper {
+    padding: 1.125rem 1.25rem 1.5rem;
+    padding: 1rem;
+    margin: 1%;
+    width: 98%;
+    background-color: white;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    color: #1f1f1f;
+  }
+
+  .joyride-nub.right {
+    top: 38px;
+    border-color: #999 !important;
+    border-top-color: transparent !important;
+    border-right-color: transparent !important;
+    border-bottom-color: transparent !important;
+  }
+
+  .progress {
+    background-color: #13bf85;
+    padding: 0;
+    border: none;
+    color: white;
+    font-size: 0.75rem;
+    font-style: oblique;
+    line-height: 1;
+    height: auto;
+
+    .right {
+      padding: 0.5rem 0.25rem 0 0;
+    }
+
+    .meter {
+      background-color: #0b8c61;
+      padding: 0.5rem 0.25rem;
+      border-right: 1px solid #539f92;
+    }
+  }
+
+  .expanded {
+    ul, li {
+      list-style: none;
+      margin: 0;
+      font-size: 0.875rem;
+    }
+
+    li {
+      background-color: #13bf85;
+      padding: 0 0.25rem;
+      margin-bottom: 2px;
+      color: white;
+    }
+
+    li.cost {
+      background-color: #0b8c61;
+    }
+
+    li:last-child {
+      margin-bottom: 0.75rem;
+    }
+  }
+}
+
+button.graph-button {
+  // z-index: 9999999
+  border: 1px solid transparent;
+  padding: 0;
+  margin: 0;
+  display: inline;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 4px;
+
+  @include box-shadow(none);
+
+  @include border-radius(999rem);
+
+  &:before {
+    @include icon-font;
+
+    content: "";
+    color: #999;
+  }
+
+  &:focus {
+    border: 1px solid #e0e0e0;
+    background-color: rgba(255, 255, 255, 1);
+
+    &:before {
+      color: #666;
+    }
+  }
+
+  &:hover, &:active {
+    background-color: rgba(255, 255, 255, 1);
+    border: 1px solid transparent;
+
+    &:before {
+      color: $clr-brick-bright;
+    }
+  }
+
+  @media all and (max-width: 768px) {
+    // Hide for small
+    display: none;
+  }
+}
+
+button.graph-button.open {
+  border: 1px solid transparent;
+  background-color: $clr-brick-bright;
+
+  &:before {
+    content: "";
+    color: white;
+  }
+}

app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass

@@ -1,123 +0,0 @@
-@import branding.css.sass
-@import animations.sass
-
-.darkswarm
-  products
-    product
-      // GENERAL LAYOUT
-      .row
-        .columns
-          padding-top: 0em
-          padding-bottom: 0em
-          display: table
-          line-height: 1.1
-          // outline: 1px solid red
-
-          @media all and (max-width: 768px)
-            font-size: 0.875rem
-
-          @media all and (max-width: 640px)
-            font-size: 0.75rem
-
-        .table-cell
-          display: table-cell
-          vertical-align: middle
-          height: 37px
-
-      // ROW VARIANTS
-      .row.variants
-        margin-left: 0
-        margin-right: 0
-        background-color: #ECECEC
-        &:hover, &:focus, &:active
-          background-color: $clr-brick-light
-        &:nth-of-type(even)
-          background-color: #f9f9f9
-          &:hover, &:focus, &:active
-            background-color: $clr-brick-ultra-light
-
-        &.out-of-stock
-          opacity: 0.2
-
-        // Variant name
-        .variant-name
-          padding-left: 7.9375rem
-          @media all and (max-width: 768px)
-            padding-left: 4.9375rem
-
-        .variant-name
-          @media all and (max-width: 640px)
-            background: #333
-            color: white
-            padding-left: 0.9375rem
-            font-weight: bold
-            .table-cell
-              height: 27px
-
-        // Variant unit
-        .variant-unit
-          padding-left: 0rem
-          padding-right: 0rem
-          color: #888
-          font-size: 0.875rem
-          overflow: hidden
-
-          @media all and (max-width: 768px)
-            font-size: 0.75rem
-
-        // Variant price
-        .variant-price
-          padding-left: 0.25rem
-          padding-right: 0.25rem
-          @media all and (max-width: 640px)
-            text-align: right
-
-        // Total price
-        .total-price
-          padding-left: 0rem
-          color: $disabled-med
-          .filled
-            color: $med-drk-grey
-          @media all and (max-width: 640px)
-            background: #777
-            color: $disabled-med
-            .filled
-              color: white
-            .table-cell
-              height: 27px
-
-      // ROW SUMMARY
-      .row.summary
-        margin-left: 0
-        margin-right: 0
-        background: #fff
-
-        .columns
-          padding-top: 1em
-          padding-bottom: 1em
-          line-height: 1
-
-          @media all and (max-width: 768px)
-            padding-top: 0.65rem
-            padding-bottom: 0.65rem
-
-        .summary-header
-          padding-left: 7.9375rem
-          @media all and (max-width: 768px)
-            padding-left: 4.9375rem
-          @media all and (max-width: 640px)
-            padding-left: 0.9375rem
-          small
-            font-size: 80%
-          h3
-            font-size: 1.5rem
-            margin: 0
-          h3 a
-            color: #222
-            i
-              @include csstrans
-              font-size: 0.6em
-            &:hover, &:focus, &:active
-              color: $clr-brick
-              i
-                font-size: 0.8em

app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss

@@ -0,0 +1,182 @@
+@import "branding";
+@import "animations";
+
+.darkswarm {
+  products {
+    product {
+      // GENERAL LAYOUT
+      .row {
+        .columns {
+          padding-top: 0em;
+          padding-bottom: 0em;
+          display: table;
+          line-height: 1.1;
+
+          // outline: 1px solid red
+
+          @media all and (max-width: 768px) {
+            font-size: 0.875rem;
+          }
+
+          @media all and (max-width: 640px) {
+            font-size: 0.75rem;
+          }
+        }
+
+        .table-cell {
+          display: table-cell;
+          vertical-align: middle;
+          height: 37px;
+        }
+      }
+
+      // ROW VARIANTS
+      .row.variants {
+        margin-left: 0;
+        margin-right: 0;
+        background-color: #ECECEC;
+
+        &:hover, &:focus, &:active {
+          background-color: $clr-brick-light;
+        }
+
+        &:nth-of-type(even) {
+          background-color: #f9f9f9;
+
+          &:hover, &:focus, &:active {
+            background-color: $clr-brick-ultra-light;
+          }
+        }
+
+        &.out-of-stock {
+          opacity: 0.2;
+        }
+
+        // Variant name
+        .variant-name {
+          padding-left: 7.9375rem;
+
+          @media all and (max-width: 768px) {
+            padding-left: 4.9375rem;
+          }
+        }
+
+        .variant-name {
+          @media all and (max-width: 640px) {
+            background: #333;
+            color: white;
+            padding-left: 0.9375rem;
+            font-weight: bold;
+
+            .table-cell {
+              height: 27px;
+            }
+          }
+        }
+
+        // Variant unit
+        .variant-unit {
+          padding-left: 0rem;
+          padding-right: 0rem;
+          color: #888;
+          font-size: 0.875rem;
+          overflow: hidden;
+
+          @media all and (max-width: 768px) {
+            font-size: 0.75rem;
+          }
+        }
+
+        // Variant price
+        .variant-price {
+          padding-left: 0.25rem;
+          padding-right: 0.25rem;
+
+          @media all and (max-width: 640px) {
+            text-align: right;
+          }
+        }
+
+        // Total price
+        .total-price {
+          padding-left: 0rem;
+          color: $disabled-med;
+
+          .filled {
+            color: $med-drk-grey;
+          }
+
+          @media all and (max-width: 640px) {
+            background: #777;
+            color: $disabled-med;
+
+            .filled {
+              color: white;
+            }
+
+            .table-cell {
+              height: 27px;
+            }
+          }
+        }
+      }
+
+      // ROW SUMMARY
+      .row.summary {
+        margin-left: 0;
+        margin-right: 0;
+        background: #fff;
+
+        .columns {
+          padding-top: 1em;
+          padding-bottom: 1em;
+          line-height: 1;
+
+          @media all and (max-width: 768px) {
+            padding-top: 0.65rem;
+            padding-bottom: 0.65rem;
+          }
+        }
+
+        .summary-header {
+          padding-left: 7.9375rem;
+
+          @media all and (max-width: 768px) {
+            padding-left: 4.9375rem;
+          }
+
+          @media all and (max-width: 640px) {
+            padding-left: 0.9375rem;
+          }
+
+          small {
+            font-size: 80%;
+          }
+
+          h3 {
+            font-size: 1.5rem;
+            margin: 0;
+          }
+
+          h3 a {
+            color: #222;
+
+            i {
+              @include csstrans;
+
+              font-size: 0.6em;
+            }
+
+            &:hover, &:focus, &:active {
+              color: $clr-brick;
+
+              i {
+                font-size: 0.8em;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass

@@ -1,59 +0,0 @@
-@import branding
-@import animations.sass
-
-.darkswarm
-  products
-    product
-      .product-thumb
-        @include csstrans
-        position: absolute
-        top: 2px
-        left: 0px
-        width: 7rem
-        height: 7rem
-        float: left
-        display: block
-        z-index: 1
-        background-color: white
-        overflow: hidden
-        i
-          @include csstrans
-          transition-delay: 150ms
-          position: absolute
-          left: 45%
-          top: 45%
-          z-index: 99999
-          color: white
-          font-size: 1rem
-          opacity: 0
-        img
-          @include csstrans
-          opacity: 1
-          @include transform-scale(scale(1))
-        
-        &:hover, &:focus, &:active
-          background-color: $clr-brick
-          i
-            left: 32%
-            top: 30%
-            font-size: 3rem
-            opacity: 1
-          img
-            opacity: 0.5
-            @include transform-scale(scale(1.1))
-
-        @media all and (max-width: 768px)
-          top: 2px
-          width: 4rem
-          height: 4rem
-          &:hover, &:focus, &:active
-            i
-              left: 30%
-              top: 30%
-              font-size: 2rem
-        @media all and (max-width: 640px)
-          display: none
-          width: 0rem
-          height: 0rem
-
-          

app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss

@@ -0,0 +1,81 @@
+@import "branding";
+@import "animations";
+
+.darkswarm {
+  products {
+    product {
+      .product-thumb {
+        @include csstrans;
+
+        position: absolute;
+        top: 2px;
+        left: 0px;
+        width: 7rem;
+        height: 7rem;
+        float: left;
+        display: block;
+        z-index: 1;
+        background-color: white;
+        overflow: hidden;
+
+        i {
+          @include csstrans;
+
+          transition-delay: 150ms;
+          position: absolute;
+          left: 45%;
+          top: 45%;
+          z-index: 99999;
+          color: white;
+          font-size: 1rem;
+          opacity: 0;
+        }
+
+        img {
+          @include csstrans;
+
+          opacity: 1;
+
+          @include transform-scale(scale(1));
+        }
+
+        &:hover, &:focus, &:active {
+          background-color: $clr-brick;
+
+          i {
+            left: 32%;
+            top: 30%;
+            font-size: 3rem;
+            opacity: 1;
+          }
+
+          img {
+            opacity: 0.5;
+
+            @include transform-scale(scale(1.1));
+          }
+        }
+
+        @media all and (max-width: 768px) {
+          top: 2px;
+          width: 4rem;
+          height: 4rem;
+
+          &:hover, &:focus, &:active {
+            i {
+              left: 30%;
+              top: 30%;
+              font-size: 2rem;
+            }
+          }
+        }
+
+        @media all and (max-width: 640px) {
+          display: none;
+          width: 0rem;
+          height: 0rem;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass

@@ -1,31 +0,0 @@
-.darkswarm
-  products
-    product
-      .taxon-flag
-        background: transparent url("/assets/flag.svg") top center no-repeat
-        background-size: 34px 39px
-        min-height: 40px
-        width: 34px
-        margin-top: -1.1rem
-        padding-top: 0.25rem
-        z-index: 999999
-        @media all and (max-width: 480px)
-          background-size: 28px 32px
-          min-height: 32px
-          width: 28px
-
-        render-svg
-          svg
-            width: 24px
-            height: 24px
-            path
-              fill: #999
-
-        @media all and (max-width: 768px)
-          margin-top: -0.85rem
-
-        @media all and (max-width: 480px)
-          render-svg
-            svg
-              width: 18px
-              height: 18px

app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss

@@ -0,0 +1,45 @@
+.darkswarm {
+  products {
+    product {
+      .taxon-flag {
+        background: transparent url("/assets/flag.svg") top center no-repeat;
+        background-size: 34px 39px;
+        min-height: 40px;
+        width: 34px;
+        margin-top: -1.1rem;
+        padding-top: 0.25rem;
+        z-index: 999999;
+
+        @media all and (max-width: 480px) {
+          background-size: 28px 32px;
+          min-height: 32px;
+          width: 28px;
+        }
+
+        render-svg {
+          svg {
+            width: 24px;
+            height: 24px;
+
+            path {
+              fill: #999;
+            }
+          }
+        }
+
+        @media all and (max-width: 768px) {
+          margin-top: -0.85rem;
+        }
+
+        @media all and (max-width: 480px) {
+          render-svg {
+            svg {
+              width: 18px;
+              height: 18px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,70 +0,0 @@
-@import branding
-@import mixins
-
-.orders
-  @include sidepaddingSm
-  @include panepadding
-  padding-top: 10px
-
-  h3
-    padding-top: 2em
-
-  a
-    color: $clr-brick
-    &:hover, &:active, &:focus
-      color: $clr-brick-med-bright
-
-  img
-    display: block
-    width: 80px
-    height: auto
-
-  i.ofn-i_059-producer, i.ofn-i_060-producer-reversed
-    font-size: 3rem
-    display: inline-block
-    margin-right: 0.25rem
-    float: left
-    color: $clr-turquoise
-
-  .credit
-    color: green
-
-  .debit
-    color: $clr-brick
-
-  .invalid
-    color: $ofn-grey
-    .credit
-      color: $ofn-grey
-    .debit
-      color: $ofn-grey
-
-  .distributor-balance.paid
-    visibility: hidden
-
-  .transaction-group
-
-
-  table
-    border-radius: 0.5em 0.5em 0 0
-    tr:nth-of-type(even)
-      background: transparent // clear previous
-    tbody.odd
-      tr
-        background-color: #f9f9f9
-        border: none
-  // Column widths for order table
-  .order1
-    width: 20%
-  .order2
-    width: 20%
-  .order3
-    width: 20%
-  .order4
-    width: 10%
-  .order5
-    width: 10%
-  .order6
-    width: 10%
-  .order7
-    width: 10%

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

@@ -0,0 +1,106 @@
+@import "branding";
+@import "mixins";
+
+.orders {
+  @include sidepaddingSm;
+
+  @include panepadding;
+
+  padding-top: 10px;
+
+  h3 {
+    padding-top: 2em;
+  }
+
+  a {
+    color: $clr-brick;
+
+    &:hover, &:active, &:focus {
+      color: $clr-brick-med-bright;
+    }
+  }
+
+  img {
+    display: block;
+    width: 80px;
+    height: auto;
+  }
+
+  i.ofn-i_059-producer, i.ofn-i_060-producer-reversed {
+    font-size: 3rem;
+    display: inline-block;
+    margin-right: 0.25rem;
+    float: left;
+    color: $clr-turquoise;
+  }
+
+  .credit {
+    color: green;
+  }
+
+  .debit {
+    color: $clr-brick;
+  }
+
+  .invalid {
+    color: $ofn-grey;
+
+    .credit {
+      color: $ofn-grey;
+    }
+
+    .debit {
+      color: $ofn-grey;
+    }
+  }
+
+  .distributor-balance.paid {
+    visibility: hidden;
+  }
+
+  .transaction-group {}
+
+  table {
+    border-radius: 0.5em 0.5em 0 0;
+
+    tr:nth-of-type(even) {
+      background: transparent;
+    }
+
+    tbody.odd {
+      tr {
+        background-color: #f9f9f9;
+        border: none;
+      }
+    }
+  }
+
+  // Column widths for order table
+  .order1 {
+    width: 20%;
+  }
+
+  .order2 {
+    width: 20%;
+  }
+
+  .order3 {
+    width: 20%;
+  }
+
+  .order4 {
+    width: 10%;
+  }
+
+  .order5 {
+    width: 10%;
+  }
+
+  .order6 {
+    width: 10%;
+  }
+
+  .order7 {
+    width: 10%;
+  }
+}

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

@@ -1,114 +0,0 @@
-@import branding
-@import mixins
-@import "compass/css3/user-interface"
-
-
-.no-results
-  font-size: 1.875rem
-
-.active_table
-  margin: 2em 0em
-  @include user-select(none)
-  .active_table_row
-    display: block
-    cursor: pointer
-    &:first-child
-      padding: 1rem 0
-
-.active_table .active_table_node
-  margin-top: 0.25rem
-  display: block
-  border: 0
-
-  @media all and (max-width: 640px)
-    margin-bottom: 1rem
-
-  //Generic text link style
-  a:hover, a:active, a:focus
-    color: $dark-grey
-    span
-      text-decoration: underline
-
-  span.margin-top
-    margin-top: 0.5rem
-    display: inline-block
-
-  // Generic text resize
-  @media all and (max-width: 640px)
-    &, & *
-      font-size: 0.875rem
-    fat > div label
-      &, & *
-        font-size: 0.75rem
-
-  // Inherits from active_table
-  .active_table_row
-    border: 1px solid transparent
-    @include border-radius(0.5em)
-
-    // Foundation overrides
-    margin-left: 0
-    margin-right: 0
-
-    &, & > a.row
-      display: block
-
-  .active_table_row.link
-    border: 0
-
-  &.open
-    // .active_table_row:nth-child(2)
-
-    .active_table_row
-      border-left: 1px solid $disabled-bright
-      border-right: 1px solid $disabled-bright
-      border-top: 0
-      border-bottom: 0
-      @include border-radius(0)
-
-    .active_table_row:first-child
-      border-top: 1px solid $disabled-bright
-      color: $dark-grey
-      @include border-radius-mixed(0.5em, 0.5em, 0, 0)
-      &:hover, &:active, &:focus
-        // color: $dark-grey
-
-    .active_table_row:last-child
-      border-bottom: 1px solid $disabled-bright
-      @include border-radius-mixed(0, 0, 0.5em, 0.5em)
-
-
-    //Open row sections
-    .fat > div
-      border-top: 1px solid #aaa
-      @media all and (max-width: 640px)
-        margin-top: 1em
-
-      ul, ol
-        font-size: 0.875rem
-
-      [class*="block-grid-"] > li
-        padding-bottom: 0.25rem !important
-
-      label
-        text-transform: uppercase
-        font-size: 0.75rem
-        margin-top: 0.25rem
-        margin-bottom: 0.25rem
-        color: #777
-
-    p.trans-sentence
-      text-transform: capitalize
-
-  &.closed
-    &:hover, &:active, &:focus
-      .active_table_row.closed
-        border: 1px solid $disabled-bright
-
-  &.current
-    &.closed
-      &, & *
-        color: $dark-grey
-    &.open
-      .active_table_row:first-child
-        color: $dark-grey

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

@@ -0,0 +1,160 @@
+@import "branding";
+@import "mixins";
+@import "compass/css3/user-interface";
+
+.no-results {
+  font-size: 1.875rem;
+}
+
+.active_table {
+  margin: 2em 0em;
+
+  @include user-select(none);
+
+  .active_table_row {
+    display: block;
+    cursor: pointer;
+
+    &:first-child {
+      padding: 1rem 0;
+    }
+  }
+}
+
+.active_table .active_table_node {
+  margin-top: 0.25rem;
+  display: block;
+  border: 0;
+
+  @media all and (max-width: 640px) {
+    margin-bottom: 1rem;
+  }
+
+  //Generic text link style
+  a:hover, a:active, a:focus {
+    color: $dark-grey;
+
+    span {
+      text-decoration: underline;
+    }
+  }
+
+  span.margin-top {
+    margin-top: 0.5rem;
+    display: inline-block;
+  }
+
+  // Generic text resize
+  @media all and (max-width: 640px) {
+    &, & * {
+      font-size: 0.875rem;
+    }
+
+    fat > div label {
+      &, & * {
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  // Inherits from active_table
+  .active_table_row {
+    border: 1px solid transparent;
+
+    @include border-radius(0.5em);
+
+    // Foundation overrides
+    margin-left: 0;
+    margin-right: 0;
+
+    &, & > a.row {
+      display: block;
+    }
+  }
+
+  .active_table_row.link {
+    border: 0;
+  }
+
+  &.open {
+    // .active_table_row:nth-child(2)
+
+    .active_table_row {
+      border-left: 1px solid $disabled-bright;
+      border-right: 1px solid $disabled-bright;
+      border-top: 0;
+      border-bottom: 0;
+
+      @include border-radius(0);
+    }
+
+    .active_table_row:first-child {
+      border-top: 1px solid $disabled-bright;
+      color: $dark-grey;
+
+      @include border-radius-mixed(0.5em, 0.5em, 0, 0);
+
+      &:hover, &:active, &:focus {
+        // color: $dark-grey
+     
+      }
+    }
+
+    .active_table_row:last-child {
+      border-bottom: 1px solid $disabled-bright;
+
+      @include border-radius-mixed(0, 0, 0.5em, 0.5em);
+    }
+
+    //Open row sections
+    .fat > div {
+      border-top: 1px solid #aaa;
+
+      @media all and (max-width: 640px) {
+        margin-top: 1em;
+      }
+
+      ul, ol {
+        font-size: 0.875rem;
+      }
+
+      [class*="block-grid-"] > li {
+        padding-bottom: 0.25rem !important;
+      }
+
+      label {
+        text-transform: uppercase;
+        font-size: 0.75rem;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        color: #777;
+      }
+    }
+
+    p.trans-sentence {
+      text-transform: capitalize;
+    }
+  }
+
+  &.closed {
+    &:hover, &:active, &:focus {
+      .active_table_row.closed {
+        border: 1px solid $disabled-bright;
+      }
+    }
+  }
+
+  &.current {
+    &.closed {
+      &, & * {
+        color: $dark-grey;
+      }
+    }
+
+    &.open {
+      .active_table_row:first-child {
+        color: $dark-grey;
+      }
+    }
+  }
+}

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

@@ -1,117 +0,0 @@
-@import mixins
-@import branding
-@import big-input
-@import animations
-
-// Filter-box
-.row .row.filter-box
-  margin-left: 0
-  margin-right: 0
-
-.row.filter-box:first-child
-  border: 1px solid $clr-blue-light
-  @include border-radius(0.25em)
-  margin-top: 2px
-  @media all and (max-width: 640px) 
-    margin-bottom: 1em
-
-.row.filter-box.clear-filters
-  background: transparent
-  margin-top: 1em
-
-products .filter-box
-  background: #f7f7f7
-
-.filter-box
-  background: rgba(245,245,245,0.6)
-  .tdhead
-    padding: 0.25rem 0.5rem
-    margin-top: 0.9rem
-    color: $clr-blue
-    border-bottom: 1px solid $clr-blue-light 
-
-  // OVERRIDES
-  [class*="block-grid-"]
-    margin: 0 0 0.5rem 0
-  [class*="block-grid-"] > li
-    padding-bottom: 0.5rem !important
-
-  li
-    @include border-radius(12px)
-    padding-top: 0.5rem
-    margin-bottom: 0.25rem 
-    &:hover, &:focus
-      background: rgba(255,255,255,0.25)
-  li.active 
-    background: white
-    @include box-shadow(inset 0 1px 3px 0 rgba(143,48,29,0.5))
-
-  li.active a
-    color: $clr-brick
-    render-svg
-      svg
-        path
-          fill: $clr-brick
-    &:hover, &:focus
-      border-color: $clr-brick-bright
-
-  li a
-    @include csstrans
-    display: table
-    table-layout: fixed
-    text-transform: capitalize
-    overflow: visible
-    line-height: 1
-    color: $med-drk-grey
-    font-size: 0.875rem
-    span
-      display: table-cell
-      vertical-align: middle
-      text-align: left
-    i
-      display: block
-      font-size: 1.5rem
-      margin: 0 0.2rem 0 0
-
-    &:hover, &:focus
-      color: $clr-brick-bright
-      
-      render-svg
-        svg
-          path
-            fill: $clr-brick-bright
-    
-    &:active, &.active
-      color: $clr-brick
-      render-svg
-        svg
-          path
-            fill: $clr-brick
-    
-    render-svg
-      display: block
-      width: 1.5rem
-      height: 1.5rem
-      margin: 0 0.2rem 0 0
-      padding: 0
-      svg
-        width: 1.5rem
-        height: 1.5rem
-        path
-          fill: #666
-
-.button.filterbtn
-  margin-bottom: 0 !important
-  min-width: 160px
-
-#active-table-search
-  position: relative  
-  @include placeholder(rgba(0,0,0,0.4), #777)
-  input[type="text"]
-    @include big-input(rgba(0,0,0,0.3), #777, $clr-brick)
-
-
-
-
-
-

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

@@ -0,0 +1,164 @@
+@import "mixins";
+@import "branding";
+@import "big-input";
+@import "animations";
+
+// Filter-box
+.row .row.filter-box {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.row.filter-box:first-child {
+  border: 1px solid $clr-blue-light;
+
+  @include border-radius(0.25em);
+
+  margin-top: 2px;
+
+  @media all and (max-width: 640px) {
+    margin-bottom: 1em;
+  }
+}
+
+.row.filter-box.clear-filters {
+  background: transparent;
+  margin-top: 1em;
+}
+
+products .filter-box {
+  background: #f7f7f7;
+}
+
+.filter-box {
+  background: rgba(245, 245, 245, 0.6);
+
+  .tdhead {
+    padding: 0.25rem 0.5rem;
+    margin-top: 0.9rem;
+    color: $clr-blue;
+    border-bottom: 1px solid $clr-blue-light;
+  }
+
+  // OVERRIDES
+  [class*="block-grid-"] {
+    margin: 0 0 0.5rem 0;
+  }
+
+  [class*="block-grid-"] > li {
+    padding-bottom: 0.5rem !important;
+  }
+
+  li {
+    @include border-radius(12px);
+
+    padding-top: 0.5rem;
+    margin-bottom: 0.25rem;
+
+    &:hover, &:focus {
+      background: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  li.active {
+    background: white;
+
+    @include box-shadow(inset 0 1px 3px 0 rgba(143, 48, 29, 0.5));
+  }
+
+  li.active a {
+    color: $clr-brick;
+
+    render-svg {
+      svg {
+        path {
+          fill: $clr-brick;
+        }
+      }
+    }
+
+    &:hover, &:focus {
+      border-color: $clr-brick-bright;
+    }
+  }
+
+  li a {
+    @include csstrans;
+
+    display: table;
+    table-layout: fixed;
+    text-transform: capitalize;
+    overflow: visible;
+    line-height: 1;
+    color: $med-drk-grey;
+    font-size: 0.875rem;
+
+    span {
+      display: table-cell;
+      vertical-align: middle;
+      text-align: left;
+    }
+
+    i {
+      display: block;
+      font-size: 1.5rem;
+      margin: 0 0.2rem 0 0;
+    }
+
+    &:hover, &:focus {
+      color: $clr-brick-bright;
+
+      render-svg {
+        svg {
+          path {
+            fill: $clr-brick-bright;
+          }
+        }
+      }
+    }
+
+    &:active, &.active {
+      color: $clr-brick;
+
+      render-svg {
+        svg {
+          path {
+            fill: $clr-brick;
+          }
+        }
+      }
+    }
+
+    render-svg {
+      display: block;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin: 0 0.2rem 0 0;
+      padding: 0;
+
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+
+        path {
+          fill: #666;
+        }
+      }
+    }
+  }
+}
+
+.button.filterbtn {
+  margin-bottom: 0 !important;
+  min-width: 160px;
+}
+
+#active-table-search {
+  position: relative;
+
+  @include placeholder(rgba(0, 0, 0, 0.4), #777);
+
+  input[type="text"] {
+    @include big-input(rgba(0, 0, 0, 0.3), #777, $clr-brick);
+  }
+}

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

@@ -1,3 +1,4 @@
 // https://docs.angularjs.org/api/ng/directive/ngCloak
-[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
-  display: none !important
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}

app/assets/stylesheets/darkswarm/animations.sass

@@ -1,217 +0,0 @@
-@import mixins
-
-// ANIMATION FUNCTIONS
-
-
-//
-@-webkit-keyframes slideInDown
-  0%
-    opacity: 0
-    -webkit-transform: translateY(-20px)
-    transform: translateY(-20px)
-  100%
-    -webkit-transform: translateY(0)
-    transform: translateY(0)
-
-@keyframes slideInDown
-  0%
-    opacity: 0
-    -webkit-transform: translateY(-20px)
-    -ms-transform: translateY(-20px)
-    transform: translateY(-20px)
-  100%
-    -webkit-transform: translateY(0)
-    -ms-transform: translateY(0)
-    transform: translateY(0)
-
-
-
-@-webkit-keyframes slideOutUp
-  0%
-    -webkit-transform: translateY(0)
-    transform: translateY(0)
-  100%
-    opacity: 0
-    -webkit-transform: translateY(-20px)
-    transform: translateY(-20px)
-
-
-@keyframes slideOutUp
-  0%
-    -webkit-transform: translateY(0)
-    -ms-transform: translateY(0)
-    transform: translateY(0)
-
-@-webkit-keyframes fadeIn
-  0%
-    opacity: 0
-  100%
-    opacity: 1
-
-
-@keyframes fadeIn
-  0%
-    opacity: 0
-  100%
-    opacity: 1
-
-@-webkit-keyframes spin
-  0%
-    -webkit-transform: rotate(0deg)
-    transform: rotate(0deg)
-  100%
-    -webkit-transform: rotate(359deg)
-    transform: rotate(359deg)
-@keyframes spin
-  0%
-    -webkit-transform: rotate(0deg)
-    transform: rotate(0deg)
-  100%
-    -webkit-transform: rotate(359deg)
-    transform: rotate(359deg)
-
-// ANIMATION CLASSES
-
-.fade
-  opacity: 0
-  -webkit-transition: opacity .15s linear
-  transition: opacity .15s linear
-
-.fade.in
-  opacity: 1
-
-.reveal-modal.fade
-  -webkit-transition: -webkit-transform .2s ease-out
-  -moz-transition: -moz-transform .2s ease-out
-  -o-transition: -o-transform .2s ease-out
-  transition: transform .2s ease-out
-  -webkit-transform: translate(0, -25%)
-  -ms-transform: translate(0, -25%)
-  transform: translate(0, -25%)
-
-.reveal-modal.in
-  -webkit-transform: translate(0, 0)
-  -ms-transform: translate(0, 0)
-  transform: translate(0, 0)
-
-.reveal-modal-bg.fade
-  filter: alpha(opacity = 0)
-  opacity: 0
-
-.reveal-modal-bg.in
-  filter: alpha(opacity = 50)
-  opacity: .5
-
-
-.animate-repeat
-  &.ng-move, &.ng-enter, &.ng-leave
-    -webkit-transition: all 300ms linear
-    transition: all 300ms linear
-
-  &.ng-leave
-    opacity: 1
-    &.ng-leave-active
-      opacity: 0
-
-  &.ng-enter
-    opacity: 0
-    &.ng-enter-active
-      opacity: 1
-
-product.animate-repeat
-  &.ng-leave
-    border-color: rgba(153, 153, 153, 1)
-    &.ng-leave-active
-      border-color: rgba(153, 153, 153, 0)
-
-  &.ng-enter
-    border-color: rgba(153, 153, 153, 0)
-    &.ng-enter-active
-      border-color: rgba(153, 153, 153, 1)
-
-.animate-show
-  -webkit-animation-name: slideInDown
-  animation-name: slideInDown
-  -webkit-animation-duration: 0.5s
-  animation-duration: 0.5s
-  -webkit-animation-fill-mode: both
-  animation-fill-mode: both
-  // line-height: 20px
-  // opacity: 1
-
-.animate-show.ng-hide-add,
-.animate-show.ng-hide-remove
-  // display: block !important
-
-.animate-show.ng-hide
-  -webkit-animation-name: slideOutUp
-  animation-name: slideOutUp
-  -webkit-animation-duration: 0.15s
-  animation-duration: 0.15s
-  -webkit-animation-fill-mode: both
-  animation-fill-mode: both
-  // line-height: 0
-  // opacity: 0
-  // padding: 0 10px
-
-.row.animate-show ~ .row
-  -webkit-animation-name: fadeIn
-  animation-name: fadeIn
-  -webkit-animation-duration: 0.5s
-  animation-duration: 0.5s
-  -webkit-animation-fill-mode: both
-  animation-fill-mode: both
-
-//
-
-.animate-slide
-  max-height: 500px
-  opacity: 1 !important
-  -webkit-transition: all 300ms ease-in-out
-  -moz-transition: all 300ms ease-in-out
-  -o-transition: all 300ms ease-in-out
-  transition: all 300ms ease-in-out
-
-  &.ng-hide
-    overflow: hidden
-    max-height: 0
-    opacity: 0 !important
-
-  // &.ng-hide-add-active, &.ng-hide-remove-active
-
-  &.ng-hide-add, &.ng-hide-remove
-    /* IMPORTANT: this needs to be here to make it visible during the animation
-     since the .ng-hide class is already on the element rendering
-     it as hidden. */
-    display: block !important
-
-
-.animate-show
-  opacity: 1 !important
-  -webkit-transition: all 300ms ease-in-out
-  -moz-transition: all 300ms ease-in-out
-  -o-transition: all 300ms ease-in-out
-  transition: all 300ms ease-in-out
-
-  &.ng-hide
-    opacity: 0 !important
-
-  // &.ng-hide-add-active, &.ng-hide-remove-active
-
-  &.ng-hide-add, &.ng-hide-remove
-    /* IMPORTANT: this needs to be here to make it visible during the animation
-     since the .ng-hide class is already on the element rendering
-     it as hidden. */
-    display: block !important
-
-
-
-
-
-@mixin csstrans
-  -webkit-transition: all 300ms ease
-  -moz-transition: all 300ms ease
-  -ms-transition: all 300ms ease
-  -o-transition: all 300ms ease
-  transition: all 300ms ease
-  -webkit-transform-style: preserve-3d

app/assets/stylesheets/darkswarm/animations.scss

@@ -0,0 +1,271 @@
+@import "mixins";
+
+// ANIMATION FUNCTIONS
+
+//
+@-webkit-keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+// ANIMATION CLASSES
+
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+.reveal-modal.fade {
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  -moz-transition: -moz-transform 0.2s ease-out;
+  -o-transition: -o-transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+  -webkit-transform: translate(0, -25%);
+  -ms-transform: translate(0, -25%);
+  transform: translate(0, -25%);
+}
+
+.reveal-modal.in {
+  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+
+.reveal-modal-bg.fade {
+  filter: alpha(opacity = 0);
+  opacity: 0;
+}
+
+.reveal-modal-bg.in {
+  filter: alpha(opacity = 50);
+  opacity: 0.5;
+}
+
+.animate-repeat {
+  &.ng-move, &.ng-enter, &.ng-leave {
+    -webkit-transition: all 300ms linear;
+    transition: all 300ms linear;
+  }
+
+  &.ng-leave {
+    opacity: 1;
+
+    &.ng-leave-active {
+      opacity: 0;
+    }
+  }
+
+  &.ng-enter {
+    opacity: 0;
+
+    &.ng-enter-active {
+      opacity: 1;
+    }
+  }
+}
+
+product.animate-repeat {
+  &.ng-leave {
+    border-color: rgba(153, 153, 153, 1);
+
+    &.ng-leave-active {
+      border-color: rgba(153, 153, 153, 0);
+    }
+  }
+
+  &.ng-enter {
+    border-color: rgba(153, 153, 153, 0);
+
+    &.ng-enter-active {
+      border-color: rgba(153, 153, 153, 1);
+    }
+  }
+}
+
+.animate-show {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+
+  // line-height: 20px
+  // opacity: 1
+}
+
+.animate-show.ng-hide-add,
+.animate-show.ng-hide-remove {
+  // display: block !important
+}
+
+.animate-show.ng-hide {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+  -webkit-animation-duration: 0.15s;
+  animation-duration: 0.15s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+
+  // line-height: 0
+  // opacity: 0
+  // padding: 0 10px
+}
+
+.row.animate-show ~ .row {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+//
+
+.animate-slide {
+  max-height: 500px;
+  opacity: 1 !important;
+  -webkit-transition: all 300ms ease-in-out;
+  -moz-transition: all 300ms ease-in-out;
+  -o-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+
+  &.ng-hide {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0 !important;
+  }
+
+  // &.ng-hide-add-active, &.ng-hide-remove-active
+
+  &.ng-hide-add, &.ng-hide-remove {
+    /* IMPORTANT: this needs to be here to make it visible during the animation
+     * since the .ng-hide class is already on the element rendering
+     * it as hidden. */
+    display: block !important;
+  }
+}
+
+.animate-show {
+  opacity: 1 !important;
+  -webkit-transition: all 300ms ease-in-out;
+  -moz-transition: all 300ms ease-in-out;
+  -o-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+
+  &.ng-hide {
+    opacity: 0 !important;
+  }
+
+  // &.ng-hide-add-active, &.ng-hide-remove-active
+
+  &.ng-hide-add, &.ng-hide-remove {
+    /* IMPORTANT: this needs to be here to make it visible during the animation
+     * since the .ng-hide class is already on the element rendering
+     * it as hidden. */
+    display: block !important;
+  }
+}
+
+@mixin csstrans {
+  -webkit-transition: all 300ms ease;
+  -moz-transition: all 300ms ease;
+  -ms-transition: all 300ms ease;
+  -o-transition: all 300ms ease;
+  transition: all 300ms ease;
+  -webkit-transform-style: preserve-3d;
+}

app/assets/stylesheets/darkswarm/big-input.sass

@@ -1,93 +0,0 @@
-@import typography
-@import branding
-@import animations
-@import mixins
-
-//Big search used in active table search \\
-
-@mixin big-input($input, $inputhvr, $inputactv)
-  @include headingFont
-  @include csstrans
-  @include border-radius(0.5rem)
-  background: rgba(255,255,255,0.1)
-  border: 2px solid $input
-  font-size: 2rem 
-  box-shadow: 0
-  padding: 0.5rem 1rem
-  height: auto
-  width: 100%
-  margin-bottom: 0.5rem
-  box-shadow: none
-  color: $inputactv
-  @media all and (max-width: 640px) 
-    font-size: 1.25rem
-
-  &:hover
-    @include box-shadow(0 1px 1px 0 rgba(255,255,255,0.25))
-    border: 2px solid $inputhvr
-    color: $inputactv
-
-  &:active, &:focus, &.active
-    border: 2px solid $inputactv
-    color: $inputactv
-    background: white 
-    background: rgba(255,255,255,0.5)
-    text-shadow: 0 0 10px #ffffff
-    padding: 1rem
-    letter-spacing: 0.02rem
-    outline: none
-
-@mixin big-input-static
-  outline: 0
-  &:active, &:focus, &.active
-    padding: 0.75rem 1rem 0.35rem 1rem
-    letter-spacing: 0
-
-@mixin medium-input($input, $inputhvr, $inputactv)
-  @include headingFont
-  @include csstrans
-  @include border-radius(0.5rem)
-  background: rgba(255,255,255,0.1)
-  border: 2px solid $input
-  font-size: 0.875rem 
-  box-shadow: 0
-  padding: 0.5rem 0.625rem 0.375rem
-  height: auto
-  width: 100%
-  margin-bottom: 0.5rem
-  box-shadow: none
-  color: $inputactv
-
-  &:hover
-    @include box-shadow(0 1px 1px 0 rgba(255,255,255,0.25))
-    border: 2px solid $inputhvr
-    color: $inputactv
-
-  &:active, &:focus, &.active
-    border: 2px solid $inputactv
-    color: $inputactv
-    background: white 
-    background: rgba(255,255,255,0.5)
-    text-shadow: 0 0 10px #ffffff
-    outline: none
-
-@mixin placeholder($placeholder, $placeholderhvr)
-  ::-webkit-input-placeholder
-    color: $placeholder
-  :-moz-placeholder
-    color: $placeholder
-  ::-moz-placeholder 
-    color: $placeholder
-  :-ms-input-placeholder 
-    color: $placeholder   
-
-  &:hover
-    ::-webkit-input-placeholder
-      color: $placeholderhvr
-    :-moz-placeholder
-      color: $placeholderhvr
-    ::-moz-placeholder 
-      color: $placeholderhvr
-    :-ms-input-placeholder 
-      color: $placeholderhvr
-

app/assets/stylesheets/darkswarm/big-input.scss

@@ -0,0 +1,127 @@
+@import "typography";
+@import "branding";
+@import "animations";
+@import "mixins";
+
+//Big search used in active table search \\
+
+@mixin big-input($input, $inputhvr, $inputactv) {
+  @include headingFont;
+
+  @include csstrans;
+
+  @include border-radius(0.5rem);
+
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid $input;
+  font-size: 2rem;
+  box-shadow: 0;
+  padding: 0.5rem 1rem;
+  height: auto;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  box-shadow: none;
+  color: $inputactv;
+
+  @media all and (max-width: 640px) {
+    font-size: 1.25rem;
+  }
+
+  &:hover {
+    @include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25));
+
+    border: 2px solid $inputhvr;
+    color: $inputactv;
+  }
+
+  &:active, &:focus, &.active {
+    border: 2px solid $inputactv;
+    color: $inputactv;
+    background: white;
+    background: rgba(255, 255, 255, 0.5);
+    text-shadow: 0 0 10px #ffffff;
+    padding: 1rem;
+    letter-spacing: 0.02rem;
+    outline: none;
+  }
+}
+
+@mixin big-input-static {
+  outline: 0;
+
+  &:active, &:focus, &.active {
+    padding: 0.75rem 1rem 0.35rem 1rem;
+    letter-spacing: 0;
+  }
+}
+
+@mixin medium-input($input, $inputhvr, $inputactv) {
+  @include headingFont;
+
+  @include csstrans;
+
+  @include border-radius(0.5rem);
+
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid $input;
+  font-size: 0.875rem;
+  box-shadow: 0;
+  padding: 0.5rem 0.625rem 0.375rem;
+  height: auto;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  box-shadow: none;
+  color: $inputactv;
+
+  &:hover {
+    @include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25));
+
+    border: 2px solid $inputhvr;
+    color: $inputactv;
+  }
+
+  &:active, &:focus, &.active {
+    border: 2px solid $inputactv;
+    color: $inputactv;
+    background: white;
+    background: rgba(255, 255, 255, 0.5);
+    text-shadow: 0 0 10px #ffffff;
+    outline: none;
+  }
+}
+
+@mixin placeholder($placeholder, $placeholderhvr) {
+  ::-webkit-input-placeholder {
+    color: $placeholder;
+  }
+
+  -moz-placeholder: {
+    color: $placeholder;
+  };
+
+  ::-moz-placeholder {
+    color: $placeholder;
+  }
+
+  -ms-input-placeholder: {
+    color: $placeholder;
+  };
+
+  &:hover {
+    ::-webkit-input-placeholder {
+      color: $placeholderhvr;
+    }
+
+    -moz-placeholder: {
+      color: $placeholderhvr;
+    };
+
+    ::-moz-placeholder {
+      color: $placeholderhvr;
+    }
+
+    -ms-input-placeholder: {
+      color: $placeholderhvr;
+    };
+  }
+}

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

@@ -1,38 +0,0 @@
-$ofn-brand: #f27052
-// e.g. australia, uk, norway specific color
-
-$ofn-grey: #808184
-
-
-// old colors:
-
-$clr-brick: #c1122b
-$clr-brick-light: #f5e6e7
-$clr-brick-light-trans: rgba(245, 230, 231, 0.9) 
-$clr-brick-ultra-light: #faf5f6
-$clr-brick-bright: #eb4c46
-$clr-brick-med-bright: #e5a2a0
-$clr-brick-light-bright: #f5c4c9
-
-$clr-turquoise: #0b8c61 
-$clr-turquoise-light: #ceefe4 
-$clr-turquoise-ultra-light: #e8f9f4
-$clr-turquoise-bright: #23a877 
-
-$clr-blue: #0096ad
-$clr-blue-light: #85d9e5
-$clr-blue-bright: #14b6cc
-
-$clr-yellow-light: #faf6c7
-
-$disabled-light: #e5e5e5
-$disabled-bright: #ccc
-$disabled-med: #b3b3b3
-$disabled-dark: #999
-$disabled-v-dark: #808080
-$med-grey: #666
-$med-drk-grey: #444
-$dark-grey: #333
-$light-grey: #ddd
-$black: #000
-

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

@@ -0,0 +1,37 @@
+$ofn-brand: #f27052;
+
+// e.g. australia, uk, norway specific color
+
+$ofn-grey: #808184;
+
+// old colors:
+
+$clr-brick: #c1122b;
+$clr-brick-light: #f5e6e7;
+$clr-brick-light-trans: rgba(245, 230, 231, 0.9);
+$clr-brick-ultra-light: #faf5f6;
+$clr-brick-bright: #eb4c46;
+$clr-brick-med-bright: #e5a2a0;
+$clr-brick-light-bright: #f5c4c9;
+
+$clr-turquoise: #0b8c61;
+$clr-turquoise-light: #ceefe4;
+$clr-turquoise-ultra-light: #e8f9f4;
+$clr-turquoise-bright: #23a877;
+
+$clr-blue: #0096ad;
+$clr-blue-light: #85d9e5;
+$clr-blue-bright: #14b6cc;
+
+$clr-yellow-light: #faf6c7;
+
+$disabled-light: #e5e5e5;
+$disabled-bright: #ccc;
+$disabled-med: #b3b3b3;
+$disabled-dark: #999;
+$disabled-v-dark: #808080;
+$med-grey: #666;
+$med-drk-grey: #444;
+$dark-grey: #333;
+$light-grey: #ddd;
+$black: #000;

app/assets/stylesheets/darkswarm/footer.sass

@@ -1,78 +0,0 @@
-@import branding
-@import mixins
-@import animations
-
-footer
-  .row
-    p a
-      font-size: 0.875rem
-    a, a *
-      @include csstrans
-      color: white
-      &:hover, &:active, &:focus
-        color: rgba(white, 1)
-        text-decoration: underline
-
-  .footer-global
-    background-color: $ofn-grey
-    padding-top: 60px
-    padding-bottom: 40px
-    .logo
-      width: 200px
-      height: 200px
-      background:  $ofn-grey
-      @include border-radius(120px)
-      margin: -140px auto 0 auto
-      img
-        margin-top: 36px
-
-    .alert-box
-      background-color: transparent
-      border: none
-      padding: 0
-      .alert-cta
-        @include csstrans
-        width: 100%
-        border: 1px solid rgba($dark-grey, 0.35)
-        background-image: url("/assets/tile-wide.png")
-        background-position: center center
-        background-color: #bbb
-        padding: 12px 0 8px 0
-        display: block
-        &, & *
-          @include csstrans
-          color: #333
-        strong
-          letter-spacing: 0.5px
-        a:hover, a:active, a:focus
-          text-decoration: none
-          border-color: white
-          &, & *
-            color: rgba(white, 1)
-    .row
-      &, p, h1, h2, h3, h4, h5, h6
-        color: $disabled-bright
-
-  .footer-local
-    background: lighten($dark-grey, 3%)
-    @include panepadding
-    .row
-      &, p, h1, h2, h3, h4, h5, h6
-        color: $disabled-med
-      p.secure-icon i
-        font-size: 10rem
-        color: rgba(white, 0.1)
-      p.secure-text
-        color: rgba($disabled-med, 0.35)
-      .social-icons
-        margin-bottom: 0.25rem
-        margin-top: 0.75rem
-        a
-          i
-            font-size: 1.5rem
-            color: white
-          &:hover, &:active, &:focus
-            text-decoration: none
-            i
-              color: lighten($dark-grey, 60%)
-              text-shadow: 2px 2px 0 black

app/assets/stylesheets/darkswarm/footer.scss

@@ -0,0 +1,127 @@
+@import "branding";
+@import "mixins";
+@import "animations";
+
+footer {
+  .row {
+    p a {
+      font-size: 0.875rem;
+    }
+
+    a, a * {
+      @include csstrans;
+
+      color: white;
+
+      &:hover, &:active, &:focus {
+        color: rgba(white, 1);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .footer-global {
+    background-color: $ofn-grey;
+    padding-top: 60px;
+    padding-bottom: 40px;
+
+    .logo {
+      width: 200px;
+      height: 200px;
+      background: $ofn-grey;
+
+      @include border-radius(120px);
+
+      margin: (-140px) auto 0 auto;
+
+      img {
+        margin-top: 36px;
+      }
+    }
+
+    .alert-box {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+
+      .alert-cta {
+        @include csstrans;
+
+        width: 100%;
+        border: 1px solid rgba($dark-grey, 0.35);
+        background-image: url("/assets/tile-wide.png");
+        background-position: center center;
+        background-color: #bbb;
+        padding: 12px 0 8px 0;
+        display: block;
+
+        &, & * {
+          @include csstrans;
+
+          color: #333;
+        }
+
+        strong {
+          letter-spacing: 0.5px;
+        }
+
+        a:hover, a:active, a:focus {
+          text-decoration: none;
+          border-color: white;
+
+          &, & * {
+            color: rgba(white, 1);
+          }
+        }
+      }
+    }
+
+    .row {
+      &, p, h1, h2, h3, h4, h5, h6 {
+        color: $disabled-bright;
+      }
+    }
+  }
+
+  .footer-local {
+    background: lighten($dark-grey, 3%);
+
+    @include panepadding;
+
+    .row {
+      &, p, h1, h2, h3, h4, h5, h6 {
+        color: $disabled-med;
+      }
+
+      p.secure-icon i {
+        font-size: 10rem;
+        color: rgba(white, 0.1);
+      }
+
+      p.secure-text {
+        color: rgba($disabled-med, 0.35);
+      }
+
+      .social-icons {
+        margin-bottom: 0.25rem;
+        margin-top: 0.75rem;
+
+        a {
+          i {
+            font-size: 1.5rem;
+            color: white;
+          }
+
+          &:hover, &:active, &:focus {
+            text-decoration: none;
+
+            i {
+              color: lighten($dark-grey, 60%);
+              text-shadow: 2px 2px 0 black;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,5 +0,0 @@
-@import mixins
-@import branding
-
-fieldset
-  border: 0

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

@@ -0,0 +1,6 @@
+@import "mixins";
+@import "branding";
+
+fieldset {
+  border: 0;
+}

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

@@ -1,108 +0,0 @@
-@import branding
-@import mixins
-@import typography
-
-// Search page
-#groups
-  @include groupsbg
-  @include sidepaddingSm
-  @include panepadding
-  h1, p.text
-    font-weight: 300
-  h1
-    font-size: 350%
-  a > .group-name
-    &:hover, &:focus, &:active
-      text-decoration: underline
-
-  .groups-icons
-    text-align: right
-    a
-      font-size: 1.5em
-
-  .groups-header
-    border: 2px solid $clr-brick-light-bright
-    @include border-radius-mixed(0.5em, 0.5em, 0, 0)
-    margin: -1rem 0 1rem
-    padding: 1rem 0.9375rem
-    @media screen and (min-width: 640px)
-      border: 0 none
-      @include border-radius(0)
-      margin: 0
-      padding: 0
-
-.group
-  padding-bottom: 0.5em
-  .row div
-    font-size: 110%
-  .row a
-    vertical-align: middle
-  .ofn-i_035-groups
-    font-size: 120%
-    vertical-align: middle
-
-// Individual Page
-#group-page
-  .group-logo, .group-header
-    text-align: center
-  .group-logo
-    padding-bottom: 1em
-    max-height: 200px
-  .group-name
-    border-bottom: 1px solid #ccc
-  @media screen and (min-width: 768px)
-    .group-logo, .group-header
-      text-align: left
-    .group-logo
-      max-height: 120px
-      float: left
-      padding-right: 1em
-      background-color: white
-
-  // Tabs
-  .tabs dd a // Mobile first
-    padding: 0.25rem 0.45rem 0rem
-    font-size: 0.75rem
-    border: none
-    margin-bottom: -2px
-    margin-right: 2px
-    text-transform: capitalize
-    @include headingFont
-    @include border-radius(1em 0.25em 0 0)
-    @include gradient($disabled-light, $disabled-bright)
-  @media screen and (min-width: 768px)
-    .tabs dd a
-      padding: 0.5rem 1rem 0.25em
-      font-size: 0.875rem
-      @include border-radius(1.5em 0.25em 0 0)
-  @media screen and (min-width: 1024px)
-    .tabs dd a
-      padding: 0.75rem 1.5rem 0.5em
-      font-size: 1rem
-      @include border-radius(2em 0.25em 0 0)
-  .tabs dd.active a
-    @include gradient(white, white)
-    margin-bottom: -1px
-    border-top: 1px solid $light-grey
-    border-left: 1px solid $light-grey
-    border-right: 1px solid $light-grey
-    border-bottom: 0
-  .tabs-content
-    border-top: 1px solid $light-grey
-    border-left: 1px solid $light-grey
-    border-right: 1px solid $light-grey
-    border-bottom: 1px solid $light-grey
-    padding: 1.5em
-
-  // Producers tab
-  .producers
-    background-image: none
-    background-color: initial
-    .active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer
-      color: $clr-turquoise
-    padding: 0
-  // Hubs tab
-  .hubs
-    background-image: none
-    padding-top: 0
-    padding-bottom: 0

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

@@ -0,0 +1,169 @@
+@import "branding";
+@import "mixins";
+@import "typography";
+
+// Search page
+#groups {
+  @include groupsbg;
+
+  @include sidepaddingSm;
+
+  @include panepadding;
+
+  h1, p.text {
+    font-weight: 300;
+  }
+
+  h1 {
+    font-size: 350%;
+  }
+
+  a > .group-name {
+    &:hover, &:focus, &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .groups-icons {
+    text-align: right;
+
+    a {
+      font-size: 1.5em;
+    }
+  }
+
+  .groups-header {
+    border: 2px solid $clr-brick-light-bright;
+
+    @include border-radius-mixed(0.5em, 0.5em, 0, 0);
+
+    margin: (-1rem) 0 1rem;
+    padding: 1rem 0.9375rem;
+
+    @media screen and (min-width: 640px) {
+      border: 0 none;
+
+      @include border-radius(0);
+
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+.group {
+  padding-bottom: 0.5em;
+
+  .row div {
+    font-size: 110%;
+  }
+
+  .row a {
+    vertical-align: middle;
+  }
+
+  .ofn-i_035-groups {
+    font-size: 120%;
+    vertical-align: middle;
+  }
+}
+
+// Individual Page
+#group-page {
+  .group-logo, .group-header {
+    text-align: center;
+  }
+
+  .group-logo {
+    padding-bottom: 1em;
+    max-height: 200px;
+  }
+
+  .group-name {
+    border-bottom: 1px solid #ccc;
+  }
+
+  @media screen and (min-width: 768px) {
+    .group-logo, .group-header {
+      text-align: left;
+    }
+
+    .group-logo {
+      max-height: 120px;
+      float: left;
+      padding-right: 1em;
+      background-color: white;
+    }
+  }
+
+  // Tabs
+  .tabs dd a {
+    padding: 0.25rem 0.45rem 0rem;
+    font-size: 0.75rem;
+    border: none;
+    margin-bottom: -2px;
+    margin-right: 2px;
+    text-transform: capitalize;
+
+    @include headingFont;
+
+    @include border-radius(1em 0.25em 0 0);
+
+    @include gradient($disabled-light, $disabled-bright);
+  }
+
+  @media screen and (min-width: 768px) {
+    .tabs dd a {
+      padding: 0.5rem 1rem 0.25em;
+      font-size: 0.875rem;
+
+      @include border-radius(1.5em 0.25em 0 0);
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    .tabs dd a {
+      padding: 0.75rem 1.5rem 0.5em;
+      font-size: 1rem;
+
+      @include border-radius(2em 0.25em 0 0);
+    }
+  }
+
+  .tabs dd.active a {
+    @include gradient(white, white);
+
+    margin-bottom: -1px;
+    border-top: 1px solid $light-grey;
+    border-left: 1px solid $light-grey;
+    border-right: 1px solid $light-grey;
+    border-bottom: 0;
+  }
+
+  .tabs-content {
+    border-top: 1px solid $light-grey;
+    border-left: 1px solid $light-grey;
+    border-right: 1px solid $light-grey;
+    border-bottom: 1px solid $light-grey;
+    padding: 1.5em;
+  }
+
+  // Producers tab
+  .producers {
+    background-image: none;
+    background-color: initial;
+
+    .active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer {
+      color: $clr-turquoise;
+    }
+
+    padding: 0;
+  }
+
+  // Hubs tab
+  .hubs {
+    background-image: none;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

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

@@ -1,21 +0,0 @@
-@import variables
-
-nav.top-bar
-  margin-bottom: 0px
-  a.icon
-    &:hover
-      text-decoration: none
-    height: $topbar-height
-    color: white
-    i
-      font-size: 29px
-      line-height: $topbar-height
-    span
-      font-size: 13px
-      display: inline-block
-      line-height: $topbar-height
-      height: $topbar-height
-      vertical-align: top
-
-body > section[role='main']
-  padding: 0px

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

@@ -0,0 +1,31 @@
+@import "variables";
+
+nav.top-bar {
+  margin-bottom: 0px;
+
+  a.icon {
+    &:hover {
+      text-decoration: none;
+    }
+
+    height: $topbar-height;
+    color: white;
+
+    i {
+      font-size: 29px;
+      line-height: $topbar-height;
+    }
+
+    span {
+      font-size: 13px;
+      display: inline-block;
+      line-height: $topbar-height;
+      height: $topbar-height;
+      vertical-align: top;
+    }
+  }
+}
+
+body > section[role='main'] {
+  padding: 0px;
+}

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

@@ -1,156 +0,0 @@
-@import branding
-@import mixins
-@import typography
-@import animations
-@import variables
-
-// Styling for big panes on homepage \\
-#panes
-  .pane
-    .row
-      @include panepadding
-      padding-top: 75px
-      padding-bottom: 75px
-      &.header
-        padding-bottom: 0
-      &.content
-        padding-top: 0
-
-
-// Background styles \\
-#system.pane
-  background-color: white
-
-#brand-story.pane, #cta.pane, #shops.pane, #sell.pane
-  @include tiledPane
-
-#connect.pane
-  @include groupsbg
-
-#learn.pane
-  @include hubsbg
-
-#stats.pane
-  background-image: url("/assets/home/background-blurred-oranges.jpg")
-  background-position: center center
-  background-color: $ofn-grey
-  @include fullbg
-  @include paneWhiteText
-
-
-// Content styles \\
-#brand-story.pane
-  .row
-    h2
-      font-weight: 300
-      font-size: 88px
-    p
-      @include bodyFont
-      font-size: 1.5rem
-      font-weight: 300
-    @media all and (max-width: 768px)
-      h2
-        font-size: 52px
-      p
-        font-size: 1.3rem
-
-  a.text-vbig i
-    font-size: 75px
-
-#system.pane
-  .row .row
-    padding-bottom: 0
-  @media all and (max-width: 640px)
-    .row .row
-      padding: 0
-
-  .home-icon-box
-    background-image: url("/assets/ofn-o.png")
-    background-position: center center
-    background-repeat: no-repeat
-    background-size: auto 100%
-    padding: 3rem 0
-    text-align: center
-    margin-top: 2rem
-    @media all and (min-width: 642px)
-      margin-top: 0
-    i
-      font-size: 4rem
-    a
-      display: block
-      width: 64px
-      height: 64px
-      margin: 0 auto
-      background-color: $brand-colour
-      background-position: center center
-      background-repeat: no-repeat
-      background-size: auto 100%
-      &.search
-        background-image: url("/assets/icon-mask-magnifier.png")
-      &.shop
-        background-image: url("/assets/icon-mask-apple.png")
-      &.pick-up-delivery
-        background-image: url("/assets/icon-mask-truck.png")
-
-  h2
-    font-size: 70px
-    font-weight: 300
-    color: $brand-colour
-    @media all and (max-width: 640px)
-      font-size: 45px
-
-  .home-icon-box-bottom
-    margin-top: 1rem
-    width: 100%
-    padding-left: 1rem
-    padding-right: 1rem
-    @media all and (min-width: 480px)
-      padding-left: 3rem
-      padding-right: 3rem
-    @media all and (min-width: 642px)
-      padding-left: 1rem
-      padding-right: 1rem
-    h4
-      color: $brand-colour
-      border-bottom: 2px solid lighten($brand-colour, 20%)
-      text-align: center
-      padding: 1rem 0
-      margin: 1.5rem 0
-
-#cta.pane, #stats.pane
-  h2
-    font-weight: 300
-    font-size: 45px
-    margin-bottom: 2rem
-    @media all and (max-width: 830px)
-      font-size: 35px
-
-#stats.pane
-  .row.header
-    padding-bottom: 2rem
-
-  h4
-    font-weight: 300
-    text-transform: uppercase
-    margin: 1.5rem 0
-    display: inline-block
-    strong
-      display: block
-      font-weight: normal
-      font-size: 75px
-
-#shops.pane
-  @include paneWhiteText
-  h2
-    margin-bottom: 2rem
-    font-size: 4.4rem
-    font-weight: 300
-
-#shops-signup.pane
-  background-color: $brand-colour
-
-#sell-detail.pane
-  margin: 50px 0
-  .row
-    padding-top: 25px
-    padding-bottom: 25px

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

@@ -0,0 +1,225 @@
+@import "branding";
+@import "mixins";
+@import "typography";
+@import "animations";
+@import "variables";
+
+// Styling for big panes on homepage \\
+#panes {
+  .pane {
+    .row {
+      @include panepadding;
+
+      padding-top: 75px;
+      padding-bottom: 75px;
+
+      &.header {
+        padding-bottom: 0;
+      }
+
+      &.content {
+        padding-top: 0;
+      }
+    }
+  }
+}
+
+// Background styles \\
+#system.pane {
+  background-color: white;
+}
+
+#brand-story.pane, #cta.pane, #shops.pane, #sell.pane {
+  @include tiledPane;
+}
+
+#connect.pane {
+  @include groupsbg;
+}
+
+#learn.pane {
+  @include hubsbg;
+}
+
+#stats.pane {
+  background-image: url("/assets/home/background-blurred-oranges.jpg");
+  background-position: center center;
+  background-color: $ofn-grey;
+
+  @include fullbg;
+
+  @include paneWhiteText;
+}
+
+// Content styles \\
+#brand-story.pane {
+  .row {
+    h2 {
+      font-weight: 300;
+      font-size: 88px;
+    }
+
+    p {
+      @include bodyFont;
+
+      font-size: 1.5rem;
+      font-weight: 300;
+    }
+
+    @media all and (max-width: 768px) {
+      h2 {
+        font-size: 52px;
+      }
+
+      p {
+        font-size: 1.3rem;
+      }
+    }
+  }
+
+  a.text-vbig i {
+    font-size: 75px;
+  }
+}
+
+#system.pane {
+  .row .row {
+    padding-bottom: 0;
+  }
+
+  @media all and (max-width: 640px) {
+    .row .row {
+      padding: 0;
+    }
+  }
+
+  .home-icon-box {
+    background-image: url("/assets/ofn-o.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    padding: 3rem 0;
+    text-align: center;
+    margin-top: 2rem;
+
+    @media all and (min-width: 642px) {
+      margin-top: 0;
+    }
+
+    i {
+      font-size: 4rem;
+    }
+
+    a {
+      display: block;
+      width: 64px;
+      height: 64px;
+      margin: 0 auto;
+      background-color: $brand-colour;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: auto 100%;
+
+      &.search {
+        background-image: url("/assets/icon-mask-magnifier.png");
+      }
+
+      &.shop {
+        background-image: url("/assets/icon-mask-apple.png");
+      }
+
+      &.pick-up-delivery {
+        background-image: url("/assets/icon-mask-truck.png");
+      }
+    }
+  }
+
+  h2 {
+    font-size: 70px;
+    font-weight: 300;
+    color: $brand-colour;
+
+    @media all and (max-width: 640px) {
+      font-size: 45px;
+    }
+  }
+
+  .home-icon-box-bottom {
+    margin-top: 1rem;
+    width: 100%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    @media all and (min-width: 480px) {
+      padding-left: 3rem;
+      padding-right: 3rem;
+    }
+
+    @media all and (min-width: 642px) {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    h4 {
+      color: $brand-colour;
+      border-bottom: 2px solid lighten($brand-colour, 20%);
+      text-align: center;
+      padding: 1rem 0;
+      margin: 1.5rem 0;
+    }
+  }
+}
+
+#cta.pane, #stats.pane {
+  h2 {
+    font-weight: 300;
+    font-size: 45px;
+    margin-bottom: 2rem;
+
+    @media all and (max-width: 830px) {
+      font-size: 35px;
+    }
+  }
+}
+
+#stats.pane {
+  .row.header {
+    padding-bottom: 2rem;
+  }
+
+  h4 {
+    font-weight: 300;
+    text-transform: uppercase;
+    margin: 1.5rem 0;
+    display: inline-block;
+
+    strong {
+      display: block;
+      font-weight: normal;
+      font-size: 75px;
+    }
+  }
+}
+
+#shops.pane {
+  @include paneWhiteText;
+
+  h2 {
+    margin-bottom: 2rem;
+    font-size: 4.4rem;
+    font-weight: 300;
+  }
+}
+
+#shops-signup.pane {
+  background-color: $brand-colour;
+}
+
+#sell-detail.pane {
+  margin: 50px 0;
+
+  .row {
+    padding-top: 25px;
+    padding-bottom: 25px;
+  }
+}