diff options
Diffstat (limited to 'src/notifications_styles')
| -rw-r--r-- | src/notifications_styles/_containers.scss | 100 | ||||
| -rw-r--r-- | src/notifications_styles/_types.scss | 91 | ||||
| -rw-r--r-- | src/notifications_styles/_variables.scss | 31 | ||||
| -rw-r--r-- | src/notifications_styles/notification.scss | 110 |
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 |