added notification system

4 files changed, 332 insertions, 0 deletions

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