Sha256: 03a3a46b653e8ad57ed06c9b16745fc7bcbd8cfb6fcdfa4d320393e05b7472c2
Contents?: true
Size: 1.68 KB
Versions: 44
Compression:
Stored size: 1.68 KB
Contents
@define-mixin breadcrumbs {
/* Default properties */
--_puiBreadcrumbs--separator-color: GrayText;
--_puiBreadcrumbs--separator: url("/proscenium/icons/angle-right-regular.svg");
margin: 10px;
ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: baseline;
li {
text-transform: uppercase;
display: flex;
align-items: center;
@media (max-width: 426px) {
&:not(:nth-last-child(2)) {
display: none;
}
&:nth-last-child(2)::before {
@mixin _separator;
margin: 0 0.5rem 0 0;
transform: rotate(180deg);
}
}
@media (min-width: 427px) {
&:not(:last-child)::after {
@mixin _separator;
margin: 0 0.5rem;
}
}
&:last-child {
font-weight: 500;
text-transform: none;
}
&:last-child > a {
font-weight: 500;
text-transform: none;
}
a {
color: var(--puiBreadcrumbs--link-color, revert);
display: flex;
&:hover {
color: var(--puiBreadcrumbs--link-hover-color, revert);
}
}
svg {
height: 1em;
width: 1em;
}
}
}
}
@define-mixin _separator {
display: inline-block;
content: "";
height: 1rem;
width: 1rem;
-webkit-mask: var(
--puiBreadcrumbs--separator,
var(--_puiBreadcrumbs--separator)
)
no-repeat center center;
mask: var(--puiBreadcrumbs--separator, var(--_puiBreadcrumbs--separator))
no-repeat center center;
vertical-align: sub;
background-color: var(
--puiBreadcrumbs--separator-color,
var(--_puiBreadcrumbs--separator-color)
);
}
Version data entries
44 entries across 44 versions & 1 rubygems