@public-ui/themes 2.1.9 → 2.2.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +8 -8
package/dist/index.cjs
CHANGED
|
@@ -46,7 +46,7 @@ var css_248z$3d = "@layer kol-theme-component {\n @font-face {\n font-family
|
|
|
46
46
|
|
|
47
47
|
var css_248z$3c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding: 0 0.5em;\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n color: var(--color-grey);\n }\n}";
|
|
48
48
|
|
|
49
|
-
var css_248z$3b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n .kol-input.disabled .input {\n cursor: not-allowed;\n }\n .kol-input.default:not(.hide-label) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input.switch:not(.hide-label) {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n order: 2;\n height: 100%;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n order: 3;\n height: 100%;\n padding-top: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-black);\n }\n .kol-input > .kol-alert-wc {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n .kol-input.error input:focus {\n outline-color: var(--color-red);\n }\n input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input:focus {\n border-color: var(--color-midnight);\n }\n input:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n kol-icon:hover ~ input,\n input:hover {\n border-color: var(--color-midnight);\n }\n /* CHECKBOX */\n .kol-input:not(.button) label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .icon {\n display: flex;\n color: var(--color-white);\n margin: calc(-2rem / var(--kolibri-root-font-size, 16)) 0 0 calc(4rem / var(--kolibri-root-font-size, 16));\n /* visually align */\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* SWITCH */\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n :host .kol-input.switch .checkbox-input-element {\n display: block;\n }\n :host .kol-input.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n color: #000;\n }\n :host .kol-input.switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n :host .kol-input.switch .icon::part(icon)::before {\n content: \"add\";\n }\n :host .kol-input.switch.checked .icon {\n transform: translate(2em, -50%);\n }\n :host .kol-input.switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n :host .kol-input.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n :host .kol-input.switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* BUTTON BADGE */\n .kol-input.button {\n row-gap: calc(8rem / var(--kolibri-root-font-size, 16));\n /* Outer, clickable, container for the checkbox */\n /* Inner, visual, element for the checkbox */\n /* Outer, clickable, container for the label */\n /* Inner, visual, element for the label */\n /* States */\n }\n .kol-input.button .checkbox-container {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-input.button .icon {\n background-color: var(--color-silver);\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n height: auto;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n min-width: calc(32rem / var(--kolibri-root-font-size, 16));\n /* Stable position when paddings are changing */\n }\n .kol-input.button .icon::part(icon) {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .hide-label.kol-input.button .icon {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .icon {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-input.button .input-label {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n padding-top: 0;\n }\n .kol-input.button .input-label-span {\n align-items: center;\n background-color: var(--color-silver);\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n display: flex;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(12rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .input-label-span {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n padding-left: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button.checked .icon, .kol-input.button.checked .input-label-span {\n background-color: var(--color-ice);\n }\n .kol-input.button:not(.disabled):hover .icon, .kol-input.button:not(.disabled):hover .input-label-span {\n background-color: var(--color-midnight);\n color: var(--color-silver);\n }\n .kol-input.button:focus-within {\n outline: none;\n }\n .kol-input.button:focus-within .icon,\n .kol-input.button:focus-within .input-label-span {\n min-height: calc(34rem / var(--kolibri-root-font-size, 16));\n border: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n background-clip: content-box;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button:focus-within:not(.hide-label) .icon {\n border-right: none;\n padding-right: 0;\n }\n .kol-input.button:focus-within:not(.hide-label) .input-label-span {\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .icon {\n border-right: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-right: calc(2rem / var(--kolibri-root-font-size, 16));\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .input-label-span {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n border-right: none;\n padding-right: 0;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .kol-input.msg-type-info .input {\n border-color: var(--color-midnight);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-info .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-info:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-midnight);\n }\n .kol-input.msg-type-success .input {\n border-color: var(--color-green);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-success .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-success:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-green);\n }\n .kol-input.msg-type-warning .input {\n border-color: var(--color-orange);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-warning .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-warning:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-orange);\n }\n .msg {\n border-width: 0;\n background-color: transparent;\n align-items: start;\n }\n .msg .heading {\n place-items: flex-start;\n }\n .msg .heading .heading-icon {\n place-self: baseline;\n padding-top: 0;\n place-items: baseline;\n }\n .msg .heading .heading-icon::part(icon) {\n line-height: 1.5;\n }\n .msg .heading .heading-content {\n line-height: 1.5;\n align-self: center;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n .kol-alert-wc {\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n font-weight: 700;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error,\n .msg-type-error {\n border-color: var(--color-red);\n color: var(--color-red);\n }\n .error.msg .heading-icon,\n .msg-type-error.msg .heading-icon {\n color: var(--color-red);\n }\n .error .heading-icon::part(icon)::before,\n .msg-type-error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info,\n .msg-type-info {\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .info.msg .heading-icon,\n .msg-type-info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .info .heading-icon::part(icon)::before,\n .msg-type-info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success,\n .msg-type-success {\n border-color: var(--color-green);\n color: var(--color-green);\n }\n .success.msg .heading-icon,\n .msg-type-success.msg .heading-icon {\n color: var(--color-green);\n }\n .success .heading-icon::part(icon)::before,\n .msg-type-success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning,\n .msg-type-warning {\n border-color: var(--color-orange);\n color: var(--color-orange);\n }\n .warning.msg .heading-icon,\n .msg-type-warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .warning .heading-icon::part(icon)::before,\n .msg-type-warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .heading-icon {\n color: white;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n }\n}";
|
|
49
|
+
var css_248z$3b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n .kol-input.disabled .input {\n cursor: not-allowed;\n }\n .kol-input.default:not(.hide-label) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input.switch:not(.hide-label) {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n order: 2;\n height: 100%;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n order: 3;\n height: 100%;\n padding-top: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-black);\n }\n .kol-input > .kol-alert-wc {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n .kol-input.error input:focus {\n outline-color: var(--color-red) !important;\n }\n input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input:focus {\n border-color: var(--color-midnight);\n }\n input:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n kol-icon:hover ~ input,\n input:hover {\n border-color: var(--color-midnight);\n }\n /* CHECKBOX */\n .kol-input:not(.button) label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .icon {\n display: flex;\n color: var(--color-white);\n margin: calc(-2rem / var(--kolibri-root-font-size, 16)) 0 0 calc(4rem / var(--kolibri-root-font-size, 16));\n /* visually align */\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* SWITCH */\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:focus {\n outline-color: var(--color-ocean);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n :host .kol-input.switch .checkbox-input-element {\n display: block;\n }\n :host .kol-input.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n color: #000;\n }\n :host .kol-input.switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n :host .kol-input.switch .icon::part(icon)::before {\n content: \"add\";\n }\n :host .kol-input.switch.checked .icon {\n transform: translate(2em, -50%);\n }\n :host .kol-input.switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n :host .kol-input.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n :host .kol-input.switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* BUTTON BADGE */\n .kol-input.button {\n row-gap: calc(8rem / var(--kolibri-root-font-size, 16));\n /* Outer, clickable, container for the checkbox */\n /* Inner, visual, element for the checkbox */\n /* Outer, clickable, container for the label */\n /* Inner, visual, element for the label */\n /* States */\n }\n .kol-input.button .checkbox-container {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-input.button .icon {\n background-color: var(--color-silver);\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n height: auto;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n min-width: calc(32rem / var(--kolibri-root-font-size, 16));\n /* Stable position when paddings are changing */\n }\n .kol-input.button .icon::part(icon) {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .hide-label.kol-input.button .icon {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .icon {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-input.button .input-label {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n padding-top: 0;\n }\n .kol-input.button .input-label-span {\n align-items: center;\n background-color: var(--color-silver);\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n display: flex;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(12rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .input-label-span {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n padding-left: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button.checked .icon, .kol-input.button.checked .input-label-span {\n background-color: var(--color-ice);\n }\n .kol-input.button:not(.disabled):hover .icon, .kol-input.button:not(.disabled):hover .input-label-span {\n background-color: var(--color-midnight);\n color: var(--color-silver);\n }\n .kol-input.button:focus-within {\n outline: none;\n }\n .kol-input.button:focus-within .icon,\n .kol-input.button:focus-within .input-label-span {\n min-height: calc(34rem / var(--kolibri-root-font-size, 16));\n border: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n background-clip: content-box;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button:focus-within:not(.hide-label) .icon {\n border-right: none;\n padding-right: 0;\n }\n .kol-input.button:focus-within:not(.hide-label) .input-label-span {\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .icon {\n border-right: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-right: calc(2rem / var(--kolibri-root-font-size, 16));\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .input-label-span {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n border-right: none;\n padding-right: 0;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .kol-input.msg-type-info .input {\n border-color: var(--color-midnight);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-info .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-info:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-midnight);\n }\n .kol-input.msg-type-success .input {\n border-color: var(--color-green);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-success .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-success:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-green);\n }\n .kol-input.msg-type-warning .input {\n border-color: var(--color-orange);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-warning .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-warning:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-orange);\n }\n .msg {\n border-width: 0;\n background-color: transparent;\n align-items: start;\n }\n .msg .heading {\n place-items: flex-start;\n }\n .msg .heading .heading-icon {\n place-self: baseline;\n padding-top: 0;\n place-items: baseline;\n }\n .msg .heading .heading-icon::part(icon) {\n line-height: 1.5;\n }\n .msg .heading .heading-content {\n line-height: 1.5;\n align-self: center;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n .kol-alert-wc {\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n font-weight: 700;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error,\n .msg-type-error {\n border-color: var(--color-red);\n color: var(--color-red);\n }\n .error.msg .heading-icon,\n .msg-type-error.msg .heading-icon {\n color: var(--color-red);\n }\n .error .heading-icon::part(icon)::before,\n .msg-type-error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info,\n .msg-type-info {\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .info.msg .heading-icon,\n .msg-type-info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .info .heading-icon::part(icon)::before,\n .msg-type-info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success,\n .msg-type-success {\n border-color: var(--color-green);\n color: var(--color-green);\n }\n .success.msg .heading-icon,\n .msg-type-success.msg .heading-icon {\n color: var(--color-green);\n }\n .success .heading-icon::part(icon)::before,\n .msg-type-success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning,\n .msg-type-warning {\n border-color: var(--color-orange);\n color: var(--color-orange);\n }\n .warning.msg .heading-icon,\n .msg-type-warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .warning .heading-icon::part(icon)::before,\n .msg-type-warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .heading-icon {\n color: white;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n }\n}";
|
|
50
50
|
|
|
51
51
|
var css_248z$3a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: 0.25em;\n display: grid;\n grid-template-areas: \"error error\" \"label label\" \"input input\" \"hint hint\";\n grid-template-columns: 1fr calc(115rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input:has(> .counter) {\n grid-template-areas: \"error error\" \"label counter\" \"input input\" \"hint hint\";\n }\n .kol-input .error {\n order: 1;\n grid-area: error;\n }\n .kol-input label {\n order: 2;\n grid-area: label;\n color: var(--color-black);\n }\n .kol-input .counter {\n order: 2;\n grid-area: counter;\n justify-self: end;\n }\n .kol-input .input {\n order: 3;\n grid-area: input;\n }\n .kol-input .hint {\n order: 4;\n font-size: 0.875em;\n font-style: italic;\n grid-area: hint;\n }\n .kol-input.disabled label {\n opacity: 1;\n }\n .kol-input.disabled .input {\n background-color: var(--color-smoke);\n border-color: var(--color-granite);\n color: var(--color-black);\n }\n .input {\n background-color: var(--color-white);\n border-color: var(--color-grey);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: 1em;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 0.875em;\n padding-left: 0.875em;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5em;\n padding-right: 0.5em;\n }\n .input:hover {\n border-color: var(--color-midnight);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .kol-input.msg-type-info .input {\n border-color: var(--color-midnight);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-info .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-info:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-midnight);\n }\n .kol-input.msg-type-success .input {\n border-color: var(--color-green);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-success .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-success:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-green);\n }\n .kol-input.msg-type-warning .input {\n border-color: var(--color-orange);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-warning .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-warning:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-orange);\n }\n .msg {\n border-width: 0;\n background-color: transparent;\n align-items: start;\n }\n .msg .heading {\n place-items: flex-start;\n }\n .msg .heading .heading-icon {\n place-self: baseline;\n padding-top: 0;\n place-items: baseline;\n }\n .msg .heading .heading-icon::part(icon) {\n line-height: 1.5;\n }\n .msg .heading .heading-content {\n line-height: 1.5;\n align-self: center;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n .kol-alert-wc {\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n font-weight: 700;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error,\n .msg-type-error {\n border-color: var(--color-red);\n color: var(--color-red);\n }\n .error.msg .heading-icon,\n .msg-type-error.msg .heading-icon {\n color: var(--color-red);\n }\n .error .heading-icon::part(icon)::before,\n .msg-type-error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info,\n .msg-type-info {\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .info.msg .heading-icon,\n .msg-type-info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .info .heading-icon::part(icon)::before,\n .msg-type-info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success,\n .msg-type-success {\n border-color: var(--color-green);\n color: var(--color-green);\n }\n .success.msg .heading-icon,\n .msg-type-success.msg .heading-icon {\n color: var(--color-green);\n }\n .success .heading-icon::part(icon)::before,\n .msg-type-success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning,\n .msg-type-warning {\n border-color: var(--color-orange);\n color: var(--color-orange);\n }\n .warning.msg .heading-icon,\n .msg-type-warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .warning .heading-icon::part(icon)::before,\n .msg-type-warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .heading-icon {\n color: white;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-grey);\n }\n input[disabled], input[disabled]:focus {\n cursor: not-allowed;\n opacity: 1;\n }\n .input {\n padding: 0 1em;\n }\n .input > input:first-child {\n padding-left: 0.375em;\n }\n .input > input:last-child {\n padding-right: 0.375em;\n }\n}\n@layer kol-theme-component {\n input {\n background-color: transparent;\n }\n input:not([type=color]):read-only, input:disabled {\n cursor: not-allowed;\n }\n}";
|
|
52
52
|
|
|
@@ -182,7 +182,7 @@ var css_248z$2x = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2
|
|
|
182
182
|
|
|
183
183
|
var css_248z$2w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
|
|
184
184
|
|
|
185
|
-
var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
185
|
+
var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
186
186
|
|
|
187
187
|
var css_248z$2u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .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::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 :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
|
|
188
188
|
|
package/dist/index.mjs
CHANGED
|
@@ -44,7 +44,7 @@ var css_248z$3d = "@layer kol-theme-component {\n @font-face {\n font-family
|
|
|
44
44
|
|
|
45
45
|
var css_248z$3c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding: 0 0.5em;\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n color: var(--color-grey);\n }\n}";
|
|
46
46
|
|
|
47
|
-
var css_248z$3b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n .kol-input.disabled .input {\n cursor: not-allowed;\n }\n .kol-input.default:not(.hide-label) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input.switch:not(.hide-label) {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n order: 2;\n height: 100%;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n order: 3;\n height: 100%;\n padding-top: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-black);\n }\n .kol-input > .kol-alert-wc {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n .kol-input.error input:focus {\n outline-color: var(--color-red);\n }\n input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input:focus {\n border-color: var(--color-midnight);\n }\n input:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n kol-icon:hover ~ input,\n input:hover {\n border-color: var(--color-midnight);\n }\n /* CHECKBOX */\n .kol-input:not(.button) label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .icon {\n display: flex;\n color: var(--color-white);\n margin: calc(-2rem / var(--kolibri-root-font-size, 16)) 0 0 calc(4rem / var(--kolibri-root-font-size, 16));\n /* visually align */\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* SWITCH */\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n :host .kol-input.switch .checkbox-input-element {\n display: block;\n }\n :host .kol-input.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n color: #000;\n }\n :host .kol-input.switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n :host .kol-input.switch .icon::part(icon)::before {\n content: \"add\";\n }\n :host .kol-input.switch.checked .icon {\n transform: translate(2em, -50%);\n }\n :host .kol-input.switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n :host .kol-input.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n :host .kol-input.switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* BUTTON BADGE */\n .kol-input.button {\n row-gap: calc(8rem / var(--kolibri-root-font-size, 16));\n /* Outer, clickable, container for the checkbox */\n /* Inner, visual, element for the checkbox */\n /* Outer, clickable, container for the label */\n /* Inner, visual, element for the label */\n /* States */\n }\n .kol-input.button .checkbox-container {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-input.button .icon {\n background-color: var(--color-silver);\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n height: auto;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n min-width: calc(32rem / var(--kolibri-root-font-size, 16));\n /* Stable position when paddings are changing */\n }\n .kol-input.button .icon::part(icon) {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .hide-label.kol-input.button .icon {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .icon {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-input.button .input-label {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n padding-top: 0;\n }\n .kol-input.button .input-label-span {\n align-items: center;\n background-color: var(--color-silver);\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n display: flex;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(12rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .input-label-span {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n padding-left: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button.checked .icon, .kol-input.button.checked .input-label-span {\n background-color: var(--color-ice);\n }\n .kol-input.button:not(.disabled):hover .icon, .kol-input.button:not(.disabled):hover .input-label-span {\n background-color: var(--color-midnight);\n color: var(--color-silver);\n }\n .kol-input.button:focus-within {\n outline: none;\n }\n .kol-input.button:focus-within .icon,\n .kol-input.button:focus-within .input-label-span {\n min-height: calc(34rem / var(--kolibri-root-font-size, 16));\n border: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n background-clip: content-box;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button:focus-within:not(.hide-label) .icon {\n border-right: none;\n padding-right: 0;\n }\n .kol-input.button:focus-within:not(.hide-label) .input-label-span {\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .icon {\n border-right: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-right: calc(2rem / var(--kolibri-root-font-size, 16));\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .input-label-span {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n border-right: none;\n padding-right: 0;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .kol-input.msg-type-info .input {\n border-color: var(--color-midnight);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-info .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-info:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-midnight);\n }\n .kol-input.msg-type-success .input {\n border-color: var(--color-green);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-success .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-success:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-green);\n }\n .kol-input.msg-type-warning .input {\n border-color: var(--color-orange);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-warning .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-warning:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-orange);\n }\n .msg {\n border-width: 0;\n background-color: transparent;\n align-items: start;\n }\n .msg .heading {\n place-items: flex-start;\n }\n .msg .heading .heading-icon {\n place-self: baseline;\n padding-top: 0;\n place-items: baseline;\n }\n .msg .heading .heading-icon::part(icon) {\n line-height: 1.5;\n }\n .msg .heading .heading-content {\n line-height: 1.5;\n align-self: center;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n .kol-alert-wc {\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n font-weight: 700;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error,\n .msg-type-error {\n border-color: var(--color-red);\n color: var(--color-red);\n }\n .error.msg .heading-icon,\n .msg-type-error.msg .heading-icon {\n color: var(--color-red);\n }\n .error .heading-icon::part(icon)::before,\n .msg-type-error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info,\n .msg-type-info {\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .info.msg .heading-icon,\n .msg-type-info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .info .heading-icon::part(icon)::before,\n .msg-type-info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success,\n .msg-type-success {\n border-color: var(--color-green);\n color: var(--color-green);\n }\n .success.msg .heading-icon,\n .msg-type-success.msg .heading-icon {\n color: var(--color-green);\n }\n .success .heading-icon::part(icon)::before,\n .msg-type-success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning,\n .msg-type-warning {\n border-color: var(--color-orange);\n color: var(--color-orange);\n }\n .warning.msg .heading-icon,\n .msg-type-warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .warning .heading-icon::part(icon)::before,\n .msg-type-warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .heading-icon {\n color: white;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n }\n}";
|
|
47
|
+
var css_248z$3b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* INPUT */\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input:not(.disabled) :is(.input, label) {\n cursor: pointer;\n }\n .kol-input.disabled .input {\n cursor: not-allowed;\n }\n .kol-input.default:not(.hide-label) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input.switch:not(.hide-label) {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n gap: 0.4em;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n gap: 0.4em;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n order: 2;\n height: 100%;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n order: 3;\n height: 100%;\n padding-top: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-black);\n }\n .kol-input > .kol-alert-wc {\n order: 1;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n .kol-input.error input:focus {\n outline-color: var(--color-red) !important;\n }\n input {\n order: 1;\n width: 100%;\n border-color: var(--color-grey);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input:focus {\n border-color: var(--color-midnight);\n }\n input:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n kol-icon:hover ~ input,\n input:hover {\n border-color: var(--color-midnight);\n }\n /* CHECKBOX */\n .kol-input:not(.button) label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:before {\n content: \"\";\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-midnight);\n border-color: var(--color-midnight);\n }\n .kol-input.default .icon {\n display: flex;\n color: var(--color-white);\n margin: calc(-2rem / var(--kolibri-root-font-size, 16)) 0 0 calc(4rem / var(--kolibri-root-font-size, 16));\n /* visually align */\n }\n .default .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n margin-top: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon::part(icon)::before {\n content: \"check\";\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* SWITCH */\n :host .kol-input.switch input[type=checkbox] {\n min-width: 3.5em;\n width: 3.5em;\n background-color: var(--color-grey);\n border-width: 0;\n height: 1.5em;\n border-radius: 1.25em;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n transition: 0.5;\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-midnight);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:focus {\n outline-color: var(--color-ocean);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate {\n --tw-bg-opacity: 1;\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n :host .kol-input.switch .checkbox-input-element {\n display: block;\n }\n :host .kol-input.switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n color: #000;\n }\n :host .kol-input.switch .icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n }\n :host .kol-input.switch .icon::part(icon)::before {\n content: \"add\";\n }\n :host .kol-input.switch.checked .icon {\n transform: translate(2em, -50%);\n }\n :host .kol-input.switch.checked .icon::part(icon)::before {\n content: \"check\";\n }\n :host .kol-input.switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n :host .kol-input.switch.indeterminate .icon::part(icon)::before {\n content: \"remove\";\n }\n /* BUTTON BADGE */\n .kol-input.button {\n row-gap: calc(8rem / var(--kolibri-root-font-size, 16));\n /* Outer, clickable, container for the checkbox */\n /* Inner, visual, element for the checkbox */\n /* Outer, clickable, container for the label */\n /* Inner, visual, element for the label */\n /* States */\n }\n .kol-input.button .checkbox-container {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-input.button .icon {\n background-color: var(--color-silver);\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n height: auto;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n min-width: calc(32rem / var(--kolibri-root-font-size, 16));\n /* Stable position when paddings are changing */\n }\n .kol-input.button .icon::part(icon) {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .hide-label.kol-input.button .icon {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .icon {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-input.button .input-label {\n align-items: center;\n display: flex;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n padding-top: 0;\n }\n .kol-input.button .input-label-span {\n align-items: center;\n background-color: var(--color-silver);\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n display: flex;\n min-height: calc(32rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(12rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n [data-label-align=left]:not(.hide-label).kol-input.button .input-label-span {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n padding-left: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button.checked .icon, .kol-input.button.checked .input-label-span {\n background-color: var(--color-ice);\n }\n .kol-input.button:not(.disabled):hover .icon, .kol-input.button:not(.disabled):hover .input-label-span {\n background-color: var(--color-midnight);\n color: var(--color-silver);\n }\n .kol-input.button:focus-within {\n outline: none;\n }\n .kol-input.button:focus-within .icon,\n .kol-input.button:focus-within .input-label-span {\n min-height: calc(34rem / var(--kolibri-root-font-size, 16));\n border: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n background-clip: content-box;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button:focus-within:not(.hide-label) .icon {\n border-right: none;\n padding-right: 0;\n }\n .kol-input.button:focus-within:not(.hide-label) .input-label-span {\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .icon {\n border-right: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-right: calc(2rem / var(--kolibri-root-font-size, 16));\n border-left: none;\n padding-left: 0;\n }\n .kol-input.button[data-label-align=left]:focus-within:not(.hide-label) .input-label-span {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-ocean);\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n border-right: none;\n padding-right: 0;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .kol-input.msg-type-info .input {\n border-color: var(--color-midnight);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-info .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-info:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-midnight);\n }\n .kol-input.msg-type-success .input {\n border-color: var(--color-green);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-success .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-success:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-green);\n }\n .kol-input.msg-type-warning .input {\n border-color: var(--color-orange);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-warning .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-warning:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-orange);\n }\n .msg {\n border-width: 0;\n background-color: transparent;\n align-items: start;\n }\n .msg .heading {\n place-items: flex-start;\n }\n .msg .heading .heading-icon {\n place-self: baseline;\n padding-top: 0;\n place-items: baseline;\n }\n .msg .heading .heading-icon::part(icon) {\n line-height: 1.5;\n }\n .msg .heading .heading-content {\n line-height: 1.5;\n align-self: center;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n .kol-alert-wc {\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n font-weight: 700;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error,\n .msg-type-error {\n border-color: var(--color-red);\n color: var(--color-red);\n }\n .error.msg .heading-icon,\n .msg-type-error.msg .heading-icon {\n color: var(--color-red);\n }\n .error .heading-icon::part(icon)::before,\n .msg-type-error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info,\n .msg-type-info {\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .info.msg .heading-icon,\n .msg-type-info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .info .heading-icon::part(icon)::before,\n .msg-type-info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success,\n .msg-type-success {\n border-color: var(--color-green);\n color: var(--color-green);\n }\n .success.msg .heading-icon,\n .msg-type-success.msg .heading-icon {\n color: var(--color-green);\n }\n .success .heading-icon::part(icon)::before,\n .msg-type-success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning,\n .msg-type-warning {\n border-color: var(--color-orange);\n color: var(--color-orange);\n }\n .warning.msg .heading-icon,\n .msg-type-warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .warning .heading-icon::part(icon)::before,\n .msg-type-warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .heading-icon {\n color: white;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n }\n}";
|
|
48
48
|
|
|
49
49
|
var css_248z$3a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: 0.25em;\n display: grid;\n grid-template-areas: \"error error\" \"label label\" \"input input\" \"hint hint\";\n grid-template-columns: 1fr calc(115rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input:has(> .counter) {\n grid-template-areas: \"error error\" \"label counter\" \"input input\" \"hint hint\";\n }\n .kol-input .error {\n order: 1;\n grid-area: error;\n }\n .kol-input label {\n order: 2;\n grid-area: label;\n color: var(--color-black);\n }\n .kol-input .counter {\n order: 2;\n grid-area: counter;\n justify-self: end;\n }\n .kol-input .input {\n order: 3;\n grid-area: input;\n }\n .kol-input .hint {\n order: 4;\n font-size: 0.875em;\n font-style: italic;\n grid-area: hint;\n }\n .kol-input.disabled label {\n opacity: 1;\n }\n .kol-input.disabled .input {\n background-color: var(--color-smoke);\n border-color: var(--color-granite);\n color: var(--color-black);\n }\n .input {\n background-color: var(--color-white);\n border-color: var(--color-grey);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: 1em;\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: 0.875em;\n padding-left: 0.875em;\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: 0.5em;\n padding-right: 0.5em;\n }\n .input:hover {\n border-color: var(--color-midnight);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error .input {\n border-color: var(--color-red);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .kol-input.msg-type-info .input {\n border-color: var(--color-midnight);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-info .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-info:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-midnight);\n }\n .kol-input.msg-type-success .input {\n border-color: var(--color-green);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-success .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-success:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-green);\n }\n .kol-input.msg-type-warning .input {\n border-color: var(--color-orange);\n border-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.msg-type-warning .input:hover {\n border-color: var(--color-midnight);\n }\n .kol-input.msg-type-warning:not(.hidden-error) {\n padding-left: 1em;\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-orange);\n }\n .msg {\n border-width: 0;\n background-color: transparent;\n align-items: start;\n }\n .msg .heading {\n place-items: flex-start;\n }\n .msg .heading .heading-icon {\n place-self: baseline;\n padding-top: 0;\n place-items: baseline;\n }\n .msg .heading .heading-icon::part(icon) {\n line-height: 1.5;\n }\n .msg .heading .heading-content {\n line-height: 1.5;\n align-self: center;\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-grey);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-red);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-midnight);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-green);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-orange);\n }\n .kol-alert-wc {\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: var(--spacing);\n font-weight: 700;\n }\n .default {\n border-color: var(--color-grey);\n }\n .default.msg .heading-icon {\n color: var(--color-grey);\n }\n .error,\n .msg-type-error {\n border-color: var(--color-red);\n color: var(--color-red);\n }\n .error.msg .heading-icon,\n .msg-type-error.msg .heading-icon {\n color: var(--color-red);\n }\n .error .heading-icon::part(icon)::before,\n .msg-type-error .heading-icon::part(icon)::before {\n content: \"error\";\n }\n .info,\n .msg-type-info {\n border-color: var(--color-midnight);\n color: var(--color-midnight);\n }\n .info.msg .heading-icon,\n .msg-type-info.msg .heading-icon {\n color: var(--color-midnight);\n }\n .info .heading-icon::part(icon)::before,\n .msg-type-info .heading-icon::part(icon)::before {\n content: \"info\";\n }\n .success,\n .msg-type-success {\n border-color: var(--color-green);\n color: var(--color-green);\n }\n .success.msg .heading-icon,\n .msg-type-success.msg .heading-icon {\n color: var(--color-green);\n }\n .success .heading-icon::part(icon)::before,\n .msg-type-success .heading-icon::part(icon)::before {\n content: \"check_circle\";\n }\n .warning,\n .msg-type-warning {\n border-color: var(--color-orange);\n color: var(--color-orange);\n }\n .warning.msg .heading-icon,\n .msg-type-warning.msg .heading-icon {\n color: var(--color-orange);\n }\n .warning .heading-icon::part(icon)::before,\n .msg-type-warning .heading-icon::part(icon)::before {\n content: \"warning\";\n }\n .heading-icon {\n color: white;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .heading-icon::part(icon) {\n font-family: \"Material Symbols Rounded\";\n font-weight: 900;\n font-variation-settings: \"FILL\" 1;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-grey);\n }\n input[disabled], input[disabled]:focus {\n cursor: not-allowed;\n opacity: 1;\n }\n .input {\n padding: 0 1em;\n }\n .input > input:first-child {\n padding-left: 0.375em;\n }\n .input > input:last-child {\n padding-right: 0.375em;\n }\n}\n@layer kol-theme-component {\n input {\n background-color: transparent;\n }\n input:not([type=color]):read-only, input:disabled {\n cursor: not-allowed;\n }\n}";
|
|
50
50
|
|
|
@@ -180,7 +180,7 @@ var css_248z$2x = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2
|
|
|
180
180
|
|
|
181
181
|
var css_248z$2w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
|
|
182
182
|
|
|
183
|
-
var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
183
|
+
var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
184
184
|
|
|
185
185
|
var css_248z$2u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .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::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 :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
|
|
186
186
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/themes",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-alpha.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -44,22 +44,22 @@
|
|
|
44
44
|
"wcag"
|
|
45
45
|
],
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@rollup/plugin-commonjs": "28.0.
|
|
47
|
+
"@rollup/plugin-commonjs": "28.0.1",
|
|
48
48
|
"@rollup/plugin-node-resolve": "15.3.0",
|
|
49
|
-
"@rollup/plugin-typescript": "12.1.
|
|
49
|
+
"@rollup/plugin-typescript": "12.1.1",
|
|
50
50
|
"@typescript-eslint/eslint-plugin": "7.18.0",
|
|
51
51
|
"@typescript-eslint/parser": "7.18.0",
|
|
52
52
|
"eslint": "8.57.1",
|
|
53
53
|
"nodemon": "3.1.7",
|
|
54
54
|
"postcss": "8.4.47",
|
|
55
|
-
"rollup": "4.
|
|
55
|
+
"rollup": "4.24.3",
|
|
56
56
|
"rollup-plugin-postcss": "4.0.2",
|
|
57
|
-
"sass": "1.
|
|
58
|
-
"typescript": "5.6.
|
|
59
|
-
"@public-ui/components": "2.
|
|
57
|
+
"sass": "1.80.5",
|
|
58
|
+
"typescript": "5.6.3",
|
|
59
|
+
"@public-ui/components": "2.2.0-alpha.0"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
|
-
"@public-ui/components": "2.
|
|
62
|
+
"@public-ui/components": "2.2.0-alpha.0"
|
|
63
63
|
},
|
|
64
64
|
"sideEffects": false,
|
|
65
65
|
"type": "module",
|