simple-notify/dist/simple-notify.css.map

Simple Notify is a pure Javascript library to show nice and customizable alert notifications.

{"version":3,"sources":["../src/style.css"],"sourcesContent":[".sn-notifications-container {\r\n  /* colors */\r\n  --sn-success-color: rgb(111, 207, 151);\r\n  --sn-success-progress-color: rgb(84, 170, 120);\r\n  --sn-error-color: rgb(235, 87, 87);\r\n  --sn-error-progress-color: rgb(192, 69, 69);\r\n  --sn-warning-color: rgb(242, 201, 76);\r\n  --sn-warning-progress-color: rgb(196, 166, 79);\r\n  --sn-info-color: rgb(81, 205, 243);\r\n  --sn-info-progress-color: rgb(84, 169, 196);\r\n\r\n  /* container */\r\n  --sn-notifications-gap: 20px; /* controlled by js */\r\n  --sn-notifications-padding: 20px; /* controlled by js */\r\n\r\n  /* notify */\r\n  --sn-notify-width: 320px;\r\n  --sn-notify-radius: 6px;\r\n  --sn-notify-transition-timing-function: ease;\r\n  --sn-notify-transition-duration: 500ms; /* controlled by js */\r\n  --sn-notify-autoclose-timeout: 30000ms; /* controlled by js */\r\n  --sn-notify-padding: 0.75em;\r\n  --sn-notify-icon-size: 2em;\r\n  --sn-notify-close-icon-size: 1em;\r\n  --sn-notify-border-size: 1px;\r\n  --sn-notify-border-color: transparent;\r\n  --sn-notify-border-style: solid;\r\n  --sn-notify-progress-color: rgb(51, 51, 51);\r\n  --sn-notify-close-icon-color: rgb(51, 51, 51);\r\n  --sn-notify-title-color: rgb(51, 51, 51);\r\n  --sn-notify-text-color: rgb(77, 77, 77);\r\n  --sn-notify-shadow-color: transparent;\r\n  --sn-notify-progress-height: 5px;\r\n\r\n  pointer-events: none;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  max-height: 100vh;\r\n  min-height: 100vh;\r\n  position: fixed;\r\n  z-index: 9999;\r\n  left: 0;\r\n  right: 0;\r\n  top: 0;\r\n  bottom: 0;\r\n  display: grid;\r\n  grid-auto-rows: min-content;\r\n  align-content: flex-start;\r\n  grid-gap: var(--sn-notifications-gap);\r\n  gap: var(--sn-notifications-gap);\r\n  padding: var(--sn-notifications-padding);\r\n}\r\n\r\n  .sn-notifications-container.sn-is-x-center {\r\n    justify-content: center;\r\n  }\r\n\r\n  .sn-notifications-container.sn-is-y-center {\r\n    align-content: center;\r\n    justify-content: flex-end;\r\n  }\r\n\r\n  .sn-notifications-container.sn-is-center {\r\n    justify-content: center;\r\n    align-content: center;\r\n  }\r\n\r\n  .sn-notifications-container.sn-is-left {\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  .sn-notifications-container.sn-is-right {\r\n    justify-content: flex-end;\r\n  }\r\n\r\n  .sn-notifications-container.sn-is-top {\r\n    align-content: flex-start;\r\n  }\r\n\r\n  .sn-notifications-container.sn-is-bottom {\r\n    align-content: flex-end;\r\n  }\r\n\r\n.sn-notify {\r\n  pointer-events: auto;\r\n  transition-timing-function: var(--sn-notify-transition-timing-function);\r\n  transition-duration: var(--sn-notify-transition-duration);\r\n  transition-property: transform, opacity;\r\n  border-radius: var(--sn-notify-radius);\r\n  background-color: var(--sn-notify-background-color, transparent);\r\n  border: var(--sn-notify-border-size) var(--sn-notify-border-style) var(--sn-notify-border-color);\r\n  padding: var(--sn-notify-padding);\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  position: relative;\r\n  text-decoration: none;\r\n  width: var(--sn-notify-width);\r\n}\r\n\r\n.sn-notify-icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  width: var(--sn-notify-icon-size);\r\n  height: var(--sn-notify-icon-size);\r\n  margin-right: 0.75em;\r\n  color: var(--sn-notify-icon-color);\r\n}\r\n\r\n.sn-notify-close {\r\n  position: absolute;\r\n  right: 0.75em;\r\n  top: 0.75em;\r\n  user-select: none;\r\n  cursor: pointer;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: var(--sn-notify-close-icon-size);\r\n  width: var(--sn-notify-close-icon-size);\r\n  color: var(--sn-notify-close-icon-color);\r\n}\r\n\r\n.sn-notify-title {\r\n  font-size: 1rem;\r\n  font-weight: 600;\r\n  padding-right: calc(var(--sn-notify-padding) + var(--sn-notify-close-icon-size));\r\n  color: var(--sn-notify-title-color);\r\n}\r\n\r\n.sn-notify-text {\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  color: var(--sn-notify-text-color);\r\n}\r\n\r\n.sn-notify-outline {\r\n  --sn-notify-background-color: rgb(255, 255, 255);\r\n  --sn-notify-border-color: var(--sn-success-color);\r\n  box-shadow: 0 2px 26px var(--sn-notify-shadow-color);\r\n}\r\n\r\n.sn-notify-outline.sn-notify-success {\r\n    --sn-notify-border-color: var(--sn-success-color);\r\n    --sn-notify-icon-color: var(--sn-success-color);\r\n    --sn-notify-shadow-color: rgba(82, 215, 0, 0.1);\r\n  }\r\n\r\n.sn-notify-outline.sn-notify-error {\r\n    --sn-notify-border-color: var(--sn-error-color);\r\n    --sn-notify-icon-color: var(--sn-error-color);\r\n    --sn-notify-shadow-color: rgba(215, 0, 0, 0.1);\r\n  }\r\n\r\n.sn-notify-outline.sn-notify-warning {\r\n    --sn-notify-border-color: var(--sn-warning-color);\r\n    --sn-notify-icon-color: var(--sn-warning-color);\r\n    --sn-notify-shadow-color: rgba(242, 201, 76, 0.1);\r\n  }\r\n\r\n.sn-notify-outline.sn-notify-info {\r\n    --sn-notify-border-color: var(--sn-info-color);\r\n    --sn-notify-icon-color: var(--sn-info-color);\r\n    --sn-notify-shadow-color: rgba(84, 175, 202, 0.1);\r\n  }\r\n\r\n.sn-notify-outline .sn-notify-title {\r\n    --sn-notify-title-color: rgb(51, 51, 51);\r\n  }\r\n\r\n.sn-notify-outline .sn-notify-text {\r\n    --sn-notify-text-color: rgb(77, 77, 77);\r\n  }\r\n\r\n.sn-notify-outline .sn-notify-close {\r\n    --sn-notify-close-icon-color: rgb(130, 130, 130);\r\n  }\r\n\r\n.sn-notify-filled {\r\n  --sn-notify-title-color: rgb(51, 51, 51);\r\n  --sn-notify-text-color: rgb(51, 51, 51);\r\n  --sn-notify-icon-color: rgb(51, 51, 51);\r\n  --sn-notify-close-icon-color: rgb(51, 51, 51);\r\n}\r\n\r\n.sn-notify-filled.sn-notify-success {\r\n    --sn-notify-background-color: var(--sn-success-color);\r\n  }\r\n\r\n.sn-notify-filled.sn-notify-error {\r\n    --sn-notify-background-color: var(--sn-error-color);\r\n  }\r\n\r\n.sn-notify-filled.sn-notify-warning {\r\n    --sn-notify-background-color: var(--sn-warning-color);\r\n  }\r\n\r\n.sn-notify-filled.sn-notify-info {\r\n    --sn-notify-background-color: var(--sn-info-color);\r\n  }\r\n\r\n.sn-notify-fade {\r\n  opacity: 0;\r\n  will-change: opacity;\r\n}\r\n\r\n.sn-notify-fade-in {\r\n  opacity: 1;\r\n}\r\n\r\n.sn-notify-slide {\r\n  opacity: 0;\r\n  will-change: opacity, transform;\r\n  transform: translate3d(var(--sn-notify-x), var(--sn-notify-y), 0);\r\n}\r\n\r\n.sn-is-left .sn-notify-slide {\r\n    --sn-notify-x: -100%;\r\n    --sn-notify-y: 0;\r\n}\r\n\r\n.sn-is-right .sn-notify-slide, .sn-is-y-center:not(.sn-is-left) .sn-notify-slide {\r\n    --sn-notify-x: 100%;\r\n    --sn-notify-y: 0;\r\n}\r\n\r\n.sn-is-top.sn-is-x-center .sn-notify-slide, .sn-is-x-center .sn-notify-slide {\r\n    --sn-notify-y: -100%;\r\n    --sn-notify-x: 0;\r\n}\r\n\r\n.sn-is-bottom.sn-is-x-center .sn-notify-slide {\r\n    --sn-notify-y: 100%;\r\n    --sn-notify-x: 0;\r\n}\r\n\r\n.sn-is-bottom.sn-is-x-center .sn-notify-slide {\r\n    --sn-notify-y: 100%;\r\n    --sn-notify-x: 0;\r\n}\r\n\r\n.sn-notify-slide-in {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0);\r\n}\r\n\r\n.sn-notify-autoclose {\r\n  padding-bottom: calc(var(--sn-notify-padding) + var(--sn-notify-progress-height));\r\n}\r\n\r\n.sn-notify-autoclose.sn-notify-success {\r\n    --sn-notify-progress-color: var(--sn-success-progress-color);\r\n  }\r\n\r\n.sn-notify-autoclose.sn-notify-error {\r\n    --sn-notify-progress-color: var(--sn-error-progress-color);\r\n  }\r\n\r\n.sn-notify-autoclose.sn-notify-warning {\r\n    --sn-notify-progress-color: var(--sn-warning-progress-color);\r\n  }\r\n\r\n.sn-notify-autoclose.sn-notify-info {\r\n    --sn-notify-progress-color: var(--sn-info-progress-color);\r\n  }\r\n\r\n.sn-notify-autoclose::before {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  left: 0;\r\n  bottom: 0;\r\n  will-change: width;\r\n  width: 100%;\r\n  height: var(--sn-notify-progress-height);\r\n  border-radius: 0 999px 999px 0;\r\n  background-color: var(--sn-notify-progress-color);\r\n  animation: progress var(--sn-notify-autoclose-timeout) linear forwards;\r\n}\r\n\r\n.sn-notify-content {\r\n  padding-right: calc(var(--sn-notify-close-icon-size) + 2px);\r\n}\r\n\r\n@keyframes progress {\r\n  to {\r\n    width: 0%;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}