Mercurial > gemma
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 {