@kubit-ui-web/react-components/dist/cjs/designSystem/kubit/components/mediaProgressBar/styles.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MEDIA_PROGRESS_BAR_STYLES = void 0;
const breakpoints_1 = require("../../../../types/breakpoints/breakpoints");
const borders_1 = require("../../foundations/borders");
const colors_1 = require("../../foundations/colors");
const spacings_1 = require("../../foundations/spacings");
const variants_1 = require("./variants");
const commonProps = {
    container: {
        display: 'flex',
    },
    barContainer: {
        display: 'flex',
        align_items: 'center',
        cursor: 'pointer',
        justify_content: 'center',
        width: spacings_1.SPACINGS.spacing_400,
        height: spacings_1.SPACINGS.spacing_400,
        filled: {
            width: spacings_1.SPACINGS.spacing_500,
        },
        [breakpoints_1.DeviceBreakpointsType.TABLET]: {
            width: spacings_1.SPACINGS.spacing_550,
            height: spacings_1.SPACINGS.spacing_550,
        },
        [breakpoints_1.DeviceBreakpointsType.MOBILE]: {
            width: spacings_1.SPACINGS.spacing_550,
            height: spacings_1.SPACINGS.spacing_550,
        },
    },
    progressBar: {
        top: '40%',
        left: '0',
        width: spacings_1.SPACINGS.spacing_150,
        height: spacings_1.SPACINGS.spacing_150,
        margin: spacings_1.SPACINGS.spacing_100,
        border_radius: borders_1.RADIUS.radius_75,
        background: colors_1.COLORS.NEUTRAL.color_neutral_bg_150,
    },
    bullet: {
        width: spacings_1.SPACINGS.spacing_400,
        height: spacings_1.SPACINGS.spacing_400,
        background_color: colors_1.COLORS.ACCENT.color_accent_default_bg_100,
        position: 'absolute',
        top: '50%',
        right: '0',
        border_radius: borders_1.RADIUS.radius_75,
        transform: 'translate(50%, -50%)',
        cursor: 'grab',
    },
};
const commonBar = {
    border_radius: borders_1.RADIUS.radius_75,
    border_style: 'solid',
    border_width: borders_1.BORDERS.border_50,
    width: spacings_1.SPACINGS.spacing_450,
    height: spacings_1.SPACINGS.spacing_300,
    display: 'flex',
    align_items: 'center',
};
exports.MEDIA_PROGRESS_BAR_STYLES = {
    [variants_1.MediaProgressBarVariantType.DEFAULT]: {
        ...commonProps,
        bar: {
            ...commonBar,
            background: colors_1.COLORS.NEUTRAL.color_neutral_bg_200,
            border_color: colors_1.COLORS.BRAND.color_brand_border_50,
            filled: {
                padding: spacings_1.SPACINGS.spacing_100,
                width: spacings_1.SPACINGS.spacing_300,
                height: spacings_1.SPACINGS.spacing_300,
            },
        },
    },
};
//# sourceMappingURL=styles.js.map