From 877475c317fbe2d0f48927e795387ae9a0395b18 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Fri, 11 Oct 2019 14:07:19 +0200
Subject: [PATCH] Remove Bulma dependency and add more styling
---
.../notification/src/vpu-notification-demo.js | 4 +-
packages/notification/src/vpu-notification.js | 93 +++++++++++++++++--
2 files changed, 86 insertions(+), 11 deletions(-)
diff --git a/packages/notification/src/vpu-notification-demo.js b/packages/notification/src/vpu-notification-demo.js
index 3cb9a731..f47207a3 100644
--- a/packages/notification/src/vpu-notification-demo.js
+++ b/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,
});
}
}
diff --git a/packages/notification/src/vpu-notification.js b/packages/notification/src/vpu-notification.js
index 7c86b260..2d368745 100644
--- a/packages/notification/src/vpu-notification.js
+++ b/packages/notification/src/vpu-notification.js
@@ -1,9 +1,8 @@
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>
--
GitLab