changeset 2461:b60efa7d4cee

client: adjusted notification style The notification style was still the default material design style provided by the plugin. Now another default style is used and adjusted, to better fit the general application style.
author Markus Kottlaender <markus@intevation.de>
date Mon, 04 Mar 2019 13:53:09 +0100
parents e2f05ac81471
children 9ae2a2f758bb
files client/src/assets/application.scss client/src/main.js
diffstat 2 files changed, 20 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.scss	Mon Mar 04 13:18:35 2019 +0100
+++ b/client/src/assets/application.scss	Mon Mar 04 13:53:09 2019 +0100
@@ -145,3 +145,22 @@
 .btn.disabled {
   opacity: 0.4;
 }
+
+.snotifyToast {
+  text-align: left;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  border-left: 0 !important;
+  &.snotify-info {
+    border-top: 4px solid $color-info;
+    .snotify-icon--info {
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E");
+    }
+  }
+  &.snotify-error {
+    border-top: 4px solid #f44336;
+  }
+  .snotifyToast__title {
+    font-size: 1.2rem;
+  }
+}
--- a/client/src/main.js	Mon Mar 04 13:18:35 2019 +0100
+++ b/client/src/main.js	Mon Mar 04 13:53:09 2019 +0100
@@ -38,7 +38,7 @@
 import "../node_modules/animate.css/animate.min.css";
 import "../node_modules/ol/ol.css";
 import "../node_modules/highlight.js/styles/paraiso-dark.css";
-import "../node_modules/vue-snotify/styles/material.css";
+import "../node_modules/vue-snotify/styles/simple.css";
 
 // fontawesome5 icons
 import {