@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制,使用 TypeScript</b></p>
75 lines (70 loc) • 2 kB
CSS
.o-breadcrumb {
--breadcrumb-color: var(--o-color-info3);
--breadcrumb-color-hover: var(--o-color-info1);
--breadcrumb-color-active: var(--o-color-info1);
--breadcrumb-color-selected: var(--o-color-info1);
--breadcrumb-text-size: var(--o-font_size-tip1);
--breadcrumb-text-height: var(--o-line_height-tip1);
--breadcrumb-gap: 4px;
--breadcrumb-seperator-size: var(--o-icon_size_control-m);
--breadcrumb-label-max-width: 140px;
}
.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 {
color: var(--breadcrumb-color-selected);
font-weight: 500;
}
.o-breadcrumb-item:last-child .o-breadcrumb-item-label {
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-seperator-size);
font-size: var(--breadcrumb-seperator-size);
line-height: 1;
transition: color var(--o-duration-s) var(--o-easing-standard);
margin: 0 var(--breadcrumb-gap);
}
@media (max-width: 1440px) {
.o-breadcrumb {
--breadcrumb-text-size: var(--o-font_size-tip2);
--breadcrumb-text-height: var(--o-line_height-tip2);
--breadcrumb-seperator-size: var(--o-icon_size_control-xs);
}
}