Skip to content
Snippets Groups Projects
Commit 9e1cfbda authored by Neuber, Eugen Ramon's avatar Neuber, Eugen Ramon :speech_balloon: Committed by Reiter, Christoph
Browse files

Remove BULMA.CSS from dependencies

parent e48270cf
No related branches found
No related tags found
No related merge requests found
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
}, },
"dependencies": { "dependencies": {
"@sentry/browser": "^5.6.3", "@sentry/browser": "^5.6.3",
"bulma": "^0.7.5",
"i18next": "^17.0.11", "i18next": "^17.0.11",
"lit-element": "^2.2.1" "lit-element": "^2.2.1"
} }
......
...@@ -5,7 +5,6 @@ import multiEntry from 'rollup-plugin-multi-entry'; ...@@ -5,7 +5,6 @@ import multiEntry from 'rollup-plugin-multi-entry';
import copy from 'rollup-plugin-copy'; import copy from 'rollup-plugin-copy';
import serve from 'rollup-plugin-serve'; import serve from 'rollup-plugin-serve';
import consts from 'rollup-plugin-consts'; import consts from 'rollup-plugin-consts';
import url from "rollup-plugin-url";
import json from 'rollup-plugin-json'; import json from 'rollup-plugin-json';
const pkg = require('./package.json'); const pkg = require('./package.json');
...@@ -33,15 +32,6 @@ export default { ...@@ -33,15 +32,6 @@ export default {
include: 'node_modules/**' include: 'node_modules/**'
}), }),
json(), json(),
url({
limit: 0,
include: [
"node_modules/bulma/**/*.css",
"node_modules/bulma/**/*.sass",
],
emitFiles: true,
fileName: 'shared/[name].[hash][extname]'
}),
copy({ copy({
targets: [ targets: [
{src: 'assets/index.html', dest: 'dist'}, {src: 'assets/index.html', dest: 'dist'},
......
import {html, LitElement, css} from 'lit-element'; import {html, LitElement, css} from 'lit-element';
import * as commonUtils from './utils.js'; import * as commonUtils from './utils.js';
import bulmaCSSPath from 'bulma/css/bulma.min.css';
import VPULitElement from './vpu-lit-element.js'; import VPULitElement from './vpu-lit-element.js';
/** /**
...@@ -70,11 +69,30 @@ class Button extends VPULitElement { ...@@ -70,11 +69,30 @@ class Button extends VPULitElement {
return this.button.hasAttribute("disabled"); return this.button.hasAttribute("disabled");
} }
render() { static get styles() {
const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath); // 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` 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}"> <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> ${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner>
</button> </button>
......
...@@ -6,7 +6,6 @@ import './vpu-spinner.js'; ...@@ -6,7 +6,6 @@ import './vpu-spinner.js';
import {getIconCSS} from './vpu-icon.js'; import {getIconCSS} from './vpu-icon.js';
import './vpu-button.js'; import './vpu-button.js';
import VPULitElement from './vpu-lit-element.js'; import VPULitElement from './vpu-lit-element.js';
import bulmaCSSPath from "bulma/css/bulma.min.css";
class VpuCommonDemo extends VPULitElement { class VpuCommonDemo extends VPULitElement {
constructor() { constructor() {
...@@ -50,6 +49,23 @@ class VpuCommonDemo extends VPULitElement { ...@@ -50,6 +49,23 @@ class VpuCommonDemo extends VPULitElement {
display: inline-block; display: inline-block;
padding: 0px 0px 0px 3px; 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 { ...@@ -69,36 +85,33 @@ class VpuCommonDemo extends VPULitElement {
render() { render() {
commonUtils.initAssetBaseURL('vpu-common-demo-src'); commonUtils.initAssetBaseURL('vpu-common-demo-src');
const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html` return html`
<link rel="stylesheet" href="${bulmaCSS}">
<style> <style>
a:after { a:after {
${ getIconCSS('envelope') }; ${ getIconCSS('envelope') };
} }
</style> </style>
<section class="section"> <section class="section">
<div class="container"> <div class="content">
<h1 class="title">Common-Demo</h1> <h1>Common-Demo</h1>
</div> </div>
${this.getAuthComponentHtml()} ${this.getAuthComponentHtml()}
<div class="container"> <div class="content">
<label class="label">Mini Spinner</label> <h2>Mini Spinner</h2>
<div class="control"> <div class="control">
<vpu-mini-spinner></vpu-mini-spinner> <vpu-mini-spinner></vpu-mini-spinner>
<vpu-mini-spinner style="font-size: 2em"></vpu-mini-spinner> <vpu-mini-spinner style="font-size: 2em"></vpu-mini-spinner>
<vpu-mini-spinner style="font-size: 3em"></vpu-mini-spinner> <vpu-mini-spinner style="font-size: 3em"></vpu-mini-spinner>
</div> </div>
</div> </div>
<div class="container"> <div class="content">
<label class="label">Spinner</label> <h2>Spinner</h2>
<div class="control"> <div class="control">
<vpu-spinner></vpu-spinner> <vpu-spinner></vpu-spinner>
</div> </div>
</div> </div>
<div class="container"> <div class="content">
<label class="label">Icons</label> <h2>Icons</h2>
<div class="control"> <div class="control">
<p style="text-decoration: underline">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p> <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> <p style="font-size: 2em;">Foo <vpu-icon name="cloudnetwork"></vpu-icon> bar</p>
...@@ -106,17 +119,17 @@ class VpuCommonDemo extends VPULitElement { ...@@ -106,17 +119,17 @@ class VpuCommonDemo extends VPULitElement {
<span style="background-color: #000"><a href="#" style=" color: #fff">foobar</a></span> <span style="background-color: #000"><a href="#" style=" color: #fff">foobar</a></span>
<br> <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> </div>
<div class="container"> <div class="content">
<label class="label">Button</label> <h2>Button</h2>
<div class="control"> <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> </div>
<div class="container"> <div class="content">
<label class="label">Theming CSS API</label> <h2>Theming CSS API</h2>
<div class="control"> <div class="control">
<ul> <ul>
<li><code>--vpu-primary-bg-color</code>: Primary background color <div class="demoblock" style="background-color: var(--vpu-primary-bg-color)"></div></li> <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 { ...@@ -140,10 +153,8 @@ class VpuCommonDemo extends VPULitElement {
</ul> </ul>
</div> </div>
</div> </div>
<div class="container"> <div class="content">
<label class="label">Theming CSS Override API</label> <h2>Theming CSS Override API</h2>
<div class="control">
</div>
<pre> <pre>
&lt;style&gt; &lt;style&gt;
html { html {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment