[PLT-1412] Updated search buttons on mobile GH-5261 (#5306)

* Update search buttons on mobile

* removed commented codes in _mobile.scss

* deleted 'search_bar.cancel'  from webapp/i18n/en.json

1 files changed, 12 insertions, 21 deletions

diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4ce100836..a7dd68b87 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -896,32 +896,12 @@
         }
     }
 
-    .search__clear {
-        display: block;
-    }
-
     .search-bar__container {
         @include flex(0 0 44px);
         background: $primary-color;
         color: $white;
         padding: 0;
 
-        &.focused {
-            .sidebar__collapse {
-                @include translateX(-45px);
-            }
-
-            .search__form {
-                @include translateX(-45px);
-                padding-left: 55px;
-                padding-right: 24px;
-            }
-
-            .search__clear {
-                @include translateX(0);
-            }
-        }
-
         .search__form {
             @include single-transition(all, .2s, linear);
             @include translateX(0);
@@ -945,7 +925,7 @@
                 background: $white;
                 border: none;
                 color: $dark-gray;
-                padding: 0 10px 0 31px;
+                padding: 0 31px 0 31px;
             }
         }
 
@@ -1102,6 +1082,17 @@
             display: block;
         }
 
+        .sidebar__clear-icon {
+            display: block;
+            &.visible {
+                visibility: visible;
+            }
+        }
+
+        .fa-times {
+            margin-left: 15px;
+        }
+
         .sidebar--right__close {
             display: none;
         }