mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
1a57cb25a0
* add export for address txs * transfer all export from page to dialog * remove old route and components * improve file name and fix loading state of icon button * basic implementation * refetch item status * status indicator for download items * changes for multichain * handle too many requests for downloads error * update button styles and spacing * fix tests * disable async export for multichain * Fix CSV export cancel flow and stabilize context updates Applied via @cursor push command * test and review fixes * design fixes * refactor file names --------- Co-authored-by: Hanzo Dev <[email protected]>
133 lines
2.9 KiB
TypeScript
133 lines
2.9 KiB
TypeScript
import { defineRecipe } from '@chakra-ui/react';
|
|
|
|
export const recipe = defineRecipe({
|
|
base: {
|
|
width: '100%',
|
|
minWidth: '0',
|
|
outline: '0',
|
|
position: 'relative',
|
|
appearance: 'textfield',
|
|
|
|
// fix for datetime-local input in mobile Safari
|
|
'&[type="datetime-local"]': {
|
|
appearance: 'none',
|
|
},
|
|
'&::-webkit-date-and-time-value': {
|
|
textAlign: 'left',
|
|
},
|
|
|
|
textAlign: 'start',
|
|
borderRadius: 'base',
|
|
height: 'var(--input-height)',
|
|
minW: 'var(--input-height)',
|
|
color: 'input.fg',
|
|
'--focus-color': 'colors.border.error',
|
|
'--error-color': 'colors.border.error',
|
|
fontWeight: 'medium',
|
|
_invalid: {
|
|
focusRingColor: 'var(--error-color)',
|
|
borderColor: 'var(--error-color)',
|
|
},
|
|
_readOnly: {
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
},
|
|
},
|
|
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
textStyle: 'sm',
|
|
px: '2',
|
|
'--input-height': 'sizes.8',
|
|
},
|
|
md: {
|
|
textStyle: 'sm',
|
|
px: '2',
|
|
'--input-height': 'sizes.10',
|
|
},
|
|
lg: {
|
|
textStyle: 'md',
|
|
px: '4',
|
|
'--input-height': '60px',
|
|
},
|
|
},
|
|
|
|
variant: {
|
|
outline: {
|
|
bg: 'input.bg',
|
|
borderWidth: '2px',
|
|
borderColor: 'input.border.filled',
|
|
focusVisibleRing: 'none',
|
|
_placeholder: {
|
|
color: 'input.placeholder',
|
|
},
|
|
_placeholderShown: {
|
|
borderColor: 'input.border',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
_invalid: {
|
|
borderColor: 'input.border.error',
|
|
},
|
|
},
|
|
_hover: {
|
|
borderColor: 'input.border.hover',
|
|
},
|
|
_focus: {
|
|
borderColor: 'input.border.focus',
|
|
boxShadow: 'size.md',
|
|
_hover: {
|
|
borderColor: 'input.border.focus',
|
|
},
|
|
},
|
|
_readOnly: {
|
|
userSelect: 'all',
|
|
pointerEvents: 'none',
|
|
bg: 'input.bg.readOnly',
|
|
borderColor: 'input.border.readOnly',
|
|
_focus: {
|
|
borderColor: 'input.border.readOnly',
|
|
},
|
|
_hover: {
|
|
borderColor: 'input.border.readOnly',
|
|
},
|
|
},
|
|
_disabled: {
|
|
opacity: 'control.disabled',
|
|
},
|
|
_invalid: {
|
|
borderColor: 'input.border.error',
|
|
_placeholder: {
|
|
color: 'input.placeholder.error',
|
|
},
|
|
_hover: {
|
|
borderColor: 'input.border.error',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
floating: {
|
|
'true': {},
|
|
},
|
|
},
|
|
|
|
compoundVariants: [
|
|
{
|
|
size: 'lg',
|
|
floating: true,
|
|
css: {
|
|
padding: '24px 10px 8px 16px',
|
|
},
|
|
},
|
|
],
|
|
|
|
defaultVariants: {
|
|
size: 'md',
|
|
variant: 'outline',
|
|
floating: false,
|
|
},
|
|
});
|