@public-ui/themes 2.0.9 → 2.0.11
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 +11 -11
- package/dist/index.mjs +11 -11
- package/package.json +13 -11
package/dist/index.cjs
CHANGED
|
@@ -766,7 +766,7 @@ var css_248z$2P = "@layer kol-theme-component {\n :host {\n display: inline-
|
|
|
766
766
|
|
|
767
767
|
var css_248z$2O = "@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: 1.5rem;\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 400;\n color: var(--color-grey);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon)::before {\n content: \"chevron_right\";\n }\n .kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, .kol-link) {\n line-height: 1.25rem;\n }\n ul li:last-child > span {\n color: var(--color-grey);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
768
768
|
|
|
769
|
-
var css_248z$2N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button)
|
|
769
|
+
var css_248z$2N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-ocean);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: 2px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button) {\n font-size: 1.125em;\n }\n :is(a, button):focus {\n outline: none;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n color: var(--color-white);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .success :is(a, button) > .kol-span-wc,\n .success :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-green);\n border-color: var(--color-green);\n color: var(--color-white);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-white);\n background-color: var(--color-white);\n box-shadow: none;\n color: var(--color-midnight);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .success :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-ocean);\n border-color: var(--color-ocean);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-white);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-crimson);\n border-color: var(--color-crimson);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-white);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\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 /** button with inline focus */\n :is(a, button).focus-inline:focus > .kol-span-wc {\n outline-offset: -2px;\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n /** CUSTOM_CLASS */\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: block;\n }\n}";
|
|
770
770
|
|
|
771
771
|
var css_248z$2M = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n }\n}";
|
|
772
772
|
|
|
@@ -782,7 +782,7 @@ var css_248z$2H = "@layer kol-theme-component {\n @font-face {\n font-family
|
|
|
782
782
|
|
|
783
783
|
var css_248z$2G = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n background-color: var(--color-white);\n border-left: none;\n box-shadow: -2px 0px 0px var(--color-ocean);\n padding: 0 0.5em;\n width: 100%;\n }\n}";
|
|
784
784
|
|
|
785
|
-
var css_248z$2F = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: 44px;\n }\n :host .kol-input.default:not(.hide-label) {\n grid-template-columns: 1.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input.switch:not(.hide-label) {\n grid-template-columns: 3.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: 44px;\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: 0px;\n }\n :host .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n :host .kol-input.disabled .input {\n cursor: not-allowed;\n }\n :host .kol-input > label {\n order: 3;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n :host .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-red);\n padding-left: 1em;\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-red) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-red);\n font-weight: 700;\n }\n :host input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 24px;\n font-size: 1rem;\n }\n :host input:hover {\n border-color: var(--color-midnight);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: 0.125rem;\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .icon {\n color: var(--color-white);\n margin: -0.125rem 0 0 0.25rem;\n /* visually align */\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: 1px;\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .switch .checkbox-input-element {\n display: block;\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n color: #000;\n }\n .switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .switch .icon::part(icon)::before {\n content: \"add\";\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n :host .kol-input.button {\n row-gap: 0.5rem;\n }\n :host .kol-input.button.checked > .input,\n :host .kol-input.button.checked > label {\n background-color: var(--color-ice);\n }\n :host .kol-input.button > label {\n background-color: var(--color-silver);\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n min-height: 32px;\n align-items: center;\n display: flex;\n padding-right: 12px;\n width: 100%;\n }\n :host .kol-input.button > .input {\n background-color: var(--color-silver);\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: 32px;\n min-width: 32px;\n place-content: center;\n }\n :host .kol-input.button.hide-label > .input {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n :host .kol-input.button > .input > div {\n display: flex;\n }\n :host .kol-input.button .icon {\n height: auto;\n }\n .button:focus-within {\n border-radius: var(--a11y-min-size);\n outline-color: var(--color-ocean);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n }\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: white;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--kolibri-spacing);\n }\n .msg {\n background-color: transparent;\n }\n .msg > .heading {\n place-items: flex-start;\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error {\n border-color: var(--color-red);\n }\n .error.msg .heading-icon {\n color: var(--color-red);\n }\n .info {\n border-color: var(--color-midnight);\n }\n .info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .success {\n border-color: var(--color-green);\n }\n .success.msg .heading-icon {\n color: var(--color-green);\n }\n .warning {\n border-color: var(--color-orange);\n }\n .warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .heading-icon {\n color: white;\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > .heading-icon::part(icon) {\n line-height: 1.375rem;\n }\n .msg > .heading > div > .kol-heading-wc {\n line-height: 20px;\n padding-top: 0.125rem;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n .msg.default .close .icon {\n color: var(--color-grey);\n }\n .msg.error .close .icon {\n color: var(--color-red);\n }\n .msg.info .close .icon {\n color: var(--color-midnight);\n }\n .msg.success .close .icon {\n color: var(--color-green);\n }\n .msg.warning .close .icon {\n color: var(--color-orange);\n }\n .card {\n border-width: 2px;\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: 0.5rem 1rem;\n }\n .card.hasCloser > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: white;\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .heading .kol-button-wc button:focus {\n outline-color: var(--color-white);\n outline-offset: -3px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline 0.1s linear;\n }\n .card > .heading .kol-button-wc button:hover {\n background-color: rgba(32, 32, 32, 0.2);\n }\n .card > .heading .kol-button-wc button:active {\n background-color: rgba(32, 32, 32, 0.4);\n }\n .card > .heading .kol-button-wc button:hover:focus {\n background-color: rgba(32, 32, 32, 0.1);\n }\n .card > .content {\n padding: 1rem;\n max-height: 9.5rem;\n overflow-y: auto;\n }\n .card.default > .heading {\n background-color: var(--color-grey);\n border-bottom: 2px solid var(--color-grey);\n }\n .card.error > .heading {\n background-color: var(--color-red);\n border-bottom: 2px solid var(--color-red);\n }\n .card.info > .heading {\n background-color: var(--color-midnight);\n border-bottom: 2px solid var(--color-midnight);\n }\n .card.success > .heading {\n background-color: var(--color-green);\n border-bottom: 2px solid var(--color-green);\n }\n .card.warning > .heading {\n background-color: var(--color-orange);\n border-bottom: 2px solid var(--color-orange);\n }\n :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n height: 1.25rem;\n width: 1.25rem;\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem !important;\n }\n .error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-grey);\n }\n .card.error .close {\n background-color: var(--color-red);\n }\n .card.info .close {\n background-color: var(--color-midnight);\n }\n .card.success .close {\n background-color: var(--color-green);\n }\n .card.warning .close {\n background-color: var(--color-orange);\n }\n .close > button {\n min-width: 44px;\n color: var(--color-white);\n min-height: 44px;\n display: grid;\n gap: 0.25em;\n line-height: 1.5rem;\n font-family: var(--font-family);\n font-weight: 700;\n cursor: pointer;\n border-radius: 1.5em;\n border-style: solid;\n border-width: 2px;\n font-size: 1rem;\n align-items: center;\n padding: 8px 14px;\n justify-content: center;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n background-color: rgba(0, 0, 0, 0);\n border-color: rgba(0, 0, 0, 0);\n }\n .close > button {\n padding: 8px;\n }\n .close > button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1rem;\n }\n .close > button .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .close > button .kol-icon::part(icon)::before {\n content: \"close\";\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
785
|
+
var css_248z$2F = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: 44px;\n }\n :host .kol-input.default:not(.hide-label) {\n grid-template-columns: 1.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input.switch:not(.hide-label) {\n grid-template-columns: 3.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: 44px;\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: 0px;\n }\n :host .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n :host .kol-input.disabled .input {\n cursor: not-allowed;\n }\n :host .kol-input > label {\n order: 3;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n :host .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-red);\n padding-left: 1em;\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-red) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-red);\n font-weight: 700;\n }\n :host input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 24px;\n font-size: 1rem;\n }\n :host input:hover {\n border-color: var(--color-midnight);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input:not(.button) label span {\n margin-top: 0.125rem;\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .icon {\n color: var(--color-white);\n margin: -0.125rem 0 0 0.25rem;\n /* visually align */\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: 1px;\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .switch .checkbox-input-element {\n display: block;\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n color: #000;\n }\n .switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .switch .icon::part(icon)::before {\n content: \"add\";\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n .kol-input.button {\n row-gap: 0.5rem;\n /* Outer, clickable, container for the checkbox */\n /* Inner, visual, element for the checkbox */\n /* Outer, clickable, container for the label */\n /* Inner, visual, element for the label */\n /* States */\n }\n .kol-input.button .checkbox-container {\n align-items: center;\n display: flex;\n min-height: 44px;\n position: relative;\n }\n .kol-input.button .icon {\n background-color: var(--color-silver);\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n height: auto;\n min-height: 32px;\n min-width: 32px;\n /* Stable position when paddings are changing */\n }\n .kol-input.button .icon::part(icon) {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .hide-label.kol-input.button .icon {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n .kol-input.button .input-label {\n align-items: center;\n display: flex;\n min-height: 44px;\n width: 100%;\n }\n .kol-input.button .input-label-span {\n align-items: center;\n background-color: var(--color-silver);\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n display: flex;\n min-height: 32px;\n padding-right: 12px;\n width: 100%;\n }\n .kol-input.button.checked .icon, .kol-input.button.checked .input-label-span {\n background-color: var(--color-ice);\n }\n .kol-input.button:not(.disabled):hover .icon, .kol-input.button:not(.disabled):hover .input-label-span {\n background-color: var(--color-midnight);\n color: var(--color-silver);\n }\n .kol-input.button:focus-within {\n outline: none;\n }\n .kol-input.button:focus-within .icon,\n .kol-input.button:focus-within .input-label-span {\n min-height: 34px;\n border: 3px solid var(--color-ocean);\n background-clip: content-box;\n padding: 2px;\n }\n .kol-input.button:focus-within .icon {\n border-right: none;\n padding-right: 0;\n }\n .kol-input.button:focus-within .input-label-span {\n border-left: none;\n padding-left: 0;\n }\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: white;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--kolibri-spacing);\n }\n .msg {\n background-color: transparent;\n }\n .msg > .heading {\n place-items: flex-start;\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error {\n border-color: var(--color-red);\n }\n .error.msg .heading-icon {\n color: var(--color-red);\n }\n .info {\n border-color: var(--color-midnight);\n }\n .info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .success {\n border-color: var(--color-green);\n }\n .success.msg .heading-icon {\n color: var(--color-green);\n }\n .warning {\n border-color: var(--color-orange);\n }\n .warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .heading-icon {\n color: white;\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > .heading-icon::part(icon) {\n line-height: 1.375rem;\n }\n .msg > .heading > div > .kol-heading-wc {\n line-height: 20px;\n padding-top: 0.125rem;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n .msg.default .close .icon {\n color: var(--color-grey);\n }\n .msg.error .close .icon {\n color: var(--color-red);\n }\n .msg.info .close .icon {\n color: var(--color-midnight);\n }\n .msg.success .close .icon {\n color: var(--color-green);\n }\n .msg.warning .close .icon {\n color: var(--color-orange);\n }\n .card {\n border-width: 2px;\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: 0.5rem 1rem;\n }\n .card.hasCloser > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: white;\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .heading .kol-button-wc button:focus {\n outline-color: var(--color-white);\n outline-offset: -3px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline 0.1s linear;\n }\n .card > .heading .kol-button-wc button:hover {\n background-color: rgba(32, 32, 32, 0.2);\n }\n .card > .heading .kol-button-wc button:active {\n background-color: rgba(32, 32, 32, 0.4);\n }\n .card > .heading .kol-button-wc button:hover:focus {\n background-color: rgba(32, 32, 32, 0.1);\n }\n .card > .content {\n padding: 1rem;\n max-height: 9.5rem;\n overflow-y: auto;\n }\n .card.default > .heading {\n background-color: var(--color-grey);\n border-bottom: 2px solid var(--color-grey);\n }\n .card.error > .heading {\n background-color: var(--color-red);\n border-bottom: 2px solid var(--color-red);\n }\n .card.info > .heading {\n background-color: var(--color-midnight);\n border-bottom: 2px solid var(--color-midnight);\n }\n .card.success > .heading {\n background-color: var(--color-green);\n border-bottom: 2px solid var(--color-green);\n }\n .card.warning > .heading {\n background-color: var(--color-orange);\n border-bottom: 2px solid var(--color-orange);\n }\n :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n height: 1.25rem;\n width: 1.25rem;\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem !important;\n }\n .error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-grey);\n }\n .card.error .close {\n background-color: var(--color-red);\n }\n .card.info .close {\n background-color: var(--color-midnight);\n }\n .card.success .close {\n background-color: var(--color-green);\n }\n .card.warning .close {\n background-color: var(--color-orange);\n }\n .close > button {\n min-width: 44px;\n color: var(--color-white);\n min-height: 44px;\n display: grid;\n gap: 0.25em;\n line-height: 1.5rem;\n font-family: var(--font-family);\n font-weight: 700;\n cursor: pointer;\n border-radius: 1.5em;\n border-style: solid;\n border-width: 2px;\n font-size: 1rem;\n align-items: center;\n padding: 8px 14px;\n justify-content: center;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n background-color: rgba(0, 0, 0, 0);\n border-color: rgba(0, 0, 0, 0);\n }\n .close > button {\n padding: 8px;\n }\n .close > button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1rem;\n }\n .close > button .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .close > button .kol-icon::part(icon)::before {\n content: \"close\";\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
786
786
|
|
|
787
787
|
var css_248z$2E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: 0.25em;\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: 0.875em;\n font-style: italic;\n }\n input {\n border: none;\n }\n input[type=color] {\n border: none;\n min-height: 40px !important;\n }\n input[type=color] {\n background-color: transparent;\n }\n input::placeholder {\n color: var(--color-grey);\n }\n .input {\n background-color: var(--color-white);\n border-color: var(--color-grey);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5em;\n }\n .input > .kol-icon {\n width: 1em;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1em;\n padding-right: 1em;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5em;\n padding-right: 0.5em;\n }\n .input > input:first-child {\n padding-left: 0.375em;\n }\n .input > input:last-child {\n padding-right: 0.375em;\n }\n .input:hover {\n border-color: var(--color-midnight);\n }\n input:not([type=color]):read-only,\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: 3px;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-red);\n padding-left: 1em;\n }\n .kol-input.error .kol-alert-wc.error {\n color: var(--color-red);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-smoke);\n border-color: var(--color-granite);\n color: var(--color-black);\n }\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: white;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--kolibri-spacing);\n }\n .msg {\n background-color: transparent;\n }\n .msg > .heading {\n place-items: flex-start;\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error {\n border-color: var(--color-red);\n }\n .error.msg .heading-icon {\n color: var(--color-red);\n }\n .info {\n border-color: var(--color-midnight);\n }\n .info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .success {\n border-color: var(--color-green);\n }\n .success.msg .heading-icon {\n color: var(--color-green);\n }\n .warning {\n border-color: var(--color-orange);\n }\n .warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .heading-icon {\n color: white;\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > .heading-icon::part(icon) {\n line-height: 1.375rem;\n }\n .msg > .heading > div > .kol-heading-wc {\n line-height: 20px;\n padding-top: 0.125rem;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n .msg.default .close .icon {\n color: var(--color-grey);\n }\n .msg.error .close .icon {\n color: var(--color-red);\n }\n .msg.info .close .icon {\n color: var(--color-midnight);\n }\n .msg.success .close .icon {\n color: var(--color-green);\n }\n .msg.warning .close .icon {\n color: var(--color-orange);\n }\n .card {\n border-width: 2px;\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: 0.5rem 1rem;\n }\n .card.hasCloser > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: white;\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .heading .kol-button-wc button:focus {\n outline-color: var(--color-white);\n outline-offset: -3px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline 0.1s linear;\n }\n .card > .heading .kol-button-wc button:hover {\n background-color: rgba(32, 32, 32, 0.2);\n }\n .card > .heading .kol-button-wc button:active {\n background-color: rgba(32, 32, 32, 0.4);\n }\n .card > .heading .kol-button-wc button:hover:focus {\n background-color: rgba(32, 32, 32, 0.1);\n }\n .card > .content {\n padding: 1rem;\n max-height: 9.5rem;\n overflow-y: auto;\n }\n .card.default > .heading {\n background-color: var(--color-grey);\n border-bottom: 2px solid var(--color-grey);\n }\n .card.error > .heading {\n background-color: var(--color-red);\n border-bottom: 2px solid var(--color-red);\n }\n .card.info > .heading {\n background-color: var(--color-midnight);\n border-bottom: 2px solid var(--color-midnight);\n }\n .card.success > .heading {\n background-color: var(--color-green);\n border-bottom: 2px solid var(--color-green);\n }\n .card.warning > .heading {\n background-color: var(--color-orange);\n border-bottom: 2px solid var(--color-orange);\n }\n :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n height: 1.25rem;\n width: 1.25rem;\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem !important;\n }\n .error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-grey);\n }\n .card.error .close {\n background-color: var(--color-red);\n }\n .card.info .close {\n background-color: var(--color-midnight);\n }\n .card.success .close {\n background-color: var(--color-green);\n }\n .card.warning .close {\n background-color: var(--color-orange);\n }\n .close > button {\n min-width: 44px;\n color: var(--color-white);\n min-height: 44px;\n display: grid;\n gap: 0.25em;\n line-height: 1.5rem;\n font-family: var(--font-family);\n font-weight: 700;\n cursor: pointer;\n border-radius: 1.5em;\n border-style: solid;\n border-width: 2px;\n font-size: 1rem;\n align-items: center;\n padding: 8px 14px;\n justify-content: center;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n background-color: rgba(0, 0, 0, 0);\n border-color: rgba(0, 0, 0, 0);\n }\n .close > button {\n padding: 8px;\n }\n .close > button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1rem;\n }\n .close > button .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .close > button .kol-icon::part(icon)::before {\n content: \"close\";\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
788
788
|
|
|
@@ -818,7 +818,7 @@ var css_248z$2p = "@layer kol-theme-component {\n :host {\n font-family: var
|
|
|
818
818
|
|
|
819
819
|
var css_248z$2o = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: 2px;\n gap: 0.5rem;\n line-height: 1rem;\n padding: 8px 14px;\n background-color: var(--color-ocean);\n border-color: var(--color-ocean);\n color: var(--color-white);\n cursor: pointer;\n }\n}";
|
|
820
820
|
|
|
821
|
-
var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
821
|
+
var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-midnight);\n }\n .popover {\n background: #fff;\n }\n .horizontal-line {\n background-color: var(--color-midnight);\n border-radius: 2px;\n width: 1px;\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button :active > .kol-span-wc {\n border-top-right-radius: var(--a11y-min-size);\n border-bottom-right-radius: var(--a11y-min-size);\n }\n .secondary-button :focus .kol-span-wc {\n border-top-right-radius: var(--a11y-min-size);\n border-bottom-right-radius: var(--a11y-min-size);\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n outline-offset: 0;\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-ocean);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--a11y-min-size);\n border-bottom-left-radius: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button) {\n font-size: 1.125em;\n }\n :is(a, button):focus {\n outline: none;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n color: var(--color-white);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .success :is(a, button) > .kol-span-wc,\n .success :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-green);\n border-color: var(--color-green);\n color: var(--color-white);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-white);\n background-color: var(--color-white);\n box-shadow: none;\n color: var(--color-midnight);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .success :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-ocean);\n border-color: var(--color-ocean);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-white);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-crimson);\n border-color: var(--color-crimson);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-white);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\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 /** button with inline focus */\n :is(a, button).focus-inline:focus > .kol-span-wc {\n outline-offset: -2px;\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n /** CUSTOM_CLASS */\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: block;\n }\n}";
|
|
822
822
|
|
|
823
823
|
var css_248z$2m = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
|
|
824
824
|
|
|
@@ -893,7 +893,7 @@ const badgeCss = css_248z$2c;
|
|
|
893
893
|
var css_248z$2b = "@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: 0.75rem;\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, .kol-link) {\n line-height: 1.25rem;\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
894
894
|
const breadcrumbCss = css_248z$2b;
|
|
895
895
|
|
|
896
|
-
var css_248z$2a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button)
|
|
896
|
+
var css_248z$2a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
|
|
897
897
|
const buttonCss = css_248z$2a;
|
|
898
898
|
|
|
899
899
|
var css_248z$29 = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
@@ -974,7 +974,7 @@ const selectCss = css_248z$1N;
|
|
|
974
974
|
var css_248z$1M = "@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: 1rem;\n padding: 8px 14px;\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
|
|
975
975
|
const skipNavCss = css_248z$1M;
|
|
976
976
|
|
|
977
|
-
var css_248z$1L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
977
|
+
var css_248z$1L = "@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 min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background: #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: 1px;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
|
|
978
978
|
const splitButtonCss = css_248z$1L;
|
|
979
979
|
|
|
980
980
|
var css_248z$1K = "@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: 0.5rem;\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 padding: 0.5rem;\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 table,\n :host table thead tr:last-child th,\n :host table thead tr:last-child td {\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 th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: 0.5rem;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
|
|
@@ -1051,7 +1051,7 @@ var css_248z$1A = "@layer kol-theme-component {\n :host > span {\n font: nor
|
|
|
1051
1051
|
|
|
1052
1052
|
var css_248z$1z = "@layer kol-theme-component {\n :host {\n font: normal normal 400 0.875rem/1rem arial, sans-serif;\n font-weight: var(--font-weight-bold);\n }\n .kol-icon::part(icon separator)::before {\n color: var(--color-blue);\n }\n li:last-child {\n color: var(--color-grey-75);\n }\n .kol-icon[exportparts*=separator] {\n margin-inline-end: 0.5rem;\n margin-inline-start: 0.5rem;\n padding: 0;\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
1053
1053
|
|
|
1054
|
-
var css_248z$1y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a
|
|
1054
|
+
var css_248z$1y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: 44px;\n min-width: 44px;\n padding: 0.25em 0.75em;\n }\n a,\n button {\n appearance: none;\n background: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
|
|
1055
1055
|
|
|
1056
1056
|
var css_248z$1x = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--spacing-2xs);\n }\n}";
|
|
1057
1057
|
|
|
@@ -1105,7 +1105,7 @@ var css_248z$19 = "@layer kol-theme-component {\n :host {\n font-family: var
|
|
|
1105
1105
|
|
|
1106
1106
|
var css_248z$18 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: var(--color-blue-75);\n }\n}";
|
|
1107
1107
|
|
|
1108
|
-
var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
1108
|
+
var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n }\n .popover {\n background: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: 44px;\n min-width: 44px;\n padding: 0.25em 0.75em;\n }\n a,\n button {\n appearance: none;\n background: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
|
|
1109
1109
|
|
|
1110
1110
|
var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\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: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n :host table thead tr:last-child th,\n :host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: 1rem;\n }\n }\n}";
|
|
1111
1111
|
|
|
@@ -1218,7 +1218,7 @@ var css_248z$B = "@layer kol-theme-component {\n :host {\n font-family: var(
|
|
|
1218
1218
|
|
|
1219
1219
|
var css_248z$A = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: var(--color-blue-80);\n }\n}";
|
|
1220
1220
|
|
|
1221
|
-
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
1221
|
+
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n border-radius: 4px;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .popover {\n background: #fff;\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n min-height: 44px;\n min-width: 44px;\n border-radius: 4px;\n font: normal normal 400 1rem/1.25rem arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: 0.75rem;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\n padding: calc(0.75rem - 2px) calc(1rem - 2px);\n }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
|
|
1222
1222
|
|
|
1223
1223
|
var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n --kolibri-spacing: 0.25rem;\n }\n .kol-button-group-wc {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: -1px;\n }\n .kol-button-group-wc button {\n border: none;\n margin-bottom: -1px;\n }\n .kol-button-group-wc button .kol-span-wc {\n padding: 0.5rem;\n min-height: 44px;\n min-width: 44px;\n }\n .kol-button-group-wc button.selected .kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .kol-button-group-wc button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .kol-button-group-wc button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
|
|
1224
1224
|
|
|
@@ -1276,7 +1276,7 @@ var css_248z$s = "@layer kol-theme-component {\n :host {\n display: inline-b
|
|
|
1276
1276
|
|
|
1277
1277
|
var css_248z$r = "@layer kol-theme-component {\n li > span {\n font-weight: bold;\n /* text-transform: uppercase; */\n }\n}";
|
|
1278
1278
|
|
|
1279
|
-
var css_248z$q = "@layer kol-theme-component {\n
|
|
1279
|
+
var css_248z$q = "@layer kol-theme-component {\n a,\n button {\n border-radius: 2rem !important;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 2rem;\n border-style: solid;\n min-width: 44px;\n min-height: 44px;\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 1rem;\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 0.5rem;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
|
|
1280
1280
|
|
|
1281
1281
|
var css_248z$p = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n }\n}";
|
|
1282
1282
|
|
|
@@ -1314,7 +1314,7 @@ var css_248z$9 = "@layer kol-theme-component {\n :host .hidden {\n display:
|
|
|
1314
1314
|
|
|
1315
1315
|
var css_248z$8 = "@layer kol-theme-component {\n .button {\n border-radius: 2rem;\n font-family: var(--font-family-sans);\n }\n .button-inner {\n background-color: var(--color-weiss);\n border-radius: 2rem;\n border: var(--spacing) solid var(--color-anthrazit);\n color: var(--color-anthrazit);\n font-size: inherit;\n gap: 0.25em;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0 1rem;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .hide-label .button-inner {\n padding: 0 0.5rem;\n }\n .button:not(:disabled):hover .button-inner,\n .button:focus .button-inner {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .button:disabled .button-inner {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .selected .button-inner {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n color: var(--color-weiss);\n font-weight: bold;\n opacity: 1 !important;\n text-decoration: underline;\n }\n}";
|
|
1316
1316
|
|
|
1317
|
-
var css_248z$7 = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-fluorit);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-achat);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
|
|
1317
|
+
var css_248z$7 = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: 60px;\n }\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-fluorit);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-achat);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
|
|
1318
1318
|
|
|
1319
1319
|
var css_248z$6 = "@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: 0.5rem;\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n select:hover,\n select:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary) !important;\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n label {\n color: var(--default-letter);\n font-size: 14px;\n line-height: 20px;\n gap: 8px;\n width: 100%;\n font-weight: bold;\n }\n select.error {\n background-color: var(--danger-light) !important;\n border-color: var(--danger);\n }\n select {\n width: 100%;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n line-height: 24px;\n font-size: 16px;\n border-color: var(--kolibri-color-normal);\n border-radius: 0;\n background-color: #e8edf2 !important;\n }\n select:disabled {\n cursor: not-allowed;\n border-color: var(--border-default);\n background-color: var(--background-light-grey);\n }\n option {\n height: 2em;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n .kol-alert-wc {\n margin-top: var(--spacing);\n display: block;\n }\n .kol-required span::after {\n content: \"*\";\n }\n}";
|
|
1320
1320
|
|
|
@@ -1322,7 +1322,7 @@ var css_248z$5 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-w
|
|
|
1322
1322
|
|
|
1323
1323
|
var css_248z$4 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
|
|
1324
1324
|
|
|
1325
|
-
var css_248z$3 = "@layer kol-theme-component {\n .popover {\n background: #fff;\n }\n}";
|
|
1325
|
+
var css_248z$3 = "@layer kol-theme-component {\n :host {\n border-radius: 2rem;\n border-style: solid;\n border-width: var(--spacing);\n }\n .popover {\n background: #fff;\n }\n .horizontal-line {\n background-color: var(--border-color);\n border-radius: 2px;\n width: 1px;\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button > button > .kol-span-wc {\n border-top-right-radius: 2rem;\n border-bottom-right-radius: 2rem;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n .secondary-button > button > :active > .kol-span-wc {\n border-top-right-radius: 2rem;\n border-bottom-right-radius: 2rem;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n .secondary-button > button > :focus > .kol-span-wc {\n border-top-right-radius: 2rem;\n border-bottom-right-radius: 2rem;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n .secondary-button > a,\n .secondary-button > button {\n border-top-right-radius: 2rem !important;\n border-bottom-right-radius: 2rem !important;\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a,\n button {\n border-top-left-radius: 2rem !important;\n border-bottom-left-radius: 2rem !important;\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-top-left-radius: 2rem;\n border-bottom-left-radius: 2rem;\n font-size: inherit;\n padding: 0 1rem;\n min-width: 44px;\n min-height: 44px;\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 0.5rem;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
|
|
1326
1326
|
|
|
1327
1327
|
var css_248z$2 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .kol-button-group-wc {\n display: flex;\n background-color: var(--color-petrol);\n }\n :host .kol-button-group-wc > div {\n display: inline-flex;\n }\n :host .kol-button-group-wc > div + div {\n margin-left: 0.25em;\n }\n :host > div > div {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n box-sizing: border-box;\n font-size: inherit;\n line-height: 1.25em;\n cursor: pointer;\n border-width: 2px;\n box-shadow: 0 0 0.25em gray;\n width: inherit;\n overflow: hidden;\n border-style: solid;\n padding: calc(4 * var(--spacing));\n display: grid;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button-wc button.selected,\n .kol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-width: 0.25em !important;\n border-bottom-style: solid;\n border-bottom-color: var(--color-citrin) !important;\n }\n button > .kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n button.primary,\n button.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n }\n button.primary:hover,\n button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n button.secondary,\n button.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n }\n button.secondary:hover,\n button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n button.normal,\n button.normal:disabled:hover {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: white;\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n }\n button.danger:hover,\n button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n button.ghost,\n button.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n outline: 0 !important;\n box-shadow: none !important;\n }\n .close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n }\n .close-button button {\n width: 1rem;\n position: relative;\n height: 1rem;\n left: -4.25em;\n top: 0.25em;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
1328
1328
|
|
package/dist/index.mjs
CHANGED
|
@@ -764,7 +764,7 @@ var css_248z$2P = "@layer kol-theme-component {\n :host {\n display: inline-
|
|
|
764
764
|
|
|
765
765
|
var css_248z$2O = "@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: 1.5rem;\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 400;\n color: var(--color-grey);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon)::before {\n content: \"chevron_right\";\n }\n .kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, .kol-link) {\n line-height: 1.25rem;\n }\n ul li:last-child > span {\n color: var(--color-grey);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
766
766
|
|
|
767
|
-
var css_248z$2N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button)
|
|
767
|
+
var css_248z$2N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-ocean);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: 2px;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button) {\n font-size: 1.125em;\n }\n :is(a, button):focus {\n outline: none;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n color: var(--color-white);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .success :is(a, button) > .kol-span-wc,\n .success :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-green);\n border-color: var(--color-green);\n color: var(--color-white);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-white);\n background-color: var(--color-white);\n box-shadow: none;\n color: var(--color-midnight);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .success :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-ocean);\n border-color: var(--color-ocean);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-white);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-crimson);\n border-color: var(--color-crimson);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-white);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\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 /** button with inline focus */\n :is(a, button).focus-inline:focus > .kol-span-wc {\n outline-offset: -2px;\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n /** CUSTOM_CLASS */\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: block;\n }\n}";
|
|
768
768
|
|
|
769
769
|
var css_248z$2M = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n }\n}";
|
|
770
770
|
|
|
@@ -780,7 +780,7 @@ var css_248z$2H = "@layer kol-theme-component {\n @font-face {\n font-family
|
|
|
780
780
|
|
|
781
781
|
var css_248z$2G = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n background-color: var(--color-white);\n border-left: none;\n box-shadow: -2px 0px 0px var(--color-ocean);\n padding: 0 0.5em;\n width: 100%;\n }\n}";
|
|
782
782
|
|
|
783
|
-
var css_248z$2F = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: 44px;\n }\n :host .kol-input.default:not(.hide-label) {\n grid-template-columns: 1.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input.switch:not(.hide-label) {\n grid-template-columns: 3.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: 44px;\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: 0px;\n }\n :host .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n :host .kol-input.disabled .input {\n cursor: not-allowed;\n }\n :host .kol-input > label {\n order: 3;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n :host .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-red);\n padding-left: 1em;\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-red) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-red);\n font-weight: 700;\n }\n :host input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 24px;\n font-size: 1rem;\n }\n :host input:hover {\n border-color: var(--color-midnight);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: 0.125rem;\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .icon {\n color: var(--color-white);\n margin: -0.125rem 0 0 0.25rem;\n /* visually align */\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: 1px;\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .switch .checkbox-input-element {\n display: block;\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n color: #000;\n }\n .switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .switch .icon::part(icon)::before {\n content: \"add\";\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n :host .kol-input.button {\n row-gap: 0.5rem;\n }\n :host .kol-input.button.checked > .input,\n :host .kol-input.button.checked > label {\n background-color: var(--color-ice);\n }\n :host .kol-input.button > label {\n background-color: var(--color-silver);\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n min-height: 32px;\n align-items: center;\n display: flex;\n padding-right: 12px;\n width: 100%;\n }\n :host .kol-input.button > .input {\n background-color: var(--color-silver);\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: 32px;\n min-width: 32px;\n place-content: center;\n }\n :host .kol-input.button.hide-label > .input {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n :host .kol-input.button > .input > div {\n display: flex;\n }\n :host .kol-input.button .icon {\n height: auto;\n }\n .button:focus-within {\n border-radius: var(--a11y-min-size);\n outline-color: var(--color-ocean);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n }\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: white;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--kolibri-spacing);\n }\n .msg {\n background-color: transparent;\n }\n .msg > .heading {\n place-items: flex-start;\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error {\n border-color: var(--color-red);\n }\n .error.msg .heading-icon {\n color: var(--color-red);\n }\n .info {\n border-color: var(--color-midnight);\n }\n .info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .success {\n border-color: var(--color-green);\n }\n .success.msg .heading-icon {\n color: var(--color-green);\n }\n .warning {\n border-color: var(--color-orange);\n }\n .warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .heading-icon {\n color: white;\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > .heading-icon::part(icon) {\n line-height: 1.375rem;\n }\n .msg > .heading > div > .kol-heading-wc {\n line-height: 20px;\n padding-top: 0.125rem;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n .msg.default .close .icon {\n color: var(--color-grey);\n }\n .msg.error .close .icon {\n color: var(--color-red);\n }\n .msg.info .close .icon {\n color: var(--color-midnight);\n }\n .msg.success .close .icon {\n color: var(--color-green);\n }\n .msg.warning .close .icon {\n color: var(--color-orange);\n }\n .card {\n border-width: 2px;\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: 0.5rem 1rem;\n }\n .card.hasCloser > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: white;\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .heading .kol-button-wc button:focus {\n outline-color: var(--color-white);\n outline-offset: -3px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline 0.1s linear;\n }\n .card > .heading .kol-button-wc button:hover {\n background-color: rgba(32, 32, 32, 0.2);\n }\n .card > .heading .kol-button-wc button:active {\n background-color: rgba(32, 32, 32, 0.4);\n }\n .card > .heading .kol-button-wc button:hover:focus {\n background-color: rgba(32, 32, 32, 0.1);\n }\n .card > .content {\n padding: 1rem;\n max-height: 9.5rem;\n overflow-y: auto;\n }\n .card.default > .heading {\n background-color: var(--color-grey);\n border-bottom: 2px solid var(--color-grey);\n }\n .card.error > .heading {\n background-color: var(--color-red);\n border-bottom: 2px solid var(--color-red);\n }\n .card.info > .heading {\n background-color: var(--color-midnight);\n border-bottom: 2px solid var(--color-midnight);\n }\n .card.success > .heading {\n background-color: var(--color-green);\n border-bottom: 2px solid var(--color-green);\n }\n .card.warning > .heading {\n background-color: var(--color-orange);\n border-bottom: 2px solid var(--color-orange);\n }\n :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n height: 1.25rem;\n width: 1.25rem;\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem !important;\n }\n .error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-grey);\n }\n .card.error .close {\n background-color: var(--color-red);\n }\n .card.info .close {\n background-color: var(--color-midnight);\n }\n .card.success .close {\n background-color: var(--color-green);\n }\n .card.warning .close {\n background-color: var(--color-orange);\n }\n .close > button {\n min-width: 44px;\n color: var(--color-white);\n min-height: 44px;\n display: grid;\n gap: 0.25em;\n line-height: 1.5rem;\n font-family: var(--font-family);\n font-weight: 700;\n cursor: pointer;\n border-radius: 1.5em;\n border-style: solid;\n border-width: 2px;\n font-size: 1rem;\n align-items: center;\n padding: 8px 14px;\n justify-content: center;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n background-color: rgba(0, 0, 0, 0);\n border-color: rgba(0, 0, 0, 0);\n }\n .close > button {\n padding: 8px;\n }\n .close > button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1rem;\n }\n .close > button .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .close > button .kol-icon::part(icon)::before {\n content: \"close\";\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
783
|
+
var css_248z$2F = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: 44px;\n }\n :host .kol-input.default:not(.hide-label) {\n grid-template-columns: 1.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input.switch:not(.hide-label) {\n grid-template-columns: 3.5rem auto;\n gap: 0.4em;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: 44px;\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: 0px;\n }\n :host .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n :host .kol-input.disabled .input {\n cursor: not-allowed;\n }\n :host .kol-input > label {\n order: 3;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n :host .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-red);\n padding-left: 1em;\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-red) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-red);\n font-weight: 700;\n }\n :host input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 24px;\n font-size: 1rem;\n }\n :host input:hover {\n border-color: var(--color-midnight);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input:not(.button) label span {\n margin-top: 0.125rem;\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n :host .kol-input.default .icon {\n color: var(--color-white);\n margin: -0.125rem 0 0 0.25rem;\n /* visually align */\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: 1px;\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .switch .checkbox-input-element {\n display: block;\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: 2px;\n color: #000;\n }\n .switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .switch .icon::part(icon)::before {\n content: \"add\";\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n .kol-input.button {\n row-gap: 0.5rem;\n /* Outer, clickable, container for the checkbox */\n /* Inner, visual, element for the checkbox */\n /* Outer, clickable, container for the label */\n /* Inner, visual, element for the label */\n /* States */\n }\n .kol-input.button .checkbox-container {\n align-items: center;\n display: flex;\n min-height: 44px;\n position: relative;\n }\n .kol-input.button .icon {\n background-color: var(--color-silver);\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n height: auto;\n min-height: 32px;\n min-width: 32px;\n /* Stable position when paddings are changing */\n }\n .kol-input.button .icon::part(icon) {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .hide-label.kol-input.button .icon {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n .kol-input.button .input-label {\n align-items: center;\n display: flex;\n min-height: 44px;\n width: 100%;\n }\n .kol-input.button .input-label-span {\n align-items: center;\n background-color: var(--color-silver);\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n display: flex;\n min-height: 32px;\n padding-right: 12px;\n width: 100%;\n }\n .kol-input.button.checked .icon, .kol-input.button.checked .input-label-span {\n background-color: var(--color-ice);\n }\n .kol-input.button:not(.disabled):hover .icon, .kol-input.button:not(.disabled):hover .input-label-span {\n background-color: var(--color-midnight);\n color: var(--color-silver);\n }\n .kol-input.button:focus-within {\n outline: none;\n }\n .kol-input.button:focus-within .icon,\n .kol-input.button:focus-within .input-label-span {\n min-height: 34px;\n border: 3px solid var(--color-ocean);\n background-clip: content-box;\n padding: 2px;\n }\n .kol-input.button:focus-within .icon {\n border-right: none;\n padding-right: 0;\n }\n .kol-input.button:focus-within .input-label-span {\n border-left: none;\n padding-left: 0;\n }\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: white;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--kolibri-spacing);\n }\n .msg {\n background-color: transparent;\n }\n .msg > .heading {\n place-items: flex-start;\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error {\n border-color: var(--color-red);\n }\n .error.msg .heading-icon {\n color: var(--color-red);\n }\n .info {\n border-color: var(--color-midnight);\n }\n .info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .success {\n border-color: var(--color-green);\n }\n .success.msg .heading-icon {\n color: var(--color-green);\n }\n .warning {\n border-color: var(--color-orange);\n }\n .warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .heading-icon {\n color: white;\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > .heading-icon::part(icon) {\n line-height: 1.375rem;\n }\n .msg > .heading > div > .kol-heading-wc {\n line-height: 20px;\n padding-top: 0.125rem;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n .msg.default .close .icon {\n color: var(--color-grey);\n }\n .msg.error .close .icon {\n color: var(--color-red);\n }\n .msg.info .close .icon {\n color: var(--color-midnight);\n }\n .msg.success .close .icon {\n color: var(--color-green);\n }\n .msg.warning .close .icon {\n color: var(--color-orange);\n }\n .card {\n border-width: 2px;\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: 0.5rem 1rem;\n }\n .card.hasCloser > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: white;\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .heading .kol-button-wc button:focus {\n outline-color: var(--color-white);\n outline-offset: -3px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline 0.1s linear;\n }\n .card > .heading .kol-button-wc button:hover {\n background-color: rgba(32, 32, 32, 0.2);\n }\n .card > .heading .kol-button-wc button:active {\n background-color: rgba(32, 32, 32, 0.4);\n }\n .card > .heading .kol-button-wc button:hover:focus {\n background-color: rgba(32, 32, 32, 0.1);\n }\n .card > .content {\n padding: 1rem;\n max-height: 9.5rem;\n overflow-y: auto;\n }\n .card.default > .heading {\n background-color: var(--color-grey);\n border-bottom: 2px solid var(--color-grey);\n }\n .card.error > .heading {\n background-color: var(--color-red);\n border-bottom: 2px solid var(--color-red);\n }\n .card.info > .heading {\n background-color: var(--color-midnight);\n border-bottom: 2px solid var(--color-midnight);\n }\n .card.success > .heading {\n background-color: var(--color-green);\n border-bottom: 2px solid var(--color-green);\n }\n .card.warning > .heading {\n background-color: var(--color-orange);\n border-bottom: 2px solid var(--color-orange);\n }\n :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n height: 1.25rem;\n width: 1.25rem;\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem !important;\n }\n .error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-grey);\n }\n .card.error .close {\n background-color: var(--color-red);\n }\n .card.info .close {\n background-color: var(--color-midnight);\n }\n .card.success .close {\n background-color: var(--color-green);\n }\n .card.warning .close {\n background-color: var(--color-orange);\n }\n .close > button {\n min-width: 44px;\n color: var(--color-white);\n min-height: 44px;\n display: grid;\n gap: 0.25em;\n line-height: 1.5rem;\n font-family: var(--font-family);\n font-weight: 700;\n cursor: pointer;\n border-radius: 1.5em;\n border-style: solid;\n border-width: 2px;\n font-size: 1rem;\n align-items: center;\n padding: 8px 14px;\n justify-content: center;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n background-color: rgba(0, 0, 0, 0);\n border-color: rgba(0, 0, 0, 0);\n }\n .close > button {\n padding: 8px;\n }\n .close > button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1rem;\n }\n .close > button .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .close > button .kol-icon::part(icon)::before {\n content: \"close\";\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
784
784
|
|
|
785
785
|
var css_248z$2E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: 0.25em;\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: 0.875em;\n font-style: italic;\n }\n input {\n border: none;\n }\n input[type=color] {\n border: none;\n min-height: 40px !important;\n }\n input[type=color] {\n background-color: transparent;\n }\n input::placeholder {\n color: var(--color-grey);\n }\n .input {\n background-color: var(--color-white);\n border-color: var(--color-grey);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 0.5em;\n }\n .input > .kol-icon {\n width: 1em;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 1em;\n padding-right: 1em;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5em;\n padding-right: 0.5em;\n }\n .input > input:first-child {\n padding-left: 0.375em;\n }\n .input > input:last-child {\n padding-right: 0.375em;\n }\n .input:hover {\n border-color: var(--color-midnight);\n }\n input:not([type=color]):read-only,\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: 3px;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-red);\n padding-left: 1em;\n }\n .kol-input.error .kol-alert-wc.error {\n color: var(--color-red);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-smoke);\n border-color: var(--color-granite);\n color: var(--color-black);\n }\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: white;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--kolibri-spacing);\n }\n .msg {\n background-color: transparent;\n }\n .msg > .heading {\n place-items: flex-start;\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error {\n border-color: var(--color-red);\n }\n .error.msg .heading-icon {\n color: var(--color-red);\n }\n .info {\n border-color: var(--color-midnight);\n }\n .info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .success {\n border-color: var(--color-green);\n }\n .success.msg .heading-icon {\n color: var(--color-green);\n }\n .warning {\n border-color: var(--color-orange);\n }\n .warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .heading-icon {\n color: white;\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > .heading-icon::part(icon) {\n line-height: 1.375rem;\n }\n .msg > .heading > div > .kol-heading-wc {\n line-height: 20px;\n padding-top: 0.125rem;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n .msg.default .close .icon {\n color: var(--color-grey);\n }\n .msg.error .close .icon {\n color: var(--color-red);\n }\n .msg.info .close .icon {\n color: var(--color-midnight);\n }\n .msg.success .close .icon {\n color: var(--color-green);\n }\n .msg.warning .close .icon {\n color: var(--color-orange);\n }\n .card {\n border-width: 2px;\n border-style: solid;\n filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: 0.5rem 1rem;\n }\n .card.hasCloser > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: 1.25rem;\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: -4px;\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: white;\n display: flex;\n font-size: 1.25rem;\n line-height: 1.25rem;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .heading .kol-button-wc button:focus {\n outline-color: var(--color-white);\n outline-offset: -3px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline 0.1s linear;\n }\n .card > .heading .kol-button-wc button:hover {\n background-color: rgba(32, 32, 32, 0.2);\n }\n .card > .heading .kol-button-wc button:active {\n background-color: rgba(32, 32, 32, 0.4);\n }\n .card > .heading .kol-button-wc button:hover:focus {\n background-color: rgba(32, 32, 32, 0.1);\n }\n .card > .content {\n padding: 1rem;\n max-height: 9.5rem;\n overflow-y: auto;\n }\n .card.default > .heading {\n background-color: var(--color-grey);\n border-bottom: 2px solid var(--color-grey);\n }\n .card.error > .heading {\n background-color: var(--color-red);\n border-bottom: 2px solid var(--color-red);\n }\n .card.info > .heading {\n background-color: var(--color-midnight);\n border-bottom: 2px solid var(--color-midnight);\n }\n .card.success > .heading {\n background-color: var(--color-green);\n border-bottom: 2px solid var(--color-green);\n }\n .card.warning > .heading {\n background-color: var(--color-orange);\n border-bottom: 2px solid var(--color-orange);\n }\n :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n height: 1.25rem;\n width: 1.25rem;\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: 1.25rem !important;\n }\n .error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-grey);\n }\n .card.error .close {\n background-color: var(--color-red);\n }\n .card.info .close {\n background-color: var(--color-midnight);\n }\n .card.success .close {\n background-color: var(--color-green);\n }\n .card.warning .close {\n background-color: var(--color-orange);\n }\n .close > button {\n min-width: 44px;\n color: var(--color-white);\n min-height: 44px;\n display: grid;\n gap: 0.25em;\n line-height: 1.5rem;\n font-family: var(--font-family);\n font-weight: 700;\n cursor: pointer;\n border-radius: 1.5em;\n border-style: solid;\n border-width: 2px;\n font-size: 1rem;\n align-items: center;\n padding: 8px 14px;\n justify-content: center;\n font-style: normal;\n text-align: center;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n background-color: rgba(0, 0, 0, 0);\n border-color: rgba(0, 0, 0, 0);\n }\n .close > button {\n padding: 8px;\n }\n .close > button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: 1rem;\n }\n .close > button .kol-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n .close > button .kol-icon::part(icon)::before {\n content: \"close\";\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
|
|
786
786
|
|
|
@@ -816,7 +816,7 @@ var css_248z$2p = "@layer kol-theme-component {\n :host {\n font-family: var
|
|
|
816
816
|
|
|
817
817
|
var css_248z$2o = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: 2px;\n gap: 0.5rem;\n line-height: 1rem;\n padding: 8px 14px;\n background-color: var(--color-ocean);\n border-color: var(--color-ocean);\n color: var(--color-white);\n cursor: pointer;\n }\n}";
|
|
818
818
|
|
|
819
|
-
var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
819
|
+
var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-midnight);\n }\n .popover {\n background: #fff;\n }\n .horizontal-line {\n background-color: var(--color-midnight);\n border-radius: 2px;\n width: 1px;\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button :active > .kol-span-wc {\n border-top-right-radius: var(--a11y-min-size);\n border-bottom-right-radius: var(--a11y-min-size);\n }\n .secondary-button :focus .kol-span-wc {\n border-top-right-radius: var(--a11y-min-size);\n border-bottom-right-radius: var(--a11y-min-size);\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n outline-offset: 0;\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-ocean);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--a11y-min-size);\n border-bottom-left-radius: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button) {\n font-size: 1.125em;\n }\n :is(a, button):focus {\n outline: none;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n color: var(--color-white);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .success :is(a, button) > .kol-span-wc,\n .success :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-green);\n border-color: var(--color-green);\n color: var(--color-white);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-white);\n background-color: var(--color-white);\n box-shadow: none;\n color: var(--color-midnight);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .success :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-ocean);\n border-color: var(--color-ocean);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-white);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-crimson);\n border-color: var(--color-crimson);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .success :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-white);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\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 /** button with inline focus */\n :is(a, button).focus-inline:focus > .kol-span-wc {\n outline-offset: -2px;\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n /** CUSTOM_CLASS */\n :is(a, button).hide-label > .kol-span-wc {\n padding: 8px;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: block;\n }\n}";
|
|
820
820
|
|
|
821
821
|
var css_248z$2m = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
|
|
822
822
|
|
|
@@ -891,7 +891,7 @@ const badgeCss = css_248z$2c;
|
|
|
891
891
|
var css_248z$2b = "@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: 0.75rem;\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: 1.25rem;\n }\n ul li > :is(span, .kol-link) {\n line-height: 1.25rem;\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
892
892
|
const breadcrumbCss = css_248z$2b;
|
|
893
893
|
|
|
894
|
-
var css_248z$2a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button)
|
|
894
|
+
var css_248z$2a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
|
|
895
895
|
const buttonCss = css_248z$2a;
|
|
896
896
|
|
|
897
897
|
var css_248z$29 = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
|
|
@@ -972,7 +972,7 @@ const selectCss = css_248z$1N;
|
|
|
972
972
|
var css_248z$1M = "@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: 1rem;\n padding: 8px 14px;\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
|
|
973
973
|
const skipNavCss = css_248z$1M;
|
|
974
974
|
|
|
975
|
-
var css_248z$1L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
975
|
+
var css_248z$1L = "@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 min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background: #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: 1px;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 8px 14px;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid 3px;\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: 0.8rem;\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
|
|
976
976
|
const splitButtonCss = css_248z$1L;
|
|
977
977
|
|
|
978
978
|
var css_248z$1K = "@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: 0.5rem;\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 padding: 0.5rem;\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 table,\n :host table thead tr:last-child th,\n :host table thead tr:last-child td {\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 th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\n display: flex;\n gap: 0.5rem;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: 0.5rem;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
|
|
@@ -1049,7 +1049,7 @@ var css_248z$1A = "@layer kol-theme-component {\n :host > span {\n font: nor
|
|
|
1049
1049
|
|
|
1050
1050
|
var css_248z$1z = "@layer kol-theme-component {\n :host {\n font: normal normal 400 0.875rem/1rem arial, sans-serif;\n font-weight: var(--font-weight-bold);\n }\n .kol-icon::part(icon separator)::before {\n color: var(--color-blue);\n }\n li:last-child {\n color: var(--color-grey-75);\n }\n .kol-icon[exportparts*=separator] {\n margin-inline-end: 0.5rem;\n margin-inline-start: 0.5rem;\n padding: 0;\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
|
|
1051
1051
|
|
|
1052
|
-
var css_248z$1y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a
|
|
1052
|
+
var css_248z$1y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: 44px;\n min-width: 44px;\n padding: 0.25em 0.75em;\n }\n a,\n button {\n appearance: none;\n background: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
|
|
1053
1053
|
|
|
1054
1054
|
var css_248z$1x = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--spacing-2xs);\n }\n}";
|
|
1055
1055
|
|
|
@@ -1103,7 +1103,7 @@ var css_248z$19 = "@layer kol-theme-component {\n :host {\n font-family: var
|
|
|
1103
1103
|
|
|
1104
1104
|
var css_248z$18 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: var(--color-blue-75);\n }\n}";
|
|
1105
1105
|
|
|
1106
|
-
var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
1106
|
+
var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n }\n .popover {\n background: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: 44px;\n min-width: 44px;\n padding: 0.25em 0.75em;\n }\n a,\n button {\n appearance: none;\n background: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
|
|
1107
1107
|
|
|
1108
1108
|
var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\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: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n :host table thead tr:last-child th,\n :host table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th div {\n width: 100%;\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: 1rem;\n }\n }\n}";
|
|
1109
1109
|
|
|
@@ -1216,7 +1216,7 @@ var css_248z$B = "@layer kol-theme-component {\n :host {\n font-family: var(
|
|
|
1216
1216
|
|
|
1217
1217
|
var css_248z$A = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: var(--color-blue-80);\n }\n}";
|
|
1218
1218
|
|
|
1219
|
-
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .popover {\n background: #fff;\n }\n}";
|
|
1219
|
+
var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-style: solid;\n border-width: 2px;\n border-color: var(--color-blue);\n border-radius: 4px;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .popover {\n background: #fff;\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n min-height: 44px;\n min-width: 44px;\n border-radius: 4px;\n font: normal normal 400 1rem/1.25rem arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: 0.75rem;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\n padding: calc(0.75rem - 2px) calc(1rem - 2px);\n }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
|
|
1220
1220
|
|
|
1221
1221
|
var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n --kolibri-spacing: 0.25rem;\n }\n .kol-button-group-wc {\n border-bottom: 1px solid var(--color-grey-25);\n margin-bottom: -1px;\n }\n .kol-button-group-wc button {\n border: none;\n margin-bottom: -1px;\n }\n .kol-button-group-wc button .kol-span-wc {\n padding: 0.5rem;\n min-height: 44px;\n min-width: 44px;\n }\n .kol-button-group-wc button.selected .kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: 1px;\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .kol-button-group-wc button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .kol-button-group-wc button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
|
|
1222
1222
|
|
|
@@ -1274,7 +1274,7 @@ var css_248z$s = "@layer kol-theme-component {\n :host {\n display: inline-b
|
|
|
1274
1274
|
|
|
1275
1275
|
var css_248z$r = "@layer kol-theme-component {\n li > span {\n font-weight: bold;\n /* text-transform: uppercase; */\n }\n}";
|
|
1276
1276
|
|
|
1277
|
-
var css_248z$q = "@layer kol-theme-component {\n
|
|
1277
|
+
var css_248z$q = "@layer kol-theme-component {\n a,\n button {\n border-radius: 2rem !important;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 2rem;\n border-style: solid;\n min-width: 44px;\n min-height: 44px;\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 1rem;\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 0.5rem;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
|
|
1278
1278
|
|
|
1279
1279
|
var css_248z$p = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n }\n}";
|
|
1280
1280
|
|
|
@@ -1312,7 +1312,7 @@ var css_248z$9 = "@layer kol-theme-component {\n :host .hidden {\n display:
|
|
|
1312
1312
|
|
|
1313
1313
|
var css_248z$8 = "@layer kol-theme-component {\n .button {\n border-radius: 2rem;\n font-family: var(--font-family-sans);\n }\n .button-inner {\n background-color: var(--color-weiss);\n border-radius: 2rem;\n border: var(--spacing) solid var(--color-anthrazit);\n color: var(--color-anthrazit);\n font-size: inherit;\n gap: 0.25em;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0 1rem;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .hide-label .button-inner {\n padding: 0 0.5rem;\n }\n .button:not(:disabled):hover .button-inner,\n .button:focus .button-inner {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .button:disabled .button-inner {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .selected .button-inner {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n color: var(--color-weiss);\n font-weight: bold;\n opacity: 1 !important;\n text-decoration: underline;\n }\n}";
|
|
1314
1314
|
|
|
1315
|
-
var css_248z$7 = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-fluorit);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-achat);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
|
|
1315
|
+
var css_248z$7 = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: 60px;\n }\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-fluorit);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-achat);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
|
|
1316
1316
|
|
|
1317
1317
|
var css_248z$6 = "@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: 0.5rem;\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n select:hover,\n select:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary) !important;\n outline-offset: 0;\n outline-style: solid;\n outline-width: 1px;\n }\n label {\n color: var(--default-letter);\n font-size: 14px;\n line-height: 20px;\n gap: 8px;\n width: 100%;\n font-weight: bold;\n }\n select.error {\n background-color: var(--danger-light) !important;\n border-color: var(--danger);\n }\n select {\n width: 100%;\n color: var(--default-letter);\n border-width: 1px;\n border-style: solid;\n line-height: 24px;\n font-size: 16px;\n border-color: var(--kolibri-color-normal);\n border-radius: 0;\n background-color: #e8edf2 !important;\n }\n select:disabled {\n cursor: not-allowed;\n border-color: var(--border-default);\n background-color: var(--background-light-grey);\n }\n option {\n height: 2em;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n .kol-alert-wc {\n margin-top: var(--spacing);\n display: block;\n }\n .kol-required span::after {\n content: \"*\";\n }\n}";
|
|
1318
1318
|
|
|
@@ -1320,7 +1320,7 @@ var css_248z$5 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-w
|
|
|
1320
1320
|
|
|
1321
1321
|
var css_248z$4 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
|
|
1322
1322
|
|
|
1323
|
-
var css_248z$3 = "@layer kol-theme-component {\n .popover {\n background: #fff;\n }\n}";
|
|
1323
|
+
var css_248z$3 = "@layer kol-theme-component {\n :host {\n border-radius: 2rem;\n border-style: solid;\n border-width: var(--spacing);\n }\n .popover {\n background: #fff;\n }\n .horizontal-line {\n background-color: var(--border-color);\n border-radius: 2px;\n width: 1px;\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button > button > .kol-span-wc {\n border-top-right-radius: 2rem;\n border-bottom-right-radius: 2rem;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n .secondary-button > button > :active > .kol-span-wc {\n border-top-right-radius: 2rem;\n border-bottom-right-radius: 2rem;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n .secondary-button > button > :focus > .kol-span-wc {\n border-top-right-radius: 2rem;\n border-bottom-right-radius: 2rem;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n .secondary-button > a,\n .secondary-button > button {\n border-top-right-radius: 2rem !important;\n border-bottom-right-radius: 2rem !important;\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a,\n button {\n border-top-left-radius: 2rem !important;\n border-bottom-left-radius: 2rem !important;\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-top-left-radius: 2rem;\n border-bottom-left-radius: 2rem;\n font-size: inherit;\n padding: 0 1rem;\n min-width: 44px;\n min-height: 44px;\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 0.5rem;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
|
|
1324
1324
|
|
|
1325
1325
|
var css_248z$2 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .kol-button-group-wc {\n display: flex;\n background-color: var(--color-petrol);\n }\n :host .kol-button-group-wc > div {\n display: inline-flex;\n }\n :host .kol-button-group-wc > div + div {\n margin-left: 0.25em;\n }\n :host > div > div {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n box-sizing: border-box;\n font-size: inherit;\n line-height: 1.25em;\n cursor: pointer;\n border-width: 2px;\n box-shadow: 0 0 0.25em gray;\n width: inherit;\n overflow: hidden;\n border-style: solid;\n padding: calc(4 * var(--spacing));\n display: grid;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button-wc button.selected,\n .kol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-width: 0.25em !important;\n border-bottom-style: solid;\n border-bottom-color: var(--color-citrin) !important;\n }\n button > .kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n button.primary,\n button.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n }\n button.primary:hover,\n button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n button.secondary,\n button.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n }\n button.secondary:hover,\n button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n button.normal,\n button.normal:disabled:hover {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: white;\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n }\n button.danger:hover,\n button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n button.ghost,\n button.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n outline: 0 !important;\n box-shadow: none !important;\n }\n .close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n }\n .close-button button {\n width: 1rem;\n position: relative;\n height: 1rem;\n left: -4.25em;\n top: 0.25em;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
1326
1326
|
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/themes",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.11",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
|
-
"repository":
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/public-ui/kolibri"
|
|
9
|
+
},
|
|
7
10
|
"bugs": {
|
|
8
11
|
"url": "https://github.com/public-ui/kolibri/issues",
|
|
9
12
|
"email": "kolibri@itzbund.de"
|
|
@@ -41,21 +44,21 @@
|
|
|
41
44
|
"wcag"
|
|
42
45
|
],
|
|
43
46
|
"devDependencies": {
|
|
44
|
-
"@public-ui/schema": "2.0.
|
|
45
|
-
"@types/node": "ts5.
|
|
46
|
-
"@typescript-eslint/eslint-plugin": "7.
|
|
47
|
-
"@typescript-eslint/parser": "7.
|
|
47
|
+
"@public-ui/schema": "2.0.11",
|
|
48
|
+
"@types/node": "ts5.4",
|
|
49
|
+
"@typescript-eslint/eslint-plugin": "7.4.0",
|
|
50
|
+
"@typescript-eslint/parser": "7.4.0",
|
|
48
51
|
"eslint": "8.57.0",
|
|
49
52
|
"eslint-plugin-no-loops": "0.3.0",
|
|
50
53
|
"nodemon": "3.1.0",
|
|
51
|
-
"postcss": "8.4.
|
|
54
|
+
"postcss": "8.4.38",
|
|
52
55
|
"rollup-plugin-postcss": "4.0.2",
|
|
53
|
-
"sass": "1.
|
|
54
|
-
"typescript": "5.4.
|
|
56
|
+
"sass": "1.72.0",
|
|
57
|
+
"typescript": "5.4.3",
|
|
55
58
|
"unbuild": "1.2.1"
|
|
56
59
|
},
|
|
57
60
|
"peerDependencies": {
|
|
58
|
-
"@public-ui/components": "2.0.
|
|
61
|
+
"@public-ui/components": "2.0.11"
|
|
59
62
|
},
|
|
60
63
|
"sideEffects": false,
|
|
61
64
|
"type": "module",
|
|
@@ -75,7 +78,6 @@
|
|
|
75
78
|
],
|
|
76
79
|
"scripts": {
|
|
77
80
|
"build": "unbuild",
|
|
78
|
-
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@public-ui/schema,@types/*",
|
|
79
81
|
"format": "prettier --check src",
|
|
80
82
|
"lint": "tsc --noemit && eslint src",
|
|
81
83
|
"dev": "nodemon --ignore dist -e ts,tsx,scss --exec \"pnpm build\"",
|