diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-11-09 16:11:21 +0000 |
---|---|---|
committer | Oswaldo Ferreira <oswaldo@gitlab.com> | 2017-11-10 19:32:54 +0000 |
commit | 4bab041750c328718265bf0459a151eff7e2965a (patch) | |
tree | cb92521a0b87cd97409af4e52e5b752974a60612 | |
parent | 456e45010abef279a4766403dee14e018f8951da (diff) | |
download | gitlab-ce-4bab041750c328718265bf0459a151eff7e2965a.tar.gz |
Merge branch '37920-improve-breadcrumbs-clipping' into 'master'
Improve breadcrumbs clipping
Closes #37920
See merge request gitlab-org/gitlab-ce!15164
(cherry picked from commit 5d5d7f914c06a18dea567c8d90d0028fb3f86d07)
cb2d2bc3 Remove max-width on desktop
738aec70 Dynamically truncate breadcrumbs
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 22 |
1 files changed, 18 insertions, 4 deletions
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 1cdfa904374..f0139b5f33a 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -401,10 +401,13 @@ .breadcrumbs-list { display: -webkit-flex; display: flex; - flex-wrap: wrap; margin-bottom: 0; line-height: 16px; + @media (max-width: $screen-xs-max) { + flex-wrap: wrap; + } + > li { display: flex; align-items: center; @@ -412,24 +415,35 @@ padding: 2px 0; &:not(:last-child) { - margin-right: 20px; + padding-right: 20px; + + &:not(.dropdown) { + overflow: hidden; + } } > a { font-size: 12px; color: currentColor; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 0 1 auto; } } } .breadcrumb-item-text { - @include str-truncated(128px); text-decoration: inherit; + + @media (max-width: $screen-xs-max) { + @include str-truncated(128px); + } } .breadcrumbs-list-angle { position: absolute; - right: -12px; + right: 7px; top: 50%; color: $gl-text-color-tertiary; transform: translateY(-50%); |