@gravity-ui/uikit
Version:
Gravity UI base styling and components
85 lines • 1.97 kB
CSS
.g-breadcrumbs {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
list-style-type: none;
margin: 0;
padding: 0;
}
.g-breadcrumbs__item {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
height: 24px;
white-space: nowrap;
color: var(--g-color-text-primary);
}
.g-breadcrumbs__item_current {
font-weight: var(--g-text-accent-font-weight);
overflow: hidden;
margin: -2px;
padding: 2px;
min-width: 25px;
}
.g-breadcrumbs__item_current .g-breadcrumbs__link {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.g-breadcrumbs__item_calculating {
overflow: visible;
}
.g-breadcrumbs__link {
cursor: default;
position: relative;
text-decoration: none;
outline: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
height: 24px;
line-height: 24px;
vertical-align: middle;
border-radius: var(--g-focus-border-radius);
color: inherit;
}
.g-breadcrumbs__link_is-disabled {
color: var(--g-color-text-hint);
}
.g-breadcrumbs__link:not([aria-disabled]) {
cursor: pointer;
}
.g-breadcrumbs__link:not([aria-disabled]):hover {
color: var(--g-color-text-link-hover);
}
.g-breadcrumbs__link:focus-visible {
outline: 2px solid var(--g-color-line-focus);
outline-offset: 0;
}
.g-breadcrumbs__divider {
display: flex;
align-items: center;
color: var(--g-color-text-secondary);
padding: 0 var(--g-spacing-2);
}
.g-breadcrumbs__more-button {
--g-button-border-radius: var(--g-focus-border-radius);
}
.g-breadcrumbs__menu {
margin-inline: calc(-1 * var(--g-spacing-2));
}
.g-breadcrumbs__menu-popup {
--g-list-item-view-spacer-size: 8px;
max-width: 320px;
padding: var(--g-spacing-1);
}
.g-breadcrumbs__menu-link {
text-decoration: none;
cursor: default;
}
.g-breadcrumbs__menu-link:not([aria-disabled]) {
cursor: pointer;
}
.g-breadcrumbs__item:first-child .g-breadcrumbs__menu {
margin-inline-start: 0;
}