From 03d9d04352e49f0cfac3bdf968eb9854bb1f10de Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Wed, 9 Oct 2019 13:49:17 +0200
Subject: [PATCH] Remove BULMA.CSS
TODO: rollup.config.js cleanup
---
packages/auth/rollup.config.js | 2 +-
packages/auth/src/vpu-auth-demo.js | 18 ++++++++++++---
packages/auth/src/vpu-auth.js | 36 ++++++++++++++++++++++++++----
3 files changed, 48 insertions(+), 8 deletions(-)
diff --git a/packages/auth/rollup.config.js b/packages/auth/rollup.config.js
index 9b4c152c..ee4f5595 100644
--- a/packages/auth/rollup.config.js
+++ b/packages/auth/rollup.config.js
@@ -42,7 +42,7 @@ export default {
include: 'node_modules/**'
}),
json(),
- url({
+ url({ // TODO: remove when dependecy for BULMA.CSS is deleted
limit: 0,
include: [
"node_modules/bulma/**/*.css",
diff --git a/packages/auth/src/vpu-auth-demo.js b/packages/auth/src/vpu-auth-demo.js
index 7bb3997f..ef0d3aee 100644
--- a/packages/auth/src/vpu-auth-demo.js
+++ b/packages/auth/src/vpu-auth-demo.js
@@ -28,10 +28,22 @@ class AuthDemo extends LitElement {
render() {
commonUtils.initAssetBaseURL('vpu-auth-src');
- const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html`
- <link rel="stylesheet" href="${bulmaCSS}">
-
+ <style>
+ /* 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;
+ }
+ </style>
<section class="section">
<div class="container">
<h1 class="title">Auth-Demo</h1>
diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js
index 7dc7892b..90abc622 100644
--- a/packages/auth/src/vpu-auth.js
+++ b/packages/auth/src/vpu-auth.js
@@ -242,7 +242,38 @@ class VPUAuth extends LitElement {
static get styles() {
// language=css
return css`
- .dropdown, img.login {
+ ${commonUtils.getThemeCSS()}
+
+ .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
+ display: block;
+ }
+
+ .dropdown-menu {
+ display: none;
+ min-width: 12rem;
+ padding-top: 4px;
+ position: absolute;
+ z-index: 20;
+ }
+
+ .dropdown-content {
+ background-color: white;
+ border-radius: var(--vpu-border-radius);
+ box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+ padding-bottom: 0.5rem;
+ padding-top: 0.5rem;
+ }
+
+ .dropdown-item {
+ color: #4a4a4a;
+ display: block;
+ font-size: 0.875rem;
+ line-height: 1.5;
+ padding: 0.375rem 1rem;
+ position: relative;
+ }
+
+ .dropdown, img.login {
cursor: pointer;
}
@@ -315,10 +346,7 @@ class VPUAuth extends LitElement {
render() {
commonUtils.initAssetBaseURL('vpu-auth-src');
- const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
return html`
- <link rel="stylesheet" href="${bulmaCSS}">
-
<div>
${this.loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}
</div>
--
GitLab