diff options
Diffstat (limited to 'packages/ui/src/components/text-field.css')
| -rw-r--r-- | packages/ui/src/components/text-field.css | 264 |
1 files changed, 132 insertions, 132 deletions
diff --git a/packages/ui/src/components/text-field.css b/packages/ui/src/components/text-field.css index c94376be7..5568ac2dd 100644 --- a/packages/ui/src/components/text-field.css +++ b/packages/ui/src/components/text-field.css @@ -1,134 +1,134 @@ [data-component="input"] { - width: 100%; - - [data-slot="input-input"] { - width: 100%; - color: var(--text-strong); - - /* text-14-regular */ - font-family: var(--font-family-sans); - font-size: 14px; - font-style: normal; - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); /* 142.857% */ - letter-spacing: var(--letter-spacing-normal); - - &:focus { - outline: none; - } - - &::placeholder { - color: var(--text-weak); - } - } - - &[data-variant="normal"] { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 8px; - - [data-slot="input-label"] { - color: var(--text-weak); - - /* text-12-medium */ - font-family: var(--font-family-sans); - font-size: var(--font-size-small); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: 18px; /* 150% */ - letter-spacing: var(--letter-spacing-normal); - } - - [data-slot="input-wrapper"] { - display: flex; - align-items: start; - justify-content: space-between; - width: 100%; - padding-right: 4px; - - border-radius: var(--radius-md); - border: 1px solid var(--border-weak-base); - background: var(--input-base); - - &:focus-within:not(:has([data-readonly])) { - border-color: transparent; - /* border/shadow-xs/select */ - box-shadow: - 0 0 0 3px var(--border-weak-selected), - 0 0 0 1px var(--border-selected), - 0 1px 2px -1px rgba(19, 16, 16, 0.25), - 0 1px 2px 0 rgba(19, 16, 16, 0.08), - 0 1px 3px 0 rgba(19, 16, 16, 0.12); - } - - &:has([data-invalid]) { - background: var(--surface-critical-weak); - border: 1px solid var(--border-critical-selected); - } - - &:not(:has([data-slot="input-copy-button"])) { - padding-right: 0; - } - } - - [data-slot="input-input"] { - color: var(--text-strong); - - display: flex; - height: 32px; - padding: 2px 12px; - align-items: center; - flex: 1; - min-width: 0; - - background: transparent; - border: none; - - /* text-14-regular */ - font-family: var(--font-family-sans); - font-size: 14px; - font-style: normal; - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); /* 142.857% */ - letter-spacing: var(--letter-spacing-normal); - - &:focus { - outline: none; - } - - &::placeholder { - color: var(--text-weak); - } - } - - textarea[data-slot="input-input"] { - height: auto; - min-height: 32px; - padding: 6px 12px; - resize: none; - } - - [data-slot="input-copy-button"] { - flex-shrink: 0; - margin-top: 4px; - color: var(--icon-base); - - &:hover { - color: var(--icon-strong-base); - } - } - - [data-slot="input-error"] { - color: var(--text-on-critical-base); - - /* text-12-medium */ - font-family: var(--font-family-sans); - font-size: var(--font-size-small); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: 18px; /* 150% */ - letter-spacing: var(--letter-spacing-normal); - } - } + width: 100%; + + [data-slot="input-input"] { + width: 100%; + color: var(--text-strong); + + /* text-14-regular */ + font-family: var(--font-family-sans); + font-size: 14px; + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); /* 142.857% */ + letter-spacing: var(--letter-spacing-normal); + + &:focus { + outline: none; + } + + &::placeholder { + color: var(--text-weak); + } + } + + &[data-variant="normal"] { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + + [data-slot="input-label"] { + color: var(--text-weak); + + /* text-12-medium */ + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: 18px; /* 150% */ + letter-spacing: var(--letter-spacing-normal); + } + + [data-slot="input-wrapper"] { + display: flex; + align-items: start; + justify-content: space-between; + width: 100%; + padding-right: 4px; + + border-radius: var(--radius-md); + border: 1px solid var(--border-weak-base); + background: var(--input-base); + + &:focus-within:not(:has([data-readonly])) { + border-color: transparent; + /* border/shadow-xs/select */ + box-shadow: + 0 0 0 3px var(--border-weak-selected), + 0 0 0 1px var(--border-selected), + 0 1px 2px -1px rgba(19, 16, 16, 0.25), + 0 1px 2px 0 rgba(19, 16, 16, 0.08), + 0 1px 3px 0 rgba(19, 16, 16, 0.12); + } + + &:has([data-invalid]) { + background: var(--surface-critical-weak); + border: 1px solid var(--border-critical-selected); + } + + &:not(:has([data-slot="input-copy-button"])) { + padding-right: 0; + } + } + + [data-slot="input-input"] { + color: var(--text-strong); + + display: flex; + height: 32px; + padding: 2px 12px; + align-items: center; + flex: 1; + min-width: 0; + + background: transparent; + border: none; + + /* text-14-regular */ + font-family: var(--font-family-sans); + font-size: 14px; + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); /* 142.857% */ + letter-spacing: var(--letter-spacing-normal); + + &:focus { + outline: none; + } + + &::placeholder { + color: var(--text-weak); + } + } + + textarea[data-slot="input-input"] { + height: auto; + min-height: 32px; + padding: 6px 12px; + resize: none; + } + + [data-slot="input-copy-button"] { + flex-shrink: 0; + margin-top: 4px; + color: var(--icon-base); + + &:hover { + color: var(--icon-strong-base); + } + } + + [data-slot="input-error"] { + color: var(--text-on-critical-base); + + /* text-12-medium */ + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: 18px; /* 150% */ + letter-spacing: var(--letter-spacing-normal); + } + } } |