diff options
Diffstat (limited to 'packages/ui/src/components/button.css')
| -rw-r--r-- | packages/ui/src/components/button.css | 29 |
1 files changed, 17 insertions, 12 deletions
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css index 02a7ade71..d9b345923 100644 --- a/packages/ui/src/components/button.css +++ b/packages/ui/src/components/button.css @@ -8,13 +8,8 @@ text-decoration: none; user-select: none; cursor: default; - 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; + white-space: nowrap; &[data-variant="primary"] { background-color: var(--button-primary-base); @@ -99,6 +94,7 @@ &:active:not(:disabled) { background-color: var(--button-secondary-base); scale: 0.99; + transition: all 150ms ease-out; } &:disabled { border-color: var(--border-disabled); @@ -113,27 +109,34 @@ } &[data-size="small"] { - padding: 2px 8px; + height: 22px; + padding: 0 8px; &[data-icon] { - padding: 2px 12px 2px 4px; + padding: 0 12px 0 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-base); + font-size: var(--font-size-small); 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"] { - padding: 4px 6px; + height: 24px; + line-height: 24px; + padding: 0 6px; &[data-icon] { - padding: 4px 12px 4px 4px; + padding: 0 12px 0 4px; } + font-size: var(--font-size-small); gap: 6px; /* text-12-medium */ @@ -145,10 +148,11 @@ } &[data-size="large"] { + height: 32px; padding: 6px 12px; &[data-icon] { - padding: 6px 12px 6px 8px; + padding: 0 12px 0 8px; } gap: 4px; @@ -158,6 +162,7 @@ font-size: 14px; font-style: normal; font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal); } |
