mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
932add9d96
* basic components and address page refactoring * second part of refactoring * third part of refactoring * NativeCoinValue component * more refactoring * rename TruncatedValue into TruncatedText * minor fixes * refactor block details * fix layout of value and fee in tx table * update screenshots * different units for tooltip and stats widget small value fix * update screenshots * update tx table screenshot * fix copy button vertical alignment
64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { defineSlotRecipe } from '@chakra-ui/react';
|
|
|
|
export const recipe = defineSlotRecipe({
|
|
slots: [ 'content', 'arrow', 'arrowTip' ],
|
|
base: {
|
|
content: {
|
|
px: '2',
|
|
py: '1',
|
|
borderRadius: 'sm',
|
|
fontWeight: '500',
|
|
textStyle: 'sm',
|
|
textAlign: 'center',
|
|
boxShadow: 'size.md',
|
|
zIndex: 'tooltip',
|
|
maxW: { base: 'calc(100vw - 8px)', lg: '320px' },
|
|
transformOrigin: 'var(--transform-origin)',
|
|
_open: {
|
|
animationStyle: 'scale-fade-in',
|
|
animationDuration: 'fast',
|
|
},
|
|
_closed: {
|
|
animationStyle: 'scale-fade-out',
|
|
animationDuration: 'fast',
|
|
},
|
|
},
|
|
arrow: {
|
|
'--arrow-size': 'sizes.2',
|
|
'--arrow-background': 'var(--tooltip-bg)',
|
|
},
|
|
arrowTip: {
|
|
borderTopWidth: '1px',
|
|
borderInlineStartWidth: '1px',
|
|
borderColor: 'var(--tooltip-bg)',
|
|
},
|
|
},
|
|
variants: {
|
|
variant: {
|
|
regular: {
|
|
content: {
|
|
'--tooltip-bg': 'colors.tooltip.bg',
|
|
bg: 'var(--tooltip-bg)',
|
|
color: 'tooltip.fg',
|
|
},
|
|
},
|
|
popover: {
|
|
content: {
|
|
maxW: 'none',
|
|
bg: 'popover.bg',
|
|
color: 'text.primary',
|
|
p: '4',
|
|
boxShadow: 'popover',
|
|
boxShadowColor: 'popover.shadow',
|
|
borderRadius: 'md',
|
|
textAlign: 'left',
|
|
fontWeight: 'normal',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'regular',
|
|
},
|
|
});
|