181 lines
3.1 KiB
TypeScript
181 lines
3.1 KiB
TypeScript
import { createStyle } from '@gluestack-style/react';
|
|
|
|
export const Fab = createStyle({
|
|
'bg': '$primary500',
|
|
'rounded': '$full',
|
|
'zIndex': 20,
|
|
'p': 16,
|
|
'flexDirection': 'row',
|
|
|
|
'alignItems': 'center',
|
|
'justifyContent': 'center',
|
|
'position': 'absolute',
|
|
':hover': {
|
|
bg: '$primary600',
|
|
},
|
|
|
|
':active': {
|
|
bg: '$primary700',
|
|
},
|
|
|
|
':disabled': {
|
|
opacity: 0.4,
|
|
_web: {
|
|
// @ts-ignore
|
|
pointerEvents: 'all !important',
|
|
cursor: 'not-allowed',
|
|
},
|
|
},
|
|
|
|
'_text': {
|
|
color: '$textLight50',
|
|
fontWeight: '$normal',
|
|
_dark: {
|
|
_text: {
|
|
color: '$textDark50',
|
|
},
|
|
},
|
|
},
|
|
|
|
'_icon': {
|
|
'color': '$textLight50',
|
|
':hover': {
|
|
color: '$textLight0',
|
|
},
|
|
':active': {
|
|
color: '$textLight0',
|
|
},
|
|
'_dark': {
|
|
_icon: {
|
|
'color': '$textDark0',
|
|
':hover': {
|
|
color: '$textDark0',
|
|
},
|
|
':active': {
|
|
color: '$textDark0',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
'_dark': {
|
|
'bg': '$primary400',
|
|
':hover': {
|
|
bg: '$primary500',
|
|
},
|
|
':active': {
|
|
bg: '$primary600',
|
|
},
|
|
':disabled': {
|
|
opacity: 0.4,
|
|
_web: {
|
|
cursor: 'not-allowed',
|
|
},
|
|
},
|
|
},
|
|
|
|
'_web': {
|
|
':focusVisible': {
|
|
outlineWidth: 2,
|
|
outlineColor: '$primary700',
|
|
outlineStyle: 'solid',
|
|
_dark: {
|
|
outlineColor: '$primary300',
|
|
},
|
|
},
|
|
},
|
|
|
|
'variants': {
|
|
size: {
|
|
sm: {
|
|
px: '$2.5',
|
|
py: '$2.5',
|
|
_text: {
|
|
fontSize: '$sm',
|
|
},
|
|
_icon: {
|
|
props: {
|
|
size: 'sm',
|
|
},
|
|
},
|
|
},
|
|
md: {
|
|
px: '$3',
|
|
py: '$3',
|
|
_text: {
|
|
fontSize: '$md',
|
|
},
|
|
_icon: {
|
|
props: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
},
|
|
lg: {
|
|
px: '$4',
|
|
py: '$4',
|
|
_text: {
|
|
fontSize: '$lg',
|
|
},
|
|
_icon: {
|
|
props: {
|
|
size: 'md',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
placement: {
|
|
'top right': {
|
|
top: '$4',
|
|
right: '$4',
|
|
},
|
|
|
|
'top left': {
|
|
top: '$4',
|
|
left: '$4',
|
|
},
|
|
|
|
'bottom right': {
|
|
bottom: '$4',
|
|
right: '$4',
|
|
},
|
|
|
|
'bottom left': {
|
|
bottom: '$4',
|
|
left: '$4',
|
|
},
|
|
|
|
'top center': {
|
|
top: '$4',
|
|
alignSelf: 'center',
|
|
// TODO: fix this, this is correct way, but React Native doesn't support this on Native
|
|
// left: '50%',
|
|
// transform: [
|
|
// {
|
|
// // @ts-ignore
|
|
// translateX: '-50%',
|
|
// },
|
|
// ],
|
|
},
|
|
|
|
'bottom center': {
|
|
bottom: '$4',
|
|
alignSelf: 'center',
|
|
// TODO: fix this, this is correct way, but React Native doesn't support this on Native
|
|
// left: '50%',
|
|
// transform: [
|
|
// {
|
|
// // @ts-ignore
|
|
// translateX: '-50%',
|
|
// },
|
|
// ],
|
|
},
|
|
},
|
|
},
|
|
'defaultProps': {
|
|
placement: 'bottom right',
|
|
size: 'md',
|
|
hardShadow: '2',
|
|
},
|
|
});
|