diff options
Diffstat (limited to 'web/sass-files/sass')
| -rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 39 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_navbar.scss | 14 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 44 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_search.scss | 37 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_signup.scss | 2 |
5 files changed, 91 insertions, 45 deletions
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 687e330a6..fb37c43eb 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -84,8 +84,32 @@ // Team Header in Sidebar .sidebar--left, .sidebar--menu { .team__header { + position: relative; padding: 10px; @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.1); + } + .user__name { + color: #fff; + } + .navbar-right { + .dropdown-toggle { + @include opacity(1); + } + } + } a { color: #fff; } @@ -94,12 +118,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 { @@ -124,6 +147,8 @@ .header__info { color: #fff; padding-left: 4px; + z-index: 1; + position: relative; } .team__name, .user__name { display: block; @@ -137,9 +162,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 +277,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 +290,6 @@ svg { vertical-align: top; margin-top: 8px; - fill: #AAA; + fill: #aaa; } } diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss index e5e67a9e0..905907d84 100644 --- a/web/sass-files/sass/partials/_navbar.scss +++ b/web/sass-files/sass/partials/_navbar.scss @@ -5,15 +5,15 @@ .navbar-default { position: absolute; border: none; - min-height: 50px; + min-height: 45px; background: $primary-color; .navbar-nav { > li { > a { - height: 50px; + height: 45px; padding: 0 1.3em; i { - line-height: 50px; + line-height: 45px; } } } @@ -24,8 +24,8 @@ border-radius: 0; margin: 0; padding: 0 10px; - line-height: 53px; - height: 50px; + line-height: 48px; + height: 44px; z-index: 5; fill: #fff; .icon-bar { @@ -38,8 +38,8 @@ } .navbar-brand { padding: 0 0.5em; - height: 50px; - line-height: 50px; + height: 45px; + line-height: 45px; float: none; font-size: 16px; .heading { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 719934638..81b94ab5a 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 49px; + 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..e2168ef75 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: 35px; + width: 49px; + @include single-transition(all, 0.2s, linear); + @include translateX(0px); + text-align: center; + padding-left: 1px; + line-height: 40px; 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 & { 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 { |