Packages
noora
0.82.6
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
css/breadcrumbs.css
.noora-breadcrumbs {
--noora-breadcrumb-icon: light-dark(
var(--noora-neutral-light-800),
var(--noora-neutral-dark-200)
);
--noora-breadcrumb-label: light-dark(
var(--nora-neutral-light-1100),
var(--noora-neutral-dark-50)
);
--noora-breadcrumb-background: light-dark(
var(--noora-neutral-light-50),
var(--noora-neutral-dark-1100)
);
display: flex;
flex-direction: row;
align-items: center;
z-index: var(--noora-z-index-10);
& [data-part="slash"],
& [data-part="arrow"] {
padding: 0 var(--noora-spacing-2);
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
color: var(--noora-breadcrumb-icon);
& svg {
width: 100%;
height: 100%;
}
}
&:not([data-style="slash"]) > [data-part="slash"],
&:not([data-style="arrow"]) > [data-part="arrow"],
& [data-part="slash"]:nth-last-child(2),
& [data-part="arrow"]:last-child {
display: none;
}
}
.noora-breadcrumb {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
z-index: var(--noora-z-index-8);
& [data-part="link"] {
display: flex;
align-items: center;
gap: var(--noora-spacing-2);
padding: var(--noora-spacing-2);
text-decoration: none;
color: inherit;
cursor: pointer;
border-radius: var(--noora-radius-3);
font: var(--noora-font-body-medium);
& [data-part="icon"] {
flex-shrink: 0;
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
color: var(--noora-breadcrumb-icon);
& svg {
width: 100%;
height: 100%;
}
}
& [data-part="label"] {
color: var(--noora-breadcrumb-label);
font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
}
&:focus-visible {
outline: none;
box-shadow: var(--noora-border-light-focus);
}
}
& [data-part="trigger"] {
display: inline-flex;
flex-shrink: 0;
align-items: center;
padding: var(--noora-spacing-3);
border-radius: var(--noora-radius-3);
border: unset;
background: unset;
cursor: pointer;
outline: unset;
color: var(--noora-breadcrumb-icon);
& svg {
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
}
&:hover,
&:active,
&[data-state="open"] {
box-shadow: var(--noora-border-light-default);
background-color: var(--noora-breadcrumb-background);
}
&:focus-visible {
box-shadow: var(--noora-border-light-focus);
background-color: var(--noora-breadcrumb-background);
}
& + [data-part="positioner"] {
display: none;
}
&[data-state="open"] + [data-part="positioner"] {
display: flex;
}
}
& [data-part="positioner"] {
z-index: var(--noora-z-index-12);
transition: display 150ms allow-discrete;
}
& .noora-dropdown-content,
& [data-part="positioner"] > [data-part="content"] {
/* zag sets `hidden` + `data-state="closed"` on the content the instant it
closes, and dropdown.css hides `.noora-dropdown-content` when not open —
both force `display: none` immediately and kill the exit transition. The
positioner (which zag never hides) is the single presence gate via
`allow-discrete`, so keep the content rendered and let opacity/transform
animate out underneath it. */
display: block;
width: max-content;
min-width: 320px;
box-shadow:
0 0 0 1px
light-dark(oklch(31.8% 0.011 248.2 / 0.12), oklch(54.9% 0 0 / 0.25)),
0 8px 24px rgb(0 0 0 / 0.16),
0 4px 8px rgb(0 0 0 / 0.08);
border-radius: var(--noora-radius-4);
background: var(--noora-surface-background-primary);
overflow: hidden;
opacity: 0;
transform: translateY(-0.25rem);
transition:
opacity 150ms var(--ease-out-cubic),
transform 150ms var(--ease-out-cubic);
& > [data-part="items"] {
padding: var(--noora-spacing-4);
max-height: min(250px, calc(100vh - 8rem));
overflow-y: auto;
& [data-part="item"] + [data-part="item"] {
margin-top: var(--noora-spacing-3);
}
}
& > [data-part="footer"] {
padding: var(--noora-spacing-4);
border-top: 1px solid
light-dark(
var(--noora-neutral-light-200),
var(--noora-neutral-dark-900)
);
background: var(--noora-surface-background-primary);
}
}
&
[data-part="trigger"][data-state="open"]
+ [data-part="positioner"]
> [data-part="content"] {
opacity: 1;
transform: translateY(0);
transition:
opacity 200ms var(--ease-out-cubic),
transform 200ms var(--ease-out-cubic);
@starting-style {
opacity: 0;
transform: translateY(-0.25rem);
}
}
& [data-part="item"]:not([data-selected]) [data-part="check"] {
visibility: hidden;
}
/* Keyboard roving focus (see Dropdown.js handleBreadcrumbKeydown) moves real
DOM focus between the native <a> items (which are tabindex="-1", so only
reachable inside the open menu), so mirror the hover affordance on the
focused one. :focus rather than :focus-visible so it shows even when the
menu was opened by mouse and then arrowed. */
& [data-part="item"]:focus {
outline: none;
background: var(--noora-dropdown-hover-background);
}
& [data-part="right-icon"] {
display: flex;
align-items: center;
gap: var(--noora-spacing-3);
}
& [data-part="right-icon"]:has(.noora-badge),
& [data-part="right-icon"]:has([data-part="check"]) {
width: auto;
height: auto;
}
& [data-part="check"] {
display: inline-flex;
flex-shrink: 0;
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
& svg {
width: 100%;
height: 100%;
}
}
& [data-part="left-icon"],
& [data-part="right-icon"] {
color: var(--noora-surface-label-primary);
}
}
@media (prefers-reduced-motion: reduce) {
.noora-breadcrumb [data-part="positioner"],
.noora-breadcrumb [data-part="positioner"] > [data-part="content"] {
transition: none;
}
}