Skip to content
Snippets Groups Projects
Verified Commit 022ff122 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: update layout for filter and datatable #232

parent 711b178d
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 247 additions and 82 deletions
development/issues/open/232.html 0 → 100644
+ 137
− 0
View file @ 022ff122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>revision of the list design including filters #232</title>
<script src="./232.mjs" type="module"></script>
</head>
<body>
<main style="padding: 20px">
<h1>revision of the list design including filters #232</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/232">Issue #232</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<monster-datasource-rest id="data1" data-monster-option-write-url="/demo/bind-with-datasource/data.json"
data-monster-option-read-url="/demo/bind-with-datasource/data.json"></monster-datasource-rest>
<monster-datatable id="test-datatable" data-monster-datasource-selector="#data1">
<monster-collapse id="my-collapse" data-monster-role="filter-collapse">
<div class="flex">
<monster-tabs style="width: 100%"
data-monster-option-features-opendelay="500"
data-monster-option-classes-navigation="monster-theme-background-inherit"
data-monster-option-classes-button="monster-theme-background-inherit" id="filtertabs">
<div data-monster-button-label="Filter" data-monster-state="active" class="active">
<monster-datatable-filter id="listfilter1" slot="filter"
data-monster-option-storedconfig-selector="#filtertabs">
<label data-monster-label="OID1" id="oid1"
data-monster-template="${value | call:range:oid}">
RANGE OID
<monster-filter-range></monster-filter-range>
</label>
<label data-monster-label="date" id="date2"
data-monster-template="${value | call:date-range:orderDate}">Date
<monster-filter-date-range></monster-filter-date-range>
</label>
<label data-monster-label="OID2" data-monster-template="${value}" id="sdfsdf">
The label
<monster-filter-select data-monster-selected-template="selected">
<div>sdfsd</div>
</monster-filter-select>
</label>
<label data-monster-label="OID3" data-monster-template="${value | call:range:oid}"
id="qq">OID
2
<monster-filter-input name="value3" type="search"></monster-filter-input>
</label>
<label data-monster-label="customerUID"
data-monster-template="${value | call:range:customerUID}" id="customerUID">customerUID
3<monster-filter-input name="value5" type="search"></monster-filter-input></label>
<label data-monster-label="OID5" data-monster-template="${value | call:range:oid}"
id="gd">OID !!
4<monster-filter-input name="value5" type="search"></monster-filter-input></label>
<label data-monster-label="OID6" data-monster-template="${value | call:range:oid}"
id="dq">OID
5<monster-filter-input name="value5" type="search"></monster-filter-input></label>
<label data-monster-label="OID7" data-monster-template="${value | call:range:oid}"
id="xc">OID
6<monster-filter-input name="value5" type="search"></monster-filter-input></label>
</monster-datatable-filter>
</div>
<div data-monster-button-label="SDAFASDFDS"></div>
</monster-tabs>
</div>
</monster-collapse>
<monster-datasource-save-button slot="bar" data-monster-option-datasource-selector="#data1">
</monster-datasource-save-button>
<monster-datasource-status slot="bar" data-monster-option-datasource-selector="#data1">
</monster-datasource-status>
<div slot="bar" class="monster-button-group">
<monster-datasource-status data-monster-option-datasource-selector="#data1"></monster-datasource-status>
<monster-embedded-pagination
data-monster-datasource-selector="#data1"></monster-embedded-pagination>
<!-- <monster-embedded-state-->
<!-- data-monster-datasource-selector="#data1"></monster-embedded-state>-->
<monster-datatable-filter-button data-monster-reference="#my-collapse"
data-monster-role="filter-button">Filter
</monster-datatable-filter-button>
</div>
<template id="test-datatable-row">
<div data-monster-mode="fixed" data-monster-sortable="oid asc" data-monster-head="OID">
<a data-monster-attributes="href path:t12-row.oid | tostring | prefix:#"
data-monster-replace="path:t12-row.oid | tostring">Link</a>
</div>
<div data-monster-grid-template="4fr" data-monster-head="i18n:key22">
<ul>
<li><input type="date"></li>
<li data-monster-replace="path:t12-row.oid">test 1</li>
<li>asdfjasdkfjk</li>
</ul>
</div>
<div data-monster-mode="fixed" data-monster-align="end" data-monster-head="i18n:key1"
data-monster-grid-template="1fr"><input
type="checkbox"></div>
<div data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | date"></div>
<div data-monster-mode="fixed" data-monster-head="customerUID"
data-monster-replace="path:t12-row.customerUID"></div>
<div data-monster-mode="fixed"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-head="orderState 2" class="center" data-monster-align="center"
data-monster-replace="path:t12-row.orderState"></div>
<div class="end" data-monster-align="end"
data-monster-replace="path:t12-row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
<div data-monster-mode="hidden" data-monster-head="OS2" data-monster-replace="static:OXXXXX"></div>
<div data-monster-sortable="orderState" data-monster-head="State"
data-monster-replace="path:t12-row.orderState | tostring | prefix:____"></div>
<div data-monster-head="xxx" data-monster-replace="static:wwwww"></div>
<div>
<button data-monster-replace="static:doit">Click</button>
<monster-popper-button>
<form class="monster-form">
<label><input>test 1</label>
<label>test 2<input></label>
<button>OK</button>
</form>
</monster-popper-button>
</div>
</template>
</monster-datatable>
</main>
</body>
</html>
development/issues/open/232.mjs 0 → 100644
+ 36
− 0
View file @ 022ff122
/**
* @file development/issues/open/232.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/232
* @description revision of the list design including filters
* @issue 232
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/navigation/table-of-content.mjs";
import "../../../source/components/layout/panel.mjs";
import "../../../source/components/layout/split-panel.mjs";
import "../../../source/components/datatable/datasource/dom.mjs";
import "../../../source/components/datatable/datasource/rest.mjs";
import "../../../source/components/datatable/datatable.mjs";
import "../../../source/components/datatable/filter.mjs";
import "../../../source/components/datatable/filter-button.mjs";
import "../../../source/components/datatable/embedded-pagination.mjs";
import "../../../source/components/datatable/dataset.mjs";
import "../../../source/components/datatable/status.mjs";
import "../../../source/components/datatable/save-button.mjs";
import "../../../source/components/datatable/change-button.mjs";
import "../../../source/components/datatable/filter/range.mjs";
import "../../../source/components/datatable/filter/select.mjs";
import "../../../source/components/datatable/filter/input.mjs";
import "../../../source/components/datatable/filter/date-range.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/form/popper-button.mjs";
import "../../../source/components/form/tabs.mjs";
import "../../../source/components/host/host.mjs";
import "../../../source/components/layout/tabs.mjs";
source/components/datatable/datatable.mjs
+ 1
− 1
View file @ 022ff122
......@@ -211,7 +211,7 @@ class DataTable extends CustomElement {
classes: {
control: "monster-theme-control-container-1",
container: "monster-theme-control-container-1",
container: "",
row: "monster-theme-control-row-1",
},
......
source/components/datatable/filter/input.mjs
+ 2
− 1
View file @ 022ff122
......@@ -18,6 +18,7 @@ import {
CustomElement,
registerCustomElement,
} from "../../../dom/customelement.mjs";
import {FilterControlsDefaultsStyleSheet} from "../stylesheet/filter-controls-defaults.mjs";
import { FilterStyleSheet } from "../stylesheet/filter.mjs";
import { AbstractBase } from "./abstract-base.mjs";
......@@ -125,7 +126,7 @@ class Input extends AbstractBase {
* @return Array<CSSStyleSheet>
*/
static getCSSStyleSheet() {
return [FilterStyleSheet];
return [FilterControlsDefaultsStyleSheet,FilterStyleSheet];
}
/**
......
source/components/datatable/filter/select.mjs
+ 4
− 3
View file @ 022ff122
......@@ -14,7 +14,8 @@
import { registerCustomElement } from "../../../dom/customelement.mjs";
import { getSummaryTemplate, Select } from "../../form/select.mjs";
import { SelectFilterStyleSheet } from "../stylesheet/select-filter.mjs";
import {FilterControlsDefaultsStyleSheet} from "../stylesheet/filter-controls-defaults.mjs";
import { FilterSelectStyleSheet } from "../stylesheet/filter-select.mjs";
/**
* This is a filter select for the datatable filter.
......@@ -60,11 +61,11 @@ class FilterSelect extends Select {
}
/**
* @return {CSSStyleSheet}
* @return {CSSStyleSheet[]}
*/
static getCSSStyleSheet() {
const styleSheet = super.getCSSStyleSheet();
return [...styleSheet, SelectFilterStyleSheet];
return [...styleSheet, FilterControlsDefaultsStyleSheet, FilterSelectStyleSheet];
}
}
......
source/components/datatable/style/datatable.pcss
+ 8
− 0
View file @ 022ff122
......@@ -17,6 +17,14 @@
@import "../../style/theme.pcss";
@import "../../style/skeleton.pcss";
::slotted(monster-collapse) {
--monster-color-gradient-1: none;
--monster-color-gradient-2: none;
--monster-color-gradient-3: none;
}
[data-monster-role="control"] {
display: flex;
outline: none;
......
source/components/datatable/style/select-filter.pcss → source/components/datatable/style/filter-select.pcss
+ 8
− 0
View file @ 022ff122
......@@ -8,6 +8,10 @@
@import "../../style/link.pcss";
:host {
height: 100%;
}
[data-monster-role=control] {
width: 100%;
padding-bottom: 0;
......@@ -25,3 +29,7 @@
margin-right: 8px;
}
[data-monster-role="container"] {
display: flex;
}
\ No newline at end of file
source/components/datatable/style/filter.pcss
+ 1
− 1
View file @ 022ff122
......@@ -52,7 +52,7 @@
flex-direction: column;
border-bottom: var(--monster-border-width) solid var(--monster-theme-control-border-color);
border-bottom: thin dotted var(--monster-theme-control-border-color);
padding: 2px;
align-items: stretch;
......
source/components/datatable/stylesheet/datatable.mjs
+ 7
− 14
View file @ 022ff122
This diff is collapsed.
source/components/datatable/stylesheet/filter.mjs
+ 7
− 14
View file @ 022ff122
This diff is collapsed.
source/components/style/color.pcss
+ 10
− 1
View file @ 022ff122
......@@ -264,5 +264,14 @@ License: [MIT](https://github.com/matthewhowell/reasonable-colors/blob/master/LI
--monster-gradient-tangerine-5: #8f5a28;
--monster-gradient-tangerine-6: #360505;
/* seashell white */
/* hue 25 */
--monster-color-seashell-1: #f7f5ef;
--monster-color-seashell-2: #e5e2d9;
--monster-color-seashell-3: #cbc6b3;
--monster-color-seashell-4: #a19d8a;
--monster-color-seashell-5: #7a7566;
--monster-color-seashell-6: #514d3f;
}
\ No newline at end of file
source/components/style/mixin/property.pcss
+ 4
− 4
View file @ 022ff122
......@@ -315,10 +315,10 @@
@define-mixin defaultControlProperty {
--monster-theme-control-bg-color: var(--monster-gradient-tangerine-1);
--monster-theme-control-color: var(--monster-gradient-tangerine-6);
--monster-theme-control-hover-color: var(--monster-gradient-tangerine-6);
--monster-theme-control-hover-bg-color: var(--monster-gradient-tangerine-2);
--monster-theme-control-bg-color: var(--monster-color-seashell-1);
--monster-theme-control-color: var(--monster-color-seashell-6);
--monster-theme-control-hover-color: var(--monster-color-seashell-6);
--monster-theme-control-hover-bg-color: var(--monster-color-seashell-2);
--monster-theme-control-border-width: 2px;
--monster-theme-control-border-style: solid;
......
source/components/stylesheet/color.mjs
+ 7
− 14
View file @ 022ff122
......@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
export { ColorStyleSheet };
export {ColorStyleSheet}
/**
* @private
......@@ -22,17 +22,10 @@ export { ColorStyleSheet };
const ColorStyleSheet = new CSSStyleSheet();
try {
ColorStyleSheet.insertRule(
`
ColorStyleSheet.insertRule(`
@layer color {
:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505}
}`,
0,
);
:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}
}`, 0);
} catch (e) {
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
source/components/stylesheet/mixin/property.mjs
+ 6
− 13
View file @ 022ff122
......@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { PropertyStyleSheet };
export {PropertyStyleSheet}
/**
* @private
......@@ -22,17 +22,10 @@ export { PropertyStyleSheet };
const PropertyStyleSheet = new CSSStyleSheet();
try {
PropertyStyleSheet.insertRule(
`
PropertyStyleSheet.insertRule(`
@layer property {
}`,
0,
);
}`, 0);
} catch (e) {
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment