diff --git a/packages/data-table-view/rollup.config.js b/packages/data-table-view/rollup.config.js index 939a2ddca32aa7e8f3b5aacda0cc5e5d2245e905..99cd8bc37d7d9d5b64c42dddf782d691cae3b454 100644 --- a/packages/data-table-view/rollup.config.js +++ b/packages/data-table-view/rollup.config.js @@ -51,7 +51,7 @@ export default { include: 'node_modules/**' }), json(), - url({ + url({ // TODO: remove when last dependency for BULMA is deleted limit: 0, include: [ "node_modules/bulma/**/*.css", diff --git a/packages/data-table-view/src/vpu-data-table-view-demo.js b/packages/data-table-view/src/vpu-data-table-view-demo.js index 5744b927df226e7a1b6b0fb2cfd96cef1d24ac1d..1c48d90800838a38c797c5f283562fdcd70e59aa 100644 --- a/packages/data-table-view/src/vpu-data-table-view-demo.js +++ b/packages/data-table-view/src/vpu-data-table-view-demo.js @@ -3,7 +3,6 @@ import './vpu-data-table-view.js'; import {i18n} from './i18n'; import {html, LitElement} from 'lit-element'; import * as commonUtils from 'vpu-common/utils'; -import bulmaCSSPath from "bulma/css/bulma.min.css"; class DataTableViewDemo extends LitElement { constructor() { @@ -105,15 +104,47 @@ class DataTableViewDemo extends LitElement { render() { commonUtils.initAssetBaseURL('vpu-data-table-view-src'); - const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath); return html` - <link rel="stylesheet" href="${bulmaCSS}"> <style> .box { margin: 10px; padding: 10px; border: 1px solid orange; } + /* 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; + } + .content table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + } + .content table th:not([align]) { + text-align: left; + } + .content table thead th { + border-width: 0 0 2px; + color: #363636; + } + .content table th { + border: 1px solid #dbdbdb; + padding: .5em .75em; + vertical-align: top; + } + .content table td { + padding: .5em .75em; + vertical-align: top; + } </style> <section class="section"> diff --git a/packages/data-table-view/src/vpu-data-table-view.js b/packages/data-table-view/src/vpu-data-table-view.js index ae1ae1c23c02ab8e5c95feecf0612567e90fa24e..b0fa4c17f2450c08b01b75a5290fd8f950637ba9 100644 --- a/packages/data-table-view/src/vpu-data-table-view.js +++ b/packages/data-table-view/src/vpu-data-table-view.js @@ -8,7 +8,6 @@ import de from '../assets/datatables/i18n/German'; import en from '../assets/datatables/i18n/English'; import * as commonUtils from 'vpu-common/utils'; -import bulmaCSSPath from "bulma/css/bulma.min.css"; dt(window, $); resp(window, $); @@ -111,12 +110,10 @@ class DataTableView extends LitElement { render() { commonUtils.initAssetBaseURL('vpu-data-table-view-src'); - const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath); let dt_css = commonUtils.getAssetURL('local/vpu-data-table-view/css/jquery.dataTables.min.css'); let rs_css = commonUtils.getAssetURL('local/vpu-data-table-view/css/responsive.dataTables.css'); return html` - <link rel="stylesheet" href="${bulmaCSS}"> <link rel="stylesheet" href="${dt_css}"> <link rel="stylesheet" href="${rs_css}"> <style>