first

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