init

packages/ags/bk/scss/_notifications.scss

@@ -0,0 +1,96 @@
+window.notifications {
+  .notification {
+    border-radius: 15px;
+    background-color: $base;
+    margin: 25px 25px 20px 0px;
+    font-family: "Iosevka";
+    padding: 5px;
+    // border: 2px solid $rosewater;
+    box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 5px;
+
+    &.critical {
+      box-shadow: inset 0 0 .5em 0 $red;
+    }
+
+    &:hover button.close-button {
+      // @include button-hover;
+      background-color: transparentize($red, .5);
+    }
+
+    .content {
+      .title {
+        margin-top: 5px;
+        margin-right: 10px;
+        color: $text;
+        font-size: 1.2em;
+      }
+
+      .time {
+        color: transparentize($text, .2);
+        margin: 5px 10px;
+      }
+
+      .description {
+        font-size: .9em;
+        color: transparentize($text, .2);
+      }
+
+      .icon {
+        border-radius: 10px;
+        margin-right: 10px;
+
+        &.img {
+          border: 2px solid $green;
+        }
+      }
+    }
+
+    box.actions {
+      // @include spacing(0.5);
+      margin-top: 10px;
+
+      button {
+        // @include button;
+        background-color: $surface0;
+        border: 2px solid $surface0;
+        border-radius: 10px;
+        font-size: 1.2em;
+        margin: 0px 10px 10px 0px;
+        padding: 10px;
+
+        &:first-child {
+          margin: 0px 10px 10px 10px;
+        }
+
+        &:hover {
+          background-color: $surface2;
+          border: 2px solid $rosewater;
+        }
+      }
+    }
+
+    button.close-button {
+      // @include button($flat: true);
+      margin: 0px 0px 0px 0px;
+      border-radius: 10px;
+      min-width: 30px;
+      min-height: 30px;
+      background-color: rgba(0, 0, 0, 0); //$crust;
+      padding: 0px;
+
+      &:hover {
+        background-color: transparentize($red, .5);
+      }
+
+      &:active {
+        background-image: none;
+        background-color: $red;
+      }
+    }
+
+
+    .description {
+      min-width: 350px;
+    }
+  }
+}