From b0105bc1ed034af76fa2289e7a54920c56039e63 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 29 Jul 2015 19:29:57 +0500 Subject: mm-1762 - Search improvements with some other minor Ui changes --- web/sass-files/sass/partials/_headers.scss | 42 ++++++++++++++++++++----- web/sass-files/sass/partials/_responsive.scss | 44 +++++++++++++++------------ web/sass-files/sass/partials/_search.scss | 37 ++++++++++++++-------- 3 files changed, 84 insertions(+), 39 deletions(-) (limited to 'web/sass-files/sass/partials') diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 687e330a6..2c5f845d2 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -84,8 +84,31 @@ // Team Header in Sidebar .sidebar--left, .sidebar--menu { .team__header { - padding: 10px; + position: relative; @include legacy-pie-clearfix; + &:before { + @include single-transition(all, 0.05s, linear); + content: ""; + background: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + } + &:hover { + &:before { + background: rgba(black, 0.05); + } + .user__name { + color: #fff; + } + .navbar-right { + .dropdown-toggle { + @include opacity(1); + } + } + } a { color: #fff; } @@ -94,12 +117,11 @@ position: absolute; top: 10px; right: 22px; + z-index: 5; .dropdown-toggle { + @include single-transition(all, 0.1s, linear); padding: 10px; @include opacity(0.8); - &:hover { - @include opacity(1); - } } .dropdown-menu { li a { @@ -123,7 +145,9 @@ } .header__info { color: #fff; - padding-left: 4px; + padding: 10px 10px 10px 14px; + z-index: 1; + position: relative; } .team__name, .user__name { display: block; @@ -137,9 +161,11 @@ text-decoration: none; } .user__name { + @include single-transition(all, 0.1s, linear); font-size: 14px; font-weight: 400; color: #eee; + color: rgba(#fff, 0.8); } > .nav { > li { @@ -250,10 +276,10 @@ vertical-align: top; display: inline-block; width: 15px; - margin: 9px 4px 3px 0; + margin: 9px 6px 3px 0; &:hover { svg { - fill: #888; + fill: #777; } } a { @@ -263,6 +289,6 @@ svg { vertical-align: top; margin-top: 8px; - fill: #AAA; + fill: #aaa; } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 719934638..f3f9cd477 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -448,28 +448,39 @@ } } .search-bar__container { - padding: 10px 8px 13px; + padding: 0; + height: 45px; background: $primary-color; color: #fff; + &.focused { + .sidebar__collapse { + @include translateX(-45px); + } + .search__form { + padding-left: 10px; + padding-right: 67px; + } + .search__clear { + display: block; + } + } .search__form { border: none; - padding: 0 60px 0 35px; + padding: 7px 20px 0 45px; + height: 45px; + position: relative; + @include single-transition(all, 0.2s, linear); .form-control { - line-height: normal; - background: none; + border: none; + padding: 0 10px 0 31px; + background: rgba(black, 0.2); + @include border-radius(3px); color: #fff; - border-radius: 0; - padding: 0; - border-bottom: 1px solid #FFF; - border-bottom: 1px solid rgba(#fff, 0.4); - &:focus { - border-bottom: 1px solid rgba(#fff, 0.8); - } } input[type=text] { - @include input-placeholder { + @include input-placeholder { color: #fff; - color: rgba(#fff, 0.6); + color: rgba(#fff, 0.5); } } } @@ -550,11 +561,6 @@ .sidebar--right__close { display: none; } - .search__form { - .glyphicon { - color: #fff; - } - } } .inner__wrap { &.move--right { @@ -650,7 +656,7 @@ display: block; } .access__report { - margin: 0 0 15px 15px; + margin: 0 0 15px 15px; } .access__date { div { diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index 794358320..0d005bfe2 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -1,23 +1,37 @@ .search-bar__container { padding: 8px 8px 8px 0; } -.sidebar__collapse { - width: auto; - height: auto; +.search__clear { + display: none; position: absolute; - top: 1px; - right: 15px; + right: 0; + line-height: 45px; + margin-right: 13px; + z-index: 5; + cursor: pointer; +} +.sidebar__collapse { cursor: pointer; - padding: 1em 0; z-index: 5; + fill: #FFF; + position: absolute; + left: 0; + font-size: 33px; + width: 45px; + @include single-transition(all, 0.2s, linear); + @include translateX(0px); + text-align: center; + padding-right: 2px; + line-height: 42px; display: none; } .sidebar__search-icon { position: absolute; - left: 15px; - top: 18px; - font-size: 16px; - @include opacity(0.8); + top: 15px; + margin-left: 10px; + font-size: 14px; + color: #fff; + color: rgba(#fff, 0.5); display: none; } .search__form { @@ -30,9 +44,8 @@ .sidebar--right & { width: 100%; } - .search-bar-box { + .search-bar { height: 40px; - border: 1px solid #ddd; padding-right: 30px; box-shadow: none; .search-bar__container & { -- cgit v1.2.3-1-g7c22 From 41dc0a3e3c68e610e5f67bcdfe49aeb4cc436d81 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 29 Jul 2015 19:40:22 +0500 Subject: Improving css for form hints in signup flow --- web/sass-files/sass/partials/_signup.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/sass-files/sass/partials') diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index 1a0c55f39..4b6ee79a1 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/partials/_signup.scss @@ -74,7 +74,7 @@ .form__hint { font-size: 0.95em; color: #999; - margin: 10px 0; + margin: 10px 0 0; } .signup-team-confirm__container { -- cgit v1.2.3-1-g7c22