Add variables

2 files changed, 13 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index be626678bd7..9d820a46cfb 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -192,3 +192,11 @@ $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
 $award-emoji-menu-bg: #fff;
 $award-emoji-menu-border: #f1f2f4;
 $award-emoji-new-btn-icon-color: #dcdcdc;
+
+/*
+ * Search Box
+ */
+$location-badge-color: #aaa;
+$location-badge-bg: $gray-normal;
+$location-icon-color: #e7e9ed;
+
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 4a02f75719b..110258a9e11 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -56,10 +56,6 @@
     font-style: normal;
   }
 
-  .remove-badge {
-    display: none;
-  }
-
   .search-input {
     border: none;
     font-size: 14px;
@@ -73,16 +69,17 @@
   .location-badge {
     line-height: 25px;
     padding: 0 5px;
-    border-radius: 2px;
+    border-radius: $border-radius-default;
     font-size: 14px;
     font-style: normal;
-    color: #AAAAAA;
+    color: $location-badge-color;
     display: inline-block;
-    background-color: #F5F5F5;
+    background-color: $location-badge-bg;
     vertical-align: top;
   }
 
   .search-input-container {
+    display: -webkit-flex;
     display: flex;
   }
 
@@ -100,7 +97,7 @@
       @include transition(color .15s);
       position: absolute;
       right: 5px;
-      color: #E7E9ED;
+      color: $location-icon-color;
       top: 0;
       -webkit-user-select: none;
       -moz-user-select: none;