@tractorzoom/equipment-card/src/styles.js

Equipment Details Card

import { makeStyles } from '@material-ui/core/styles';

const iconButton = (theme) => ({
    padding: theme.spacing(1),
    position: 'absolute',
    right: 18,
    top: 176,
});

export default makeStyles((theme) => ({
    auctionDetailsText: {
        fontSize: 10,
        fontWeight: 600,
    },
    canvas: {
        display: 'none',
    },
    cardContent: {
        padding: theme.spacing(5),
        paddingBottom: theme.spacing(2),
    },
    cardHolder: {
        position: 'relative',
    },
    cardImageHolder: {
        boxSizing: 'content-box',
        display: 'inline-block',
        maxWidth: '100%',
        position: 'relative',
    },
    checkedButton: {
        ...iconButton(theme),
        '&:hover': {
            backgroundColor: theme.palette.success.main,
        },
        backgroundColor: theme.palette.success.main,
        color: theme.palette.common.white,
        'pointer-events': 'all',
    },
    details: {
        alignItems: 'center',
        display: 'flex',
        fontSize: theme.spacing(4),
        justifyContent: 'space-between',
        marginBottom: theme.spacing(-1),
    },
    detailsText: {
        color: '#4C4C4C',
        fontSize: 12,
        marginTop: theme.spacing(2),
    },
    divider: {
        background: '#CFD2D7',
    },
    listPrice: {
        color: theme.palette.primary.main,
        fontSize: 22,
        fontWeight: 500,
    },
    locationAndSaleDate: {
        display: 'flex',
        justifyContent: 'space-between',
        marginTop: 8,
    },
    makeModelTitle: {
        fontSize: 14,
        textOverflow: 'ellipsis',
    },
    media: {
        height: 200,
    },
    price: {
        color: theme.palette.success.main,
        fontSize: 22,
        fontWeight: 500,
    },
    primaryDetail: {
        fontSize: 22,
        fontWeight: 500,
    },
    root: {
        '&:hover': {
            borderColor: '#BEBEBE',
        },
        border: '1px solid #CFD2D7',
        borderRadius: 5,
        marginBottom: theme.spacing(2),
        maxWidth: 350,
        minWidth: 275,
    },
    secondaryDetail: {
        color: theme.palette.text.secondary,
        fontSize: 14,
        fontWeight: 500,
    },
    selectButton: {
        ...iconButton(theme),
        '&:hover': {
            backgroundColor: theme.palette.common.white,
            color: '#184EAC',
        },
        backgroundColor: theme.palette.common.white,
        border: '1px solid #CFD2D7',
        'pointer-events': 'all',
    },
    selectedCard: {
        '&:hover': {
            borderColor: theme.palette.success.main,
        },
        border: `3px solid ${theme.palette.success.main}`,
    },
    skeletonImage: {
        border: 'none',
        display: 'block',
        margin: 0,
        maxWidth: '100%',
        padding: 0,
    },
    variableDetail: {
        fontSize: theme.spacing(4),
        fontWeight: 'bold',
    },
}));