ngx-snotifire 15.0.3 → 15.0.4-beta

package/styles/material/buttons.scss

@@ -0,0 +1,75 @@
+.notifire-toast__buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  button {
+    position: relative;
+    width: 100%;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: none;
+    border-bottom: none;
+    background: transparent;
+    padding: 8px;
+    text-transform: capitalize;
+    color: #fff;
+    box-sizing: border-box;
+    overflow: hidden;
+    cursor: pointer;
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 5px;
+      height: 5px;
+      background: rgba(255, 255, 255, 0.3);
+      opacity: 0;
+      border-radius: 100%;
+      transform: scale(1, 1) translate(-50%);
+      transform-origin: 50% 50%;
+    }
+
+    &:focus:not(:active)::after {
+      animation: ripple 1s ease-out;
+    }
+
+    &:hover,
+    &:focus {
+      background: rgba(0, 0, 0, 0.1);
+      outline: none;
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.15);
+    }
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  &--bold {
+    font-weight: 700;
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 1;
+  }
+  20% {
+    transform: scale(25, 25);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(40, 40);
+  }
+}

package/styles/material/icon.scss

@@ -0,0 +1,60 @@
+$success: #c8e6c9;
+$info: #bbdefb;
+$warning: #ffccbc;
+$error: #ffcdd2;
+$async: $info;
+
+$icons: -generate-icons(
+  (
+    error: $error,
+    warning: $warning,
+    info: $info,
+    success: $success,
+    async: $async
+  )
+);
+
+.snotifire-icon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  line-height: 0;
+  transform: translate(0, -50%);
+  max-height: 48px;
+  max-width: 48px;
+}
+
+.snotifire-icon--error {
+  background-image: url("#{map-get($icons, error)}");
+}
+
+.snotifire-icon--warning {
+  background-image: url("#{map-get($icons, warning)}");
+}
+
+.snotifire-icon--info {
+  background-image: url("#{map-get($icons, info)}");
+}
+
+.snotifire-icon--success {
+  background-image: url("#{map-get($icons, success)}");
+}
+
+.snotifire-icon--async {
+  background-image: url("#{map-get($icons, async)}");
+  animation: async 3s infinite linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes async {
+  0% {
+    -webkit-transform: translate(0, -50%) rotate(0deg);
+    transform: translate(0, -50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(0, -50%) rotate(360deg);
+    transform: translate(0, -50%) rotate(360deg);
+  }
+}

package/styles/material/prompt.scss

@@ -0,0 +1,135 @@
+.notifire-toast__input {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  margin: 0;
+  width: 100%;
+  vertical-align: top;
+  transition: all 0.5s;
+  transition-delay: 0.3s;
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+
+  &__field {
+    position: relative;
+    display: block;
+    float: right;
+    padding: 0.85em 0.5em;
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: #333;
+    font-weight: bold;
+    -webkit-appearance: none; /* for box shadows to show on iOS */
+    opacity: 0;
+    transition: opacity 0.3s;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    float: right;
+    padding: 0 0.85em;
+    width: 100%;
+    color: #e0f2f1;
+    font-weight: bold;
+    font-size: 70.25%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    position: absolute;
+    left: 0;
+    height: 100%;
+    text-align: left;
+    pointer-events: none;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      transition: transform 0.3s;
+    }
+
+    &::before {
+      border-top: 2px solid #fff;
+      transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
+      transition-delay: 0.3s;
+    }
+
+    &::after {
+      z-index: -1;
+      background: #b2dfdb;
+      transform: scale3d(1, 0, 1);
+      transform-origin: 50% 0;
+    }
+  }
+
+  &__labelContent {
+    position: relative;
+    display: block;
+    padding: 1em 0;
+    width: 100%;
+    transition: transform 0.3s 0.3s;
+  }
+}
+
+.notifire-toast__input--filled {
+  margin-top: 2.5em;
+
+  &:focus,
+  .notifire-toast__input__field {
+    opacity: 1;
+    transition-delay: 0.3s;
+  }
+}
+
+.notifire-toast__input__field:focus
+  + .notifire-toast__input__label
+  .notifire-toast__input__labelContent,
+.notifire-toast__input--filled .notifire-toast__input__labelContent {
+  transform: translate(0, -80%);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+.notifire-toast__input__field:focus + .notifire-toast__input__label::before,
+.notifire-toast__input--filled .notifire-toast__input__label::before {
+  transition-delay: 0s;
+}
+
+.notifire-toast__input__field:focus + .notifire-toast__input__label::before,
+.notifire-toast__input--filled .notifire-toast__input__label::before {
+  transform: translate(0, 0);
+}
+
+.notifire-toast__input__field:focus + .notifire-toast__input__label::after,
+.notifire-toast__input--filled .notifire-toast__input__label::after {
+  transform: scale(1, 1);
+  transition-delay: 0.3s;
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+.notifire-toast {
+  &--invalid {
+    .notifire-toast__input__label::before {
+      border-color: $error-bg;
+    }
+  }
+
+  &--valid {
+    .notifire-toast__input__label::before {
+      border-color: $success-bg;
+    }
+  }
+}

package/styles/material/snotify.scss

@@ -0,0 +1,65 @@
+$backdrop-color: #000000;
+$snotify-width: auto !default;
+
+@if $snotify-width == auto {
+  $snotify-width: 300px;
+}
+
+.snotify {
+  display: block;
+  position: fixed;
+  width: $snotify-width;
+  z-index: 9999;
+  box-sizing: border-box;
+  pointer-events: none;
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.snotify-leftTop,
+.snotify-leftCenter,
+.snotify-leftBottom {
+  left: 10px;
+}
+
+.snotify-rightTop,
+.snotify-rightCenter,
+.snotify-rightBottom {
+  right: 10px;
+}
+
+.snotify-centerTop,
+.snotify-centerCenter,
+.snotify-centerBottom {
+  left: calc(50% - #{$snotify-width} / 2);
+}
+
+.snotify-leftTop,
+.snotify-centerTop,
+.snotify-rightTop {
+  top: 10px;
+}
+.snotify-leftCenter,
+.snotify-rightCenter,
+.snotify-centerCenter {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.snotify-leftBottom,
+.snotify-rightBottom,
+.snotify-centerBottom {
+  bottom: 10px;
+}
+
+.snotifire-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $backdrop-color;
+  opacity: 0;
+  z-index: 9998;
+  transition: opacity 0.3s;
+}

package/styles/material/toast.scss

@@ -0,0 +1,232 @@
+$simple-bg: #fff;
+$simple-color: #000;
+$simple-progressBar: #c7c7c7;
+$simple-progressBarPercentage: #4c4c4c;
+
+$success-bg: #4caf50;
+$success-color: #c8e6c9;
+$success-progressBar: #388e3c;
+$success-progressBarPercentage: #81c784;
+
+$info-bg: #1e88e5;
+$info-color: #e3f2fd;
+$info-progressBar: #1565c0;
+$info-progressBarPercentage: #64b5f6;
+
+$warning-bg: #ff9800;
+$warning-color: #fff3e0;
+$warning-progressBar: #ef6c00;
+$warning-progressBarPercentage: #ffcc80;
+
+$error-bg: #f44336;
+$error-color: #ffebee;
+$error-progressBar: #c62828;
+$error-progressBarPercentage: #ef9a9a;
+
+$async-bg: $info-bg;
+$async-color: $info-color;
+$async-progressBar: $info-progressBar;
+$async-progressBarPercentage: $info-progressBarPercentage;
+
+$confirm-bg: #009688;
+$confirm-color: #e0f2f1;
+$confirm-progressBar: #4db6ac;
+$confirm-progressBarPercentage: #80cbc4;
+
+$prompt-bg: #009688;
+$prompt-color: #e0f2f1;
+
+$snotify-title-font-size: auto !default;
+$snotify-body-font-size: auto !default;
+
+@if $snotify-title-font-size == auto {
+  $snotify-title-font-size: 1.8em;
+}
+
+@if $snotify-body-font-size == auto {
+  $snotify-body-font-size: 1em;
+}
+
+.notifire-toast {
+  display: block;
+  cursor: pointer;
+  background-color: $simple-bg;
+  height: 100%;
+  margin: 5px;
+  opacity: 0;
+  border-radius: 5px;
+  overflow: hidden;
+  pointer-events: auto;
+
+  &--in {
+    animation-name: appear;
+  }
+
+  &--out {
+    animation-name: disappear;
+  }
+
+  &__inner {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    justify-content: center;
+    position: relative;
+    padding: 5px 65px 5px 15px;
+    min-height: 78px;
+    font-size: 16px;
+    color: $simple-color;
+  }
+
+  &__progressBar {
+    position: relative;
+    width: 100%;
+    height: 10px;
+    background-color: $simple-progressBar;
+
+    &__percentage {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 10px;
+      background-color: $simple-progressBarPercentage;
+      max-width: 100%;
+    }
+  }
+
+  &__title {
+    font-size: $snotify-title-font-size;
+    line-height: 1.2em;
+    margin-bottom: 5px;
+    color: #fff;
+  }
+
+  &__body {
+    font-size: $snotify-body-font-size;
+  }
+}
+
+.notifire-toast-show {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.notifire-toast-remove {
+  max-height: 0;
+  overflow: hidden;
+  transform: translate(0, 50%);
+  opacity: 0;
+}
+
+.fadeOutRight {
+  animation-name: fadeOutRight;
+}
+
+/***************
+ ** Modifiers **
+ **************/
+
+.snotify-simple {
+  .notifire-toast__title,
+  .notifire-toast__body {
+    color: $simple-color;
+  }
+}
+
+.snotify-success {
+  background-color: $success-bg;
+  .notifire-toast__progressBar {
+    background-color: $success-progressBar;
+  }
+  .notifire-toast__progressBar__percentage {
+    background-color: $success-progressBarPercentage;
+  }
+  .notifire-toast__body {
+    color: $success-color;
+  }
+}
+
+.snotify-info {
+  background-color: $info-bg;
+  .notifire-toast__progressBar {
+    background-color: $info-progressBar;
+  }
+  .notifire-toast__progressBar__percentage {
+    background-color: $info-progressBarPercentage;
+  }
+  .notifire-toast__body {
+    color: $info-color;
+  }
+}
+
+.snotify-warning {
+  background-color: $warning-bg;
+  .notifire-toast__progressBar {
+    background-color: $warning-progressBar;
+  }
+  .notifire-toast__progressBar__percentage {
+    background-color: $warning-progressBarPercentage;
+  }
+  .notifire-toast__body {
+    color: $warning-color;
+  }
+}
+
+.snotify-error {
+  background-color: $error-bg;
+  .notifire-toast__progressBar {
+    background-color: $error-progressBar;
+  }
+  .notifire-toast__progressBar__percentage {
+    background-color: $error-progressBarPercentage;
+  }
+  .notifire-toast__body {
+    color: $error-color;
+  }
+}
+
+.snotify-async {
+  background-color: $async-bg;
+  .notifire-toast__progressBar {
+    background-color: $async-progressBar;
+  }
+  .notifire-toast__progressBar__percentage {
+    background-color: $async-progressBarPercentage;
+  }
+  .notifire-toast__body {
+    color: $async-color;
+  }
+}
+
+.snotify-confirm {
+  background-color: $confirm-bg;
+  .notifire-toast__progressBar {
+    background-color: $confirm-progressBar;
+  }
+  .notifire-toast__progressBar__percentage {
+    background-color: $confirm-progressBarPercentage;
+  }
+  .notifire-toast__body {
+    color: $confirm-color;
+  }
+}
+
+.snotify-prompt {
+  background-color: $prompt-bg;
+ ngx-snotify-prompt {
+    width: 100%;
+  }
+  .notifire-toast__title {
+    margin-bottom: 0;
+  }
+  .notifire-toast__body {
+    color: $prompt-color;
+  }
+}
+
+.snotify-confirm,
+.snotify-prompt {
+  .notifire-toast__inner {
+    padding: 10px 15px;
+  }
+}

package/styles/material.scss

@@ -0,0 +1,8 @@
+@import "_shared/icons";
+@import "_shared/animations";
+
+@import "material/snotify";
+@import "material/toast";
+@import "material/prompt";
+@import "material/buttons";
+@import "material/icon";

package/styles/simple/buttons.scss

@@ -0,0 +1,41 @@
+.notifire-toast__buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  button {
+    position: relative;
+    width: 100%;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: none;
+    border-bottom: none;
+    background: transparent;
+    padding: 8px;
+    text-transform: capitalize;
+    color: #000;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background: rgba(0, 0, 0, 0.1);
+      outline: none;
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.15);
+    }
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  &--bold {
+    font-weight: 700;
+  }
+}

package/styles/simple/icon.scss

@@ -0,0 +1,60 @@
+$success: $success-border-color;
+$info: $info-border-color;
+$warning: $warning-border-color;
+$error: $error-border-color;
+$async: $async-border-color;
+
+$icons: -generate-icons(
+  (
+    error: $error,
+    warning: $warning,
+    info: $info,
+    success: $success,
+    async: $async
+  )
+);
+
+.snotifire-icon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  line-height: 0;
+  transform: translate(0, -50%);
+  max-height: 48px;
+  max-width: 48px;
+}
+
+.snotifire-icon--error {
+  background-image: url("#{map-get($icons, error)}");
+}
+
+.snotifire-icon--warning {
+  background-image: url("#{map-get($icons, warning)}");
+}
+
+.snotifire-icon--info {
+  background-image: url("#{map-get($icons, info)}");
+}
+
+.snotifire-icon--success {
+  background-image: url("#{map-get($icons, success)}");
+}
+
+.snotifire-icon--async {
+  background-image: url("#{map-get($icons, async)}");
+  animation: async 3s infinite linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes async {
+  0% {
+    -webkit-transform: translate(0, -50%) rotate(0deg);
+    transform: translate(0, -50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(0, -50%) rotate(360deg);
+    transform: translate(0, -50%) rotate(360deg);
+  }
+}