diff options
author | Saturnino Abril <saturnino.abril@gmail.com> | 2017-03-04 03:20:06 +0900 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2017-03-03 15:20:06 -0300 |
commit | 74c1fbbcf76157493bf29ac25923f612efb0782d (patch) | |
tree | e74440d704e566c6cb0c3f0855099c42ed27b31a /webapp/sass | |
parent | f37c03a75f745f00d13b91140a9e6fb9a8d5799a (diff) | |
download | chat-74c1fbbcf76157493bf29ac25923f612efb0782d.tar.gz chat-74c1fbbcf76157493bf29ac25923f612efb0782d.tar.bz2 chat-74c1fbbcf76157493bf29ac25923f612efb0782d.zip |
Mobile Web: Auto-focus cursor in the search box (#5284)
* Mobile Web: Auto-focus cursor in the search box and open keyboard when the search icon is tapped
* fixed issue with safari mobile view
* added isFocus props to search_bar.jsx component
* used 'x' and fixed spacing
* changed 'x' icon and fixed css
* added aria-hidden='true'
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/components/_search.scss | 2 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 24 |
2 files changed, 20 insertions, 6 deletions
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index bdc285300..b792ad31a 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -51,7 +51,7 @@ top: 15px; } -.sidebar__clear-icon { +.sidebar__search-clear { @include opacity(.5); color: $dark-gray; width: 40px; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ee26045ac..37c91846e 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -933,7 +933,7 @@ .icon--refresh { @include opacity(.6); color: $black; - right: 33px; + right: 30px; top: 15px; } @@ -955,12 +955,19 @@ @include single-transition(transform, .35s, ease); @include translate3d(290px, 0, 0); border: none; - display: block; width: 290px; + visibility: hidden; + + &.visible { + display: block; + visibility: visible; + } &.move--left, &.webrtc--show { @include translate3d(0, 0, 0); + display: block; + visibility: visible; } } @@ -1099,15 +1106,22 @@ display: block; } - .sidebar__clear-icon { + .sidebar__search-clear { display: block; + top: 6px; + height: 30px; + width: 35px; + margin-right: 18px; &.visible { visibility: visible; } } - .fa-times { - margin-left: 15px; + .sidebar__search-clear-x { + margin-left: 14px; + font-size: 22px; + font-weight: 700; + opacity: .7; } .sidebar--right__close { |