@schukai/monster 3.90.0 → 3.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/package.json +1 -1
- package/source/components/datatable/datatable.mjs +2 -0
- package/source/components/datatable/filter.mjs +3 -0
- package/source/components/datatable/save-button.mjs +3 -0
- package/source/components/form/action-button.mjs +11 -40
- package/source/components/form/api-bar.mjs +551 -0
- package/source/components/form/button.mjs +1 -3
- package/source/components/form/context-error.mjs +2 -13
- package/source/components/form/context-help.mjs +1 -1
- package/source/components/form/field-set.mjs +1 -3
- package/source/components/form/message-state-button.mjs +10 -12
- package/source/components/form/password.mjs +3 -3
- package/source/components/form/reload.mjs +1 -1
- package/source/components/form/shadow-reload.mjs +1 -1
- package/source/components/form/style/action-button.pcss +11 -17
- package/source/components/form/style/api-bar.pcss +0 -0
- package/source/components/form/style/button-bar.pcss +5 -0
- package/source/components/form/style/button.pcss +1 -0
- package/source/components/form/style/message-state-button.pcss +1 -0
- package/source/components/form/style/state-button.pcss +1 -0
- package/source/components/form/stylesheet/action-button.mjs +1 -1
- package/source/components/form/stylesheet/api-bar.mjs +38 -0
- package/source/components/form/stylesheet/button-bar.mjs +1 -1
- package/source/components/form/stylesheet/button.mjs +1 -1
- package/source/components/form/stylesheet/message-state-button.mjs +1 -1
- package/source/components/form/stylesheet/state-button.mjs +1 -1
- package/source/components/form/template.mjs +49 -18
- package/source/components/form/tree-select.mjs +60 -42
- package/source/components/layout/iframe.mjs +1 -3
- package/source/components/layout/tabs.mjs +38 -3
- package/source/components/style/badge.css +147 -1
- package/source/components/style/border.css +65 -1
- package/source/components/style/button.css +205 -1
- package/source/components/style/card.css +149 -1
- package/source/components/style/color.css +166 -1
- package/source/components/style/common.css +159 -1
- package/source/components/style/control.css +14 -1
- package/source/components/style/data-grid.css +447 -1
- package/source/components/style/display.css +32 -1
- package/source/components/style/floating-ui.css +42 -1
- package/source/components/style/form.css +47 -1
- package/source/components/style/host.css +14 -1
- package/source/components/style/icons.css +1584 -1
- package/source/components/style/link.css +37 -1
- package/source/components/style/normalize.css +144 -1
- package/source/components/style/popper.css +101 -1
- package/source/components/style/property.css +327 -1
- package/source/components/style/ripple.css +13 -1
- package/source/components/style/skeleton.css +164 -1
- package/source/components/style/space.css +240 -1
- package/source/components/style/spinner.css +7 -1
- package/source/components/style/table.css +39 -1
- package/source/components/style/theme.css +356 -1
- package/source/components/style/typography.css +178 -1
- package/source/monster.mjs +1 -0
- package/source/types/version.mjs +1 -1
- package/test/cases/monster.mjs +1 -1
- package/test/web/test.html +2 -2
- package/test/web/tests.js +119 -64
@@ -40,9 +40,12 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
|
|
40
40
|
/**
|
41
41
|
* A Template control is a control that can be used to load content from a URL and display it in the ShadowRoot.
|
42
42
|
*
|
43
|
-
* @fragments /fragments/components/form/template
|
43
|
+
* @fragments /fragments/components/form/template
|
44
44
|
*
|
45
45
|
* @example /examples/components/form/template-simple
|
46
|
+
* @example /examples/components/form/template-with-default
|
47
|
+
* @example /examples/components/form/template-with-processor
|
48
|
+
* @example /examples/components/form/template-onshow
|
46
49
|
*
|
47
50
|
* @since 1.11.0
|
48
51
|
* @copyright schukai GmbH
|
@@ -69,7 +72,7 @@ class Template extends CustomElement {
|
|
69
72
|
* @property {string} templates.main Main template
|
70
73
|
* @property {string} url=undefined
|
71
74
|
* @property {string} reload=undefined currently the only value defined is `onshow`. Currently the only value defined is onshow. this removes the IntersectionObserver. this means that the content is only loaded once. reloading of the content does not occur.
|
72
|
-
* @property {
|
75
|
+
* @property {Object[]} processors
|
73
76
|
* @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
74
77
|
* @property {String} fetch.redirect=error
|
75
78
|
* @property {String} fetch.method=GET
|
@@ -85,8 +88,8 @@ class Template extends CustomElement {
|
|
85
88
|
templates: {
|
86
89
|
main: getTemplate(),
|
87
90
|
},
|
88
|
-
url:
|
89
|
-
reload:
|
91
|
+
url: null,
|
92
|
+
reload: null,
|
90
93
|
processors: [],
|
91
94
|
fetch: {
|
92
95
|
redirect: "error",
|
@@ -123,8 +126,6 @@ class Template extends CustomElement {
|
|
123
126
|
this[attributeObserverSymbol][ATTRIBUTE_FORM_URL] = (url) => {
|
124
127
|
if (this.hasAttribute(ATTRIBUTE_FORM_URL)) {
|
125
128
|
this.setOption("url", new URL(url, document.location).toString());
|
126
|
-
} else {
|
127
|
-
this.setOption("url", undefined);
|
128
129
|
}
|
129
130
|
};
|
130
131
|
}
|
@@ -139,7 +140,7 @@ class Template extends CustomElement {
|
|
139
140
|
* @throws {Error} not found
|
140
141
|
* @throws {Error} undefined status or type
|
141
142
|
* @fires monster-fetched
|
142
|
-
* @return {
|
143
|
+
* @return {void}
|
143
144
|
*/
|
144
145
|
[assembleMethodSymbol]() {
|
145
146
|
super[assembleMethodSymbol]();
|
@@ -181,13 +182,6 @@ class Template extends CustomElement {
|
|
181
182
|
}
|
182
183
|
}
|
183
184
|
|
184
|
-
/**
|
185
|
-
* @typedef {Object} Processor
|
186
|
-
* @property {String} destination
|
187
|
-
* @property {String} source
|
188
|
-
* @since 1.11.8
|
189
|
-
*/
|
190
|
-
|
191
185
|
/**
|
192
186
|
* This attribute can be used to pass a URL to this select.
|
193
187
|
*
|
@@ -276,7 +270,12 @@ function loadContent() {
|
|
276
270
|
throw new Error("no shadow-root is defined");
|
277
271
|
}
|
278
272
|
|
279
|
-
|
273
|
+
let url = this.getOption("url", undefined);
|
274
|
+
|
275
|
+
if (url instanceof URL) {
|
276
|
+
url = url.toString();
|
277
|
+
}
|
278
|
+
|
280
279
|
if (!isString(url) || url === "") {
|
281
280
|
throw new Error("missing url");
|
282
281
|
}
|
@@ -303,6 +302,7 @@ function loadContent() {
|
|
303
302
|
loadAndAssignContent(container, url, options)
|
304
303
|
.then(() => {
|
305
304
|
defaultSlot.style.display = "none";
|
305
|
+
container.style.display = "block";
|
306
306
|
runProcessors.call(this);
|
307
307
|
})
|
308
308
|
.catch((e) => {
|
@@ -316,15 +316,40 @@ function loadContent() {
|
|
316
316
|
*/
|
317
317
|
function runProcessors() {
|
318
318
|
const processors = this.getOption("processors");
|
319
|
-
if (!isArray(processors)) return;
|
319
|
+
if (!isArray(processors)) return this;
|
320
320
|
|
321
321
|
for (const [, processor] of processors.entries()) {
|
322
322
|
const source = processor?.source;
|
323
|
-
|
323
|
+
let destination = processor?.destination;
|
324
|
+
|
325
|
+
if (source === null) {
|
326
|
+
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "missing source");
|
327
|
+
continue;
|
328
|
+
}
|
329
|
+
|
330
|
+
if (
|
331
|
+
destination === null ||
|
332
|
+
destination === undefined ||
|
333
|
+
destination === ""
|
334
|
+
) {
|
335
|
+
destination = "[" + ATTRIBUTE_ROLE + "=container]";
|
336
|
+
}
|
324
337
|
|
325
338
|
if (isString(source) && isString(destination)) {
|
326
339
|
const sourceNode = this.shadowRoot.querySelector(source);
|
327
|
-
|
340
|
+
let destinationNode = document.querySelector(destination);
|
341
|
+
|
342
|
+
if (destinationNode === null) {
|
343
|
+
destinationNode = this.shadowRoot.querySelector(destination);
|
344
|
+
if (destinationNode === null) {
|
345
|
+
addAttributeToken(
|
346
|
+
this,
|
347
|
+
ATTRIBUTE_ERRORMESSAGE,
|
348
|
+
"destination not found",
|
349
|
+
);
|
350
|
+
continue;
|
351
|
+
}
|
352
|
+
}
|
328
353
|
|
329
354
|
if (
|
330
355
|
sourceNode instanceof HTMLElement &&
|
@@ -332,6 +357,12 @@ function runProcessors() {
|
|
332
357
|
) {
|
333
358
|
destinationNode.innerHTML = sourceNode.cloneNode(true).innerHTML;
|
334
359
|
}
|
360
|
+
} else {
|
361
|
+
addAttributeToken(
|
362
|
+
this,
|
363
|
+
ATTRIBUTE_ERRORMESSAGE,
|
364
|
+
"invalid source or destination",
|
365
|
+
);
|
335
366
|
}
|
336
367
|
}
|
337
368
|
|
@@ -13,8 +13,12 @@
|
|
13
13
|
*/
|
14
14
|
|
15
15
|
import { buildTree } from "../../data/buildtree.mjs";
|
16
|
-
import { findClosestByAttribute } from "../../dom/attributes.mjs";
|
17
16
|
import {
|
17
|
+
addAttributeToken,
|
18
|
+
findClosestByAttribute,
|
19
|
+
} from "../../dom/attributes.mjs";
|
20
|
+
import {
|
21
|
+
ATTRIBUTE_ERRORMESSAGE,
|
18
22
|
ATTRIBUTE_ROLE,
|
19
23
|
ATTRIBUTE_UPDATER_INSERT_REFERENCE,
|
20
24
|
} from "../../dom/constants.mjs";
|
@@ -57,7 +61,7 @@ const keyEventHandler = Symbol("keyEventHandler");
|
|
57
61
|
*
|
58
62
|
* @fragments /fragments/components/form/tree-select
|
59
63
|
*
|
60
|
-
* @example /examples/components/form/tree-select
|
64
|
+
* @example /examples/components/form/tree-select-simple
|
61
65
|
*
|
62
66
|
* @since 1.9.0
|
63
67
|
* @copyright schukai GmbH
|
@@ -98,8 +102,12 @@ class TreeSelect extends Select {
|
|
98
102
|
{
|
99
103
|
mapping: {
|
100
104
|
rootReferences: ["0", undefined, null],
|
101
|
-
|
102
|
-
|
105
|
+
id: "id",
|
106
|
+
parent: "parent",
|
107
|
+
|
108
|
+
selector: "*",
|
109
|
+
labelTemplate: "",
|
110
|
+
valueTemplate: "",
|
103
111
|
},
|
104
112
|
formatter: {
|
105
113
|
selection: formatHierarchicalSelection,
|
@@ -145,54 +153,58 @@ class TreeSelect extends Select {
|
|
145
153
|
const filter = mappingOptions?.["filter"];
|
146
154
|
const rootReferences = mappingOptions?.["rootReferences"];
|
147
155
|
|
148
|
-
const id = this.getOption("mapping.
|
149
|
-
const parentID = this.getOption("mapping.
|
156
|
+
const id = this.getOption("mapping.id", "id");
|
157
|
+
const parentID = this.getOption("mapping.parent", "parent");
|
150
158
|
|
151
159
|
const selector = mappingOptions?.["selector"];
|
152
|
-
|
153
|
-
const nodes = buildTree(data, selector, id, parentID, {
|
154
|
-
filter,
|
155
|
-
rootReferences,
|
156
|
-
});
|
157
|
-
|
158
160
|
const options = [];
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
const
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
161
|
+
|
162
|
+
try {
|
163
|
+
const nodes = buildTree(data, selector, id, parentID, {
|
164
|
+
filter,
|
165
|
+
rootReferences,
|
166
|
+
});
|
167
|
+
|
168
|
+
for (const node of nodes) {
|
169
|
+
const iterator = new NodeRecursiveIterator(node);
|
170
|
+
for (const n of iterator) {
|
171
|
+
const formattedValues = formatKeyLabel.call(this, n);
|
172
|
+
|
173
|
+
const label = formattedValues.label;
|
174
|
+
const value = formattedValues.value;
|
175
|
+
const intend = n.level;
|
176
|
+
|
177
|
+
const visibility = intend > 0 ? "hidden" : "visible";
|
178
|
+
const state = "close";
|
179
|
+
|
180
|
+
this[internalNodesSymbol].set(value, n);
|
181
|
+
|
182
|
+
options.push({
|
183
|
+
value,
|
184
|
+
label,
|
185
|
+
intend,
|
186
|
+
state,
|
187
|
+
visibility,
|
188
|
+
["has-children"]: n.hasChildNodes(),
|
189
|
+
});
|
190
|
+
}
|
181
191
|
}
|
182
|
-
}
|
183
192
|
|
184
|
-
|
193
|
+
this.setOption("options", options);
|
185
194
|
|
186
|
-
|
187
|
-
|
188
|
-
|
195
|
+
fireCustomEvent(this, "monster-options-set", {
|
196
|
+
options,
|
197
|
+
});
|
198
|
+
} catch (e) {
|
199
|
+
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e?.message || e);
|
200
|
+
}
|
189
201
|
|
190
202
|
return this;
|
191
203
|
}
|
192
204
|
|
193
205
|
/**
|
194
206
|
*
|
195
|
-
* @return {
|
207
|
+
* @return {TreeSelect}
|
196
208
|
*/
|
197
209
|
[assembleMethodSymbol]() {
|
198
210
|
super[assembleMethodSymbol]();
|
@@ -251,10 +263,16 @@ function closeOrOpenCurrentOption(event, mode) {
|
|
251
263
|
function formatKeyLabel(node) {
|
252
264
|
validateInstance(node, Node);
|
253
265
|
|
254
|
-
const
|
266
|
+
const v = node.value;
|
267
|
+
if (v === undefined) {
|
268
|
+
throw new Error("the object has no value for the specified id");
|
269
|
+
}
|
270
|
+
|
271
|
+
const label = new Formatter(v).format(
|
255
272
|
this.getOption("mapping.labelTemplate", ""),
|
256
273
|
);
|
257
|
-
|
274
|
+
|
275
|
+
const value = new Formatter(v).format(
|
258
276
|
this.getOption("mapping.valueTemplate", ""),
|
259
277
|
);
|
260
278
|
|
@@ -146,6 +146,10 @@ const resizeObserverSymbol = Symbol("resizeObserver");
|
|
146
146
|
* @fragments /fragments/components/layout/tabs/
|
147
147
|
*
|
148
148
|
* @example /examples/components/layout/tabs-simple
|
149
|
+
* @example /examples/components/layout/tabs-active
|
150
|
+
* @example /examples/components/layout/tabs-removable
|
151
|
+
*
|
152
|
+
* @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
|
149
153
|
*
|
150
154
|
* @since 3.74.0
|
151
155
|
* @copyright schukai GmbH
|
@@ -172,6 +176,7 @@ class Tabs extends CustomElement {
|
|
172
176
|
* @property {string} labels.new-tab-label="New Tab"
|
173
177
|
* @property {Object} features
|
174
178
|
* @property {number} features.openDelay=500 Open delay in milliseconds
|
179
|
+
* @property {string} features.removeBehavior="auto" Remove behavior, auto (default), next, previous and none
|
175
180
|
* @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
176
181
|
* @property {String} fetch.redirect=error
|
177
182
|
* @property {String} fetch.method=GET
|
@@ -206,6 +211,7 @@ class Tabs extends CustomElement {
|
|
206
211
|
|
207
212
|
features: {
|
208
213
|
openDelay: null,
|
214
|
+
removeBehavior: "auto",
|
209
215
|
},
|
210
216
|
|
211
217
|
classes: {
|
@@ -510,7 +516,6 @@ function attachTabChangeObserver() {
|
|
510
516
|
* @private
|
511
517
|
* @return {Select}
|
512
518
|
* @external "external:createPopper"
|
513
|
-
* @see {@link Plugins}
|
514
519
|
*/
|
515
520
|
function initPopper() {
|
516
521
|
const self = this;
|
@@ -685,6 +690,10 @@ function initEventHandler() {
|
|
685
690
|
const reference = button.getAttribute(
|
686
691
|
`${ATTRIBUTE_PREFIX}tab-reference`,
|
687
692
|
);
|
693
|
+
|
694
|
+
const previous = button.previousElementSibling;
|
695
|
+
const next = button.nextElementSibling;
|
696
|
+
|
688
697
|
if (reference) {
|
689
698
|
const container = this.querySelector(`[id=${reference}]`);
|
690
699
|
if (container instanceof HTMLElement) {
|
@@ -695,6 +704,32 @@ function initEventHandler() {
|
|
695
704
|
});
|
696
705
|
}
|
697
706
|
}
|
707
|
+
|
708
|
+
switch (this.getOption("features.removeBehavior")) {
|
709
|
+
case "auto":
|
710
|
+
if (next instanceof HTMLButtonElement) {
|
711
|
+
next.click();
|
712
|
+
} else {
|
713
|
+
// get previous button
|
714
|
+
if (previous instanceof HTMLButtonElement) {
|
715
|
+
previous.click();
|
716
|
+
}
|
717
|
+
}
|
718
|
+
break;
|
719
|
+
case "next":
|
720
|
+
if (next instanceof HTMLButtonElement) {
|
721
|
+
next.click();
|
722
|
+
}
|
723
|
+
break;
|
724
|
+
case "previous":
|
725
|
+
if (previous instanceof HTMLButtonElement) {
|
726
|
+
previous.click();
|
727
|
+
}
|
728
|
+
break;
|
729
|
+
|
730
|
+
default: // and "none"
|
731
|
+
break;
|
732
|
+
}
|
698
733
|
}
|
699
734
|
}
|
700
735
|
};
|
@@ -826,7 +861,7 @@ function initTabButtons() {
|
|
826
861
|
}
|
827
862
|
|
828
863
|
if (node.hasAttribute(`${ATTRIBUTE_PREFIX}button-icon`)) {
|
829
|
-
label = `<span part="label">${label}</span><img part="icon" src="${node.getAttribute(
|
864
|
+
label = `<span part="label">${label}</span><img part="icon" alt="this is an icon" src="${node.getAttribute(
|
830
865
|
`${ATTRIBUTE_PREFIX}button-icon`,
|
831
866
|
)}">`;
|
832
867
|
}
|
@@ -1107,7 +1142,7 @@ function getTemplate() {
|
|
1107
1142
|
data-monster-insert="buttons path:buttons.standard">
|
1108
1143
|
<slot name="start" class="invisible"></slot>
|
1109
1144
|
<div data-monster-role="popper" part="popper" tabindex="-1"
|
1110
|
-
|
1145
|
+
data-monster-attributes="class path:classes.popper">
|
1111
1146
|
<div data-popper-arrow></div>
|
1112
1147
|
|
1113
1148
|
|
@@ -1,2 +1,148 @@
|
|
1
1
|
/** generated from badge.pcss **/
|
2
|
-
.monster-badge-primary
|
2
|
+
.monster-badge-primary {
|
3
|
+
padding: .25em .4em;
|
4
|
+
}
|
5
|
+
.monster-badge-primary,
|
6
|
+
.monster-badge-primary-pill {
|
7
|
+
background-color: var(--monster-bg-color-primary-4);
|
8
|
+
border-radius: .25rem;
|
9
|
+
color: var(--monster-color-primary-4);
|
10
|
+
display: inline-block;
|
11
|
+
font-size: 75%;
|
12
|
+
font-weight: 700;
|
13
|
+
line-height: 1;
|
14
|
+
text-align: center;
|
15
|
+
text-decoration: none;
|
16
|
+
vertical-align: baseline;
|
17
|
+
white-space: nowrap;
|
18
|
+
}
|
19
|
+
.monster-badge-primary-pill {
|
20
|
+
border-radius: 10rem;
|
21
|
+
padding: .25em .6em;
|
22
|
+
}
|
23
|
+
.monster-badge-secondary {
|
24
|
+
padding: .25em .4em;
|
25
|
+
}
|
26
|
+
.monster-badge-secondary,
|
27
|
+
.monster-badge-secondary-pill {
|
28
|
+
background-color: var(--monster-bg-color-secondary-3);
|
29
|
+
border-radius: .25rem;
|
30
|
+
color: var(--monster-color-secondary-3);
|
31
|
+
display: inline-block;
|
32
|
+
font-size: 75%;
|
33
|
+
font-weight: 700;
|
34
|
+
line-height: 1;
|
35
|
+
text-align: center;
|
36
|
+
text-decoration: none;
|
37
|
+
vertical-align: baseline;
|
38
|
+
white-space: nowrap;
|
39
|
+
}
|
40
|
+
.monster-badge-secondary-pill {
|
41
|
+
border-radius: 10rem;
|
42
|
+
padding: .25em .6em;
|
43
|
+
}
|
44
|
+
.monster-badge-tertiary {
|
45
|
+
padding: .25em .4em;
|
46
|
+
}
|
47
|
+
.monster-badge-tertiary,
|
48
|
+
.monster-badge-tertiary-pill {
|
49
|
+
background-color: var(--monster-bg-color-tertiary-3);
|
50
|
+
border-radius: .25rem;
|
51
|
+
color: var(--monster-color-tertiary-3);
|
52
|
+
display: inline-block;
|
53
|
+
font-size: 75%;
|
54
|
+
font-weight: 700;
|
55
|
+
line-height: 1;
|
56
|
+
text-align: center;
|
57
|
+
text-decoration: none;
|
58
|
+
vertical-align: baseline;
|
59
|
+
white-space: nowrap;
|
60
|
+
}
|
61
|
+
.monster-badge-tertiary-pill {
|
62
|
+
border-radius: 10rem;
|
63
|
+
padding: .25em .6em;
|
64
|
+
}
|
65
|
+
.monster-badge-destructive {
|
66
|
+
padding: .25em .4em;
|
67
|
+
}
|
68
|
+
.monster-badge-destructive,
|
69
|
+
.monster-badge-destructive-pill {
|
70
|
+
background-color: var(--monster-bg-color-destructive-1);
|
71
|
+
border-radius: .25rem;
|
72
|
+
color: var(--monster-color-destructive-1);
|
73
|
+
display: inline-block;
|
74
|
+
font-size: 75%;
|
75
|
+
font-weight: 700;
|
76
|
+
line-height: 1;
|
77
|
+
text-align: center;
|
78
|
+
text-decoration: none;
|
79
|
+
vertical-align: baseline;
|
80
|
+
white-space: nowrap;
|
81
|
+
}
|
82
|
+
.monster-badge-destructive-pill {
|
83
|
+
border-radius: 10rem;
|
84
|
+
padding: .25em .6em;
|
85
|
+
}
|
86
|
+
.monster-badge-success {
|
87
|
+
padding: .25em .4em;
|
88
|
+
}
|
89
|
+
.monster-badge-success,
|
90
|
+
.monster-badge-success-pill {
|
91
|
+
background-color: var(--monster-bg-color-success-1);
|
92
|
+
border-radius: .25rem;
|
93
|
+
color: var(--monster-color-success-1);
|
94
|
+
display: inline-block;
|
95
|
+
font-size: 75%;
|
96
|
+
font-weight: 700;
|
97
|
+
line-height: 1;
|
98
|
+
text-align: center;
|
99
|
+
text-decoration: none;
|
100
|
+
vertical-align: baseline;
|
101
|
+
white-space: nowrap;
|
102
|
+
}
|
103
|
+
.monster-badge-success-pill {
|
104
|
+
border-radius: 10rem;
|
105
|
+
padding: .25em .6em;
|
106
|
+
}
|
107
|
+
.monster-badge-warning {
|
108
|
+
padding: .25em .4em;
|
109
|
+
}
|
110
|
+
.monster-badge-warning,
|
111
|
+
.monster-badge-warning-pill {
|
112
|
+
background-color: var(--monster-bg-color-warning-1);
|
113
|
+
border-radius: .25rem;
|
114
|
+
color: var(--monster-color-warning-1);
|
115
|
+
display: inline-block;
|
116
|
+
font-size: 75%;
|
117
|
+
font-weight: 700;
|
118
|
+
line-height: 1;
|
119
|
+
text-align: center;
|
120
|
+
text-decoration: none;
|
121
|
+
vertical-align: baseline;
|
122
|
+
white-space: nowrap;
|
123
|
+
}
|
124
|
+
.monster-badge-warning-pill {
|
125
|
+
border-radius: 10rem;
|
126
|
+
padding: .25em .6em;
|
127
|
+
}
|
128
|
+
.monster-badge-error {
|
129
|
+
padding: .25em .4em;
|
130
|
+
}
|
131
|
+
.monster-badge-error,
|
132
|
+
.monster-badge-error-pill {
|
133
|
+
background-color: var(--monster-bg-color-error-1);
|
134
|
+
border-radius: .25rem;
|
135
|
+
color: var(--monster-color-error-1);
|
136
|
+
display: inline-block;
|
137
|
+
font-size: 75%;
|
138
|
+
font-weight: 700;
|
139
|
+
line-height: 1;
|
140
|
+
text-align: center;
|
141
|
+
text-decoration: none;
|
142
|
+
vertical-align: baseline;
|
143
|
+
white-space: nowrap;
|
144
|
+
}
|
145
|
+
.monster-badge-error-pill {
|
146
|
+
border-radius: 10rem;
|
147
|
+
padding: .25em .6em;
|
148
|
+
}
|
@@ -1,2 +1,66 @@
|
|
1
1
|
/** generated from border.pcss **/
|
2
|
-
.monster-border-primary-1
|
2
|
+
.monster-border-primary-1,
|
3
|
+
.monster-border-primary-2,
|
4
|
+
.monster-border-primary-3,
|
5
|
+
.monster-border-primary-4 {
|
6
|
+
border-radius: var(--monster-border-radius);
|
7
|
+
border-style: var(--monster-border-style);
|
8
|
+
border-width: var(--monster-border-width);
|
9
|
+
}
|
10
|
+
.monster-border-0 {
|
11
|
+
border-radius: 0;
|
12
|
+
border-style: none;
|
13
|
+
border-width: 0;
|
14
|
+
}
|
15
|
+
.monster-border-primary-1 {
|
16
|
+
border-color: var(--monster-bg-color-primary-1);
|
17
|
+
}
|
18
|
+
.monster-border-primary-2 {
|
19
|
+
border-color: var(--monster-bg-color-primary-2);
|
20
|
+
}
|
21
|
+
.monster-border-primary-3 {
|
22
|
+
border-color: var(--monster-bg-color-primary-3);
|
23
|
+
}
|
24
|
+
.monster-border-primary-4 {
|
25
|
+
border-color: var(--monster-bg-color-primary-4);
|
26
|
+
}
|
27
|
+
.monster-border-secondary-1,
|
28
|
+
.monster-border-secondary-2,
|
29
|
+
.monster-border-secondary-3,
|
30
|
+
.monster-border-secondary-4 {
|
31
|
+
border-radius: var(--monster-border-radius);
|
32
|
+
border-style: var(--monster-border-style);
|
33
|
+
border-width: var(--monster-border-width);
|
34
|
+
}
|
35
|
+
.monster-border-secondary-1 {
|
36
|
+
border-color: var(--monster-bg-color-secondary-1);
|
37
|
+
}
|
38
|
+
.monster-border-secondary-2 {
|
39
|
+
border-color: var(--monster-bg-color-secondary-2);
|
40
|
+
}
|
41
|
+
.monster-border-secondary-3 {
|
42
|
+
border-color: var(--monster-bg-color-secondary-3);
|
43
|
+
}
|
44
|
+
.monster-border-secondary-4 {
|
45
|
+
border-color: var(--monster-bg-color-secondary-4);
|
46
|
+
}
|
47
|
+
.monster-border-tertiary-1,
|
48
|
+
.monster-border-tertiary-2,
|
49
|
+
.monster-border-tertiary-3,
|
50
|
+
.monster-border-tertiary-4 {
|
51
|
+
border-radius: var(--monster-border-radius);
|
52
|
+
border-style: var(--monster-border-style);
|
53
|
+
border-width: var(--monster-border-width);
|
54
|
+
}
|
55
|
+
.monster-border-tertiary-1 {
|
56
|
+
border-color: var(--monster-bg-color-tertiary-1);
|
57
|
+
}
|
58
|
+
.monster-border-tertiary-2 {
|
59
|
+
border-color: var(--monster-bg-color-tertiary-2);
|
60
|
+
}
|
61
|
+
.monster-border-tertiary-3 {
|
62
|
+
border-color: var(--monster-bg-color-tertiary-3);
|
63
|
+
}
|
64
|
+
.monster-border-tertiary-4 {
|
65
|
+
border-color: var(--monster-bg-color-tertiary-4);
|
66
|
+
}
|