diff options
| author | Aaron Iker <[email protected]> | 2026-02-02 01:17:14 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-02-02 01:17:14 +0100 |
| commit | 377bf7ff21a4f05807c38675ac70cd08fe67b516 (patch) | |
| tree | 018639c6a87c248d2df325f6a32c511d7e9caf15 /packages/ui/src/components/button.css | |
| parent | b39c1f158f5e78b41edd944dce792a8b602819c1 (diff) | |
| download | opencode-377bf7ff21a4f05807c38675ac70cd08fe67b516.tar.gz opencode-377bf7ff21a4f05807c38675ac70cd08fe67b516.zip | |
feat(ui): Select, dropdown, popover styles & transitions (#11675)
Diffstat (limited to 'packages/ui/src/components/button.css')
| -rw-r--r-- | packages/ui/src/components/button.css | 29 |
1 files changed, 15 insertions, 14 deletions
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css index d9b345923..3e5d21d1d 100644 --- a/packages/ui/src/components/button.css +++ b/packages/ui/src/components/button.css @@ -9,7 +9,13 @@ user-select: none; cursor: default; outline: none; + padding: 4px 8px; white-space: nowrap; + transition-property: background-color, border-color, color, box-shadow, opacity; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); + outline: none; + line-height: 20px; &[data-variant="primary"] { background-color: var(--button-primary-base); @@ -94,7 +100,6 @@ &:active:not(:disabled) { background-color: var(--button-secondary-base); scale: 0.99; - transition: all 150ms ease-out; } &:disabled { border-color: var(--border-disabled); @@ -109,34 +114,31 @@ } &[data-size="small"] { - height: 22px; - padding: 0 8px; + padding: 4px 8px; &[data-icon] { - padding: 0 12px 0 4px; + padding: 4px 12px 4px 4px; } - font-size: var(--font-size-small); - line-height: var(--line-height-large); gap: 4px; /* text-12-medium */ font-family: var(--font-family-sans); - font-size: var(--font-size-small); + font-size: var(--font-size-base); font-style: normal; font-weight: var(--font-weight-medium); - line-height: var(--line-height-large); /* 166.667% */ letter-spacing: var(--letter-spacing-normal); } &[data-size="normal"] { - height: 24px; - line-height: 24px; - padding: 0 6px; + padding: 4px 6px; &[data-icon] { - padding: 0 12px 0 4px; + padding: 4px 12px 4px 4px; + } + + &[aria-haspopup] { + padding: 4px 6px 4px 8px; } - font-size: var(--font-size-small); gap: 6px; /* text-12-medium */ @@ -148,7 +150,6 @@ } &[data-size="large"] { - height: 32px; padding: 6px 12px; &[data-icon] { |