making filters icon a background image on the button so event will trigger...

making filters icon a background image on the button so event will trigger regardless of where is clicked

opentech/apply/dashboard/templates/dashboard/dashboard.html

@@ -15,7 +15,6 @@
 </div>
 
 <div class="wrapper wrapper--large wrapper--top-bottom-inner-space">
-            <svg class="icon icon--filters icon--small"><use xlink:href="#filters"></use></svg>
 
     {% if object_list|length > 0 %}
         {% if filter %}

opentech/static_src/src/images/filters.svg

+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g transform="rotate(90 8 8)" fill="#25AAE1" fill-rule="evenodd">
+        <path d="M0 1.28h16V3.2H0zM0 7.04h16v1.92H0zM0 12.8h16v1.92H0z" />
+        <circle transform="rotate(90 4.8 13.76)" cx="4.8" cy="13.76" r="2.24" />
+        <circle transform="rotate(90 11.84 8)" cx="11.84" cy="8" r="2.24" />
+        <circle transform="rotate(90 4.8 2.24)" cx="4.8" cy="2.24" r="2.24" />
+    </g>
+</svg>

opentech/static_src/src/sass/apply/components/_button.scss

@@ -51,7 +51,9 @@
         margin-bottom: 20px;
         font-weight: $weight--normal;
         color: $color--default;
+        background: url('./../../images/filters.svg') $color--white no-repeat 93% center;
         border-color: $color--light-mid-grey;
+        transition: none;
 
         @include media-query(tablet-portrait) {
             display: none;

opentech/static_src/src/sass/apply/components/_icon.scss

@@ -51,10 +51,4 @@
         width: 14px;
         height: 14px;
     }
-
-    &--filters {
-        width: 16px;
-        height: 16px;
-        fill: $color--primary;
-    }
 }