@public-ui/themes 2.2.13 → 2.2.14-rc.1
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/dist/index.cjs +5 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -1010,9 +1010,9 @@ var css_248z$2R = "@layer kol-theme-component {\n .dot > span:nth-child(1) {\n
|
|
|
1010
1010
|
|
|
1011
1011
|
var css_248z$2Q = "@layer kol-theme-component {\n :host {\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n :is(a, button).ghost.small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-left: none;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
|
|
1012
1012
|
|
|
1013
|
-
var css_248z$2P = "@layer kol-theme-component {\n :host
|
|
1013
|
+
var css_248z$2P = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1014
1014
|
|
|
1015
|
-
var css_248z$2O = "@layer kol-theme-component {\n :host
|
|
1015
|
+
var css_248z$2O = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1016
1016
|
|
|
1017
1017
|
var css_248z$2N = "@layer kol-theme-component {\n :host .kol-button-group-wc {\n display: inline-flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 400;\n line-height: calc(19.2rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n transition: all 0.2s linear;\n }\n button.selected,\n button .primary {\n color: var(--color-primary);\n }\n button.selected:hover {\n color: var(--color-light);\n }\n button:hover {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n *[tabindex]:is(.kol-button-group-wc button) {\n width: 100%;\n padding: 0 calc(4rem / var(--kolibri-root-font-size, 16));\n border: var(--border-width) solid transparent;\n border-radius: var(--border-radius);\n border-bottom-width: var(--border-width);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n position: relative;\n top: var(--border-width);\n box-shadow: none;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected) {\n border-color: var(--color-primary);\n border-bottom-color: var(--page-bg);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):hover {\n border-bottom-color: var(--color-primary);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):before {\n position: absolute;\n top: 0;\n content: \"\";\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 4);\n background-color: var(--color-primary);\n border-top-right-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n border-top-left-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n left: 0;\n right: 0;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):after {\n content: \" \";\n background-color: var(--page-bg);\n height: calc(6rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n width: calc(100% + 10rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-7rem / var(--kolibri-root-font-size, 16));\n left: calc(-5rem / var(--kolibri-root-font-size, 16));\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n gap: inherit;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .kol-button-group-wc {\n border-bottom: 1px solid var(--color-primary);\n }\n}";
|
|
1018
1018
|
|
|
@@ -1147,9 +1147,9 @@ var css_248z$29 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-
|
|
|
1147
1147
|
|
|
1148
1148
|
var css_248z$28 = "@layer kol-theme-component {\n :host {\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-text);\n color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n .primary:is(a, button):active > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):active > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost:is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost:is(a, button).small:active > .kol-span-wc > span,\n .ghost:is(a, button).small:hover > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-left: none;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
|
|
1149
1149
|
|
|
1150
|
-
var css_248z$27 = "@layer kol-theme-component {\n
|
|
1150
|
+
var css_248z$27 = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n@layer kol-theme-component {\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1151
1151
|
|
|
1152
|
-
var css_248z$26 = "@layer kol-theme-component {\n :host
|
|
1152
|
+
var css_248z$26 = "@layer kol-theme-component {\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
|
|
1153
1153
|
|
|
1154
1154
|
var css_248z$25 = "@layer kol-theme-component {\n :host .tabs-button-group {\n display: inline-flex;\n gap: calc(32rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n }\n button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n gap: inherit;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .tabs-button-group button {\n border: none;\n }\n}";
|
|
1155
1155
|
|
|
@@ -1210,7 +1210,7 @@ const DEFAULT = KoliBri.createTheme('default', {
|
|
|
1210
1210
|
'KOL-TREE-ITEM': css_248z$20,
|
|
1211
1211
|
});
|
|
1212
1212
|
|
|
1213
|
-
var css_248z$1$ = "@layer kol-theme-global {\n .kol-tooltip-wc .tooltip-area {\n background-color: #f2f2f2;\n }\n .kol-tooltip-wc .tooltip-arrow {\n background-color: #626262;\n }\n .kol-tooltip-wc .tooltip-content {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n lborder: 1px2;\n border-radius: 2px;\n border: 1px solid #626262;\n }\n :host {\n --color-blue: #004494;\n --color-yellow: #ffd617;\n --color-grey: #404040;\n --color-blue-130: #002f67;\n --color-blue-120: #003776;\n --color-blue-110: #003d84;\n --color-blue-100: var(--color-blue);\n --color-blue-75: #4073af;\n --color-blue-50: #bfd0e4;\n --color-blue-25: #bfd0e4;\n --color-blue-5: #f2f5f9;\n --color-yellow-120: #f8ae21;\n --color-yellow-110: #fbc11d;\n --color-yellow-100: var(--color-yellow);\n --color-yellow-75: #ffde39;\n --color-yellow-50: #ffe879;\n --color-yellow-25: #fff4bb;\n --color-grey-100: var(--color-grey);\n --color-grey-75: #707070;\n --color-grey-50: #9f9f9f;\n --color-grey-25: #cfcfcf;\n --color-grey-20: #d9d9d9;\n --color-grey-15: #e3e3e3;\n --color-grey-10: #ebebeb;\n --color-grey-5: #f5f5f5;\n --color-grey-3: #f9f9f9;\n --color-blue-n: #006fb4;\n --color-orange: #f29527;\n --color-green: #467a39;\n --color-red: #da2131;\n --color-red-1xx: #981722;\n --color-black: #000;\n --color-white: #fff;\n --font-family: Arial, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --font-weight: 400;\n --font-weight-bold: 600;\n --line-height: 1.5;\n --line-height-heading: 1.2;\n --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n outline: none;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-heading);\n margin: 0;\n padding: 0;\n }\n p {\n font-weight: var(--font-weight);\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: 0.5em;\n }\n .required label span::after,\n .required legend span::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .badge-text-hint {\n border-radius: 3px;\n padding: 0 0.3em;\n }\n}";
|
|
1213
|
+
var css_248z$1$ = "@layer kol-theme-global {\n .kol-tooltip-wc .tooltip-area {\n background-color: #f2f2f2;\n }\n .kol-tooltip-wc .tooltip-arrow {\n background-color: #626262;\n }\n .kol-tooltip-wc .tooltip-content {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n lborder: 1px2;\n border-radius: 2px;\n border: 1px solid #626262;\n }\n :host {\n --color-blue: #004494;\n --color-yellow: #ffd617;\n --color-grey: #404040;\n --color-blue-130: #002f67;\n --color-blue-120: #003776;\n --color-blue-110: #003d84;\n --color-blue-100: var(--color-blue);\n --color-blue-75: #4073af;\n --color-blue-50: #bfd0e4;\n --color-blue-25: #bfd0e4;\n --color-blue-5: #f2f5f9;\n --color-yellow-120: #f8ae21;\n --color-yellow-110: #fbc11d;\n --color-yellow-100: var(--color-yellow);\n --color-yellow-75: #ffde39;\n --color-yellow-50: #ffe879;\n --color-yellow-25: #fff4bb;\n --color-grey-100: var(--color-grey);\n --color-grey-75: #707070;\n --color-grey-50: #9f9f9f;\n --color-grey-25: #cfcfcf;\n --color-grey-20: #d9d9d9;\n --color-grey-15: #e3e3e3;\n --color-grey-10: #ebebeb;\n --color-grey-5: #f5f5f5;\n --color-grey-3: #f9f9f9;\n --color-blue-n: #006fb4;\n --color-orange: #f29527;\n --color-green: #467a39;\n --color-red: #da2131;\n --color-red-1xx: #981722;\n --color-black: #000;\n --color-white: #fff;\n --font-family: Arial, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --font-weight: 400;\n --font-weight-bold: 600;\n --line-height-regular: 1.5;\n --line-height-heading: 1.2;\n --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n outline: none;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-heading);\n margin: 0;\n padding: 0;\n }\n p {\n font-weight: var(--font-weight);\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: 0.5em;\n }\n .required label span::after,\n .required legend span::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .badge-text-hint {\n border-radius: 3px;\n padding: 0 0.3em;\n }\n}";
|
|
1214
1214
|
|
|
1215
1215
|
var css_248z$1_ = "@layer kol-theme-component {\n .accordion {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n }\n .accordion__heading-button button {\n text-align: left;\n width: 100%;\n padding: 0 var(--spacing-m);\n display: flex;\n place-items: center;\n line-height: 1.2;\n }\n .accordion__heading-button button span {\n color: var(--color-grey);\n font-weight: var(--font-weight-bold);\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n width: 100%;\n border: none;\n }\n .accordion__heading-button button:focus, .accordion__heading-button button:hover {\n background-color: var(--color-grey-25);\n }\n .accordion__heading-button button:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: -2px;\n }\n .accordion__heading-button .kol-icon {\n margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: 0;\n margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__content {\n padding: var(--spacing-s) var(--spacing-m);\n }\n}";
|
|
1216
1216
|
|