1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.breadcrumbs {
flex: 1;
min-width: 0;
align-self: center;
@apply gl-text-subtle;
.avatar-tile {
margin-right: 4px;
border: 1px solid $border-color;
border-radius: 50%;
vertical-align: sub;
}
}
#js-vue-page-breadcrumbs-wrapper {
display: flex;
flex-grow: 1;
/*
* Our auto-resizing GlBreadcrumb component works best when it is set to grow with the available space.
* Only this way can its ResizeObserver detect that more space than currently taken is available,
* so it can uncollapse items when more space becomes available.
* But we do *not* want this effect on pages that use the injectVueAppBreadcrumbs() mechanism.
* There, we want the lefthand breadcrumbs only take as much space as they needed on their first size calc,
* so that the second, injected GlBreadcrumb component sits right next to it, with no "grow effect" taking
* empty space between them.
* The only downside to this approach is that on such injected pages, the lefthand breadcrumbs won't
* uncollapse themselves when more space becomes available, as they won't "grow" into it, not triggering
* their ResizeObserver.
*/
nav.gl-breadcrumbs:only-of-type {
flex-grow: 1;
}
}
|
