@public-ui/themes 2.2.19-rc.1 → 2.2.19
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 +15 -15
- package/dist/index.mjs +15 -15
- package/package.json +5 -5
package/dist/index.cjs
CHANGED
|
@@ -1122,7 +1122,7 @@ var css_248z$2m = "@layer kol-theme-component {\n .msg {\n border-width: 0;\
|
|
|
1122
1122
|
|
|
1123
1123
|
var css_248z$2l = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
|
|
1124
1124
|
|
|
1125
|
-
var css_248z$2k = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: 1.25;\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: 1.5;\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: 0;\n padding: 0;\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-alert-wc.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n display: contents;\n order: 2;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n
|
|
1125
|
+
var css_248z$2k = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: 1.25;\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: 1.5;\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: 0;\n padding: 0;\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-alert-wc.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n display: contents;\n order: 2;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n gap: var(--spacing) calc(var(--spacing) * 2);\n flex-wrap: wrap;\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
|
|
1126
1126
|
|
|
1127
1127
|
var css_248z$2j = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
|
|
1128
1128
|
|
|
@@ -1235,7 +1235,7 @@ var css_248z$1R = "@layer kol-theme-component {\n .details__heading-button:focu
|
|
|
1235
1235
|
|
|
1236
1236
|
var css_248z$1Q = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
|
|
1237
1237
|
|
|
1238
|
-
var css_248z$1P = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc
|
|
1238
|
+
var css_248z$1P = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .mandatory-fields-hint {\n margin: 0;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
|
|
1239
1239
|
|
|
1240
1240
|
var css_248z$1O = "@layer kol-theme-component {\n .headline-h1 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n }\n .headline-h2 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 1.143;\n }\n .headline-h3 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1667;\n }\n .headline-h4 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h5 {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .headline-h6 {\n color: rgb(234, 0, 255);\n }\n}";
|
|
1241
1241
|
|
|
@@ -1365,7 +1365,7 @@ var css_248z$1b = "@layer kol-theme-component {\n .details__heading-button:focu
|
|
|
1365
1365
|
|
|
1366
1366
|
var css_248z$1a = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
|
|
1367
1367
|
|
|
1368
|
-
var css_248z$19 = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc
|
|
1368
|
+
var css_248z$19 = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .mandatory-fields-hint {\n display: inline-block;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
|
|
1369
1369
|
|
|
1370
1370
|
var css_248z$18 = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n font-weight: var(--font-weight-bold);\n }\n .headline-h1 {\n font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n line-height: 3.25;\n }\n .headline-h2 {\n font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n line-height: 2.755;\n }\n .headline-h3 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 2.5;\n }\n .headline-h4 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 2;\n }\n .headline-h5 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n .headline-h6 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n}";
|
|
1371
1371
|
|
|
@@ -1490,13 +1490,13 @@ var css_248z$z = "@layer kol-theme-component {\n a,\n button {\n border-rad
|
|
|
1490
1490
|
|
|
1491
1491
|
var css_248z$y = "@layer kol-theme-component {\n :host > div {\n background-color: white;\n border-color: var(--border-color);\n border-style: solid;\n border-radius: calc(2 * var(--border-radius));\n width: 100%;\n height: 100%;\n border-width: 1px;\n }\n .kol-heading {\n border-bottom-color: var(--border-color);\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: 1px;\n border-bottom-style: solid;\n }\n :host > div > div {\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > div:last-child {\n border-top-color: var(--color-achat);\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-top-width: 1px;\n border-top-style: solid;\n }\n}";
|
|
1492
1492
|
|
|
1493
|
-
var css_248z$x = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1493
|
+
var css_248z$x = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n .combobox__group:not(.disabled) .combobox__group:hover, .combobox__group:focus-within {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .combobox__group {\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-align: left;\n }\n .combobox:not(.combobox--disabled) .combobox__group:hover {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .combobox__input {\n background-color: transparent;\n position: relative;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n border: none;\n }\n .combobox__input:focus {\n outline-width: 0;\n outline-offset: 0;\n }\n .combobox__icon {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n outline: 0;\n }\n .error .combobox__group {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1494
1494
|
|
|
1495
1495
|
var css_248z$w = "@layer kol-theme-component {\n .details__heading-button {\n border-radius: var(--border-radius);\n }\n .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n gap: 0;\n text-align: left;\n }\n .details__content.indented-text {\n width: 100%;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.5em;\n border-left: 4px solid var(--color-petrol);\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
1496
1496
|
|
|
1497
1497
|
var css_248z$v = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 0.25em gray;\n }\n}";
|
|
1498
1498
|
|
|
1499
|
-
var css_248z$u = "@layer kol-theme-component {\n --kolibri-border-width: 1px;\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .kol-link-wc
|
|
1499
|
+
var css_248z$u = "@layer kol-theme-component {\n --kolibri-border-width: 1px;\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .kol-link-wc .kol-link-wc a,\n .kol-link-wc .kol-button-wc button {\n text-decoration-line: none;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-petrol);\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n background-repeat: no-repeat;\n border-radius: var(--spacing);\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .kol-link-wc a:focus,\n .kol-link-wc a:hover,\n .kol-link-wc button:focus,\n .kol-link-wc button:hover {\n color: var(--color-achat);\n background-size: 100% 0.25ex;\n }\n .kol-link-wc a > .kol-span-wc,\n .kol-link-wc button > .kol-span-wc {\n gap: 0.25em;\n }\n .kol-link-wc a.skip {\n position: absolute;\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n }\n .kol-link-wc a.skip:focus {\n background-color: white;\n box-shadow: 0 0 8px 8px white;\n position: unset;\n left: unset;\n }\n .kol-link-wc {\n display: inline-block;\n }\n .mandatory-fields-hint {\n width: 100%;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.5em;\n border-left: 4px solid var(--color-petrol);\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
|
|
1500
1500
|
|
|
1501
1501
|
var css_248z$t = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n margin: 0;\n padding: 0;\n }\n .headline-h1 {\n font-family: var(--font-family-serif);\n font-size: calc(54rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h2 {\n font-family: var(--font-family-serif);\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h3 {\n font-family: var(--font-family-serif);\n font-size: calc(26rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h4 {\n font-family: var(--font-family-serif);\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n .headline-h5 {\n font-family: var(--font-family-serif);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h6 {\n font-family: var(--font-family-sans);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n}";
|
|
1502
1502
|
|
|
@@ -1504,21 +1504,21 @@ var css_248z$s = "@layer kol-theme-component {\n .kol-indented-text-wc > div {\
|
|
|
1504
1504
|
|
|
1505
1505
|
var css_248z$r = "@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .checkbox-container {\n justify-content: flex-start;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-color: var(--default-border);\n border-style: solid;\n border-width: 2px;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n input:hover {\n border-color: var(--color-petrol);\n }\n /* NEU */\n .kol-input {\n display: grid;\n width: 100%;\n align-items: center;\n justify-items: left;\n }\n .kol-input.default {\n grid-template-columns: calc(12 * var(--spacing)) auto;\n }\n .default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(12 * var(--spacing));\n }\n .switch {\n grid-template-columns: calc(26 * var(--spacing)) auto;\n }\n .switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(26 * var(--spacing));\n }\n .button {\n gap: calc(8rem / var(--kolibri-root-font-size, 16)) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input > div.input {\n display: inline-flex;\n order: 1;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n padding-left: calc(4 * var(--spacing));\n order: 2;\n }\n .kol-input > .kol-alert-wc.error {\n padding-top: 0.25em;\n order: 3;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n background-color: white;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .default input[type=checkbox] {\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n }\n .default .icon {\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-weiss);\n }\n .switch input[type=checkbox] {\n display: block;\n position: relative;\n width: 3.2em;\n min-width: 3.2em;\n height: 1.7em;\n }\n .switch input[type=checkbox]:before {\n background-color: black;\n position: absolute;\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n width: 1.2em;\n height: 1.2em;\n /* border-radius: 0.25em; */\n transition: 0.5;\n }\n .switch input[type=checkbox]:checked:before {\n transform: translateX(1.5em);\n background-color: white;\n }\n .switch input[type=checkbox]:indeterminate:before {\n transform: translateX(0.75em);\n background-color: var(--color-petrol);\n }\n .switch:is(:not(.checked), .indeterminate) .icon {\n color: #fff;\n }\n .disabled {\n opacity: 0.33;\n }\n .kol-input span.hint {\n color: gray;\n display: block;\n padding: 0 var(--spacing);\n order: 3;\n grid-column: span 2;\n font-style: italic;\n }\n .button:focus-within {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n border-radius: 32px;\n outline-offset: 2px;\n }\n}";
|
|
1506
1506
|
|
|
1507
|
-
var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1507
|
+
var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1508
1508
|
|
|
1509
|
-
var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1509
|
+
var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1510
1510
|
|
|
1511
|
-
var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1511
|
+
var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1512
1512
|
|
|
1513
|
-
var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1513
|
+
var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1514
1514
|
|
|
1515
|
-
var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1515
|
+
var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1516
1516
|
|
|
1517
|
-
var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1517
|
+
var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1518
1518
|
|
|
1519
1519
|
var css_248z$k = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 label {\n font-weight: normal;\n }\n :host input:focus {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--color-anthrazit);\n border-color: var(--default-border);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n /* padding: rem(10) rem(14); */\n }\n input:hover {\n border-color: var(--color-achat);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n order: 3;\n }\n .kol-required span::after {\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n border: 0;\n }\n fieldset .hint,\n fieldset .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .hint {\n order: 4;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n }\n fieldset.horizontal {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: flex-start;\n }\n fieldset legend {\n display: block;\n width: 100%;\n line-height: 1.5;\n }\n .radio-input-wrapper,\n .input {\n display: flex;\n position: relative;\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n gap: 0.5em;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-label {\n display: flex;\n width: 100%;\n cursor: pointer;\n }\n .radio-label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n box-shadow: 0 0 1.6px black;\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-input-bg-default);\n border-color: #999;\n cursor: not-allowed;\n }\n .kol-alert-wc {\n width: 100%;\n }\n}";
|
|
1520
1520
|
|
|
1521
|
-
var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1521
|
+
var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1522
1522
|
|
|
1523
1523
|
var css_248z$i = "@layer kol-theme-component {\n button {\n background-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .primary:is(a, button):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 .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-petrol);\n background-color: var(--color-weiss);\n border-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 .secondary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-weiss);\n border-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 .normal:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-blut);\n background-color: var(--color-weiss);\n border-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 .danger:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-ghost);\n border-color: transparent;\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):focus > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n }\n}";
|
|
1524
1524
|
|
|
@@ -1532,9 +1532,9 @@ var css_248z$e = "@layer kol-theme-component {\n button {\n background-color
|
|
|
1532
1532
|
|
|
1533
1533
|
var css_248z$d = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n }\n :host progress,\n :host span {\n display: block;\n width: 0;\n height: 0;\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 fill: transparent;\n stroke: var(--color-achat);\n }\n progress {\n display: none;\n }\n}";
|
|
1534
1534
|
|
|
1535
|
-
var css_248z$c = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .error select {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n select {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1535
|
+
var css_248z$c = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .error select {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n select {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n select:not(.disabled) select:hover, select:focus-within {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n select {\n width: 100%;\n }\n option {\n min-height: 2em;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
|
|
1536
1536
|
|
|
1537
|
-
var css_248z$b = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1537
|
+
var css_248z$b = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n .single-select__group:not(.disabled) .single-select__group:hover, .single-select__group:focus-within {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .single-select__group {\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-align: left;\n }\n .single-select:not(.disabled) .single-select__group:hover {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .single-select__input {\n background-color: transparent;\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .single-select__input:focus {\n outline-width: 0;\n outline-offset: 0;\n }\n .single-select__button {\n display: grid;\n padding-left: 1em;\n place-items: center;\n cursor: pointer;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n padding-left: 1em;\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-petrol);\n outline: 0;\n }\n .single-select__item[aria-selected] .radio-label, .single-select__item:focus .radio-label, .single-select__item.highlighted .radio-label {\n color: var(--color-weiss);\n }\n .error .single-select__group {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1538
1538
|
|
|
1539
1539
|
var css_248z$a = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n border-style: solid;\n border-radius: 32px;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n cursor: pointer;\n }\n}";
|
|
1540
1540
|
|
|
@@ -1548,7 +1548,7 @@ var css_248z$6 = "@layer kol-theme-component {\n :host {\n display: flex;\n
|
|
|
1548
1548
|
|
|
1549
1549
|
var css_248z$5 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .tabs-button-group {\n background-color: var(--color-petrol);\n display: flex;\n }\n :host .tabs-button-group > div {\n display: inline-flex;\n }\n :host .tabs-button-group > div + div {\n margin-left: 0.25em;\n }\n .tabs-content {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n box-shadow: 0 0 0.25em gray;\n border-style: solid;\n display: grid;\n width: inherit;\n padding: calc(4 * var(--spacing));\n border-width: 2px;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n line-height: 1.25;\n cursor: pointer;\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-color: var(--color-citrin);\n border-bottom-width: 0.25em;\n border-bottom-style: solid;\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 opacity: 0.5;\n cursor: not-allowed;\n }\n button.primary,\n button.primary:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\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 color: white;\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\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 color: white;\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\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 color: var(--kolibri-color-ghost);\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n color: white;\n background-color: var(--kolibri-color-ghost);\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n box-shadow: none;\n outline: 0;\n }\n .close-button {\n width: 0;\n height: -moz-fit-content;\n height: fit-content;\n font-size: 25%;\n }\n .close-button button {\n position: relative;\n top: 0.25em;\n left: -4.25em;\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
1550
1550
|
|
|
1551
|
-
var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1551
|
+
var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n textarea::-moz-placeholder {\n font-style: italic;\n }\n textarea::placeholder {\n font-style: italic;\n }\n textarea:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n textarea:not(.disabled, textarea:disabled):hover, textarea:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n textarea {\n width: 100%;\n }\n .error textarea {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n textarea:-moz-read-only {\n background-color: var(--background-light-grey);\n border-color: var(--border-default);\n }\n textarea:read-only {\n background-color: var(--background-light-grey);\n border-color: var(--border-default);\n }\n}";
|
|
1552
1552
|
|
|
1553
1553
|
var css_248z$3 = "@layer kol-theme-component {\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n}\n@layer kol-theme-component {\n :host {\n transform: translateX(-50%);\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n left: 50%;\n width: calc(750rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n}";
|
|
1554
1554
|
|
package/dist/index.mjs
CHANGED
|
@@ -1120,7 +1120,7 @@ var css_248z$2m = "@layer kol-theme-component {\n .msg {\n border-width: 0;\
|
|
|
1120
1120
|
|
|
1121
1121
|
var css_248z$2l = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::-moz-placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
|
|
1122
1122
|
|
|
1123
|
-
var css_248z$2k = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: 1.25;\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: 1.5;\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: 0;\n padding: 0;\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-alert-wc.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n display: contents;\n order: 2;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n
|
|
1123
|
+
var css_248z$2k = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: 1.25;\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: 1.5;\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: 0;\n padding: 0;\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-alert-wc.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n display: contents;\n order: 2;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n gap: var(--spacing) calc(var(--spacing) * 2);\n flex-wrap: wrap;\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
|
|
1124
1124
|
|
|
1125
1125
|
var css_248z$2j = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\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: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\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-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\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 > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
|
|
1126
1126
|
|
|
@@ -1233,7 +1233,7 @@ var css_248z$1R = "@layer kol-theme-component {\n .details__heading-button:focu
|
|
|
1233
1233
|
|
|
1234
1234
|
var css_248z$1Q = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
|
|
1235
1235
|
|
|
1236
|
-
var css_248z$1P = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc
|
|
1236
|
+
var css_248z$1P = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .mandatory-fields-hint {\n margin: 0;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
|
|
1237
1237
|
|
|
1238
1238
|
var css_248z$1O = "@layer kol-theme-component {\n .headline-h1 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n }\n .headline-h2 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 1.143;\n }\n .headline-h3 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1667;\n }\n .headline-h4 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h5 {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .headline-h6 {\n color: rgb(234, 0, 255);\n }\n}";
|
|
1239
1239
|
|
|
@@ -1363,7 +1363,7 @@ var css_248z$1b = "@layer kol-theme-component {\n .details__heading-button:focu
|
|
|
1363
1363
|
|
|
1364
1364
|
var css_248z$1a = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
|
|
1365
1365
|
|
|
1366
|
-
var css_248z$19 = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc
|
|
1366
|
+
var css_248z$19 = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .mandatory-fields-hint {\n display: inline-block;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
|
|
1367
1367
|
|
|
1368
1368
|
var css_248z$18 = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n font-weight: var(--font-weight-bold);\n }\n .headline-h1 {\n font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n line-height: 3.25;\n }\n .headline-h2 {\n font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n line-height: 2.755;\n }\n .headline-h3 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 2.5;\n }\n .headline-h4 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 2;\n }\n .headline-h5 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n .headline-h6 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n}";
|
|
1369
1369
|
|
|
@@ -1488,13 +1488,13 @@ var css_248z$z = "@layer kol-theme-component {\n a,\n button {\n border-rad
|
|
|
1488
1488
|
|
|
1489
1489
|
var css_248z$y = "@layer kol-theme-component {\n :host > div {\n background-color: white;\n border-color: var(--border-color);\n border-style: solid;\n border-radius: calc(2 * var(--border-radius));\n width: 100%;\n height: 100%;\n border-width: 1px;\n }\n .kol-heading {\n border-bottom-color: var(--border-color);\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: 1px;\n border-bottom-style: solid;\n }\n :host > div > div {\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > div:last-child {\n border-top-color: var(--color-achat);\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-top-width: 1px;\n border-top-style: solid;\n }\n}";
|
|
1490
1490
|
|
|
1491
|
-
var css_248z$x = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1491
|
+
var css_248z$x = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n .combobox__group:not(.disabled) .combobox__group:hover, .combobox__group:focus-within {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .combobox__group {\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-align: left;\n }\n .combobox:not(.combobox--disabled) .combobox__group:hover {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .combobox__input {\n background-color: transparent;\n position: relative;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n border: none;\n }\n .combobox__input:focus {\n outline-width: 0;\n outline-offset: 0;\n }\n .combobox__icon {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n outline: 0;\n }\n .error .combobox__group {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1492
1492
|
|
|
1493
1493
|
var css_248z$w = "@layer kol-theme-component {\n .details__heading-button {\n border-radius: var(--border-radius);\n }\n .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n gap: 0;\n text-align: left;\n }\n .details__content.indented-text {\n width: 100%;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.5em;\n border-left: 4px solid var(--color-petrol);\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
1494
1494
|
|
|
1495
1495
|
var css_248z$v = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 0.25em gray;\n }\n}";
|
|
1496
1496
|
|
|
1497
|
-
var css_248z$u = "@layer kol-theme-component {\n --kolibri-border-width: 1px;\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .kol-link-wc
|
|
1497
|
+
var css_248z$u = "@layer kol-theme-component {\n --kolibri-border-width: 1px;\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .kol-link-wc .kol-link-wc a,\n .kol-link-wc .kol-button-wc button {\n text-decoration-line: none;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-petrol);\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n background-repeat: no-repeat;\n border-radius: var(--spacing);\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .kol-link-wc a:focus,\n .kol-link-wc a:hover,\n .kol-link-wc button:focus,\n .kol-link-wc button:hover {\n color: var(--color-achat);\n background-size: 100% 0.25ex;\n }\n .kol-link-wc a > .kol-span-wc,\n .kol-link-wc button > .kol-span-wc {\n gap: 0.25em;\n }\n .kol-link-wc a.skip {\n position: absolute;\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n }\n .kol-link-wc a.skip:focus {\n background-color: white;\n box-shadow: 0 0 8px 8px white;\n position: unset;\n left: unset;\n }\n .kol-link-wc {\n display: inline-block;\n }\n .mandatory-fields-hint {\n width: 100%;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.5em;\n border-left: 4px solid var(--color-petrol);\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
|
|
1498
1498
|
|
|
1499
1499
|
var css_248z$t = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n margin: 0;\n padding: 0;\n }\n .headline-h1 {\n font-family: var(--font-family-serif);\n font-size: calc(54rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h2 {\n font-family: var(--font-family-serif);\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h3 {\n font-family: var(--font-family-serif);\n font-size: calc(26rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h4 {\n font-family: var(--font-family-serif);\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n .headline-h5 {\n font-family: var(--font-family-serif);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h6 {\n font-family: var(--font-family-sans);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n}";
|
|
1500
1500
|
|
|
@@ -1502,21 +1502,21 @@ var css_248z$s = "@layer kol-theme-component {\n .kol-indented-text-wc > div {\
|
|
|
1502
1502
|
|
|
1503
1503
|
var css_248z$r = "@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .checkbox-container {\n justify-content: flex-start;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-color: var(--default-border);\n border-style: solid;\n border-width: 2px;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n input:hover {\n border-color: var(--color-petrol);\n }\n /* NEU */\n .kol-input {\n display: grid;\n width: 100%;\n align-items: center;\n justify-items: left;\n }\n .kol-input.default {\n grid-template-columns: calc(12 * var(--spacing)) auto;\n }\n .default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(12 * var(--spacing));\n }\n .switch {\n grid-template-columns: calc(26 * var(--spacing)) auto;\n }\n .switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(26 * var(--spacing));\n }\n .button {\n gap: calc(8rem / var(--kolibri-root-font-size, 16)) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input > div.input {\n display: inline-flex;\n order: 1;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n padding-left: calc(4 * var(--spacing));\n order: 2;\n }\n .kol-input > .kol-alert-wc.error {\n padding-top: 0.25em;\n order: 3;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n background-color: white;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .default input[type=checkbox] {\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n }\n .default .icon {\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-weiss);\n }\n .switch input[type=checkbox] {\n display: block;\n position: relative;\n width: 3.2em;\n min-width: 3.2em;\n height: 1.7em;\n }\n .switch input[type=checkbox]:before {\n background-color: black;\n position: absolute;\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n width: 1.2em;\n height: 1.2em;\n /* border-radius: 0.25em; */\n transition: 0.5;\n }\n .switch input[type=checkbox]:checked:before {\n transform: translateX(1.5em);\n background-color: white;\n }\n .switch input[type=checkbox]:indeterminate:before {\n transform: translateX(0.75em);\n background-color: var(--color-petrol);\n }\n .switch:is(:not(.checked), .indeterminate) .icon {\n color: #fff;\n }\n .disabled {\n opacity: 0.33;\n }\n .kol-input span.hint {\n color: gray;\n display: block;\n padding: 0 var(--spacing);\n order: 3;\n grid-column: span 2;\n font-style: italic;\n }\n .button:focus-within {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n border-radius: 32px;\n outline-offset: 2px;\n }\n}";
|
|
1504
1504
|
|
|
1505
|
-
var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1505
|
+
var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1506
1506
|
|
|
1507
|
-
var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1507
|
+
var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1508
1508
|
|
|
1509
|
-
var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1509
|
+
var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1510
1510
|
|
|
1511
|
-
var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1511
|
+
var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1512
1512
|
|
|
1513
|
-
var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1513
|
+
var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1514
1514
|
|
|
1515
|
-
var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1515
|
+
var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1516
1516
|
|
|
1517
1517
|
var css_248z$k = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 label {\n font-weight: normal;\n }\n :host input:focus {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--color-anthrazit);\n border-color: var(--default-border);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n /* padding: rem(10) rem(14); */\n }\n input:hover {\n border-color: var(--color-achat);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n order: 3;\n }\n .kol-required span::after {\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n border: 0;\n }\n fieldset .hint,\n fieldset .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .hint {\n order: 4;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n }\n fieldset.horizontal {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: flex-start;\n }\n fieldset legend {\n display: block;\n width: 100%;\n line-height: 1.5;\n }\n .radio-input-wrapper,\n .input {\n display: flex;\n position: relative;\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n gap: 0.5em;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-label {\n display: flex;\n width: 100%;\n cursor: pointer;\n }\n .radio-label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n box-shadow: 0 0 1.6px black;\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-input-bg-default);\n border-color: #999;\n cursor: not-allowed;\n }\n .kol-alert-wc {\n width: 100%;\n }\n}";
|
|
1518
1518
|
|
|
1519
|
-
var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1519
|
+
var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n input {\n width: 100%;\n cursor: pointer;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1520
1520
|
|
|
1521
1521
|
var css_248z$i = "@layer kol-theme-component {\n button {\n background-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .primary:is(a, button):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 .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-petrol);\n background-color: var(--color-weiss);\n border-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 .secondary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-weiss);\n border-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 .normal:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-blut);\n background-color: var(--color-weiss);\n border-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 .danger:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-ghost);\n border-color: transparent;\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):focus > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n }\n}";
|
|
1522
1522
|
|
|
@@ -1530,9 +1530,9 @@ var css_248z$e = "@layer kol-theme-component {\n button {\n background-color
|
|
|
1530
1530
|
|
|
1531
1531
|
var css_248z$d = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n }\n :host progress,\n :host span {\n display: block;\n width: 0;\n height: 0;\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 fill: transparent;\n stroke: var(--color-achat);\n }\n progress {\n display: none;\n }\n}";
|
|
1532
1532
|
|
|
1533
|
-
var css_248z$c = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .error select {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n select {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1533
|
+
var css_248z$c = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .error select {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n select {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n select:not(.disabled) select:hover, select:focus-within {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n select {\n width: 100%;\n }\n option {\n min-height: 2em;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
|
|
1534
1534
|
|
|
1535
|
-
var css_248z$b = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1535
|
+
var css_248z$b = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n .single-select__group:not(.disabled) .single-select__group:hover, .single-select__group:focus-within {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .single-select__group {\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-align: left;\n }\n .single-select:not(.disabled) .single-select__group:hover {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .single-select__input {\n background-color: transparent;\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .single-select__input:focus {\n outline-width: 0;\n outline-offset: 0;\n }\n .single-select__button {\n display: grid;\n padding-left: 1em;\n place-items: center;\n cursor: pointer;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n padding-left: 1em;\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-petrol);\n outline: 0;\n }\n .single-select__item[aria-selected] .radio-label, .single-select__item:focus .radio-label, .single-select__item.highlighted .radio-label {\n color: var(--color-weiss);\n }\n .error .single-select__group {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
|
|
1536
1536
|
|
|
1537
1537
|
var css_248z$a = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n border-style: solid;\n border-radius: 32px;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n cursor: pointer;\n }\n}";
|
|
1538
1538
|
|
|
@@ -1546,7 +1546,7 @@ var css_248z$6 = "@layer kol-theme-component {\n :host {\n display: flex;\n
|
|
|
1546
1546
|
|
|
1547
1547
|
var css_248z$5 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .tabs-button-group {\n background-color: var(--color-petrol);\n display: flex;\n }\n :host .tabs-button-group > div {\n display: inline-flex;\n }\n :host .tabs-button-group > div + div {\n margin-left: 0.25em;\n }\n .tabs-content {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n box-shadow: 0 0 0.25em gray;\n border-style: solid;\n display: grid;\n width: inherit;\n padding: calc(4 * var(--spacing));\n border-width: 2px;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n line-height: 1.25;\n cursor: pointer;\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-color: var(--color-citrin);\n border-bottom-width: 0.25em;\n border-bottom-style: solid;\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 opacity: 0.5;\n cursor: not-allowed;\n }\n button.primary,\n button.primary:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\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 color: white;\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\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 color: white;\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\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 color: var(--kolibri-color-ghost);\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n color: white;\n background-color: var(--kolibri-color-ghost);\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n box-shadow: none;\n outline: 0;\n }\n .close-button {\n width: 0;\n height: -moz-fit-content;\n height: fit-content;\n font-size: 25%;\n }\n .close-button button {\n position: relative;\n top: 0.25em;\n left: -4.25em;\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
1548
1548
|
|
|
1549
|
-
var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n
|
|
1549
|
+
var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@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: calc(8rem / var(--kolibri-root-font-size, 16));\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 textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n }\n textarea::-moz-placeholder {\n font-style: italic;\n }\n textarea::placeholder {\n font-style: italic;\n }\n textarea:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n textarea:not(.disabled, textarea:disabled):hover, textarea:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n textarea {\n width: 100%;\n }\n .error textarea {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n textarea:-moz-read-only {\n background-color: var(--background-light-grey);\n border-color: var(--border-default);\n }\n textarea:read-only {\n background-color: var(--background-light-grey);\n border-color: var(--border-default);\n }\n}";
|
|
1550
1550
|
|
|
1551
1551
|
var css_248z$3 = "@layer kol-theme-component {\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n}\n@layer kol-theme-component {\n :host {\n transform: translateX(-50%);\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n left: 50%;\n width: calc(750rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n}";
|
|
1552
1552
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/themes",
|
|
3
|
-
"version": "2.2.19
|
|
3
|
+
"version": "2.2.19",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -54,14 +54,14 @@
|
|
|
54
54
|
"eslint": "8.57.1",
|
|
55
55
|
"nodemon": "3.1.11",
|
|
56
56
|
"postcss": "8.5.6",
|
|
57
|
-
"rollup": "4.
|
|
57
|
+
"rollup": "4.55.1",
|
|
58
58
|
"rollup-plugin-postcss": "4.0.2",
|
|
59
|
-
"sass-embedded": "1.
|
|
59
|
+
"sass-embedded": "1.97.2",
|
|
60
60
|
"typescript": "5.9.3",
|
|
61
|
-
"@public-ui/components": "2.2.19
|
|
61
|
+
"@public-ui/components": "2.2.19"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
|
-
"@public-ui/components": "2.2.19
|
|
64
|
+
"@public-ui/components": "2.2.19"
|
|
65
65
|
},
|
|
66
66
|
"sideEffects": false,
|
|
67
67
|
"type": "module",
|