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/notification.scss | 110 +++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 src/notifications_styles/notification.scss

(limited to 'src/notifications_styles/notification.scss')

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