Commit 5d5d7f91 authored by Tim Zallmann's avatar Tim Zallmann

Merge branch '37920-improve-breadcrumbs-clipping' into 'master'

Improve breadcrumbs clipping

Closes #37920

See merge request gitlab-org/gitlab-ce!15164
parents ccebf89d 738aec70
...@@ -401,10 +401,13 @@ ...@@ -401,10 +401,13 @@
.breadcrumbs-list { .breadcrumbs-list {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
flex-wrap: wrap;
margin-bottom: 0; margin-bottom: 0;
line-height: 16px; line-height: 16px;
@media (max-width: $screen-xs-max) {
flex-wrap: wrap;
}
> li { > li {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -412,24 +415,35 @@ ...@@ -412,24 +415,35 @@
padding: 2px 0; padding: 2px 0;
&:not(:last-child) { &:not(:last-child) {
margin-right: 20px; padding-right: 20px;
&:not(.dropdown) {
overflow: hidden;
}
} }
> a { > a {
font-size: 12px; font-size: 12px;
color: currentColor; color: currentColor;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
} }
} }
} }
.breadcrumb-item-text { .breadcrumb-item-text {
@include str-truncated(128px);
text-decoration: inherit; text-decoration: inherit;
@media (max-width: $screen-xs-max) {
@include str-truncated(128px);
}
} }
.breadcrumbs-list-angle { .breadcrumbs-list-angle {
position: absolute; position: absolute;
right: -12px; right: 7px;
top: 50%; top: 50%;
color: $gl-text-color-tertiary; color: $gl-text-color-tertiary;
transform: translateY(-50%); transform: translateY(-50%);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment