@mantine/core/cjs/components/Divider/Divider.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 getThemeColor = require('../../theme/utils/get-theme-color/get-theme-color.js');
var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');

const sizes = {
  xs: 1,
  sm: 2,
  md: 3,
  lg: 4,
  xl: 5
};
var useStyles = createMemoStyles.createMemoStyles({
  root: {},
  withLabel: {
    borderTop: "0 !important"
  },
  left: {
    "&::before": {
      display: "none"
    }
  },
  right: {
    "&::after": {
      display: "none"
    }
  },
  label: ({ theme, color, variant }) => ({
    display: "flex",
    alignItems: "center",
    color: color === "dark" ? theme.colors.dark[1] : getThemeColor.getThemeColor({ theme, color, shade: 6 }),
    "&::before": {
      content: '""',
      flex: 1,
      height: 1,
      borderTop: `1px ${variant} ${getThemeColor.getThemeColor({
        theme,
        color,
        shade: theme.colorScheme === "dark" ? 3 : 4
      })}`,
      marginRight: theme.spacing.xs
    },
    "&::after": {
      content: '""',
      flex: 1,
      borderTop: `1px ${variant} ${getThemeColor.getThemeColor({
        theme,
        color,
        shade: theme.colorScheme === "dark" ? 3 : 4
      })}`,
      marginLeft: theme.spacing.xs
    }
  }),
  horizontal: ({ theme, size, variant, color, margins }) => ({
    border: 0,
    borderTopWidth: getSizeValue.getSizeValue({ size, sizes }),
    borderTopColor: getThemeColor.getThemeColor({ theme, color, shade: theme.colorScheme === "dark" ? 3 : 4 }),
    borderTopStyle: variant,
    margin: 0,
    marginTop: getSizeValue.getSizeValue({ size: margins, sizes: theme.spacing }),
    marginBottom: getSizeValue.getSizeValue({ size: margins, sizes: theme.spacing })
  }),
  vertical: ({ theme, size, variant, color, margins }) => ({
    border: 0,
    alignSelf: "stretch",
    borderLeftWidth: getSizeValue.getSizeValue({ size, sizes }),
    borderLeftColor: getThemeColor.getThemeColor({ theme, color, shade: 4 }),
    borderLeftStyle: variant,
    marginLeft: getSizeValue.getSizeValue({ size: margins, sizes: theme.spacing }),
    marginRight: getSizeValue.getSizeValue({ size: margins, sizes: theme.spacing })
  })
});

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