diff --git a/packages/common/package.json b/packages/common/package.json
index 9eb45ee185ba10bc2f3696e5b43f847a3fdbe7ac..f7e7f2497c055029a3ae94e547a11cfb388a0e15 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -30,7 +30,6 @@
},
"dependencies": {
"@sentry/browser": "^5.6.3",
- "bulma": "^0.7.5",
"i18next": "^17.0.11",
"lit-element": "^2.2.1"
}
diff --git a/packages/common/rollup.config.js b/packages/common/rollup.config.js
index 918dd1ca39d706fae4a0091c98c790a2143ba93a..91a6d227640d19f5575d74192fa291a408ec2243 100644
--- a/packages/common/rollup.config.js
+++ b/packages/common/rollup.config.js
@@ -5,7 +5,6 @@ import multiEntry from 'rollup-plugin-multi-entry';
import copy from 'rollup-plugin-copy';
import serve from 'rollup-plugin-serve';
import consts from 'rollup-plugin-consts';
-import url from "rollup-plugin-url";
import json from 'rollup-plugin-json';
const pkg = require('./package.json');
@@ -33,15 +32,6 @@ export default {
include: 'node_modules/**'
}),
json(),
- url({
- limit: 0,
- include: [
- "node_modules/bulma/**/*.css",
- "node_modules/bulma/**/*.sass",
- ],
- emitFiles: true,
- fileName: 'shared/[name].[hash][extname]'
- }),
copy({
targets: [
{src: 'assets/index.html', dest: 'dist'},
diff --git a/packages/common/vpu-button.js b/packages/common/vpu-button.js
index aba98dd15bfac92ea8176b543389baa69b4cacf6..af196ed8f0d8fb4a9e120c320392d970860fda7c 100644
--- a/packages/common/vpu-button.js
+++ b/packages/common/vpu-button.js
@@ -1,6 +1,5 @@
import {html, LitElement, css} from 'lit-element';
import * as commonUtils from './utils.js';
-import bulmaCSSPath from 'bulma/css/bulma.min.css';
import VPULitElement from './vpu-lit-element.js';
/**
@@ -70,11 +69,30 @@ class Button extends VPULitElement {
return this.button.hasAttribute("disabled");
}
- render() {
- const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
+ static get styles() {
+ // language=css
+ return css`
+ ${commonUtils.getThemeCSS()}
+ .button {
+ cursor: pointer;
+ justify-content: center;
+ padding-bottom: calc(.375rem - 1px);
+ padding-left: .75rem;
+ padding-right: .75rem;
+ padding-top: calc(.375rem - 1px);
+ text-align: center;
+ white-space: nowrap;
+ }`;
+ }
+ render() {
return html`
- <link rel="stylesheet" href="${bulmaCSS}">
+ <style>
+ .primary {
+ background: var(--vpu-primary-bg-color);
+ color: var(--vpu-primary-text-color);
+ }
+ </style>
<button @click="${this.clickHandler}" class="button ${this.type}" ?disabled="${this.disabled}">
${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner>
</button>
diff --git a/packages/common/vpu-common-demo.js b/packages/common/vpu-common-demo.js
index 2210a5a7cb3f07394ac239cfb0c0b33bf8e06262..e4dda27cc59a18849f7f3132f1046aa4d289379d 100644
--- a/packages/common/vpu-common-demo.js
+++ b/packages/common/vpu-common-demo.js
@@ -6,7 +6,6 @@ import './vpu-spinner.js';
import {getIconCSS} from './vpu-icon.js';
import './vpu-button.js';
import VPULitElement from './vpu-lit-element.js';
-import bulmaCSSPath from "bulma/css/bulma.min.css";
class VpuCommonDemo extends VPULitElement {
constructor() {
@@ -50,6 +49,23 @@ class VpuCommonDemo extends VPULitElement {
display: inline-block;
padding: 0px 0px 0px 3px;
}
+
+ /* from BULMA.CSS */
+ .section {
+ padding: 3rem 1.5rem;
+ }
+ .content h1 {
+ font-size: 2em;
+ margin-bottom: .5em;
+ }
+ .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
+ color: #363636;
+ font-weight: 600;
+ line-height: 1.125;
+ }
+ .control:not(:last-child) {
+ margin-bottom: 0.5rem;
+ }
`;
}
@@ -69,36 +85,33 @@ class VpuCommonDemo extends VPULitElement {
render() {
commonUtils.initAssetBaseURL('vpu-common-demo-src');
- const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html`
- <link rel="stylesheet" href="${bulmaCSS}">
<style>
- a:after {
- ${ getIconCSS('envelope') };
- }
+ a:after {
+ ${ getIconCSS('envelope') };
+ }
</style>
-
<section class="section">
- <div class="container">
- <h1 class="title">Common-Demo</h1>
+ <div class="content">
+ <h1>Common-Demo</h1>
</div>
${this.getAuthComponentHtml()}
- <div class="container">
- <label class="label">Mini Spinner</label>
+ <div class="content">
+ <h2>Mini Spinner</h2>
<div class="control">
<vpu-mini-spinner></vpu-mini-spinner>
<vpu-mini-spinner style="font-size: 2em"></vpu-mini-spinner>
<vpu-mini-spinner style="font-size: 3em"></vpu-mini-spinner>
</div>
</div>
- <div class="container">
- <label class="label">Spinner</label>
+ <div class="content">
+ <h2>Spinner</h2>
<div class="control">
<vpu-spinner></vpu-spinner>
</div>
</div>
- <div class="container">
- <label class="label">Icons</label>
+ <div class="content">
+ <h2>Icons</h2>
<div class="control">
<p style="text-decoration: underline">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
<p style="font-size: 2em;">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
@@ -106,17 +119,17 @@ class VpuCommonDemo extends VPULitElement {
<span style="background-color: #000"><a href="#" style=" color: #fff">foobar</a></span>
<br>
- ${(new Array(50).fill(0)).map(i => html`<vpu-icon style="color: green; width: 50px; height: 50px; border: #000 solid 1px"name="coffee-cup"></vpu-icon>`)}
+ ${(new Array(100).fill(0)).map(i => html`<vpu-icon style="color: green; width: 50px; height: 50px; border: #000 solid 1px"name="coffee-cup"></vpu-icon>`)}
</div>
</div>
- <div class="container">
- <label class="label">Button</label>
+ <div class="content">
+ <h2>Button</h2>
<div class="control">
- <vpu-button value="Load" @click="${this.buttonClickHandler}"></vpu-button>
+ <vpu-button value="Load" @click="${this.buttonClickHandler}" type="primary"></vpu-button>
</div>
</div>
- <div class="container">
- <label class="label">Theming CSS API</label>
+ <div class="content">
+ <h2>Theming CSS API</h2>
<div class="control">
<ul>
<li><code>--vpu-primary-bg-color</code>: Primary background color <div class="demoblock" style="background-color: var(--vpu-primary-bg-color)"></div></li>
@@ -140,10 +153,8 @@ class VpuCommonDemo extends VPULitElement {
</ul>
</div>
</div>
- <div class="container">
- <label class="label">Theming CSS Override API</label>
- <div class="control">
- </div>
+ <div class="content">
+ <h2>Theming CSS Override API</h2>
<pre>
<style>
html {