Properties and shopfront filters with taxons WIP.

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

@@ -0,0 +1,92 @@
+@import mixins
+@import branding
+@import big-input
+@import animations  
+
+// Alert when search, taxon, filter is triggered
+
+.alert-box.search-alert
+  background-color: #faf6c7
+  border-color: #faf6c7
+  color: #888
+  font-size: 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
+
+// Shopfront taxons
+.filter-box.filter-box-shopfront, .filter-box.property-box-shopfront
+  background: transparent
+
+  ul
+    margin: 0
+  ul, ul li
+    list-style: none
+  li
+    display: inline-block
+    @include border-radius(0)
+    padding: 0
+    margin: 0 0 0.25rem 0.25rem 
+    &:hover, &:focus
+      background: transparent
+  
+  li.active 
+    @include box-shadow(none)
+    a, a:hover, a:focus, a:active, a.active
+      border: 1px solid $clr-blue
+      background: $clr-blue
+      color: white
+      render-svg
+        svg
+          path
+            fill: white
+  li a
+    @include border-radius(0.5em)
+    border: 1px solid $clr-blue-light
+    padding: 0.625em 
+    font-size: 0.875em
+    color: $clr-blue
+    font-size: 0.75em
+    i
+      font-size: 1.25rem
+      margin-left: 0.25rem
+    render-svg
+      width: 1.25rem
+      height: 1.25rem
+      svg
+        width: 1.25rem
+        height: 1.25rem
+        path
+          @include csstrans
+          fill: $clr-blue
+    &:hover, &:focus
+      color: $clr-blue-bright
+      render-svg
+        svg
+          path
+            fill: $clr-blue-bright
+
+// Shopfront properties
+.filter-box.property-box-shopfront
+  li.active 
+    @include box-shadow(none)
+    a, a:hover, a:focus, a:active, a.active
+      border: 1px solid #333
+      background: #333
+      color: white
+  li a
+    border: 1px solid #ccc
+    color: #888
+    &:hover, &:focus
+      border: 1px solid #999
+      color: #666
+

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

@@ -27,7 +27,6 @@
 products .filter-box
   background: #f7f7f7
 
-
 .filter-box
   background: rgba(245,245,245,0.6)
   .tdhead
@@ -42,7 +41,6 @@ products .filter-box
   [class*="block-grid-"] > li
     padding-bottom: 0.5rem !important
 
-
   li
     @include border-radius(12px)
     padding-top: 0.5rem
@@ -107,16 +105,6 @@ products .filter-box
         path
           fill: #666
 
-.filter-box.filter-box-shopfront
-  .tdhead
-    margin-top: 0rem
-    margin-bottom: 0.75rem
-    padding: 0.5rem 0
-    h5
-      color: $clr-blue
-    .button.tiny 
-      margin-bottom: 0rem
-
 .button.filterbtn
   margin-bottom: 0 !important
   min-width: 160px

app/views/shop/products/_filters.html.haml

@@ -1,21 +1,45 @@
-.row.animate-show{"ng-hide" => "filtersActive"}
-  .small-12.columns
-    = render partial: 'shared/components/filter_controls_shopfront'
+.filter-box.filter-box-shopfront.animate-hide.text-right
+  %ul
+    %taxon-selector{objects: "Products.products | products:query | products:showProfiles",
+      results: "activeTaxons"}
 
-.row.filter-box.filter-box-shopfront.animate-hide{"ng-show" => "filtersActive"}
-  .small-12.columns
-    / .row.tdhead
-    /   .small-12.medium-6.columns
-    /     %h5
-    /       .light Filter by
-    /       Category
-    /   .small-12.medium-6.columns.text-right
-    /     = render partial: 'shared/components/filter_box_shopfront'
-    /     = render partial: 'shared/components/filter_controls_shopfront'
-        
-    .row
-      .small-12.columns
-        %ul.small-block-grid-2.medium-block-grid-3.large-block-grid-4
-          %taxon-selector{objects: "Products.products | products:query | products:showProfiles",
-            results: "activeTaxons"}
+    %li
+      %a
+        %span
+          + 7 more
+        %i.ofn-i_052-point-down
 
+    / TODO: Needs controller for Angular Bootstrap directive for dropdown:
+    / {"ng-controller" => "DropdownCtrl"}
+    
+    / %li
+    /   .btn-group{:dropdown => "", "is-open" => "status.isopen"}
+    /     %button.btn.btn-primary.dropdown-toggle{"dropdown-toggle" => "", "ng-disabled" => "disabled", :type => "button"}
+    /       + 7 more
+    /       %span.caret
+    /     %ul.dropdown-menu{:role => "menu"}
+    /       %li
+    /         %a{:href => "#"} Action
+    /       %li
+    /         %a{:href => "#"} Another action
+    /       %li
+    /         %a{:href => "#"} Something else here
+    /       %li.divider
+    /       %li
+    /         %a{:href => "#"} Separated link
+
+.filter-box.property-box-shopfront.animate-hide.text-right
+  %ul
+    %li
+      %a Organic Certified
+    %li
+      %a Free Range
+    %li
+      %a Biodynamic
+    %li
+      %a
+        + 2 more
+        %span.caret
+
+          
+          

app/views/shop/products/_form.html.haml

@@ -1,6 +1,22 @@
 %products.small-12.columns{"ng-controller" => "ProductsCtrl", "ng-show" => "order_cycle.order_cycle_id != null",
 "infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1"}
 
+  // TODO: Needs an ng-show to slide content down
+  .row.animate-hide
+    .small-12.columns
+      .alert-box.search-alert.ng-scope{"ng-show" => "visible", "ofn-inline-alert" => ""}
+        %a.right{"ng-click" => "close()"} 
+          Clear all 
+          %i.ofn-i_009-close
+        %span.filter-label
+          Showing:
+          %span.applied-properties
+            Certified Organic
+          %span.applied-taxons
+            Fruit & Vegetables & Dairy
+          with
+          %span.applied-search
+            "search query string"
   .row
     .small-12.medium-6.large-5.columns
       %input#search.text{"ng-model" => "query",