@opensig/opendesign
Version:
75 lines (70 loc) • 2.01 kB
CSS
.o-breadcrumb {
display: inline-flex;
align-items: center;
color: var(--breadcrumb-color);
font-size: var(--breadcrumb-text-size);
line-height: var(--breadcrumb-text-height);
}
.o-breadcrumb a {
color: inherit;
text-decoration: none;
}
.o-breadcrumb-item {
display: inline-flex;
align-items: center;
}
.o-breadcrumb-item:last-child {
font-weight: 600;
}
.o-breadcrumb-item:last-child .o-breadcrumb-item-label {
color: var(--breadcrumb-color-selected);
cursor: auto;
max-width: none;
}
.o-breadcrumb-item:last-child .o-breadcrumb-item-separator {
display: none;
}
.o-breadcrumb-item-label {
cursor: pointer;
max-width: var(--breadcrumb-label-max-width);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.o-breadcrumb-item-label:hover {
color: var(--breadcrumb-color-hover);
}
}
.o-breadcrumb-item-label:active {
color: var(--breadcrumb-color-active);
}
.o-breadcrumb-item-separator {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--breadcrumb-separator-size);
font-size: var(--breadcrumb-separator-size);
line-height: 1;
transition: color var(--o-duration-s) var(--o-easing-standard);
margin: 0 var(--breadcrumb-gap);
}
.o-breadcrumb {
--breadcrumb-color: var(--o-color-info3);
--breadcrumb-color-hover: var(--o-color-primary2);
--breadcrumb-color-active: var(--o-color-primary3);
--breadcrumb-color-selected: var(--o-color-primary1);
--breadcrumb-text-size: var(--o-font_size-tip1);
--breadcrumb-text-height: var(--o-line_height-tip1);
--breadcrumb-gap: 4px;
--breadcrumb-separator-size: var(--o-icon_size_control-m);
--breadcrumb-label-max-width: 140px;
}
@media (max-width: 1680px) {
.o-breadcrumb {
--breadcrumb-text-size: var(--o-font_size-tip2);
--breadcrumb-text-height: var(--o-line_height-tip2);
--breadcrumb-separator-size: var(--o-icon_size_control-xs);
}
}