222 lines
4.2 KiB
SCSS
222 lines
4.2 KiB
SCSS
.root {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.selector {
|
|
min-width: 0;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
gap: var(--space-2);
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
text-align: left;
|
|
transition:
|
|
background-color 180ms var(--easing-standard),
|
|
color 180ms var(--easing-standard);
|
|
}
|
|
|
|
.selectorOpen {
|
|
.meta,
|
|
.icon {
|
|
color: var(--color-text-subtle);
|
|
}
|
|
}
|
|
|
|
.selector:hover {
|
|
.value {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.meta,
|
|
.icon {
|
|
color: var(--color-text-subtle);
|
|
}
|
|
}
|
|
|
|
.selector:focus-visible {
|
|
outline: none;
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
|
|
}
|
|
|
|
.copy {
|
|
min-width: 0;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.value {
|
|
@include text-title;
|
|
color: var(--color-text);
|
|
font-weight: var(--font-weight-title);
|
|
line-height: 1;
|
|
}
|
|
|
|
.meta {
|
|
@include text-caption;
|
|
color: var(--color-text-muted);
|
|
line-height: 1;
|
|
padding-left: var(--space-1);
|
|
}
|
|
|
|
.icon {
|
|
flex: 0 0 auto;
|
|
color: var(--color-text-muted);
|
|
transition: transform 180ms var(--easing-standard), color 180ms var(--easing-standard);
|
|
}
|
|
|
|
.iconOpen {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.menu {
|
|
position: absolute;
|
|
top: calc(100% + var(--space-2));
|
|
left: 0;
|
|
min-width: min(18rem, calc(100vw - (var(--space-4) * 2)));
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--color-border-strong);
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-surface-muted);
|
|
box-shadow: 0 16px 32px color-mix(in srgb, black 18%, transparent);
|
|
z-index: 20;
|
|
}
|
|
|
|
.menuSection {
|
|
display: grid;
|
|
gap: calc(var(--space-1) / 2);
|
|
}
|
|
|
|
.menuSectionLabel {
|
|
@include text-caption;
|
|
display: block;
|
|
color: var(--color-text-muted);
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
padding-inline: var(--space-1);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.menuDivider {
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
}
|
|
|
|
.menuItem {
|
|
min-width: 0;
|
|
min-height: 2.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: var(--space-2) var(--space-2);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface-muted);
|
|
color: var(--color-text);
|
|
text-align: left;
|
|
transition:
|
|
background-color 160ms var(--easing-standard),
|
|
border-color 160ms var(--easing-standard);
|
|
}
|
|
|
|
.menuItem:hover {
|
|
border-color: var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.menuItemActive {
|
|
border-color: var(--color-accent-soft);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.menuItemCopy {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.menuItemValue {
|
|
@include text-label;
|
|
color: var(--color-text);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.menuItemMeta {
|
|
@include text-caption;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.submenuItem {
|
|
min-width: 0;
|
|
min-height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface-muted);
|
|
color: var(--color-text);
|
|
text-align: left;
|
|
transition:
|
|
background-color 160ms var(--easing-standard),
|
|
border-color 160ms var(--easing-standard);
|
|
}
|
|
|
|
.submenuItem:hover {
|
|
border-color: var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.submenuItemActive {
|
|
border-color: var(--color-accent-soft);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.submenuIndicator {
|
|
width: calc(var(--space-1) + (var(--space-1) / 2));
|
|
height: calc(var(--space-1) + (var(--space-1) / 2));
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
background: var(--color-accent-soft);
|
|
}
|
|
|
|
@include respond-down(mobile) {
|
|
.selector {
|
|
align-items: flex-end;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.copy {
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.value {
|
|
line-height: 0.95;
|
|
}
|
|
|
|
.meta {
|
|
font-size: 0.68rem;
|
|
line-height: 1;
|
|
letter-spacing: 0.01em;
|
|
padding-bottom: calc(var(--space-1) / 2);
|
|
}
|
|
|
|
.icon {
|
|
align-self: flex-end;
|
|
margin-bottom: calc(var(--space-1) / 2);
|
|
}
|
|
|
|
.menu {
|
|
min-width: min(16rem, calc(100vw - (var(--space-4) * 2)));
|
|
}
|
|
}
|