@mantine/core/esm/components/Slider/Marks/Marks.styles.js

React components library focused on usability, accessibility and developer experience

import { sizes } from '../SliderRoot/SliderRoot.styles.js';
import { createMemoStyles } from '../../../theme/create-memo-styles.js';
import { getSizeValue } from '../../../theme/utils/get-size-value/get-size-value.js';
import { getThemeColor } from '../../../theme/utils/get-theme-color/get-theme-color.js';

var useStyles = createMemoStyles({
  markWrapper: {
    position: "absolute",
    top: 0
  },
  mark: ({ theme, size }) => {
    const MARK_SIZE = getSizeValue({ sizes, size });
    return {
      boxSizing: "border-box",
      border: `${getSizeValue({ size, sizes }) >= 8 ? "2px" : "1px"} solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
      zIndex: 1,
      height: MARK_SIZE,
      width: MARK_SIZE,
      borderRadius: 1e3,
      transform: `translateX(-${MARK_SIZE / 2}px)`,
      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.white
    };
  },
  markFilled: ({ theme, color }) => ({
    borderColor: getThemeColor({ theme, color, shade: 6 })
  }),
  markLabel: ({ theme }) => ({
    transform: "translate(-50%, 0)",
    fontSize: theme.fontSizes.sm,
    color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
    marginTop: theme.spacing.xs / 2
  })
});

export default useStyles;
//# sourceMappingURL=Marks.styles.js.map