You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.3 KiB
118 lines
3.3 KiB
[data-breadcrumb] {
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-md);
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-md);
|
|
|
|
color: var(--breadcrumb-color);
|
|
font-family: var(--breadcrumb-font-family);
|
|
font-size: var(--_breadcrumb-font-size);
|
|
line-height: var(--breadcrumb-line-height);
|
|
}
|
|
|
|
[data-breadcrumb][data-size='xs'] {
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-xs);
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-xs);
|
|
}
|
|
|
|
[data-breadcrumb][data-size='sm'] {
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-sm);
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-sm);
|
|
}
|
|
|
|
[data-breadcrumb][data-size='lg'] {
|
|
--_breadcrumb-gap: var(--breadcrumb-gap-lg);
|
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-lg);
|
|
}
|
|
|
|
[data-breadcrumb-list] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--_breadcrumb-gap);
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
[data-breadcrumb-item],
|
|
[data-breadcrumb-separator] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-breadcrumb-link] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-inline-size: 0;
|
|
border-radius: var(--breadcrumb-link-radius);
|
|
color: var(--breadcrumb-link-color);
|
|
font-weight: var(--breadcrumb-link-font-weight);
|
|
text-decoration: none;
|
|
outline: none;
|
|
transition:
|
|
color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
|
|
}
|
|
|
|
[data-breadcrumb-link]:hover:not([data-current]) {
|
|
color: var(--breadcrumb-link-color-hover);
|
|
}
|
|
|
|
[data-breadcrumb-link]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-breadcrumb-link][data-current] {
|
|
color: var(--breadcrumb-link-color-current);
|
|
font-weight: var(--breadcrumb-link-font-weight-current);
|
|
cursor: default;
|
|
}
|
|
|
|
[data-breadcrumb-separator] {
|
|
color: var(--breadcrumb-separator-color);
|
|
user-select: none;
|
|
}
|
|
|
|
[data-breadcrumb-ellipsis] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-inline-size: var(--breadcrumb-ellipsis-size);
|
|
block-size: var(--breadcrumb-ellipsis-size);
|
|
border: var(--breadcrumb-ellipsis-border-width) solid var(--breadcrumb-ellipsis-border);
|
|
border-radius: var(--breadcrumb-ellipsis-radius);
|
|
background: var(--breadcrumb-ellipsis-bg);
|
|
color: var(--breadcrumb-ellipsis-color);
|
|
font: inherit;
|
|
outline: none;
|
|
user-select: none;
|
|
}
|
|
|
|
[data-breadcrumb-ellipsis][data-interactive] {
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
border-color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
|
box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
|
|
}
|
|
|
|
[data-breadcrumb-ellipsis][data-interactive]:hover {
|
|
border-color: var(--breadcrumb-ellipsis-border-hover);
|
|
background: var(--breadcrumb-ellipsis-bg-hover);
|
|
color: var(--breadcrumb-ellipsis-color-hover);
|
|
}
|
|
|
|
[data-breadcrumb-ellipsis][data-interactive]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-breadcrumb-link],
|
|
[data-breadcrumb-ellipsis][data-interactive] {
|
|
transition: none;
|
|
}
|
|
}
|