diff options
| author | Frank <[email protected]> | 2025-10-11 07:54:57 -0400 |
|---|---|---|
| committer | Frank <[email protected]> | 2025-10-11 07:54:57 -0400 |
| commit | 133da0f44844105bdf069a00214f9a62905c98c7 (patch) | |
| tree | e2e0da0ead51c1a067d639ae1c61a713d9fa992b /packages/console/app/src/component/dropdown.css | |
| parent | f93e1e5c92032499acf3c0defc24b545a5b770cd (diff) | |
| download | opencode-133da0f44844105bdf069a00214f9a62905c98c7.tar.gz opencode-133da0f44844105bdf069a00214f9a62905c98c7.zip | |
wip: zen refactor selector
Diffstat (limited to 'packages/console/app/src/component/dropdown.css')
| -rw-r--r-- | packages/console/app/src/component/dropdown.css | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/packages/console/app/src/component/dropdown.css b/packages/console/app/src/component/dropdown.css new file mode 100644 index 000000000..982367c6b --- /dev/null +++ b/packages/console/app/src/component/dropdown.css @@ -0,0 +1,80 @@ +[data-component="dropdown"] { + position: relative; + + [data-slot="trigger"] { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-2); + padding: var(--space-2) var(--space-3); + border: none; + border-radius: var(--border-radius-sm); + background-color: transparent; + color: var(--color-text); + font-size: var(--font-size-sm); + font-family: var(--font-sans); + cursor: pointer; + transition: all 0.15s ease; + + &:hover { + background-color: var(--color-surface-hover); + } + + span { + flex: 1; + text-align: left; + font-weight: 500; + } + } + + [data-slot="chevron"] { + flex-shrink: 0; + color: var(--color-text-secondary); + } + + [data-slot="dropdown"] { + position: absolute; + top: 100%; + z-index: 1000; + margin-top: var(--space-1); + border: 1px solid var(--color-border); + border-radius: var(--border-radius-sm); + background-color: var(--color-bg); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + min-width: 160px; + + &[data-align="left"] { + left: 0; + } + + &[data-align="right"] { + right: 0; + } + + @media (prefers-color-scheme: dark) { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + } + } + + [data-slot="item"] { + display: block; + width: 100%; + padding: var(--space-2-5) var(--space-3); + border: none; + background: none; + color: var(--color-text); + font-size: var(--font-size-sm); + font-family: var(--font-sans); + text-align: left; + cursor: pointer; + transition: background-color 0.15s ease; + + &:hover { + background-color: var(--color-bg-surface); + } + + &[data-selected="true"] { + background-color: var(--color-accent-alpha); + } + } +}
\ No newline at end of file |