move filters styles to it's own component

opentech/apply/funds/templates/funds/submissions.html

@@ -20,8 +20,8 @@
     {% if object_list|length > 0 or active_filters %}
         <div class="button button--filters button--contains-icons js-open-filters">Filter By</div>
 
-        <div class="wrapper wrapper--filters js-filter-wrapper">
-            <div class="wrapper wrapper--filters-header">
+        <div class="filters js-filter-wrapper">
+            <div class="filters__header">
                 <div class="js-clear-filters">Clear</div>
                 <div>Filter by</div>
                 <div class="js-close-filters">Close</div>

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

+.filters {
+    display: none;
+
+    @include media-query(tablet-landscape) {
+        display: block;
+    }
+
+    &.is-open {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 20;
+        display: block;
+        width: 100%;
+        height: 100vh;
+        background: $color--white;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        padding: 20px 0;
+
+        @include media-query(tablet-landscape) {
+            display: none;
+        }
+
+        > div[class^='js-'] {
+            color: $color--primary;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+}

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

@@ -176,46 +176,6 @@
         }
     }
 
-    &--filters {
-        display: none;
-
-        @include media-query(tablet-portrait) {
-            display: block;
-        }
-
-        &.is-open {
-            position: fixed;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 20;
-            display: block;
-            width: 100%;
-            height: 100vh;
-            background: $color--white;
-        }
-    }
-
-    &--filters-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        padding: 20px 0;
-
-        @include media-query(tablet-portrait) {
-            display: none;
-        }
-
-        > div[class^='js-'] {
-            color: $color--primary;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-    }
-
     &--search {
         display: flex;
         flex-direction: column;

opentech/static_src/src/sass/apply/main.scss

@@ -18,6 +18,7 @@
 @import 'components/comment';
 @import 'components/button';
 @import 'components/feed';
+@import 'components/filters';
 @import 'components/grid';
 @import 'components/heading';
 @import 'components/icon';