From c76d1c1e49e1c446fd31399e91f2e1eb18c1c8e5 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Sat, 29 May 2021 01:34:53 +0100
Subject: [PATCH] Mobile notification styles

---
 src/scss/_notifications.scss | 68 +++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/scss/_notifications.scss b/src/scss/_notifications.scss
index e8f12fb..b7dc798 100644
--- a/src/scss/_notifications.scss
+++ b/src/scss/_notifications.scss
@@ -1,31 +1,49 @@
-.vue-notification-group .notification {
-	margin: 0 0.5rem 1rem;
-	padding: 1rem 1.5rem;
-	min-height: 5rem;
-	font-size: 1.6rem;
-	font-family: Raleway, sans-serif;
-	color: var(--text-base);
-	display: flex;
-    flex-direction: column;
-    justify-content: center;
-	border-radius: var(--border-radius);
-	box-shadow: var(--box-shadow);
+.vue-notification-group {
+	z-index: 130 !important;
 
-	background: var(--background-base);
-	border-left: none;// 5px solid #187fe7;
+	.notification {
+		margin: 0 0.5rem 1rem;
+		padding: 1rem 1.5rem;
+		min-height: 5rem;
+		font-size: 1.6rem;
+		font-family: Raleway, sans-serif;
+		color: var(--text-base);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		border-radius: var(--border-radius);
+		box-shadow: var(--box-shadow);
 
-	&.success {
-		background: #68cd86;
-		border-left-color: #42a85f;
+		background: var(--background-base);
+		border-left: none;// 5px solid #187fe7;
+
+		&.success {
+			background: #68cd86;
+			border-left-color: #42a85f;
+		}
+
+		&.warn {
+			background: #ffb648;
+			border-left-color: #f48a06;
+		}
+
+		&.error {
+			background: var(--background-error);
+			border-left-color: #b82e24;
+		}
 	}
 
-	&.warn {
-		background: #ffb648;
-		border-left-color: #f48a06;
-	}
-
-	&.error {
-		background: var(--background-error);
-		border-left-color: #b82e24;
+	@media screen and (max-width: 767px) {
+		.vue-notification-wrapper:first-child:before {
+			content: '';
+			position: fixed;
+			bottom: 0;
+			lefT: 0;
+			right: 0;
+			display: block;
+			height: 10rem;
+			background-image: linear-gradient(0deg, var(--background-dark), transparent);
+			z-index: -1;
+		}
 	}
 }