nitropage
Version:
A free and open source, extensible visual page builder based on SolidStart.
55 lines (48 loc) • 1.16 kB
CSS
.parent {
display: flex;
flex-wrap: wrap;
gap: 1px;
align-items: center;
margin-bottom: 0.75rem;
}
.breadcrumb {
display: flex;
gap: 0.25rem;
align-items: center;
font-size: 0.75rem;
font-weight: 500;
height: 1.5rem;
padding: 0 0.325rem;
border-radius: 0.35rem;
color: var(--np-slate-700);
background-color: var(--np-slate-100);
border: 1px solid var(--np-slate-300);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: all 75ms var(--np-ease-out-expo);
}
.breadcrumb:first-child {
font-size: 1rem;
color: var(--np-slate-800);
}
.breadcrumb:last-child {
color: var(--np-accent-900) ;
background-color: var(--np-slate-50);
border-top-right-radius: 0.6875rem;
border-bottom-right-radius: 0.6875rem;
}
.breadcrumb:not(:first-child):not(:last-child) span {
display: inline-block;
max-width: 5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.breadcrumb:active {
background-color: white;
}
.breadcrumb:hover,
.breadcrumb.--active {
color: var(--np-accent-950) ;
border-bottom-color: var(--np-slate-200);
box-shadow: 0 2px 0 var(--np-accent-400);
}