155 lines
3.1 KiB
TypeScript
155 lines
3.1 KiB
TypeScript
import { createStyle } from '@gluestack-style/react';
|
|
|
|
export const Textarea = createStyle({
|
|
'w': '100%',
|
|
'borderWidth': 1,
|
|
'borderColor': '$backgroundLight300',
|
|
'borderRadius': '$sm',
|
|
'h': 100,
|
|
'_input': {
|
|
p: '$3',
|
|
_web: {
|
|
outlineWidth: 0,
|
|
outline: 'none',
|
|
},
|
|
},
|
|
':hover': {
|
|
borderColor: '$borderLight400',
|
|
},
|
|
|
|
':focus': {
|
|
'borderColor': '$primary700',
|
|
':hover': {
|
|
borderColor: '$primary700',
|
|
},
|
|
},
|
|
|
|
':disabled': {
|
|
'opacity': 0.4,
|
|
':hover': {
|
|
borderColor: '$backgroundLight300',
|
|
},
|
|
},
|
|
'_dark': {
|
|
'borderColor': '$borderDark700',
|
|
':hover': {
|
|
borderColor: '$borderDark600',
|
|
},
|
|
':focus': {
|
|
'borderColor': '$primary400',
|
|
':hover': {
|
|
borderColor: '$primary400',
|
|
},
|
|
},
|
|
':disabled': {
|
|
':hover': {
|
|
borderColor: '$borderDark700',
|
|
},
|
|
},
|
|
},
|
|
|
|
'variants': {
|
|
size: {
|
|
xl: {
|
|
_input: {
|
|
fontSize: '$xl',
|
|
},
|
|
},
|
|
|
|
lg: {
|
|
_input: {
|
|
fontSize: '$lg',
|
|
},
|
|
},
|
|
md: {
|
|
_input: {
|
|
fontSize: '$md',
|
|
},
|
|
},
|
|
sm: {
|
|
_input: {
|
|
fontSize: '$sm',
|
|
},
|
|
},
|
|
},
|
|
variant: {
|
|
default: {
|
|
'_input': {
|
|
_web: {
|
|
outlineWidth: '0',
|
|
outline: 'none',
|
|
},
|
|
},
|
|
':focus': {
|
|
borderColor: '$primary700',
|
|
_web: {
|
|
boxShadow: 'inset 0 0 0 1px $primary700',
|
|
},
|
|
},
|
|
':invalid': {
|
|
'borderColor': '$error700',
|
|
'_web': {
|
|
boxShadow: 'inset 0 0 0 1px $error700',
|
|
},
|
|
':hover': {
|
|
borderColor: '$error700',
|
|
},
|
|
':focus': {
|
|
':hover': {
|
|
borderColor: '$primary700',
|
|
_web: {
|
|
boxShadow: 'inset 0 0 0 1px $primary700',
|
|
},
|
|
},
|
|
},
|
|
':disabled': {
|
|
':hover': {
|
|
borderColor: '$error700',
|
|
_web: {
|
|
boxShadow: 'inset 0 0 0 1px $error700',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
'_dark': {
|
|
':focus': {
|
|
borderColor: '$primary400',
|
|
_web: {
|
|
boxShadow: 'inset 0 0 0 1px $primary400',
|
|
},
|
|
},
|
|
':invalid': {
|
|
'borderColor': '$error400',
|
|
'_web': {
|
|
boxShadow: 'inset 0 0 0 1px $error400',
|
|
},
|
|
':hover': {
|
|
borderColor: '$error400',
|
|
},
|
|
':focus': {
|
|
':hover': {
|
|
borderColor: '$primary400',
|
|
_web: {
|
|
boxShadow: 'inset 0 0 0 1px $primary400',
|
|
},
|
|
},
|
|
},
|
|
':disabled': {
|
|
':hover': {
|
|
borderColor: '$error400',
|
|
_web: {
|
|
boxShadow: 'inset 0 0 0 1px $error400',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
'defaultProps': {
|
|
variant: 'default',
|
|
size: 'md',
|
|
},
|
|
});
|