diff options
author | Sam Rose <sam@gitlab.com> | 2017-03-18 15:01:00 +0300 |
---|---|---|
committer | Sam Rose <sam@gitlab.com> | 2017-03-25 16:24:04 +0300 |
commit | 004f3a0bc2e3c85518a2a95db68945b47acc14c7 (patch) | |
tree | 6a0c149643315bdd6335074e576408eaa0d49169 /app/assets/stylesheets/framework/header.scss | |
parent | 57f79da98eee7e5fc95e5ec3e0092eeff7e54a68 (diff) |
Activate group name toggle based on horizontal space
Diffstat (limited to 'app/assets/stylesheets/framework/header.scss')
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 54 |
1 files changed, 24 insertions, 30 deletions
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 6660a022260..b6b52325088 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -26,7 +26,7 @@ header { padding: 0 16px; z-index: 100; margin-bottom: 0; - height: $header-height; + min-height: $header-height; background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; @@ -85,7 +85,7 @@ header { .navbar-toggle { color: $nav-toggle-gray; - margin: 6px 0; + margin: 7px 0; border-radius: 0; position: absolute; right: -10px; @@ -135,12 +135,14 @@ header { } .header-content { + display: flex; + justify-content: space-between; position: relative; - height: $header-height; + min-height: $header-height; padding-left: 30px; - @media (min-width: $screen-sm-min) { - padding-right: 0; + @media (max-width: $screen-sm-max) { + padding-right: 20px; } .dropdown-menu { @@ -165,8 +167,7 @@ header { } .group-name-toggle { - margin: 0 5px; - vertical-align: sub; + margin: 3px 5px; } .group-title { @@ -177,39 +178,32 @@ header { } } + .title-container { + display: flex; + align-items: flex-start; + flex: 1 1 auto; + padding-top: (($header-height - 19) / 2); + overflow: hidden; + } + .title { position: relative; padding-right: 20px; margin: 0; font-size: 18px; - max-width: 385px; + line-height: 22px; display: inline-block; - line-height: $header-height; font-weight: normal; color: $gl-text-color; - overflow: hidden; - text-overflow: ellipsis; vertical-align: top; white-space: nowrap; - &.initializing { - display: none; - } - - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - max-width: 300px; - } - - @media (max-width: $screen-xs-max) { - max-width: 190px; - } - - @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { - max-width: 428px; + &.wrap { + white-space: normal; } - @media (min-width: $screen-lg-min) { - max-width: 685px; + &.initializing { + opacity: 0; } a { @@ -226,10 +220,10 @@ header { border: transparent; background: transparent; position: absolute; + top: 2px; right: 3px; width: 12px; line-height: 19px; - margin-top: (($header-height - 19) / 2); padding: 0; font-size: 10px; text-align: center; @@ -247,7 +241,7 @@ header { } .navbar-collapse { - float: right; + flex: 0 0 auto; border-top: none; @media (min-width: $screen-md-min) { @@ -255,7 +249,7 @@ header { } @media (max-width: $screen-xs-max) { - float: none; + flex: 1 1 auto; } } } |