Improving smoothness of RHS search

2 files changed, 13 insertions, 6 deletions

diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 81b94ab5a..e3f140413 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -427,9 +427,9 @@
     body {
         &.white {
             .inner__wrap {
-            >.row.content {
-                margin-bottom: -185px;
-            }
+                >.row.content {
+                    margin-bottom: -185px;
+                }
             }
         }
     }
@@ -447,6 +447,9 @@
             }
         }
     }
+    .search__clear {
+        display: block;
+    }
     .search-bar__container {
         padding: 0;
         height: 45px;
@@ -457,15 +460,17 @@
                 @include translateX(-45px);
             }
             .search__form {
-                padding-left: 10px;
-                padding-right: 67px;
+                @include translateX(-45px);
+                padding-left: 55px;
+                padding-right: 24px;
             }
             .search__clear {
-                display: block;
+                @include translateX(0px);
             }
         }
         .search__form {
             border: none;
+            @include translateX(0px);
             padding: 7px 20px 0 49px;
             height: 45px;
             position: relative;
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index e2168ef75..9ae41ebb0 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -7,6 +7,8 @@
 	right: 0;
 	line-height: 45px;
 	margin-right: 13px;
+	@include single-transition(all, 0.2s, linear);
+	@include translateX(60px);
 	z-index: 5;
 	cursor: pointer;
 }