diff options
Diffstat (limited to 'app/assets/stylesheets/generic/header.scss')
-rw-r--r-- | app/assets/stylesheets/generic/header.scss | 216 |
1 files changed, 95 insertions, 121 deletions
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 3b0ee264bc3..71afccba001 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -2,7 +2,14 @@ * Application Header * */ +$header-height: 46px; + header { + &.navbar-empty { + background: #FFF; + border-bottom: 1px solid #EEE; + } + &.navbar-gitlab { z-index: 100; margin-bottom: 0; @@ -11,56 +18,11 @@ header { width: 100%; .container { + background: #FFF; width: 100% !important; padding: 0; - padding-right: 35px; - background: #FFF; - border-bottom: 1px solid #EEE; filter: none; - .title { - position: relative; - float: left; - margin: 0; - margin-left: 25px; - font-size: 18px; - line-height: 44px; - font-weight: bold; - color: #444; - - @include str-truncated(37%); - - a { - color: #444; - &:hover { - text-decoration: underline; - } - } - } - - .app_logo { - border-bottom: 1px solid transparent; - margin-bottom: -1px; - - a { - padding: 5px 8px; - - img { - float: left; - } - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 20px; - font-size: 18px; - line-height: 34px; - font-weight: normal; - } - } - } - .nav > li > a { color: #888; font-size: 14px; @@ -80,89 +42,80 @@ header { } } - /** NAV block with links and profile **/ - .nav { - float: right; - margin-right: 0; - } - .navbar-toggle { color: #666; margin: 0; border-radius: 0; + position: absolute; + right: 2px; &:hover { background-color: #EEE; } } } - - .turbolink-spinner { - font-size: 20px; - margin-right: 10px; - } - - @media (max-width: $screen-xs-max) { - border-width: 0; - font-size: 18px; - - .title { - @include str-truncated(70%); - } - - .navbar-collapse { - margin-top: 47px; - } - - .navbar-nav { - margin: 5px 0; - - .visible-xs, .visable-sm { - display: table-cell !important; - } - } - - li { - display: table-cell; - width: 1%; - - a { - text-align: center; - font-size: 18px !important; - } - } - } } - /** - * - * Logo holder - * - */ - .app_logo { + .header-logo { + border-bottom: 1px solid transparent; float: left; - margin-right: 9px; + height: $header-height; + width: $sidebar_width; a { float: left; - height: 46px; + height: $header-height; width: 100%; + padding: 5px 8px; + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 20px; + font-size: 18px; + line-height: 34px; + font-weight: normal; + } img { width: 36px; height: 36px; + float: left; } } + &:hover { background-color: #EEE; } } - /** - * - * Search box - * - */ + .header-content { + border-bottom: 1px solid #EEE; + padding-right: 35px; + height: $header-height; + + .title { + position: relative; + float: left; + margin: 0; + margin-left: 35px; + font-size: 18px; + line-height: 44px; + font-weight: bold; + color: #444; + + @include str-truncated(37%); + + a { + color: #444; + &:hover { + text-decoration: underline; + } + } + } + } + .search { margin-right: 10px; margin-left: 10px; @@ -174,6 +127,7 @@ header { } .search-input { + width: 220px; background-image: image-url("icon-search.png"); background-repeat: no-repeat; background-position: 10px; @@ -194,41 +148,61 @@ header { } } -.search .search-input { - width: 300px; -} +@mixin collapsed-header { + .header-logo { + width: $sidebar_collapsed_width; -@media (max-width: 1200px) { - .search .search-input { - width: 200px; + h3 { + display: none; + } } -} -@media (max-width: $screen-xs-max) { - #nprogress .spinner { - right: 35px !important; + .header-content { + .title { + margin-left: 30px; + } } } @media (max-width: $screen-md-max) { - .header-collapsed, .header-expanded { - width: 52px; + header .container .title { + max-width: 43%; + } - h3 { - display: none; - } + .header-collapsed, .header-expanded { + @include collapsed-header; } } @media(min-width: $screen-md-max) { .header-collapsed { - width: 52px; - - h3 { - display: none; - } + @include collapsed-header; } .header-expanded { } } + +@media (max-width: $screen-xs-max) { + header .container { + font-size: 18px; + + .title { + max-width: 70%; + } + + .navbar-nav { + margin: 0px; + float: none !important; + + .visible-xs, .visable-sm { + display: table-cell !important; + } + } + + li { + display: table-cell; + width: 1%; + } + } +} |