diff options
Diffstat (limited to 'webapp/sass/responsive/_mobile.scss')
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 92 |
1 files changed, 61 insertions, 31 deletions
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 24db3821f..862c3a59c 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,12 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .channel-header { + .channel-header__icon { + display: none; + } + } + .member-role .member-menu, .member-drop .member-menu { right: 0; @@ -76,10 +82,10 @@ @include box-shadow(none); background: alpha-color($black, .8); border: none; - height: calc(100% - 40px); + height: calc(100% - 50px); max-width: 100%; position: fixed; - top: 47px; + top: 40px !important; width: 100%; &.in { @@ -865,14 +871,18 @@ white-space: nowrap; .heading { + font-size: 17px; + font-weight: 400; line-height: normal; position: relative; - top: 11px; + top: 14px; vertical-align: top; } .header-dropdown__icon { - top: 18px; + font-size: 12px; + margin-left: 5px; + top: 20px; vertical-align: top; } } @@ -891,12 +901,12 @@ @include translate3d(0, 100%, 0); background: alpha-color($black, .9); display: block; - height: calc(100% - 40px); + height: calc(100% - 48px); left: 0; overflow: auto; padding: 1.4em 0 0; position: fixed; - top: 42px; + top: 48px; visibility: hidden; width: 100%; @@ -981,21 +991,36 @@ } .search-bar__container { - @include flex(0 0 44px); + @include flex(0 0 50px); background: $primary-color; color: $white; padding: 0; + .search-form__container { + padding: 0; + } + .search__form { @include single-transition(all, .2s, linear); @include translateX(0); border: none; - height: 45px; - padding: 7px 20px 0 49px; - position: relative; + margin-top: 9px; width: 100%; - margin-left: 0px; - margin-right: 0px; + + .search-bar { + font-size: 14px; + height: 32px; + padding: 0 40px; + } + + .search__icon { + left: 15px; + top: 7px; + + svg { + width: 17px; + } + } .icon--refresh { @include opacity(.6); @@ -1009,7 +1034,7 @@ background: $white; border: none; color: $dark-gray; - padding: 0 31px 0 31px; + padding: 0 31px; } } @@ -1053,7 +1078,7 @@ } .nav-pills__container { - height: calc(100% - 42px); + height: calc(100% - 60px); } > div { @@ -1110,7 +1135,7 @@ } h4 { - margin: 16px 0 8px; + margin: 2em 0 1.5em; } > a { @@ -1148,10 +1173,10 @@ } .emoji-rhs { - position: relative; display: none; - top: 1px; + position: relative; right: -1px; + top: 1px; } .msg-typing:empty { @@ -1171,27 +1196,32 @@ } } - .sidebar__collapse, - .sidebar__search-icon { - display: block; + .sidebar-collapse__container { + display: table-cell; + vertical-align: top; } .sidebar__search-clear { + @include opacity(1); + color: inherit; display: block; - top: 6px; - height: 30px; - width: 35px; - margin-right: 18px; + height: 32px; + margin-right: 0; + text-align: center; + top: 0; + width: 42px; + &.visible { visibility: visible; } } .sidebar__search-clear-x { - margin-left: 14px; - font-size: 22px; + font-size: 21px; font-weight: 700; - opacity: .7; + line-height: 0; + position: relative; + top: 9px; } .sidebar--right__close { @@ -1199,12 +1229,12 @@ } .sidebar-right__body { - height: calc(100% - 44px); + height: calc(100% - 56px); } } .search-items-container { - height: calc(100% - 44px); + height: calc(100% - 56px); } .inner-wrap { @@ -1261,10 +1291,10 @@ .app__content { margin: 0; - padding-top: 45px; + padding-top: 56px; .channel__wrap & { - padding-top: 45px; + padding-top: 56px; } #channel-header { |