first

sample/dev/talk/bundle/awesome-notifications-3.1.1/styles/toasts.scss

@@ -0,0 +1,194 @@
+#awn-toast-container {
+  position: fixed;
+  z-index: $awn-container-z-index;
+  bottom: $awn-container-padding;
+  right: $awn-container-padding;
+  box-sizing: border-box;
+
+  &.awn-top-left,
+  &.awn-top-right {
+    top: $awn-container-padding;
+    bottom: auto;
+
+    .awn-toast:first-child {
+      margin-top: $awn-toast-margin;
+    }
+  }
+
+  &.awn-top-left,
+  &.awn-bottom-left {
+    left: $awn-container-padding;
+    right: auto;
+
+    .awn-toast {
+      right: 100%;
+      animation-name: $awn-toast-left-show-animation;
+
+      &.awn-hiding {
+        right: 0;
+      }
+    }
+  }
+
+  &.awn-top-right,
+  &.awn-bottom-right {
+    .awn-toast {
+      left: 100%;
+      animation-name: $awn-toast-right-show-animation;
+
+      &.awn-hiding {
+        left: 0;
+      }
+    }
+  }
+}
+
+.awn-toast {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0;
+  width: $awn-toast-width;
+  background: $awn-primary-background;
+  margin-top: $awn-toast-margin;
+  border-radius: $awn-toast-border-radius;
+  color: $awn-primary-color;
+  font-size: $awn-toast-font-size;
+  animation-timing-function: $awn-toast-animation-timing;
+  animation-fill-mode: both;
+
+  &-content {
+    word-break: break-word;
+  }
+
+  &-label {
+    display: block;
+    text-transform: uppercase;
+    color: $awn-primary-color;
+    font-size: $awn-toast-title-font-size;
+  }
+
+  &-icon {
+    position: absolute;
+    right: $awn-toast-padding;
+    top: $awn-progress-bar-height;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .fa {
+      font-size: $awn-toast-icon-size;
+      color: $awn-primary-color;
+    }
+  }
+
+  &-wrapper {
+    padding: $awn-progress-bar-height + $awn-toast-padding 88px $awn-toast-padding $awn-toast-padding;
+
+    border: $awn-border;
+    border-radius: $awn-toast-border-radius;
+  }
+
+  &-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: $awn-progress-bar-height;
+
+    &:after {
+      content: " ";
+      background: $awn-primary-color;
+      position: absolute;
+      width: 100%;
+      right: 100%;
+      top: 0;
+      height: $awn-progress-bar-height;
+      animation-name: awn-bar;
+      animation-duration: inherit;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+    }
+  }
+
+  &.awn-toast-progress-bar-paused .awn-toast-progress-bar:after {
+    animation-play-state: paused;
+  }
+
+  &.awn-hiding {
+    animation-name: $awn-toast-hide-animation !important;
+  }
+
+  &.awn-toast-success {
+    background: $awn-success-background;
+    color: $awn-success-color;
+
+    .awn-toast-wrapper {
+      border-color: $awn-success-border-color;
+    }
+
+    b,
+    .fa {
+      color: $awn-success-color;
+    }
+
+    .awn-toast-progress-bar:after {
+      background: $awn-success-color;
+    }
+  }
+
+  &.awn-toast-info {
+    background: $awn-info-background;
+    color: $awn-info-color;
+
+    .awn-toast-wrapper {
+      border-color: $awn-info-border-color;
+    }
+
+    b,
+    .fa {
+      color: $awn-info-color;
+    }
+
+    .awn-toast-progress-bar:after {
+      background: $awn-info-color;
+    }
+  }
+
+  &.awn-toast-alert {
+    background: $awn-alert-background;
+    color: $awn-alert-color;
+
+    .awn-toast-wrapper {
+      border-color: $awn-alert-border-color;
+    }
+
+    b,
+    .fa {
+      color: $awn-alert-color;
+    }
+
+    .awn-toast-progress-bar:after {
+      background: $awn-alert-color;
+    }
+  }
+
+  &.awn-toast-warning {
+    background: $awn-warning-background;
+    color: $awn-warning-color;
+
+    .awn-toast-wrapper {
+      border-color: $awn-warning-border-color;
+    }
+
+    b,
+    .fa {
+      color: $awn-warning-color;
+    }
+
+    .awn-toast-progress-bar:after {
+      background: $awn-warning-color;
+    }
+  }
+}