From d1ea2c5f7785427ea7f992912d9259c603aaa2ee Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 21 Apr 2020 11:40:01 +0200
Subject: [PATCH] Extract shop searchbar styles to separate file

---
 .../stylesheets/darkswarm/shop.css.scss       | 42 ------------------
 .../darkswarm/shop_search.css.scss            | 44 +++++++++++++++++++
 2 files changed, 44 insertions(+), 42 deletions(-)
 create mode 100644 app/assets/stylesheets/darkswarm/shop_search.css.scss

diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss
index 23b6502866..d17c0befab 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop.css.scss
@@ -17,48 +17,6 @@ $sidebar-large-width: 45%;
 $sidebar-footer-height: 5em;
 
 .darkswarm {
-  .shop-searchbar {
-    background-color: $grey-100;
-    height: 5em;
-    padding: 1em 0;
-    margin-bottom: 1em;
-    position: relative;
-    z-index: 5;
-
-    input#search {
-      height: 3em;
-      border-radius: 0.25em;
-      border: solid 1px $grey-300;
-      margin: 0;
-      padding: 0 1em 0 2.75em;
-      width: 100%;
-      min-width: 0;
-      background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
-      font-size: 1em;
-
-      &::placeholder {
-        font-style: italic;
-      }
-    }
-
-    button {
-      background-color: $grey-600;
-      margin-left: 1em;
-      height: 3em;
-      width: 7em;
-      padding: 0;
-      font-size: 1em;
-
-      @include breakpoint(mobile) {
-        margin-left: 0.75em;
-      }
-    }
-
-    @include breakpoint(mobile) {
-      font-size: 0.9em;
-    }
-  }
-
   .shop-filters-sidebar {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
new file mode 100644
index 0000000000..9db17086e9
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -0,0 +1,44 @@
+@import "mixins";
+@import "branding";
+
+.shop-searchbar {
+  background-color: $grey-100;
+  height: 5em;
+  padding: 1em 0;
+  margin-bottom: 1em;
+  position: relative;
+  z-index: 5;
+
+  input#search {
+    height: 3em;
+    border-radius: 0.25em;
+    border: solid 1px $grey-300;
+    margin: 0;
+    padding: 0 1em 0 2.75em;
+    width: 100%;
+    min-width: 0;
+    background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
+    font-size: 1rem; // avoid zoom on iphone, see issue #4535
+
+    &::placeholder {
+      font-style: italic;
+    }
+  }
+
+  button {
+    background-color: $grey-600;
+    margin-left: 1em;
+    height: 3em;
+    width: 7em;
+    padding: 0;
+    font-size: 1em;
+
+    @include breakpoint(mobile) {
+      margin-left: 0.75em;
+    }
+  }
+
+  @include breakpoint(mobile) {
+    font-size: 0.9em;
+  }
+}