@unicity/design-system/dist/components/Odometer/Odometer.style.js

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

import { styled } from '@mui/material/styles';
import { Box } from '@mui/material';
export const StyledOdometer = styled(Box)(({ theme }) => ({
    display: 'inline-block',
    verticalAlign: 'middle',
    position: 'relative',
    '& .odometer-inside': {
        display: 'block',
        position: 'relative',
        overflow: 'hidden',
    },
    // Individual digit styling
    '& .odometer-digit': {
        display: 'inline-block',
        position: 'relative',
        verticalAlign: 'top',
    },
    '& .odometer-digit-spacer': {
        display: 'inline-block',
        visibility: 'hidden',
    },
    '& .odometer-digit-inner': {
        textAlign: 'left',
        display: 'block',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        overflow: 'hidden',
    },
    '& .odometer-ribbon': {
        display: 'block',
        position: 'relative',
    },
    '& .odometer-ribbon-inner': {
        display: 'block',
        position: 'relative',
        transform: 'translateZ(0)',
    },
    '& .odometer-ribbon-inner .odometer-value': {
        display: 'block',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        textAlign: 'center',
        fontVariantNumeric: 'tabular-nums',
        fontFamily: theme.typography.fontFamily,
        fontSize: theme.typography.h4.fontSize,
        fontWeight: theme.typography.h4.fontWeight,
        lineHeight: theme.typography.h4.lineHeight,
        color: theme.palette.text.primary,
    },
    // Formatting marks
    '& .odometer-formatting-mark': {
        display: 'inline-block',
        verticalAlign: 'top',
        fontVariantNumeric: 'tabular-nums',
        fontFamily: theme.typography.fontFamily,
        fontSize: theme.typography.h4.fontSize,
        fontWeight: theme.typography.h4.fontWeight,
        lineHeight: theme.typography.h4.lineHeight,
        color: theme.palette.text.primary,
    },
    '& .odometer-radix-mark': {
        display: 'inline-block',
        verticalAlign: 'top',
    },
    '& .odometer-negation-mark': {
        display: 'inline-block',
        verticalAlign: 'top',
    },
    // Animation states
    '&.odometer-animating .odometer-ribbon-inner': {
        transition: `transform ${theme.transitions.duration.standard}ms ease-out`,
    },
    '&.odometer-animating-up .odometer-ribbon-inner': {
        transform: 'translateY(-100%)',
    },
    '&.odometer-animating-down .odometer-ribbon-inner': {
        transform: 'translateY(100%)',
    },
    // Theme variations
    '&.odometer-auto-theme': {
    // Default theme styling
    },
    '&.odometer-theme-minimal': {
        '& .odometer-ribbon-inner .odometer-value, & .odometer-formatting-mark': {
            fontSize: '2rem',
            fontWeight: 300,
            color: theme.palette.text.secondary,
        },
    },
    '&.odometer-theme-car': {
        '& .odometer-ribbon-inner .odometer-value, & .odometer-formatting-mark': {
            fontSize: '1.5rem',
            fontWeight: 700,
            color: theme.palette.primary.main,
            textShadow: '0 1px 2px rgba(0,0,0,0.1)',
        },
    },
    '&.odometer-theme-plaza': {
        '& .odometer-ribbon-inner .odometer-value, & .odometer-formatting-mark': {
            fontSize: '2.5rem',
            fontWeight: 600,
            color: theme.palette.secondary.main,
        },
    },
    '&.odometer-theme-train-station': {
        '& .odometer-ribbon-inner .odometer-value, & .odometer-formatting-mark': {
            fontSize: '3rem',
            fontWeight: 800,
            color: theme.palette.warning.main,
            fontFamily: 'monospace',
        },
    },
    '&.odometer-theme-digital': {
        '& .odometer-ribbon-inner .odometer-value, & .odometer-formatting-mark': {
            fontSize: '2rem',
            fontWeight: 400,
            color: theme.palette.success.main,
            fontFamily: 'monospace',
            textShadow: `0 0 10px ${theme.palette.success.main}40`,
        },
    },
    // Responsive design
    [theme.breakpoints.down('sm')]: {
        '& .odometer-ribbon-inner .odometer-value, & .odometer-formatting-mark': {
            fontSize: theme.typography.h5.fontSize,
        },
    },
    [theme.breakpoints.down('xs')]: {
        '& .odometer-ribbon-inner .odometer-value, & .odometer-formatting-mark': {
            fontSize: theme.typography.h6.fontSize,
        },
    },
}));
//# sourceMappingURL=Odometer.style.js.map