@mantine/core/cjs/components/Progress/Progress.styles.js

React components library focused on usability, accessibility and developer experience

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var createMemoStyles = require('../../theme/create-memo-styles.js');
var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');
var getThemeColor = require('../../theme/utils/get-theme-color/get-theme-color.js');

const sizes = {
  xs: 3,
  sm: 5,
  md: 8,
  lg: 12,
  xl: 16
};
var useStyles = createMemoStyles.createMemoStyles({
  root: ({ radius, size, theme }) => ({
    height: getSizeValue.getSizeValue({ size, sizes }),
    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
    borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius }),
    overflow: "hidden"
  }),
  bar: ({ theme, color, radius, reduceMotion, striped }) => ({
    height: "100%",
    backgroundColor: getThemeColor.getThemeColor({ theme, color, shade: theme.colorScheme === "dark" ? 4 : 6 }),
    borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius }),
    transition: reduceMotion ? "none" : `width 200ms ${theme.transitionTimingFunction}`,
    backgroundSize: [theme.spacing.md, theme.spacing.md],
    backgroundImage: striped ? "linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)" : "none"
  })
});

exports.default = useStyles;
exports.sizes = sizes;
//# sourceMappingURL=Progress.styles.js.map