From 4b691771f30a8b681d81b8af65e5c62663a1d512 Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Tue, 15 Dec 2020 14:09:14 +0100
Subject: [PATCH] style: update searchbar

---
 assets/scss/common/_dark.scss    |  8 ++++++++
 assets/scss/layouts/_header.scss | 24 ++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index ddd4f16..4c54fff 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -141,10 +141,18 @@ body.dark .navbar .btn-link:active {
 
 body.dark .form-control.is-search {
   background: $body-overlay-dark;
+
+  /*
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  */
+}
+
+body.dark .navbar-form::after {
+  color: $gray-700;
+  border: 1px solid $body-bg-dark;
 }
 
 body.dark .form-control:focus {
diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss
index e423a7a..66edbcc 100644
--- a/assets/scss/layouts/_header.scss
+++ b/assets/scss/layouts/_header.scss
@@ -79,6 +79,7 @@
 }
 
 .navbar-form {
+  position: relative;
   margin-top: 0.25rem;
 }
 
@@ -117,13 +118,36 @@
 }
 
 .form-control.is-search {
+  /*
   padding-right: calc(1.5em + 0.75rem);
+  */
+  padding-right: 2.5rem;
   background: $gray-100;
   border: 0;
+
+  /*
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  */
+}
+
+.navbar-form::after {
+  position: absolute;
+  top: 0.4625rem;
+  right: 0.5375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding-right: 0.4375rem;
+  padding-left: 0.4375rem;
+  font-size: $font-size-base * 0.75;
+  color: $gray-700;
+  content: "/";
+  border: 1px solid $gray-300;
+  border-radius: 0.25rem;
 }
 
 /*! purgecss start ignore */