@mantine/core/cjs/components/Notification/Notification.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Notification.module.cjs","names":[],"sources":["../../../src/components/Notification/Notification.module.css"],"sourcesContent":[".root {\n  --notification-radius: var(--mantine-radius-default);\n  --notification-color: var(--mantine-primary-color-filled);\n\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-inline-start: 22px;\n  padding-inline-end: var(--mantine-spacing-xs);\n  padding-top: var(--mantine-spacing-xs);\n  padding-bottom: var(--mantine-spacing-xs);\n  border-radius: var(--notification-radius);\n  box-shadow: var(--mantine-shadow-lg);\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 6px;\n    top: var(--notification-radius);\n    bottom: var(--notification-radius);\n    inset-inline-start: 4px;\n    border-radius: var(--notification-radius);\n    background-color: var(--notification-color);\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n  }\n\n  &:where([data-with-icon]) {\n    &::before {\n      display: none;\n    }\n  }\n\n  &:where([data-with-border]) {\n    @mixin where-light {\n      border: 1px solid var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      border: 1px solid var(--mantine-color-dark-4);\n    }\n  }\n}\n\n.icon {\n  box-sizing: border-box;\n  margin-inline-end: var(--mantine-spacing-md);\n  width: 28px;\n  height: 28px;\n  border-radius: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--notification-color);\n  color: var(--mantine-color-white);\n}\n\n.loader {\n  margin-inline-end: var(--mantine-spacing-md);\n}\n\n.body {\n  flex: 1;\n  overflow: hidden;\n  margin-inline-end: var(--mantine-spacing-xs);\n}\n\n.title {\n  margin-bottom: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: var(--mantine-font-size-sm);\n  line-height: var(--mantine-line-height-sm);\n  font-weight: var(--mantine-font-weight-medium);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-9);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-white);\n  }\n}\n\n.description {\n  font-size: var(--mantine-font-size-sm);\n  line-height: var(--mantine-line-height-sm);\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-0);\n  }\n\n  &:where([data-with-title]) {\n    @mixin where-light {\n      color: var(--mantine-color-gray-6);\n    }\n\n    @mixin where-dark {\n      color: var(--mantine-color-dark-2);\n    }\n  }\n}\n\n.closeButton {\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n    }\n  }\n}\n"],"mappings":""}