@public-ui/theme-bwst 2.2.11-rc.0 → 2.2.11-rc.3
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 +8 -8
- package/dist/index.mjs +8 -8
- package/package.json +13 -13
package/dist/index.cjs
CHANGED
|
@@ -461,7 +461,7 @@ var TagEnum;
|
|
|
461
461
|
|
|
462
462
|
const KoliBri = new ne('kol', KeyEnum, TagEnum);
|
|
463
463
|
|
|
464
|
-
var css_248z$K = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16))
|
|
464
|
+
var css_248z$K = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgb(8, 35, 48, 0.24);\n --page-bg: #ffffff;\n --element-bg: #eee;\n --border-radius: 4px;\n --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --border-width: 1px;\n --color-primary: #156570;\n --color-primary-light: #1a7a87;\n --color-primary-variant: #207a8b;\n --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n --color-danger: #ca0101;\n --color-warning: #c44931;\n --color-success: #005c45;\n --color-subtle: #576164;\n --color-light: #ffffff;\n --color-text: #000000;\n --color-mute: #f2f3f4;\n --color-mute-variant: #bec5c9;\n --visited: var(--color-primary-light);\n --border-color: #ededed;\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n --button-font-weight: 400;\n }\n * {\n box-sizing: border-box;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus-visible,\n button[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}\n@layer kol-component {\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n}";
|
|
465
465
|
|
|
466
466
|
var css_248z$J = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none !important;\n }\n}";
|
|
467
467
|
|
|
@@ -475,7 +475,7 @@ var css_248z$F = "@layer kol-theme-component {\n :host {\n display: inline-b
|
|
|
475
475
|
|
|
476
476
|
var css_248z$E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li > :is(span, .kol-link) {\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
477
477
|
|
|
478
|
-
var css_248z$D = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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
|
|
478
|
+
var css_248z$D = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
479
479
|
|
|
480
480
|
var css_248z$C = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
481
481
|
|
|
@@ -483,7 +483,7 @@ var css_248z$B = "@layer kol-theme-component {\n :is(a, button) {\n color: v
|
|
|
483
483
|
|
|
484
484
|
var css_248z$A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n border-radius: var(--border-radius);\n border: 1px solid var(--color-subtle);\n }\n :host .kol-heading-wc {\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
485
485
|
|
|
486
|
-
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
486
|
+
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
487
487
|
|
|
488
488
|
var css_248z$y = "@layer kol-theme-component {\n .details {\n font-family: var(--font-family);\n }\n .details__heading {\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__heading-button .kol-span-wc > span {\n gap: 0;\n }\n .details__heading-button .span-label {\n border-bottom-color: var(--color-subtle);\n }\n .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n border-bottom-color: var(--color-primary);\n }\n .details .button:not(:disabled):focus {\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 outline-width: 2px;\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__content {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n width: unset;\n margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
489
489
|
|
|
@@ -515,7 +515,7 @@ var css_248z$l = "@layer kol-theme-component {\n :host {\n font-family: var(
|
|
|
515
515
|
|
|
516
516
|
var css_248z$k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
|
|
517
517
|
|
|
518
|
-
var css_248z$j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button)
|
|
518
|
+
var css_248z$j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
519
519
|
|
|
520
520
|
var css_248z$i = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n}";
|
|
521
521
|
|
|
@@ -525,19 +525,19 @@ var css_248z$g = "@layer kol-theme-component {\n :host {\n font-family: var(
|
|
|
525
525
|
|
|
526
526
|
var css_248z$f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / 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 .button:focus .button-inner {\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 .button:is(:active, :hover):not(:disabled) .button-inner {\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 .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected .button-inner {\n background-color: var(--color-mute-variant);\n border-radius: var(--a11y-min-size);\n border: 0;\n }\n}";
|
|
527
527
|
|
|
528
|
-
var css_248z$e = "@layer kol-theme-component {\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
|
|
528
|
+
var css_248z$e = "@layer kol-theme-component {\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) > .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}";
|
|
529
529
|
|
|
530
530
|
var css_248z$d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: calc(0rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n width: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n .bar .progress {\n fill: var(--color-primary-variant);\n }\n}";
|
|
531
531
|
|
|
532
532
|
var css_248z$c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n select {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
533
533
|
|
|
534
|
-
var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
534
|
+
var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
535
535
|
|
|
536
536
|
var css_248z$a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
|
|
537
537
|
|
|
538
538
|
var css_248z$9 = "@layer kol-theme-component {\n .dot > span:nth-child(1) {\n background-color: #fc0;\n }\n .dot > span:nth-child(2) {\n background-color: red;\n }\n .dot > span:nth-child(4) {\n background-color: #666;\n }\n /* Override colors for cycle animation */\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #fc0;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: red;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n}";
|
|
539
539
|
|
|
540
|
-
var css_248z$8 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n
|
|
540
|
+
var css_248z$8 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
541
541
|
|
|
542
542
|
var css_248z$7 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\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}";
|
|
543
543
|
|
|
@@ -553,7 +553,7 @@ var css_248z$2 = "@layer kol-theme-component {\n .tree ul {\n border: 2px so
|
|
|
553
553
|
|
|
554
554
|
var css_248z$1 = "@layer kol-theme-component {\n .tree-link {\n display: block;\n border: 1px solid transparent;\n }\n .tree-link:hover, .tree-link:focus-within {\n border: 1px solid var(--color-primary);\n background-color: var(--color-primary-variant);\n }\n .tree-link:hover > a, .tree-link:focus-within > a {\n outline-offset: 0;\n }\n .tree-link:hover > a,\n .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n .tree-link:focus-within .toggle-button {\n color: var(--color-light);\n }\n .tree-link.active {\n background-color: var(--color-primary);\n }\n .tree-link.active a,\n .tree-link.active .toggle-button {\n color: var(--color-light);\n }\n .tree-link a {\n color: var(--color-text);\n text-align: left;\n }\n .tree-link a .toggle-button:hover .toggle-button-icon::part(icon) {\n transform: scale(1.6);\n }\n .tree-link a .text {\n text-decoration: none;\n }\n}";
|
|
555
555
|
|
|
556
|
-
var css_248z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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
|
|
556
|
+
var css_248z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
557
557
|
|
|
558
558
|
const BWSt = KoliBri.createTheme('bwst', {
|
|
559
559
|
GLOBAL: css_248z$K,
|
package/dist/index.mjs
CHANGED
|
@@ -459,7 +459,7 @@ var TagEnum;
|
|
|
459
459
|
|
|
460
460
|
const KoliBri = new ne('kol', KeyEnum, TagEnum);
|
|
461
461
|
|
|
462
|
-
var css_248z$K = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16))
|
|
462
|
+
var css_248z$K = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgb(8, 35, 48, 0.24);\n --page-bg: #ffffff;\n --element-bg: #eee;\n --border-radius: 4px;\n --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --border-width: 1px;\n --color-primary: #156570;\n --color-primary-light: #1a7a87;\n --color-primary-variant: #207a8b;\n --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n --color-danger: #ca0101;\n --color-warning: #c44931;\n --color-success: #005c45;\n --color-subtle: #576164;\n --color-light: #ffffff;\n --color-text: #000000;\n --color-mute: #f2f3f4;\n --color-mute-variant: #bec5c9;\n --visited: var(--color-primary-light);\n --border-color: #ededed;\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n --button-font-weight: 400;\n }\n * {\n box-sizing: border-box;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus-visible,\n button[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}\n@layer kol-component {\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n}";
|
|
463
463
|
|
|
464
464
|
var css_248z$J = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none !important;\n }\n}";
|
|
465
465
|
|
|
@@ -473,7 +473,7 @@ var css_248z$F = "@layer kol-theme-component {\n :host {\n display: inline-b
|
|
|
473
473
|
|
|
474
474
|
var css_248z$E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li > :is(span, .kol-link) {\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
475
475
|
|
|
476
|
-
var css_248z$D = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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
|
|
476
|
+
var css_248z$D = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
477
477
|
|
|
478
478
|
var css_248z$C = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
479
479
|
|
|
@@ -481,7 +481,7 @@ var css_248z$B = "@layer kol-theme-component {\n :is(a, button) {\n color: v
|
|
|
481
481
|
|
|
482
482
|
var css_248z$A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n border-radius: var(--border-radius);\n border: 1px solid var(--color-subtle);\n }\n :host .kol-heading-wc {\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
483
483
|
|
|
484
|
-
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
484
|
+
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
485
485
|
|
|
486
486
|
var css_248z$y = "@layer kol-theme-component {\n .details {\n font-family: var(--font-family);\n }\n .details__heading {\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__heading-button .kol-span-wc > span {\n gap: 0;\n }\n .details__heading-button .span-label {\n border-bottom-color: var(--color-subtle);\n }\n .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n border-bottom-color: var(--color-primary);\n }\n .details .button:not(:disabled):focus {\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 outline-width: 2px;\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__content {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n width: unset;\n margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
487
487
|
|
|
@@ -513,7 +513,7 @@ var css_248z$l = "@layer kol-theme-component {\n :host {\n font-family: var(
|
|
|
513
513
|
|
|
514
514
|
var css_248z$k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
|
|
515
515
|
|
|
516
|
-
var css_248z$j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button)
|
|
516
|
+
var css_248z$j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
517
517
|
|
|
518
518
|
var css_248z$i = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n}";
|
|
519
519
|
|
|
@@ -523,19 +523,19 @@ var css_248z$g = "@layer kol-theme-component {\n :host {\n font-family: var(
|
|
|
523
523
|
|
|
524
524
|
var css_248z$f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / 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 .button:focus .button-inner {\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 .button:is(:active, :hover):not(:disabled) .button-inner {\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 .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected .button-inner {\n background-color: var(--color-mute-variant);\n border-radius: var(--a11y-min-size);\n border: 0;\n }\n}";
|
|
525
525
|
|
|
526
|
-
var css_248z$e = "@layer kol-theme-component {\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
|
|
526
|
+
var css_248z$e = "@layer kol-theme-component {\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) > .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}";
|
|
527
527
|
|
|
528
528
|
var css_248z$d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: calc(0rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n width: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n .bar .progress {\n fill: var(--color-primary-variant);\n }\n}";
|
|
529
529
|
|
|
530
530
|
var css_248z$c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n select {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
531
531
|
|
|
532
|
-
var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
532
|
+
var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
|
|
533
533
|
|
|
534
534
|
var css_248z$a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
|
|
535
535
|
|
|
536
536
|
var css_248z$9 = "@layer kol-theme-component {\n .dot > span:nth-child(1) {\n background-color: #fc0;\n }\n .dot > span:nth-child(2) {\n background-color: red;\n }\n .dot > span:nth-child(4) {\n background-color: #666;\n }\n /* Override colors for cycle animation */\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #fc0;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: red;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n}";
|
|
537
537
|
|
|
538
|
-
var css_248z$8 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n
|
|
538
|
+
var css_248z$8 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
539
539
|
|
|
540
540
|
var css_248z$7 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\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}";
|
|
541
541
|
|
|
@@ -551,7 +551,7 @@ var css_248z$2 = "@layer kol-theme-component {\n .tree ul {\n border: 2px so
|
|
|
551
551
|
|
|
552
552
|
var css_248z$1 = "@layer kol-theme-component {\n .tree-link {\n display: block;\n border: 1px solid transparent;\n }\n .tree-link:hover, .tree-link:focus-within {\n border: 1px solid var(--color-primary);\n background-color: var(--color-primary-variant);\n }\n .tree-link:hover > a, .tree-link:focus-within > a {\n outline-offset: 0;\n }\n .tree-link:hover > a,\n .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n .tree-link:focus-within .toggle-button {\n color: var(--color-light);\n }\n .tree-link.active {\n background-color: var(--color-primary);\n }\n .tree-link.active a,\n .tree-link.active .toggle-button {\n color: var(--color-light);\n }\n .tree-link a {\n color: var(--color-text);\n text-align: left;\n }\n .tree-link a .toggle-button:hover .toggle-button-icon::part(icon) {\n transform: scale(1.6);\n }\n .tree-link a .text {\n text-decoration: none;\n }\n}";
|
|
553
553
|
|
|
554
|
-
var css_248z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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
|
|
554
|
+
var css_248z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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}";
|
|
555
555
|
|
|
556
556
|
const BWSt = KoliBri.createTheme('bwst', {
|
|
557
557
|
GLOBAL: css_248z$K,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/theme-bwst",
|
|
3
|
-
"version": "2.2.11-rc.
|
|
3
|
+
"version": "2.2.11-rc.3",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -44,28 +44,28 @@
|
|
|
44
44
|
"sideEffects": false,
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@rollup/plugin-commonjs": "28.0.3",
|
|
47
|
-
"@rollup/plugin-node-resolve": "
|
|
47
|
+
"@rollup/plugin-node-resolve": "16.0.1",
|
|
48
48
|
"@rollup/plugin-typescript": "12.1.2",
|
|
49
49
|
"@typescript-eslint/eslint-plugin": "7.18.0",
|
|
50
50
|
"@typescript-eslint/parser": "7.18.0",
|
|
51
51
|
"cpy-cli": "5.0.0",
|
|
52
52
|
"eslint": "8.57.1",
|
|
53
|
-
"nodemon": "3.1.
|
|
53
|
+
"nodemon": "3.1.10",
|
|
54
54
|
"postcss": "8.5.3",
|
|
55
|
-
"rollup": "4.
|
|
55
|
+
"rollup": "4.40.2",
|
|
56
56
|
"rollup-plugin-postcss": "4.0.2",
|
|
57
|
-
"sass": "1.
|
|
58
|
-
"stylelint": "16.
|
|
59
|
-
"stylelint-config-recommended-scss": "
|
|
60
|
-
"stylelint-config-standard": "
|
|
61
|
-
"stylelint-scss": "6.
|
|
62
|
-
"typescript": "5.8.
|
|
57
|
+
"sass-embedded": "1.88.0",
|
|
58
|
+
"stylelint": "16.19.1",
|
|
59
|
+
"stylelint-config-recommended-scss": "15.0.0",
|
|
60
|
+
"stylelint-config-standard": "38.0.0",
|
|
61
|
+
"stylelint-scss": "6.12.0",
|
|
62
|
+
"typescript": "5.8.3",
|
|
63
63
|
"unbuild": "1.2.1",
|
|
64
|
-
"@public-ui/
|
|
65
|
-
"@public-ui/
|
|
64
|
+
"@public-ui/components": "2.2.11-rc.3",
|
|
65
|
+
"@public-ui/visual-tests": "2.2.11-rc.3"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
|
-
"@public-ui/components": "2.2.11-rc.
|
|
68
|
+
"@public-ui/components": "2.2.11-rc.3"
|
|
69
69
|
},
|
|
70
70
|
"exports": {
|
|
71
71
|
".": {
|