@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
57 lines (56 loc) • 2.17 kB
JavaScript
import { Avatar, StepConnector as MuiStepConnector, StepContent as MuiStepContent, StepLabel as MuiStepLabel, } from '@mui/material';
import { stepConnectorClasses } from '@mui/material/StepConnector';
import { stepContentClasses } from '@mui/material/StepContent';
import { stepLabelClasses } from '@mui/material/StepLabel';
import { styled } from '@mui/material/styles';
export const StepIcon = styled('span', {
shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
})(({ theme }) => ({
width: 12,
height: 12,
borderRadius: '50%',
border: `2px solid ${theme.palette.mode === 'light'
? theme.palette.grey[300]
: theme.palette.grey[800]}`,
}));
export const StepConnector = styled(MuiStepConnector, {
shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
})(({ theme }) => ({
marginLeft: theme.spacing(1.875),
[`.${stepConnectorClasses.line}`]: {
minHeight: 8,
borderLeftWidth: 2,
borderColor: theme.palette.mode === 'light'
? theme.palette.grey[300]
: theme.palette.grey[800],
},
}));
export const StepLabel = styled(MuiStepLabel, {
shouldForwardProp: (prop) => !['active', 'completed', 'error', 'disabled'].includes(prop),
})(({ theme }) => ({
padding: 0,
[`.${stepLabelClasses.iconContainer}`]: {
paddingLeft: theme.spacing(0.75),
paddingRight: theme.spacing(2.75),
},
[`&.${stepLabelClasses.disabled}`]: {
cursor: 'inherit',
},
}));
export const StepContent = styled(MuiStepContent, {
shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
})(({ theme }) => ({
borderLeft: `2px solid ${theme.palette.mode === 'light'
? theme.palette.grey[300]
: theme.palette.grey[800]}`,
marginLeft: theme.spacing(1.875),
paddingLeft: theme.spacing(3.875),
[`&.${stepContentClasses.last}`]: {
borderLeft: 'none',
paddingLeft: theme.spacing(4.1875),
},
}));
export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
color: theme.palette.text.primary,
backgroundColor: 'transparent',
}));