Remove Bulma dependency and add more styling

packages/notification/src/vpu-notification-demo.js

@@ -49,12 +49,12 @@ class NotificationDemo extends LitElement {
     }
 
     send() {
-        const types = ["primary", "link", "info", "success", "danger", "warning"];
+        const types = ["primary", "info", "success", "danger", "warning"];
         notify({
             "summary": "Item deleted",
             "body": `Item ${Math.random().toString(36).substring(7)} foo was deleted!`,
             "type": types[Math.floor(Math.random() * types.length)],
-            "timeout": 5,
+            "timeout": 0,
         });
     }
 }

packages/notification/src/vpu-notification.js

 import {i18n} from './i18n';
 import {createUUID} from './utils'
-import {html} from 'lit-element';
+import {css, html} from 'lit-element';
 import VPULitElement from 'vpu-common/vpu-lit-element';
 import * as commonUtils from 'vpu-common/utils';
-import bulmaCSSPath from 'bulma/css/bulma.min.css';
 
 /**
  * Notification web component
@@ -74,16 +73,92 @@ class VPUNotification extends VPULitElement {
         }
     }
 
+    static get styles() {
+        // language=css
+        return css`
+            ${commonUtils.getThemeCSS()}
+            ${commonUtils.getGeneralCSS()}
+            ${commonUtils.getNotificationCSS()}
+
+            .notification:not(:last-child) {
+                margin-bottom: 1.5rem;
+            }
+
+            .notification h3 {
+                font-weight: bold;
+                margin-bottom: 3px;
+            }
+
+            .delete, .modal-close {
+                -moz-appearance: none;
+                -webkit-appearance: none;
+                background-color: rgba(10,10,10,.2);
+                border: none;
+                border-radius: 290486px;
+                cursor: pointer;
+                pointer-events: auto;
+                display: inline-block;
+                flex-grow: 0;
+                flex-shrink: 0;
+                font-size: 0;
+                height: 20px;
+                max-height: 20px;
+                max-width: 20px;
+                min-height: 20px;
+                min-width: 20px;
+                outline: 0;
+                position: relative;
+                vertical-align: top;
+                width: 20px;
+            }
+
+            .delete::before, .modal-close::before, .delete::after, .modal-close::after {
+                background-color: white;
+                content: "";
+                display: block;
+                left: 50%;
+                position: absolute;
+                top: 50%;
+                -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+                        transform: translateX(-50%) translateY(-50%) rotate(45deg);
+                -webkit-transform-origin: center center;
+                        transform-origin: center center;
+            }
+
+            .delete::before, .modal-close::before {
+                height: 2px;
+                width: 50%;
+            }
+
+            .delete::after, .modal-close::after {
+                height: 50%;
+                width: 2px;
+            }
+
+            .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
+                background-color: rgba(10, 10, 10, 0.3);
+            }
+
+            .delete:active, .modal-close:active {
+                background-color: rgba(10, 10, 10, 0.4);
+            }
+
+            #notification {
+                position: fixed; top: 0; max-width: 500px; margin: 0.75em auto; left: 0; right: 0; z-index: 1000; padding: 0;
+            }
+
+            .notification h3 {
+                margin: 0 0 3px 0;
+                font: inherit;
+                font-weight: bold; 
+            }
+        `;
+    }
+
     render() {
         commonUtils.initAssetBaseURL('vpu-notification-src');
-        const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
-        return html`
-            <link rel="stylesheet" href="${bulmaCSS}">
-            <style>
-                #notification {position: fixed; top: 0; max-width: 500px; margin: 0.75em auto; left: 0; right: 0; z-index: 1000; padding: 0;}
-                .notification h3 {font-weight: bold; margin-bottom: 3px;}
-            </style>
 
+        return html`
             <div class="columns">
                 <div class="column" id="notification">
                 </div>