From b4e5542e5fa274e39adf553ee4105a60bfb471f5 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Thu, 21 May 2020 17:46:58 +0200
Subject: [PATCH] Extract re-usable sidebar styes

---
 .../darkswarm/expanding-sidebar.css.scss      | 75 +++++++++++++++++
 .../stylesheets/darkswarm/shop.css.scss       | 81 +------------------
 .../stylesheets/darkswarm/variables.css.scss  |  5 ++
 app/views/shop/products/_form.html.haml       |  2 +-
 4 files changed, 84 insertions(+), 79 deletions(-)
 create mode 100644 app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss

diff --git a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss
new file mode 100644
index 0000000000..07874ef5c3
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss
@@ -0,0 +1,75 @@
+@import "mixins";
+@import "variables";
+@import "branding";
+
+.expanding-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .background {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 200;
+    height: 100%;
+    width: 100%;
+    background-color: $shop-sidebar-overlay;
+    opacity: 0;
+    transition: opacity $transition-sidebar;
+  }
+
+  &.shown {
+    .background {
+      opacity: 1;
+    }
+
+    .sidebar, .sidebar-footer {
+      margin-right: 0;
+    }
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 210;
+    height: 100%;
+    width: $sidebar-large-width;
+    margin-right: -$sidebar-large-width;
+    background-color: rgba($white, 0.95);
+    padding: 1em;
+    transition: margin $transition-sidebar;
+    overflow-y: scroll;
+  }
+
+  .sidebar-footer {
+    background-color: $grey-800;
+    width: $sidebar-large-width;
+    margin-right: -$sidebar-large-width;
+    min-height: $sidebar-footer-height;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    transition: margin $transition-sidebar;
+    padding: 1em;
+
+    button {
+      width: 48%;
+    }
+  }
+
+  @include breakpoint(tablet) {
+    .sidebar, .sidebar-footer {
+      width: $sidebar-medium-width;
+      margin-right: -$sidebar-medium-width;
+    }
+  }
+
+  @include breakpoint(mobile) {
+    .sidebar, .sidebar-footer {
+      width: $sidebar-small-width;
+      margin-right: -$sidebar-small-width;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 885536208c..367d414d2b 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -11,84 +11,9 @@
 @import "shop-taxon-flag";
 @import "shop-popovers";
 
-$sidebar-small-width: 75%;
-$sidebar-medium-width: 65%;
-$sidebar-large-width: 45%;
-$sidebar-footer-height: 5em;
-
-.shop-filters-sidebar, .cart-sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  .background {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 200;
-    height: 100%;
-    width: 100%;
-    background-color: $shop-sidebar-overlay;
-    opacity: 0;
-    transition: opacity $transition-sidebar;
-  }
-
-  &.shown {
-    .background {
-      opacity: 1;
-    }
-
-    .sidebar, .sidebar-footer {
-      margin-right: 0;
-    }
-  }
-
-  .sidebar {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 210;
-    height: 100%;
-    width: $sidebar-large-width;
-    margin-right: -$sidebar-large-width;
-    background-color: rgba($white, 0.95);
-    padding: 1em;
-    transition: margin $transition-sidebar;
-    overflow-y: scroll;
-
-    .property-selectors {
-      margin-bottom: $sidebar-footer-height + 2em;
-    }
-  }
-
-  .sidebar-footer {
-    background-color: $grey-800;
-    width: $sidebar-large-width;
-    margin-right: -$sidebar-large-width;
-    height: $sidebar-footer-height;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    transition: margin $transition-sidebar;
-    padding: 1em;
-
-    button {
-      width: 48%;
-    }
-  }
-
-  @include breakpoint(tablet) {
-    .sidebar, .sidebar-footer {
-      width: $sidebar-medium-width;
-      margin-right: -$sidebar-medium-width;
-    }
-  }
-
-  @include breakpoint(mobile) {
-    .sidebar, .sidebar-footer {
-      width: $sidebar-small-width;
-      margin-right: -$sidebar-small-width;
-    }
+.shop-filters-sidebar {
+  .property-selectors {
+    margin-bottom: $sidebar-footer-height + 2em;
   }
 }
 
diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss
index 115212fc76..08930efd76 100644
--- a/app/assets/stylesheets/darkswarm/variables.css.scss
+++ b/app/assets/stylesheets/darkswarm/variables.css.scss
@@ -33,6 +33,11 @@ $topbar-dropdown-link-bg-hover: $white;
 
 $mobile-nav-height: 2.8em;
 
+$sidebar-small-width: 75%;
+$sidebar-medium-width: 65%;
+$sidebar-large-width: 45%;
+$sidebar-footer-height: 5em;
+
 $radius-small: 0.25em;
 $radius-medium: 0.5em;
 
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 7d2718c2d5..ffbc7bdf25 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -31,7 +31,7 @@
 
               = render partial: "shop/products/filters"
 
-            .shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}
+            .expanding-sidebar.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}}
               .background{ng: {click: 'toggleFilterSidebar()'}}
               .sidebar
                 %h5