@schukai/monster 4.149.1 → 4.150.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/package.json +1 -1
- package/source/components/datatable/style/column-bar.pcss +4 -1
- package/source/components/datatable/style/datatable.pcss +12 -3
- package/source/components/datatable/style/filter-controls-defaults.pcss +4 -1
- package/source/components/datatable/stylesheet/column-bar.mjs +3 -1
- package/source/components/datatable/stylesheet/datatable.mjs +11 -3
- package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +5 -1
- package/source/components/form/style/checklist.pcss +4 -1
- package/source/components/form/style/choice-cards.pcss +16 -4
- package/source/components/form/style/digits.pcss +4 -1
- package/source/components/form/style/field-layout.pcss +4 -1
- package/source/components/form/style/mixin/field-set-layout.pcss +8 -2
- package/source/components/form/style/select.pcss +12 -3
- package/source/components/form/style/toggle-switch.pcss +8 -0
- package/source/components/form/style/variant-select.pcss +8 -2
- package/source/components/form/stylesheet/checklist.mjs +3 -1
- package/source/components/form/stylesheet/choice-cards.mjs +9 -1
- package/source/components/form/stylesheet/digits.mjs +5 -1
- package/source/components/form/stylesheet/field-layout.mjs +5 -1
- package/source/components/form/stylesheet/field-set.mjs +5 -1
- package/source/components/form/stylesheet/form.mjs +3 -1
- package/source/components/form/stylesheet/input-group.mjs +3 -1
- package/source/components/form/stylesheet/login.mjs +3 -1
- package/source/components/form/stylesheet/popper-button.mjs +3 -1
- package/source/components/form/stylesheet/register-wizard.mjs +3 -1
- package/source/components/form/stylesheet/repeat-field-set-items.mjs +3 -1
- package/source/components/form/stylesheet/select.mjs +7 -1
- package/source/components/form/stylesheet/toggle-switch.mjs +5 -1
- package/source/components/form/stylesheet/variant-select.mjs +5 -1
- package/source/components/host/stylesheet/host.mjs +3 -1
- package/source/components/layout/style/tabs.pcss +16 -4
- package/source/components/layout/style/vertical-tabs.pcss +4 -1
- package/source/components/layout/stylesheet/overlay.mjs +3 -1
- package/source/components/layout/stylesheet/tabs.mjs +12 -4
- package/source/components/layout/stylesheet/vertical-tabs.mjs +3 -1
- package/source/components/style/form.css +3 -1
- package/source/components/style/form.pcss +8 -2
- package/source/components/style/theme-modern.css +2 -2
- package/source/components/style/theme-modern.pcss +4 -4
- package/source/components/stylesheet/form.mjs +3 -1
- package/source/components/stylesheet/theme-modern.mjs +2 -2
- package/source/components/tree-menu/style/tree-menu.pcss +12 -1
- package/source/components/tree-menu/stylesheet/tree-menu.mjs +7 -1
- package/test/cases/components/style/theme-accent.mjs +137 -0
- package/test/cases/components/style/theme-modern.mjs +10 -1
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.
|
|
1
|
+
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.150.0"}
|
|
@@ -145,7 +145,10 @@
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
& input[type=checkbox] {
|
|
148
|
-
accent-color: var(
|
|
148
|
+
accent-color: var(
|
|
149
|
+
--monster-theme-accent,
|
|
150
|
+
var(--monster-bg-color-primary-1)
|
|
151
|
+
);
|
|
149
152
|
}
|
|
150
153
|
}
|
|
151
154
|
|
|
@@ -578,8 +581,14 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
|
|
|
578
581
|
}
|
|
579
582
|
|
|
580
583
|
&.selected {
|
|
581
|
-
background-color: var(
|
|
582
|
-
|
|
584
|
+
background-color: var(
|
|
585
|
+
--monster-theme-accent-subtle,
|
|
586
|
+
var(--monster-bg-color-selection-2)
|
|
587
|
+
);
|
|
588
|
+
color: var(
|
|
589
|
+
--monster-theme-accent,
|
|
590
|
+
var(--monster-color-selection-2)
|
|
591
|
+
);
|
|
583
592
|
}
|
|
584
593
|
}
|
|
585
594
|
}
|
|
@@ -93,7 +93,9 @@ try {
|
|
|
93
93
|
--monster-column-toggle-target-block-size,var(--monster-column-toggle-target-size,24px)
|
|
94
94
|
);padding:0;width:var(
|
|
95
95
|
--monster-column-toggle-target-inline-size,var(--monster-column-toggle-target-size,16px)
|
|
96
|
-
)}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-hidden:before,:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-visible:before{background-color:var(--monster-bg-color-primary-4);content:\"\";display:block;height:8px;margin:auto;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:8px 8px;mask-size:8px 8px;width:8px}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-visible:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3C/svg%3E\")}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-hidden:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-hidden:focus-visible,:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-visible:focus-visible{outline-offset:0}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) :focus,:is(:is([data-monster-role=control] [data-monster-role=dots]) li) :hover{background-clip:border-box}:is([data-monster-role=control] [data-monster-role=dots]) .dots-overflow-hidden{display:none}:is([data-monster-role=control] [data-monster-role=dots]) .dots-overflow-indicator{align-items:center;color:var(--monster-color-primary-1);display:flex;font-size:.75rem;line-height:1;padding:0 2px;white-space:nowrap}[data-monster-role=control] [data-monster-role=settings-layer]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);padding:1rem;border-radius:4px;z-index:var(--monster-z-index-popover);display:none}.visible:is([data-monster-role=control] [data-monster-role=settings-layer]){display:block}:is([data-monster-role=control] [data-monster-role=settings-layer]) label{display:flex;align-items:center;justify-content:flex-start;margin:0;min-height:var(--monster-column-settings-target-size,24px);padding:0;cursor:pointer}:is(:is([data-monster-role=control] [data-monster-role=settings-layer]) label) input{accent-color:var(
|
|
96
|
+
)}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-hidden:before,:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-visible:before{background-color:var(--monster-bg-color-primary-4);content:\"\";display:block;height:8px;margin:auto;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:8px 8px;mask-size:8px 8px;width:8px}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-visible:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3C/svg%3E\")}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-hidden:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-hidden:focus-visible,:is(:is([data-monster-role=control] [data-monster-role=dots]) li) .is-visible:focus-visible{outline-offset:0}:is(:is([data-monster-role=control] [data-monster-role=dots]) li) :focus,:is(:is([data-monster-role=control] [data-monster-role=dots]) li) :hover{background-clip:border-box}:is([data-monster-role=control] [data-monster-role=dots]) .dots-overflow-hidden{display:none}:is([data-monster-role=control] [data-monster-role=dots]) .dots-overflow-indicator{align-items:center;color:var(--monster-color-primary-1);display:flex;font-size:.75rem;line-height:1;padding:0 2px;white-space:nowrap}[data-monster-role=control] [data-monster-role=settings-layer]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);padding:1rem;border-radius:4px;z-index:var(--monster-z-index-popover);display:none}.visible:is([data-monster-role=control] [data-monster-role=settings-layer]){display:block}:is([data-monster-role=control] [data-monster-role=settings-layer]) label{display:flex;align-items:center;justify-content:flex-start;margin:0;min-height:var(--monster-column-settings-target-size,24px);padding:0;cursor:pointer}:is(:is([data-monster-role=control] [data-monster-role=settings-layer]) label) input{accent-color:var(
|
|
97
|
+
--monster-theme-accent,var(--monster-bg-color-primary-4)
|
|
98
|
+
);margin:0 .5rem 0 0}:is([data-monster-role=control] [data-monster-role=settings-layer]) [data-monster-role=settings-popup-list]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-gap:.1rem 1rem}[data-monster-role=control] a[data-monster-role=settings-button]{display:flex;align-items:center;color:var(--monster-color-primary-1);background:none;white-space:nowrap}:is([data-monster-role=control] a[data-monster-role=settings-button]):after{content:\"\";display:block;width:20px;height:16px;margin:2px 3px 0 5px;padding-top:4px;background-color:var(--monster-color-primary-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1zM10 15V1H6v14zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1zM10 15V1H6v14zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11z'/%3E%3C/svg%3E\");-webkit-mask-size:cover;mask-size:cover}[data-monster-role=control]:hover{color:var(--monster-color-primary-1)}.hidden[data-monster-role=control]{display:none}@media (pointer:coarse){:is([data-monster-role=control] [data-monster-role=dots] li) .is-hidden,:is([data-monster-role=control] [data-monster-role=dots] li) .is-visible{min-height:24px;min-width:24px}}:host(.small){--monster-datatable-utility-action-size:2.25rem;height:var(--monster-datatable-utility-action-size);min-width:var(--monster-datatable-utility-action-size);width:var(--monster-datatable-utility-action-size)}:host(.small) [data-monster-role=control]{align-items:stretch;flex-direction:column;gap:0;min-width:var(--monster-datatable-utility-action-size);width:var(--monster-datatable-utility-action-size)}:is(:host(.small) [data-monster-role=control]) [data-monster-role=dots]{display:none}:is(:host(.small) [data-monster-role=control]) a[data-monster-role=settings-button]{align-items:center;background-color:var(--monster-theme-control-bg-color);border:1px solid var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);box-sizing:border-box;color:var(--monster-theme-control-color);font-size:0;height:var(--monster-datatable-utility-action-size);justify-content:center;min-height:var(--monster-datatable-utility-action-size);min-width:var(--monster-datatable-utility-action-size);padding:0;text-align:center;text-decoration:none;width:var(--monster-datatable-utility-action-size)}:is(:host(.small) [data-monster-role=control]) a[data-monster-role=settings-button]:after{margin:0}:is(:host(.small) [data-monster-role=control]) a[data-monster-role=settings-button]:hover{background-color:var(--monster-theme-control-hover-bg-color);color:var(--monster-theme-control-hover-color)}@media (pointer:coarse){:host(.small){--monster-datatable-utility-action-size:var(--monster-control-min-block-size,44px)}}
|
|
97
99
|
}`,
|
|
98
100
|
0,
|
|
99
101
|
);
|