1 files changed, 59 insertions, 0 deletions
diff --git a/components/notification/_notification.scss b/components/notification/_notification.scss
new file mode 100644
index 0000000..dafe8d4
--- /dev/null
+++ b/components/notification/_notification.scss
@@ -0,0 +1,59 @@
+@include mixin-keyframes-fade-in-vertically(-50px, 'keyframes-slide-notif-in');
+@include mixin-keyframes-fade-out-vertically(20px, 'keyframes-slide-notif-out');
+
+.sdc-notification {
+	position:relative;
+
+	.sdc-notification__wrapper {
+		padding: 10px;
+		margin-top:10px;
+		width: 212px;
+		animation: keyframes-slide-notif-in 1s;
+
+		&.fade-out__animated {
+			animation: keyframes-slide-notif-out 0.8s
+		}
+
+		&.type-info {
+			background-color: #0e90d2; }
+	
+		&.type-error {
+			background-color: #dd514c; }
+	
+		&.type-success {
+			background-color: #5eb95e; }
+	
+		&.type-warn {
+			background-color: #f37b1d; }
+	}
+
+	.sdc-notification__content {
+		display:flex;
+		flex-direction:row;
+
+		.sdc-notification__icon {
+			flex: 0 0 auto;
+			height: 32px;
+			width: 32px;
+			margin: 0 14px 0 7px;
+			background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2382c355%3B%7D.cls-2%7Bfill%3Anone%3Bstroke%3A%23ebf5e4%3Bstroke-miterlimit%3A10%3B%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Evicon%3C/title%3E%3Cg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22/%3E%3C/g%3E%3Cg%20id%3D%22Layer_4%22%20data-name%3D%22Layer%204%22%3E%3Cpolyline%20class%3D%22cls-2%22%20points%3D%227.46%2017.43%2015.36%2021.74%2022.54%208.57%22/%3E%3C/g%3E%3C/svg%3E')
+		}
+	
+		.sdc-notification__message {
+			flex: 1;
+			text-align: left;
+
+			.sdc-notification__title {
+				font-size:13px;
+				color: white;
+			}
+		
+			.sdc-notification__text {
+				font-size: 12px;
+				color: white;
+			}
+		}
+	
+	}
+
+}