Packages
noora
0.50.0
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/dropdown.css
.noora-dropdown {
--noora-dropdown-default-background: light-dark(
var(--noora-neutral-light-50),
var(--noora-neutral-dark-1100)
);
--noora-dropdown-disabled-background: light-dark(
var(--noora-neutral-light-100),
var(--noora-neutral-dark-1000)
);
--noora-dropdown-disabled-label: light-dark(
var(--noora-neutral-light-600),
var(--noora-neutral-dark-600)
);
--noora-dropdown-disabled-secondary-text: light-dark(
var(--noora-neutral-light-500),
var(--noora-neutral-dark-500)
);
display: flex;
position: relative;
flex-direction: column;
gap: var(--noora-spacing-3);
& [data-part="trigger"] {
--background-base: var(--noora-dropdown-default-background);
--background-gradient-start: light-dark(
oklch(78.6% 0.013 248 / 0),
oklch(100% 0 0 / 0.08)
);
--background-gradient-end: light-dark(
oklch(78.6% 0.013 248 / 0.13),
oklch(100% 0 0 / 0)
);
display: flex;
align-items: center;
gap: var(--noora-spacing-4);
cursor: pointer;
outline: unset;
box-shadow: var(--noora-border-light-default);
border: 0;
border-radius: var(--noora-radius-medium);
background:
linear-gradient(
180deg,
var(--background-gradient-start) 0%,
var(--background-gradient-end) 100%
),
var(--background-base);
padding: var(--noora-spacing-3) var(--noora-spacing-4);
color: var(--noora-surface-label-primary);
font: var(--noora-font-body-medium);
&[data-icon-only] {
box-sizing: content-box;
border-radius: var(--noora-radius-medium);
padding: var(--noora-spacing-3);
width: var(--noora-icon-size-small);
height: var(--noora-icon-size-small);
}
& [data-part="icon"] {
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
color: var(--noora-surface-label-secondary);
& svg {
width: 100%;
height: 100%;
}
}
& [data-part="label-wrapper"] {
display: flex;
flex-grow: 1;
gap: var(--noora-spacing-3);
}
& [data-part="secondary-text"] {
color: var(--noora-surface-label-secondary);
}
& [data-part="label"] {
font-weight: var(--noora-font-weight-medium);
}
&:active {
--background-gradient-start: light-dark(
oklch(78.6% 0.013 248 / 0),
oklch(100% 0 0 / 0.04)
);
--background-gradient-end: light-dark(
oklch(78.6% 0.013 248 / 0.26),
oklch(100% 0 0 / 0)
);
}
&:disabled {
--background-base: var(--noora-dropdown-disabled-background);
--background-gradient-start: light-dark(
oklch(78.6% 0.013 248 / 0),
oklch(100% 0 0 / 0.08)
);
--background-gradient-end: light-dark(
oklch(78.6% 0.013 248 / 0.13),
oklch(100% 0 0 / 0)
);
& [data-part="icon"] {
color: var(--noora-dropdown-disabled-secondary-text);
}
& [data-part="label"] {
color: var(--noora-dropdown-disabled-label);
}
& [data-part="secondary-text"] {
color: var(--noora-dropdown-disabled-secondary-text);
}
& [data-part="indicator"] {
color: var(--noora-dropdown-disabled-label);
}
}
&:hover {
--background-gradient-start: light-dark(
oklch(78.6% 0.013 248 / 0),
oklch(100% 0 0 / 0.04)
);
--background-gradient-end: light-dark(
oklch(78.6% 0.013 248 / 0.26),
oklch(100% 0 0 / 0)
);
}
}
& [data-part="positioner"] {
display: none;
}
& > [data-state="open"] + [data-part="positioner"] {
display: flex;
width: 100%;
}
& [data-part="indicator"] {
display: inline-flex;
color: var(--noora-surface-label-secondary);
& > div {
display: inline-flex;
flex-direction: column;
align-items: center;
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
& svg {
width: 100%;
height: 100%;
}
}
&:not([data-state="open"]) [data-part="indicator-up"] {
display: none;
}
&[data-state="open"] [data-part="indicator-down"] {
display: none;
}
}
}
.noora-inline-dropdown {
display: flex;
& > [data-part="trigger"] {
display: flex;
align-items: center;
gap: var(--noora-spacing-2);
cursor: pointer;
outline: unset;
box-shadow: var(--noora-border-light-default);
border: 0;
border-radius: var(--noora-radius-small);
background: transparent;
padding: var(--noora-spacing-1) var(--noora-spacing-2);
& > [data-part="label"] {
color: var(--noora-surface-label-secondary);
font: var(--noora-font-weight-medium) var(--noora-font-body-small);
}
& > [data-part="icon"] {
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
color: var(--noora-surface-label-secondary);
& svg {
width: 100%;
height: 100%;
}
}
& [data-part="indicator"] {
display: inline-flex;
color: var(--noora-surface-label-secondary);
& > div {
display: inline-flex;
flex-direction: column;
align-items: center;
width: var(--noora-icon-size-small);
height: var(--noora-icon-size-small);
& svg {
width: 100%;
height: 100%;
}
}
&:not([data-state="open"]) [data-part="indicator-up"] {
display: none;
}
&[data-state="open"] [data-part="indicator-down"] {
display: none;
}
}
}
}
.noora-dropdown-content {
/* Default state is hidden to prevent layout shifts */
display: none;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: stretch;
z-index: var(--noora-z-index-10);
outline: none;
box-shadow: var(--noora-border-medium);
border-radius: var(--noora-radius-large);
background: var(--noora-surface-background-primary);
width: 100%;
max-height: 200px;
overflow-y: auto;
&[data-state="open"] {
display: block;
}
& [data-part="search"] {
position: relative;
z-index: var(--noora-z-index-1);
padding: var(--noora-spacing-2) var(--noora-spacing-2) 0;
}
& [data-part="items"] {
padding: var(--noora-spacing-2);
}
}
& [data-part="hint"] {
display: flex;
align-items: flex-start;
gap: var(--noora-spacing-2);
color: var(--noora-surface-label-secondary);
font: var(--noora-font-body-small);
& svg {
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
}
}
.noora-dropdown-item {
--noora-dropdown-hover-background: light-dark(
var(--noora-neutral-light-200),
var(--noora-neutral-dark-1000)
);
display: flex;
align-items: center;
align-self: stretch;
cursor: pointer;
border-radius: var(--noora-radius-medium);
color: var(--noora-surface-label-primary);
font: var(--noora-font-body-medium);
text-decoration: none;
& [data-part="body"] {
flex-grow: 1;
}
& [data-part="secondary-text"],
& [data-part="description"] {
color: var(--noora-surface-label-secondary);
font: var(--noora-font-body-small);
}
& [data-part="left-icon"],
& [data-part="right-icon"] {
display: inline-flex;
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
& svg {
width: 100%;
height: 100%;
}
}
& [data-part="checkbox"] {
display: inline-flex;
flex-shrink: 0;
}
&:hover {
background: var(--noora-dropdown-hover-background);
}
&[data-size="small"] {
gap: var(--noora-spacing-4);
padding: var(--noora-spacing-3) var(--noora-spacing-4);
}
&[data-size="large"] {
gap: var(--noora-spacing-5);
padding: var(--noora-spacing-4);
& [data-part="left-icon"] {
box-shadow: var(--noora-border-light-default);
border-radius: var(--noora-radius-large);
padding: 10px;
}
}
}