From 1139da4da7f1bb0ee4a66d420e690beed36832c2 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
Date: Sun, 4 Dec 2022 21:37:52 +0530
Subject: added notification system

---
 src/notifications_styles/_containers.scss  | 100 ++++++++++++++++++++++++++
 src/notifications_styles/_types.scss       |  91 ++++++++++++++++++++++++
 src/notifications_styles/_variables.scss   |  31 ++++++++
 src/notifications_styles/notification.scss | 110 +++++++++++++++++++++++++++++
 4 files changed, 332 insertions(+)
 create mode 100644 src/notifications_styles/_containers.scss
 create mode 100644 src/notifications_styles/_types.scss
 create mode 100644 src/notifications_styles/_variables.scss
 create mode 100644 src/notifications_styles/notification.scss

(limited to 'src/notifications_styles')

diff --git a/src/notifications_styles/_containers.scss b/src/notifications_styles/_containers.scss
new file mode 100644
index 0000000..b0f00a4
--- /dev/null
+++ b/src/notifications_styles/_containers.scss
@@ -0,0 +1,100 @@
+.rnc__notification-container--top-center,
+.rnc__notification-container--top-left,
+.rnc__notification-container--top-right,
+.rnc__notification-container--bottom-center,
+.rnc__notification-container--bottom-left,
+.rnc__notification-container--bottom-right,
+.rnc__notification-container--center,
+.rnc__notification-container--top-full,
+.rnc__notification-container--bottom-full {
+  min-width: 325px;
+  position: absolute;
+  pointer-events: all;
+}
+
+.rnc__notification-container--center,
+.rnc__notification-container--top-center,
+.rnc__notification-container--bottom-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: calc(50% - 175px);
+}
+
+.rnc__notification-container--center,
+.rnc__notification-container--top-center,
+.rnc__notification-container--bottom-center {
+  max-width: 350px;
+}
+
+.rnc__notification-container--center {
+  top: 20px;
+  height: 100%;
+  pointer-events: none;
+}
+
+.rnc__notification-container--top-full,
+.rnc__notification-container--bottom-full {
+  width: 100%;
+  min-width: 100%;
+}
+
+.rnc__notification-container--bottom-full {
+  bottom: 0;
+}
+
+.rnc__util--flex-center {
+  min-width: 325px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  pointer-events: all;
+}
+
+.rnc__notification-container--top-center {
+  top: 20px;
+}
+.rnc__notification-container--bottom-center {
+  bottom: 20px;
+}
+
+.rnc__notification-container--top-left {
+  left: 20px;
+  top: 20px;
+}
+
+.rnc__notification-container--top-right {
+  right: 20px;
+  top: 20px;
+}
+
+.rnc__notification-container--bottom-left {
+  left: 20px;
+  bottom: 20px;
+}
+
+.rnc__notification-container--bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+
+.rnc__notification-container--mobile-top,
+.rnc__notification-container--mobile-bottom {
+  pointer-events: all;
+  position: absolute;
+}
+
+.rnc__notification-container--mobile-top {
+  right: 20px;
+  left: 20px;
+  top: 20px;
+}
+
+.rnc__notification-container--mobile-bottom {
+  right: 20px;
+  left: 20px;
+  bottom: 20px;
+  margin-bottom: -15px;
+}
diff --git a/src/notifications_styles/_types.scss b/src/notifications_styles/_types.scss
new file mode 100644
index 0000000..ccfbee2
--- /dev/null
+++ b/src/notifications_styles/_types.scss
@@ -0,0 +1,91 @@
+@import "_variables.scss";
+
+.rnc__notification-item--default {
+  background-color: $default;
+  border-left: 8px solid $default_dark;
+
+  .rnc__notification-timer {
+    background-color: $default_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $default_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $default;
+  }
+}
+
+.rnc__notification-item--success {
+  background-color: $success;
+  border-left: 8px solid $success_dark;
+
+  .rnc__notification-timer {
+    background-color: $success_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $success_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $success;
+  }
+}
+
+.rnc__notification-item--danger {
+  background-color: $danger;
+  border-left: 8px solid $danger_dark;
+
+  .rnc__notification-timer {
+    background-color: $danger_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $danger_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $danger;
+  }
+}
+
+.rnc__notification-item--info {
+  background-color: $info;
+  border-left: 8px solid $info_dark;
+
+  .rnc__notification-timer {
+    background-color: $info_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $info_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $info;
+  }
+}
+
+.rnc__notification-item--warning {
+  background-color: $warning;
+  border-left: 8px solid $warning_dark;
+
+  .rnc__notification-timer {
+    background-color: $warning_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $warning_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $warning;
+  }
+}
+
+.rnc__notification-item--awesome {
+  background-color: $awesome;
+  border-left: 8px solid $awesome_dark;
+
+  .rnc__notification-timer {
+    background-color: $awesome_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $awesome_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $awesome;
+  }
+}
\ No newline at end of file
diff --git a/src/notifications_styles/_variables.scss b/src/notifications_styles/_variables.scss
new file mode 100644
index 0000000..a65c811
--- /dev/null
+++ b/src/notifications_styles/_variables.scss
@@ -0,0 +1,31 @@
+@import "../colors";
+
+$default: $altBackgroundColor !default;
+$default_dark: $primaryAccentColor !default;
+$default_timer: $backgroundColor !default;
+$default_timer_filler: $primaryAccentColor !default;
+
+$success: $altBackgroundColor !default;
+$success_dark: $successColor !default;
+$success_timer: $backgroundColor !default;
+$success_timer_filler: $successColor !default;
+
+$danger: $altBackgroundColor !default;
+$danger_dark: $warningColor !default;
+$danger_timer: $backgroundColor !default;
+$danger_timer_filler: $warningColor !default;
+
+$warning: $altBackgroundColor !default;
+$warning_dark: $infoColor !default;
+$warning_timer: $backgroundColor !default;
+$warning_timer_filler: $infoColor !default;
+
+$info: $default;
+$info_dark: $default_dark;
+$info_timer: $default_timer;
+$info_timer_filler: $default_timer_filler;
+
+$awesome: $success;
+$awesome_dark: $success_dark;
+$awesome_timer: $success_timer;
+$awesome_timer_filler: $success_timer_filler;
diff --git a/src/notifications_styles/notification.scss b/src/notifications_styles/notification.scss
new file mode 100644
index 0000000..33d8efb
--- /dev/null
+++ b/src/notifications_styles/notification.scss
@@ -0,0 +1,110 @@
+@import "./_containers.scss";
+@import "./_types.scss";
+
+@keyframes timer {
+  0% { width: 100%; }
+  100% { width: 0%; }
+}
+
+.rnc__base {
+  position: fixed;
+  z-index: 9000;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+
+.rnc__notification-item {
+  display: flex;
+  position: relative;
+  border-radius: 3px;
+  margin-bottom: 15px;
+  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}
+
+.rnc__notification-container--top-full .rnc__notification-item,
+.rnc__notification-container--bottom-full .rnc__notification-item {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+.rnc__notification-container--top-full .rnc__notification,
+.rnc__notification-container--bottom-full .rnc__notification {
+  width: 100% !important;
+}
+
+.rnc__notification-timer {
+  width: 100%;
+  height: 3px;
+  margin-top: 10px;
+  border-radius: 5px;
+}
+.rnc__notification-timer-filler {
+  height: 3px;
+  border-radius: 5px;
+}
+.rnc__notification-title {
+  color: #fff;
+  font-weight: 700;
+  font-size: 14px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.rnc__notification-message {
+  color: #fff;
+  max-width: calc(100% - 15px);
+  font-size: 14px;
+  line-height: 150%;
+  word-wrap: break-word;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.rnc__notification-content {
+  padding: 8px 15px;
+  display: inline-block;
+  width: 100%;
+}
+.rnc__notification-close-mark {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+
+  &::after {
+    content: '\D7';
+    position: absolute;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 12px;
+    left: 50%;
+    top: 50%;
+  }
+}
+
+.rnc__notification-container--mobile-top .rnc__notification-item,
+.rnc__notification-container--mobile-bottom .rnc__notification-item,
+.rnc__notification-container--mobile-top .notification,
+.rnc__notification-container--mobile-bottom .notification {
+  max-width: 100%;
+  width: 100%;
+}
+
+.rnc__notification-container--top-right .notification,
+.rnc__notification-container--bottom-right .notification {
+  margin-left: auto;
+}
+
+.rnc__notification-container--top-left .notification,
+.rnc__notification-container--bottom-left .notification {
+  margin-right: auto;
+}
+
+.rnc__notification-container--mobile-top .notification,
+.rnc__notification-container--mobile-bottom .notification {
+  margin-left: auto;
+  margin-right: auto;
+}
\ No newline at end of file
-- 
cgit v1.2.3