first

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

@@ -0,0 +1,101 @@
+@keyframes awn-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes awn-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes awn-slide-right {
+  from {
+    opacity: 0;
+    left: 100%;
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+@keyframes awn-slide-left {
+  from {
+    opacity: 0;
+    right: 100%;
+  }
+
+  to {
+    opacity: 1;
+    right: 0;
+  }
+}
+
+@keyframes awn-bar {
+  from {
+    right: 100%;
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+.awn-popup-loading-dots,
+.awn-popup-loading-dots:before,
+.awn-popup-loading-dots:after {
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  animation-fill-mode: both;
+  background: #fff;
+  animation: awn-loading-dots 1s infinite ease-in-out;
+}
+
+.awn-popup-loading-dots {
+  position: relative;
+  margin-left: 24px;
+  display: inline-block;
+  color: #fff;
+  animation-delay: -0.16s;
+}
+
+.awn-popup-loading-dots:before,
+.awn-popup-loading-dots:after {
+  content: "";
+  position: absolute;
+  top: 0;
+}
+
+.awn-popup-loading-dots:before {
+  left: -16px;
+  animation-delay: -0.32s;
+}
+
+.awn-popup-loading-dots:after {
+  left: 16px;
+}
+
+@keyframes awn-loading-dots {
+
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0 0 0;
+  }
+
+  40% {
+    box-shadow: 0 0 0 2px;
+  }
+}

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

@@ -0,0 +1,97 @@
+#awn-popup-wrapper {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $awn-popup-wrapper-bg;
+  z-index: $awn-popup-wrapper-z-index;
+  opacity: 0;
+  animation-name: $awn-popup-show-animation;
+  animation-timing-function: $awn-popup-animation-timing;
+  animation-fill-mode: both;
+
+  &.awn-hiding {
+    animation-name: $awn-popup-hide-animation;
+  }
+
+  .awn-popup-body {
+    position: relative;
+    border-radius: $awn-popup-border-radius;
+    word-break: break-word;
+    background: $awn-popup-bg;
+    padding: $awn-popup-padding;
+    min-width: $awn-popup-min-width;
+    font-size: $awn-popup-font-size;
+    max-width: $awn-popup-max-width;
+
+    &.awn-popup-confirm {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .fa {
+        font-size: $awn-popup-icon-size;
+        color: $awn-warning-color;
+      }
+    }
+
+    &.awn-popup-async-block {
+      background: transparent;
+      font-size: 32px;
+      font-weight: bold;
+      color: #fff;
+      text-align: center;
+    }
+  }
+
+  .awn-popup-title {
+    font-size: $awn-popup-font-size;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-top: 8px;
+  }
+
+  .awn-buttons {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: $awn-popup-padding;
+
+    .awn-btn {
+      border-radius: $awn-popup-btn-border-radius;
+      border: 0;
+      font-weight: bold;
+      transition: background 0.2s linear;
+      font-size: $awn-popup-font-size;
+      width: 45%;
+      line-height: $awn-popup-btn-height;
+      color: $awn-popup-btn-color;
+    }
+
+    &-1 {
+      .awn-btn {
+        width: 100%;
+      }
+    }
+
+    .awn-btn-success {
+      background: $awn-success-color;
+
+      &:hover {
+        background: darken($awn-success-color, 5%);
+      }
+    }
+
+    .awn-btn-cancel {
+      background: $awn-info-color;
+
+      &:hover {
+        background: darken($awn-info-color, 5%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+@import "variables";
+@import "animations";
+@import "popups";
+@import "toasts";
+
+[class^="awn-"] {
+  box-sizing: border-box;
+}

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;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+// Container
+$awn-container-z-index: 99998 !default;
+$awn-container-padding: 24px !default;
+
+// Colors
+$awn-primary-color: hsl(0, 0%, 50%) !default;
+$awn-primary-background: hsl(0, 0%, 92%) !default;
+$awn-primary-border-color: hsl(0, 0%, 82%) !default;
+
+$awn-success-color: hsl(100, 65%, 32%) !default;
+$awn-success-background: hsl(100, 74%, 90%) !default;
+$awn-success-border-color: hsl(100, 45%, 70%) !default;
+
+$awn-info-color: hsl(201, 71%, 38%) !default;
+$awn-info-background: hsl(201, 71%, 90%) !default;
+$awn-info-border-color: hsl(201, 71%, 78%) !default;
+
+$awn-alert-color: hsl(3, 74%, 38%) !default;
+$awn-alert-background: hsl(3, 74%, 90%) !default;
+$awn-alert-border-color: hsl(3, 74%, 78%) !default;
+
+$awn-warning-color: hsl(32, 100%, 38%) !default;
+$awn-warning-background: hsl(32, 100%, 90%) !default;
+$awn-warning-border-color: hsl(32, 100%, 75%) !default;
+
+// Notifications
+$awn-toast-width: 320px !default;
+$awn-toast-padding: 16px !default;
+$awn-toast-margin: 16px !default;
+$awn-toast-border-width: 2px !default;
+$awn-toast-border-style: solid !default;
+$awn-toast-border-color: $awn-primary-border-color !default;
+$awn-toast-border-radius: 6px !default;
+$awn-border: $awn-toast-border-width $awn-toast-border-style
+  $awn-toast-border-color !default;
+$awn-progress-bar-height: 6px !default;
+$awn-toast-font-size: 14px !default;
+$awn-toast-title-font-size: 18px !default;
+$awn-toast-icon-size: 44px !default;
+
+// Popups
+$awn-popup-wrapper-bg: rgba(0, 0, 0, 0.7) !default;
+$awn-popup-wrapper-z-index: 99999 !default;
+$awn-popup-bg: #fff !default;
+$awn-popup-min-width: 320px !default;
+$awn-popup-max-width: 500px !default;
+$awn-popup-font-size: 14px !default;
+$awn-popup-icon-size: 44px !default;
+$awn-popup-padding: 24px !default;
+$awn-popup-border-radius: 6px !default;
+$awn-popup-btn-height: 32px !default;
+$awn-popup-btn-color: #fff !default;
+$awn-popup-btn-border-radius: 4px !default;
+
+// Animations
+$awn-popup-show-animation: awn-fade-in;
+$awn-popup-hide-animation: awn-fade-out;
+$awn-popup-animation-timing: ease-out;
+
+$awn-toast-left-show-animation: awn-slide-left;
+$awn-toast-right-show-animation: awn-slide-right;
+$awn-toast-hide-animation: awn-fade-out;
+$awn-toast-animation-timing: linear;