From 24f8bbb37c391ed2ff1225c131828e3df75a3d5a Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 6 Aug 2018 15:40:49 +0100
Subject: [PATCH] move filters styles to it's own component
---
.../funds/templates/funds/submissions.html | 4 +-
.../src/sass/apply/components/_filters.scss | 39 ++++++++++++++++++
.../src/sass/apply/components/_wrapper.scss | 40 -------------------
opentech/static_src/src/sass/apply/main.scss | 1 +
4 files changed, 42 insertions(+), 42 deletions(-)
create mode 100644 opentech/static_src/src/sass/apply/components/_filters.scss
diff --git a/opentech/apply/funds/templates/funds/submissions.html b/opentech/apply/funds/templates/funds/submissions.html
index 9684cb70f..dce637a3a 100644
--- a/opentech/apply/funds/templates/funds/submissions.html
+++ b/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>
diff --git a/opentech/static_src/src/sass/apply/components/_filters.scss b/opentech/static_src/src/sass/apply/components/_filters.scss
new file mode 100644
index 000000000..812e3758f
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_filters.scss
@@ -0,0 +1,39 @@
+.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;
+ }
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index cd3161730..34405caaf 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/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;
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 5aea73202..82e41b694 100755
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/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';
--
GitLab