@mantine/core/cjs/components/Notification/Notification.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 useStyles = createMemoStyles.createMemoStyles({
  withIcon: {
    paddingLeft: "10px !important",
    "&::before": {
      display: "none !important"
    }
  },
  root: ({ color, theme }) => ({
    boxSizing: "border-box",
    position: "relative",
    display: "flex",
    alignItems: "center",
    paddingLeft: 22,
    paddingRight: 5,
    paddingTop: 10,
    paddingBottom: 10,
    borderRadius: 4,
    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`,
    "&::before": {
      content: "''",
      display: "block",
      position: "absolute",
      width: 6,
      top: 4,
      bottom: 4,
      left: 4,
      borderRadius: 4,
      backgroundColor: getThemeColor.getThemeColor({
        theme,
        color,
        shade: 6
      })
    },
    "& $icon": {
      backgroundColor: getThemeColor.getThemeColor({ theme, color, shade: 6 }),
      color: theme.white
    }
  }),
  body: ({ disallowClose }) => ({
    flex: 1,
    maxWidth: !disallowClose ? "calc(100% - 40px)" : "100%",
    marginRight: 10
  }),
  loader: ({ theme }) => ({
    marginRight: theme.spacing.md
  }),
  icon: ({ theme }) => ({
    boxSizing: "border-box",
    marginRight: theme.spacing.md,
    width: 28,
    height: 28,
    borderRadius: 28,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: theme.white
  }),
  title: ({ theme }) => ({
    lineHeight: 1.4,
    marginBottom: 2,
    overflow: "hidden",
    textOverflow: "ellipsis",
    color: theme.colorScheme === "dark" ? theme.white : theme.colors.gray[9]
  }),
  description: ({ theme }) => ({
    color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
    lineHeight: 1.4,
    overflow: "hidden",
    textOverflow: "ellipsis",
    "&:only-child": {
      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
    }
  })
});

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