@public-ui/themes 2.0.0-rc.11 → 2.0.0-rc.13
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/README.md +37 -4
- package/dist/index.cjs +277 -406
- package/dist/index.d.ts +2 -53
- package/dist/index.mjs +277 -405
- package/package.json +11 -11
package/dist/index.cjs
CHANGED
|
@@ -4334,10 +4334,10 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
|
|
|
4334
4334
|
height: 1.25em;
|
|
4335
4335
|
left: 2px;
|
|
4336
4336
|
}
|
|
4337
|
-
|
|
4337
|
+
&.checked .icon {
|
|
4338
4338
|
transform: translate(2em, -50%);
|
|
4339
4339
|
}
|
|
4340
|
-
|
|
4340
|
+
&.indeterminate .icon {
|
|
4341
4341
|
transform: translate(1em, -50%);
|
|
4342
4342
|
}
|
|
4343
4343
|
}
|
|
@@ -6048,168 +6048,118 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
|
|
|
6048
6048
|
}`
|
|
6049
6049
|
});
|
|
6050
6050
|
|
|
6051
|
-
var css_248z$
|
|
6051
|
+
var css_248z$A = "@layer kol-theme-component {\n .accordion {\n display: grid;\n background: var(--color-white);\n }\n .accordion-heading {\n border: 1px solid var(--color-primary-60);\n font-size: 1.3125rem; /* h3 font-size */\n }\n .headline {\n margin: 0;\n font-weight: normal;\n }\n .accordion-button .button {\n padding: 0 2rem;\n }\n .content {\n padding: 2rem 2rem 2.5rem;\n }\n}";
|
|
6052
6052
|
|
|
6053
|
-
var css_248z$
|
|
6053
|
+
var css_248z$z = "@layer kol-theme-component {\n .alert {\n background-color: white;\n border: 1px solid var(--color-black);\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\n }\n .heading-icon {\n align-items: center;\n display: flex;\n flex-shrink: 0;\n font-size: 1.5rem;\n height: 100%;\n justify-content: center;\n width: 2.5rem;\n }\n .default .heading-icon {\n background: var(--color-secondary-40);\n }\n .info .heading-icon {\n background: var(--color-blue);\n color: var(--color-white);\n }\n .success .heading-icon {\n background: var(--color-green);\n color: var(--color-white);\n }\n .warning .heading-icon {\n background: var(--color-yellow);\n }\n .error .heading-icon {\n background: var(--color-red);\n color: var(--color-white);\n }\n .heading-content {\n padding: 0.625rem;\n }\n .headline {\n margin: 0 0 0.625rem 0;\n font-size: 1.3125rem; /* h3 font-size */\n }\n .close {\n align-self: flex-start;\n }\n}";
|
|
6054
6054
|
|
|
6055
|
-
var css_248z$
|
|
6055
|
+
var css_248z$y = "@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n kol-span-wc {\n align-items: center;\n border-radius: 0.3125rem;\n display: grid;\n gap: 0.5rem;\n line-height: 1.25rem;\n padding: 0.25rem 0.75rem;\n }\n kol-span-wc span {\n display: flex;\n gap: 0.25rem;\n }\n}";
|
|
6056
6056
|
|
|
6057
|
-
var css_248z$
|
|
6057
|
+
var css_248z$x = "@layer kol-theme-component {\n nav {\n width: 100%;\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n kol-link {\n display: inline;\n }\n :host kol-icon[exportparts*=separator] {\n padding: 0 0.5rem;\n }\n :host kol-icon::part(icon) {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n font-size: 0.875rem !important;\n }\n :host kol-icon::part(icon)::before {\n color: currentColor;\n font-family: \"Font Awesome 6 Free\";\n }\n :host ul > li:not(:first-child) kol-icon::part(icon)::before {\n content: \"\\f105\";\n }\n :host li > kol-link > kol-link-wc > a {\n color: red !important;\n }\n}";
|
|
6058
6058
|
|
|
6059
|
-
var css_248z$
|
|
6059
|
+
var css_248z$w = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n button {\n color: inherit;\n outline: none;\n }\n button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n button > kol-span-wc {\n border: 1px solid;\n font-size: 1.125rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.5rem 0.875rem;\n text-align: center;\n text-transform: uppercase;\n }\n button:hover:not(:disabled) .span-label {\n text-decoration: underline;\n }\n button:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .primary button > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .secondary button > kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-primary-60);\n }\n .secondary button:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .ghost button > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n text-transform: unset;\n }\n :is(.primary, .secondary, .ghost) button:disabled > kol-span-wc {\n color: var(--color-disabled-gray);\n }\n :is(.primary, .secondary) button:disabled > kol-span-wc {\n background: var(--color-secondary-40);\n border-color: var(--color-disabled-gray);\n }\n}";
|
|
6060
6060
|
|
|
6061
|
-
var css_248z$
|
|
6061
|
+
var css_248z$v = "@layer kol-theme-component {\n div {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n }\n}";
|
|
6062
6062
|
|
|
6063
|
-
var css_248z$
|
|
6063
|
+
var css_248z$u = "@layer kol-theme-component {\n button {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n button:not(:disabled):hover, button:focus {\n text-decoration: underline;\n }\n button:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n button:disabled {\n color: var(--color-disabled-gray);\n cursor: not-allowed;\n }\n}";
|
|
6064
6064
|
|
|
6065
|
-
var css_248z$
|
|
6065
|
+
var css_248z$t = "@layer kol-theme-component {\n .card {\n background-color: var(--color-white);\n border: 1px solid var(--color-primary); /* Not part of the design system, necessary because box-shadow alone is not accessible. */\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);\n margin: 2rem 0;\n }\n .header {\n border-bottom: 1px solid var(--color-primary);\n padding: 1.3125rem 2rem; /* vertical padding copied from h3 */\n }\n .header .headline {\n font-size: 1.3125rem; /* h3 font-size */\n font-weight: normal;\n margin: 0;\n }\n .content {\n padding: 2rem 2rem 2.5rem;\n }\n}";
|
|
6066
6066
|
|
|
6067
|
-
var css_248z$
|
|
6067
|
+
var css_248z$s = "@layer kol-theme-component {\n details {\n display: grid;\n width: 100%;\n }\n summary {\n margin: 0;\n padding: 0;\n }\n summary span {\n margin-left: 0.25rem;\n text-decoration: underline;\n }\n summary span:hover {\n text-decoration-thickness: 0.25em;\n }\n details > kol-indented-text {\n margin: 0.25em 0 0 0.6em;\n }\n}";
|
|
6068
6068
|
|
|
6069
|
-
var css_248z$
|
|
6069
|
+
var css_248z$r = "/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n --color-primary: #005c45;\n --color-primary-60: #00854a;\n --color-primary-40: #99beb5;\n --color-primary-20: #ccdeda;\n --color-secondary: #576164;\n --color-secondary-40: #e5e8e9;\n --color-secondary-20: #f2f3f4;\n --color-secondary-0: #ffffff;\n --color-blue: #0077b6;\n --color-petrol: #007194;\n --color-green: #00854a;\n --color-yellow: #f9e03a;\n --color-red: #c0003c;\n --color-disabled-gray: #595f73;\n --color-black: #000;\n --color-white: #fff;\n }\n :root,\n :host {\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif;\n --font-family-serif: \"BundesSerif Web\", var(--font-family);\n }\n :host {\n color: var(--color-black);\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n summary:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip-wc {\n font-size: 1.125rem;\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-white);\n }\n kol-tooltip-wc .tooltip-arrow {\n background-color: var(--color-primary);\n }\n kol-tooltip-wc .tooltip-content {\n padding: 0.5rem;\n border: 2px solid var(--color-primary);\n box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
|
|
6070
6070
|
|
|
6071
|
-
var css_248z$
|
|
6071
|
+
var css_248z$q = "@layer kol-theme-component {\n .headline {\n margin-top: 0;\n letter-spacing: 0.5;\n }\n h1 {\n font-size: 2.5rem;\n line-height: 2.8125rem;\n font-weight: normal;\n }\n h2 {\n font-size: 2rem;\n line-height: 2.3125rem;\n font-weight: normal;\n }\n h3 {\n font-size: 1.3125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h4 {\n font-size: 1.125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h5 {\n color: red;\n }\n h5:after {\n content: \" (H5 is not part of the design system.)\";\n }\n h6 {\n color: red;\n }\n h6:after {\n content: \" (H6 is not part of the design system.)\";\n }\n}";
|
|
6072
6072
|
|
|
6073
|
-
var css_248z$
|
|
6073
|
+
var css_248z$p = "@layer kol-theme-component {\n :host {\n color: inherit;\n }\n}";
|
|
6074
6074
|
|
|
6075
|
-
var css_248z$
|
|
6075
|
+
var css_248z$o = "@layer kol-theme-component {\n :host > div {\n padding: 0.9375rem;\n background-color: var(--color-secondary-20);\n border-left: 6px solid var(--color-primary);\n }\n}";
|
|
6076
6076
|
|
|
6077
|
-
var css_248z$
|
|
6077
|
+
var css_248z$n = "@layer kol-theme-component {\n :host {\n --border-width: 1px;\n --spacing: 0.25rem;\n }\n kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n }\n kol-input:not(.hide-label) {\n grid-template-columns: calc(6 * var(--spacing)) auto;\n }\n kol-input.switch:not(.hide-label) {\n grid-template-columns: calc(13 * var(--spacing)) auto;\n }\n kol-input:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .input-label {\n font-size: 1.125rem;\n font-weight: bold;\n opacity: 1;\n }\n kol-input.disabled .input-label {\n color: var(--color-disabled-gray);\n }\n .input {\n display: inline-flex;\n order: 1;\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n input {\n appearance: none;\n background-color: var(--color-white);\n opacity: 1;\n outline: none;\n transition: none;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .input-label {\n order: 2;\n padding-left: calc(2 * var(--spacing));\n }\n .error {\n order: 3;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n /* variant default */\n .default .checkbox-input-element {\n border-radius: 2px;\n border: var(--border-width) solid var(--color-primary);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .default .checkbox-input-element:is(:checked, :indeterminate) {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .default .checkbox-input-element:disabled {\n border-color: var(--color-disabled-gray);\n background-color: var(--color-secondary-40);\n }\n .default:not(.disabled):hover .checkbox-input-element {\n outline: 1px solid var(--color-primary); /* Increase visual border-width without shifting contents */\n }\n .default:not(.disabled):hover:is(.checked, .indeterminate) .checkbox-input-element {\n background: var(--color-white);\n outline-color: var(--color-primary-60);\n border-color: var(--color-primary-60);\n }\n .default .icon {\n margin-left: 0.25rem;\n }\n .default.indeterminate .icon::part(icon) {\n transform: translateY(-0.1875rem);\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"\\\\\";\n font-family: var(--font-family);\n }\n .default:is(.checked, .indeterminate) .icon {\n color: var(--color-white);\n }\n .default:is(.checked, .indeterminate):not(.disabled):hover .icon {\n color: var(--color-primary-60);\n }\n .default:is(.checked, .indeterminate).disabled .icon {\n color: var(--color-disabled-gray);\n }\n /* variant switch */\n .switch input[type=checkbox] {\n border-color: var(--color-primary);\n border-radius: 1.7em;\n border-width: 1px;\n display: block;\n transition: 0.5s background-color, border-color;\n }\n .switch input[type=checkbox]:enabled:hover {\n border-color: var(--color-primary-60);\n }\n .switch input[type=checkbox]:is(:checked, :indeterminate):enabled {\n background: var(--color-primary);\n }\n .switch input[type=checkbox]:is(:checked, :indeterminate):enabled:hover {\n background: var(--color-primary-60);\n }\n .switch input[type=checkbox]:disabled {\n border-color: var(--color-secondary);\n }\n .switch input[type=checkbox]:is(:checked, :indeterminate):disabled {\n background: var(--color-secondary-40);\n }\n .switch input[type=checkbox]::before {\n background: var(--color-white);\n border: 1px solid var(--color-primary);\n border-radius: 50%;\n height: 1.55em;\n width: 1.55em;\n left: 0;\n top: -1px;\n transform: translateX(-1px);\n }\n .switch input[type=checkbox]:indeterminate::before {\n transform: translateX(calc(50% - 2px));\n }\n .switch input[type=checkbox]:checked::before {\n transform: translateX(calc(100% - 4px));\n }\n .switch input[type=checkbox]:enabled:hover::before {\n border-color: var(--color-primary-60);\n }\n .switch input[type=checkbox]:disabled::before {\n background: var(--color-secondary-40);\n border-color: var(--color-secondary);\n }\n .switch .icon {\n display: none;\n }\n}";
|
|
6078
6078
|
|
|
6079
|
-
var css_248z$
|
|
6079
|
+
var css_248z$m = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6080
6080
|
|
|
6081
|
-
var css_248z$
|
|
6081
|
+
var css_248z$l = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6082
6082
|
|
|
6083
|
-
var css_248z$
|
|
6083
|
+
var css_248z$k = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6084
6084
|
|
|
6085
|
-
var css_248z$
|
|
6085
|
+
var css_248z$j = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n input {\n padding-top: 0.625rem;\n }\n}";
|
|
6086
6086
|
|
|
6087
|
-
var css_248z$
|
|
6087
|
+
var css_248z$i = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6088
6088
|
|
|
6089
|
-
var css_248z$
|
|
6089
|
+
var css_248z$h = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6090
6090
|
|
|
6091
|
-
var css_248z$
|
|
6091
|
+
var css_248z$g = "@layer kol-theme-component {\n kol-input:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .radio-input-wrapper {\n align-items: center;\n display: flex;\n min-height: var(--a11y-min-size);\n }\n .fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem 0.75rem;\n }\n .error {\n width: 100%;\n }\n input {\n border-width: 1px;\n opacity: 1;\n }\n input:enabled {\n border-color: var(--color-primary);\n }\n input:enabled:hover {\n border-width: 2px;\n }\n input:checked:enabled:hover {\n border-color: var(--color-primary-60);\n }\n input:disabled {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n input:checked:enabled::before {\n background-color: var(--color-primary);\n }\n input:checked:disabled::before {\n background-color: var(--color-disabled-gray);\n }\n input:checked:enabled:hover::before {\n background-color: var(--color-primary-60);\n }\n .radio-label {\n font-size: 1.125rem;\n font-weight: bold;\n padding-left: 0.75rem;\n opacity: 1;\n }\n .disabled .radio-label {\n color: var(--color-disabled-gray);\n }\n .required .radio-label-span-inner::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
|
|
6092
6092
|
|
|
6093
|
-
var css_248z$
|
|
6093
|
+
var css_248z$f = "/* https://www.cssportal.com/style-input-range/ */\n/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n input {\n border: 1px solid var(--color-primary);\n }\n input:focus {\n outline: none;\n }\n input:hover {\n border-color: var(--color-primary-60);\n }\n .inputs-wrapper {\n gap: 0.5rem;\n }\n}";
|
|
6094
6094
|
|
|
6095
|
-
var css_248z$
|
|
6095
|
+
var css_248z$e = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6096
6096
|
|
|
6097
|
-
var css_248z$
|
|
6097
|
+
var css_248z$d = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n a {\n color: inherit;\n outline: none;\n }\n a::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n a > kol-span-wc {\n border: 1px solid;\n font-size: 1.125rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.5rem 0.875rem;\n text-align: center;\n text-transform: uppercase;\n }\n a:hover:not(:disabled) .span-label {\n text-decoration: underline;\n }\n a:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .primary a > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .secondary a > kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-primary-60);\n }\n .secondary a:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .ghost a > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n text-transform: unset;\n }\n :is(.primary, .secondary, .ghost) a:disabled > kol-span-wc {\n color: var(--color-disabled-gray);\n }\n :is(.primary, .secondary) a:disabled > kol-span-wc {\n background: var(--color-secondary-40);\n border-color: var(--color-disabled-gray);\n }\n}";
|
|
6098
6098
|
|
|
6099
|
-
var css_248z$
|
|
6099
|
+
var css_248z$c = "@layer kol-theme-component {\n a {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n a:not(:disabled):hover, a:focus {\n text-decoration: underline;\n }\n a:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n}";
|
|
6100
6100
|
|
|
6101
|
-
var css_248z$
|
|
6101
|
+
var css_248z$b = "@layer kol-theme-component {\n ul {\n list-style: none;\n margin: 0px;\n padding: 0px;\n }\n nav.horizontal ul {\n display: flex;\n flex-wrap: wrap;\n }\n nav.horizontal li {\n list-style: none;\n margin-left: 1.25rem;\n margin-right: 0.25rem;\n }\n nav.horizontal li:first-child {\n margin-left: 0;\n }\n nav.horizontal li:last-child {\n margin-right: 0;\n }\n nav.vertical li {\n margin-left: 1.75rem;\n margin-right: 0.5rem;\n }\n li.list-none {\n list-style-type: none !important;\n margin-left: 0;\n }\n}";
|
|
6102
6102
|
|
|
6103
|
-
var css_248z$
|
|
6103
|
+
var css_248z$a = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32px);\n }\n}";
|
|
6104
6104
|
|
|
6105
|
-
var css_248z$
|
|
6105
|
+
var css_248z$9 = "@layer kol-theme-component {\n :host {\n font-size: 1.3125rem; /* h3 font-size */\n }\n :is(a, button) {\n color: var(--color-black);\n display: block;\n margin-left: 0.75rem;\n padding: 0.3125rem;\n text-decoration: none;\n }\n :is(a, button):hover {\n background-color: var(--color-primary);\n color: var(--color-white);\n }\n :is(a, button):focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n}";
|
|
6106
6106
|
|
|
6107
|
-
var css_248z$
|
|
6107
|
+
var css_248z$8 = "@layer kol-theme-component {\n .navigation-list {\n gap: unset;\n }\n .navigation-list > li {\n min-width: var(--a11y-min-size);\n text-align: center;\n }\n .icon::part(icon) {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n }\n .first .icon::part(icon)::before {\n content: \"\\f100\";\n }\n .previous .icon::part(icon)::before {\n content: \"\\f104\";\n }\n .next .icon::part(icon)::before {\n content: \"\\f105\";\n }\n .last .icon::part(icon)::before {\n content: \"\\f101\";\n }\n .button {\n cursor: pointer;\n display: flex;\n height: 2.75rem;\n width: 2.75rem;\n outline: none;\n }\n .button > kol-span-wc {\n margin: auto;\n display: flex;\n background-color: var(--color-white);\n border: 1px solid var(--color-primary);\n color: var(--color-black);\n font-size: 1.125rem;\n font-weight: normal;\n height: 1.875rem;\n width: 1.875rem;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button > kol-span-wc > * {\n margin: auto;\n }\n .button > kol-span-wc .icon {\n width: 1.5em;\n height: 1.5em;\n }\n .button:hover:enabled > kol-span-wc {\n background-color: var(--color-primary-20);\n border-color: var(--color-primary-60);\n color: var(--color-black);\n }\n .button:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .button:disabled > kol-span-wc, .button:disabled:hover > kol-span-wc {\n background-color: var(--color-secondary-40);\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n cursor: not-allowed;\n }\n .selected button {\n border-radius: 1.5em;\n border: none;\n color: var(--color-midnight) !important;\n font-weight: 700;\n line-height: normal;\n }\n}";
|
|
6108
6108
|
|
|
6109
|
-
var css_248z$
|
|
6109
|
+
var css_248z$7 = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-ice);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-midnight);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
|
|
6110
6110
|
|
|
6111
|
-
var css_248z$
|
|
6111
|
+
var css_248z$6 = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n select {\n border: none;\n opacity: 1;\n background: transparent;\n }\n select:first-child {\n padding-left: 0.375rem;\n }\n select:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6112
6112
|
|
|
6113
|
-
var css_248z$
|
|
6113
|
+
var css_248z$5 = "@layer kol-theme-component {\n a {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n a:not(:disabled):hover, a:focus {\n text-decoration: underline;\n }\n a:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n a {\n display: block;\n }\n}";
|
|
6114
6114
|
|
|
6115
|
-
var css_248z$
|
|
6115
|
+
var css_248z$4 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
|
|
6116
6116
|
|
|
6117
|
-
var css_248z$
|
|
6117
|
+
var css_248z$3 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n }\n :host > div:first-child {\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n border-collapse: collapse;\n }\n caption {\n height: auto;\n text-align: left;\n }\n /* visuell verstecken */\n caption {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n }\n table,\n tr,\n th,\n td {\n border: 0 solid var(--color-white);\n }\n tr {\n border-top-width: 2px;\n }\n th {\n background-color: var(--color-primary);\n color: var(--color-white);\n font-size: 1.5rem;\n }\n tbody > tr:nth-child(odd) {\n background-color: var(--color-secondary-20);\n }\n tbody > tr:hover {\n background-color: var(--color-primary);\n color: var(--color-white);\n }\n th,\n td {\n border-right-width: 2px;\n padding: 0.25em 0.5em;\n }\n th > div {\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n gap: 0.25em;\n }\n .pagination {\n padding: 0.5em;\n gap: 1rem;\n }\n th kol-button button {\n padding: 0.5rem;\n }\n /* default: [aria-sort=\"none\"] */\n [data-sort] kol-button::part(icon)::before {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n color: var(--color-white);\n content: \"\\f0dc\";\n }\n [data-sort=sort-ASC] kol-button::part(icon)::before {\n content: \"\\f0de\";\n }\n [data-sort=sort-DESC] kol-button::part(icon)::before {\n content: \"\\f0dd\";\n }\n}";
|
|
6118
6118
|
|
|
6119
|
-
var css_248z$
|
|
6119
|
+
var css_248z$2 = "@layer kol-theme-component {\n .tabs-button-group {\n border-bottom: 1px solid var(--color-primary);\n gap: 2rem;\n padding: 0 2rem;\n }\n .button {\n color: var(--color-primary);\n padding: 0 0.9375rem;\n font-family: var(--font-family-serif);\n }\n .button.selected {\n background: var(--color-primary);\n color: var(--color-white);\n }\n .button:not(:disabled):hover {\n background: var(--color-primary);\n color: var(--color-white);\n text-decoration: underline;\n }\n .button:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .button:disabled {\n color: var(--color-disabled-gray);\n cursor: not-allowed;\n }\n .tabs-content {\n padding: 2rem 2rem 2.5rem; /* Card paddings */\n }\n}";
|
|
6120
6120
|
|
|
6121
|
-
var css_248z$
|
|
6121
|
+
var css_248z$1 = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n textarea {\n border: none;\n opacity: 1;\n background: transparent;\n }\n textarea:first-child {\n padding-left: 0.375rem;\n }\n textarea:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
|
|
6122
6122
|
|
|
6123
|
-
var css_248z
|
|
6123
|
+
var css_248z = "@layer kol-theme-component {\n :host {\n top: 4.375rem;\n left: 50%;\n transform: translateX(-50%);\n }\n .toast {\n background: #fff;\n margin-top: 0.75rem;\n }\n}";
|
|
6124
6124
|
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
|
|
6129
|
-
|
|
6130
|
-
|
|
6131
|
-
"KOL-
|
|
6132
|
-
"KOL-
|
|
6133
|
-
"KOL-
|
|
6134
|
-
"KOL-
|
|
6135
|
-
"KOL-
|
|
6136
|
-
"KOL-
|
|
6137
|
-
"KOL-
|
|
6138
|
-
"KOL-
|
|
6139
|
-
"KOL-
|
|
6140
|
-
"KOL-
|
|
6141
|
-
"KOL-
|
|
6142
|
-
"KOL-
|
|
6143
|
-
"KOL-
|
|
6144
|
-
"KOL-INPUT-
|
|
6145
|
-
"KOL-INPUT-
|
|
6146
|
-
"KOL-INPUT-
|
|
6147
|
-
"KOL-INPUT-
|
|
6148
|
-
"KOL-INPUT-
|
|
6149
|
-
"KOL-
|
|
6150
|
-
"KOL-
|
|
6151
|
-
"KOL-
|
|
6152
|
-
"KOL-
|
|
6153
|
-
"KOL-
|
|
6154
|
-
"KOL-
|
|
6155
|
-
"KOL-
|
|
6156
|
-
"KOL-
|
|
6157
|
-
"KOL-
|
|
6158
|
-
"KOL-
|
|
6159
|
-
"KOL-
|
|
6160
|
-
"KOL-
|
|
6161
|
-
"KOL-
|
|
6162
|
-
"KOL-
|
|
6163
|
-
"KOL-SPIN": css_248z$6,
|
|
6164
|
-
"KOL-TABLE": css_248z$5,
|
|
6165
|
-
"KOL-TABS": css_248z$4,
|
|
6166
|
-
"KOL-TEXTAREA": css_248z$3,
|
|
6167
|
-
"KOL-TOAST-CONTAINER": css_248z$2,
|
|
6168
|
-
"KOL-TOOLTIP": css_248z$1
|
|
6169
|
-
});
|
|
6170
|
-
|
|
6171
|
-
var css_248z = "@charset \"UTF-8\";\n/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n /* token */\n --color-bleached-silk: #f2f2f2;\n --color-carbon: #333;\n --color-chilled-lemonade: #ffe695;\n --color-green: #4d7f6f;\n --color-green-light: #a7c0b8;\n --color-green-dark: #23614e;\n --color-heroic-blue: #126dff;\n --color-mercury: #ebebeb;\n --color-red-epiphyllum: #d00000;\n --color-speedwell: #595f73;\n --color-tropic-sea: #007194;\n --color-white: #fff; /* template */\n /* general */\n --colorDark: var(--color-carbon);\n --colorLight: var(--color-white); /* primary color */\n --colorPrimary: var(--color-green-dark);\n --colorPrimaryFront: var(--color-white);\n --colorPrimarySuccess: var(--color-green);\n --colorPrimarySuccessFront: var(--color-white);\n --colorPrimaryActive: var(--color-green-light);\n --colorPrimaryActiveFront: var(--color-carbon); /* secondary color */\n --colorSecondary: var(--color-white);\n --colorSecondaryFront: var(--color-carbon);\n --colorSecondarySuccess: var(--color-bleached-silk);\n --colorSecondarySuccessFront: var(--color-carbon);\n --colorSecondaryActive: var(--color-mercury);\n --colorSecondaryActiveFront: var(--color-carbon); /* text */\n --colorText: var(--color-carbon);\n --colorTextBg: var(--color-white);\n --colorTextLight: var(--color-white);\n --colorTextLightBg: var(--color-carbon);\n --colorTextDisabled: var(--color-speedwell);\n --colorTextDisabledBg: var(--color-mercury);\n --colorTextActive: var(--color-green-dark);\n --colorTextActiveBg: var(--color-white); /* signal */\n --colorSignal: var(--color-tropic-sea);\n --colorSignalFront: var(--color-white); /* colorSignalFocus hat keine Frontfarbe */\n --colorSignalFocus: var(--color-heroic-blue);\n --colorSignalSuccess: var(--color-green);\n --colorSignalSuccessFront: var(--color-white);\n --colorSignalWarn: var(--color-chilled-lemonade);\n --colorSignalWarnFront: var(--color-carbon);\n --colorSignalError: var(--color-red-epiphyllum);\n --colorSignalErrorFront: var(--color-white); /* disabled */\n --colorDisabled: var(--color-mercury);\n }\n /* font, headline, text */\n :root,\n :host {\n /* token */\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif; /* Basis-Größe: html, rem */\n --font-size: 100%;\n --line-height: 1.6875rem; /* template */\n /* h1 */\n --headline1FontSize: 2.5rem;\n --headline1LineHeight: 2.8125rem; /* h2 */\n --headline2FontSize: 2rem;\n --headline2LineHeight: 2.5rem; /* h3 */\n --headline3FontSize: 1.3125rem;\n --headline3LineHeight: 1.6875rem; /* h4 */\n --headline4FontSize: 1rem;\n --headline4LineHeight: 1.6875rem; /* text */\n --textFont: var(--font-family);\n --textFontColor: var(--colorText);\n --textFontSerif: \"BundesSerif Web\", var(--textFont);\n --textFontSize: 1rem;\n --textFontLineHeight: 1.6875rem;\n --textFontWeight: normal;\n }\n /* Abstände */\n :root,\n :host {\n /* template */\n --gap: 2rem;\n --gapDouble: calc(var(--gap) * 2);\n --gapSmall: 1.25rem; /* TODO: benötigt nur außerhalb KoliBri Komponenten? */\n --gapSmallest: 0.625rem;\n --gapLarge: 2.5rem;\n }\n /* formular */\n :root,\n :host {\n /* template */\n --formBorderWidthAndStyle: 1px solid; /* TODO: eigentlich --color-green sein, aber im Styleguide ist der Wert: #23614E */\n --formBorder: var(--formBorderWidthAndStyle) var(--colorPrimarySuccess);\n --formBorderHover: var(--formBorderWidthAndStyle) var(--colorPrimaryActive);\n --formBorderDisabled: var(--formBorderWidthAndStyle) var(--colorDisabled);\n --formBorderInvalid: var(--formBorderWidthAndStyle) var(--colorSignalError);\n --focusOutline: var(--colorSignalFocus) solid 2px;\n --formFieldBackground: var(--colorLight); /*Select option */\n --formFieldBackgroundHover: var(--colorPrimary); /* Select options */\n --formFieldBackgroundEven: var(--formFieldBackground); /* Select options */\n --formFieldBackgroundOdd: var(--colorSecondaryActive);\n --formFieldBackgroundDisabled: var(--colorSecondarySuccess);\n --formFieldTextColorDisabled: var(--colorTextDisabled);\n }\n /* ********************************* */\n /* ********************************* */\n /* ********************************* */\n /* ********************************* */\n :host {\n /* Primärfarbe und Abstufungen */\n --color-gruen-dunkel: var(--colorPrimary);\n --color-gruen: var(--colorPrimarySuccess);\n --color-gruen-hell: var(--colorPrimaryActive); /* Sekundärfarben */\n --color-weiss: var(--colorSecondary);\n --color-grau-dunkel: var(--colorSecondaryFront);\n --color-grau-hell: var(--colorSecondaryActive);\n --color-grau-weiss: var(--colorSecondarySuccess); /* Textfarben */\n --color-graublau: var(--colorTextDisabled); /* Signalfarben */\n --color-blau: var(--colorSignalFocus);\n --color-blau-dunkel: var(--colorSignal);\n --color-gelb: var(--colorSignalWarn);\n --color-rot: var(--colorSignalError);\n --color-disabled: var(--colorTextDisabled);\n --text-size: var(--textFontSize);\n --color-focus: var(--color-blau);\n --spacing: 4px;\n --color-text: var(--color-grau-dunkel);\n }\n :host {\n color: var(--color-black);\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-family: var(--textFontSerif);\n }\n h1,\n h2 {\n font-weight: var(--textFontWeight);\n }\n h1 {\n font-size: var(--headline1FontSize);\n line-height: var(--headline1LineHeight);\n }\n h2 {\n font-size: var(--headline2FontSize);\n line-height: var(--headline2LineHeight);\n }\n h3 {\n font-size: var(--headline3FontSize);\n line-height: var(--headline3LineHeight);\n }\n h4,\n h5,\n h6 {\n font-size: var(--headline4FontSize);\n line-height: var(--headline4LineHeight);\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n /* a,button,caption,input,option,select,summary,table,textarea {font-size: 1rem;} */\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n outline: var(--focusOutline);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip .area {\n background-color: var(--colorDark);\n color: var(--colorLight);\n }\n kol-tooltip kol-span-wc {\n line-height: 1.5em;\n padding: 0.5rem 0.75rem;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
|
|
6172
|
-
|
|
6173
|
-
const BZStv2 = KoliBri.createTheme("bzstv2", {
|
|
6174
|
-
GLOBAL: css_248z,
|
|
6175
|
-
"KOL-ABBR": css_248z$D,
|
|
6176
|
-
"KOL-ACCORDION": css_248z$C,
|
|
6177
|
-
"KOL-ALERT": css_248z$B,
|
|
6178
|
-
"KOL-BADGE": css_248z$A,
|
|
6179
|
-
"KOL-BREADCRUMB": css_248z$z,
|
|
6180
|
-
"KOL-BUTTON": css_248z$y,
|
|
6181
|
-
"KOL-BUTTON-GROUP": css_248z$x,
|
|
6182
|
-
"KOL-BUTTON-LINK": css_248z$w,
|
|
6183
|
-
"KOL-CARD": css_248z$v,
|
|
6184
|
-
"KOL-DETAILS": css_248z$u,
|
|
6185
|
-
"KOL-HEADING": css_248z$s,
|
|
6186
|
-
"KOL-ICON": css_248z$r,
|
|
6187
|
-
"KOL-INDENTED-TEXT": css_248z$q,
|
|
6188
|
-
"KOL-INPUT-CHECKBOX": css_248z$p,
|
|
6189
|
-
"KOL-INPUT-COLOR": css_248z$o,
|
|
6190
|
-
"KOL-INPUT-DATE": css_248z$n,
|
|
6191
|
-
"KOL-INPUT-EMAIL": css_248z$m,
|
|
6192
|
-
"KOL-INPUT-FILE": css_248z$l,
|
|
6193
|
-
"KOL-INPUT-NUMBER": css_248z$k,
|
|
6194
|
-
"KOL-INPUT-PASSWORD": css_248z$j,
|
|
6195
|
-
"KOL-INPUT-RADIO": css_248z$i,
|
|
6196
|
-
"KOL-INPUT-RANGE": css_248z$h,
|
|
6197
|
-
"KOL-INPUT-TEXT": css_248z$g,
|
|
6198
|
-
"KOL-LINK": css_248z$e,
|
|
6199
|
-
"KOL-LINK-BUTTON": css_248z$f,
|
|
6200
|
-
"KOL-LINK-GROUP": css_248z$d,
|
|
6201
|
-
"KOL-MODAL": css_248z$c,
|
|
6202
|
-
"KOL-NAV": css_248z$b,
|
|
6203
|
-
"KOL-PAGINATION": css_248z$a,
|
|
6204
|
-
"KOL-PROGRESS": css_248z$9,
|
|
6205
|
-
"KOL-SELECT": css_248z$8,
|
|
6206
|
-
"KOL-SKIP-NAV": css_248z$7,
|
|
6207
|
-
"KOL-SPIN": css_248z$6,
|
|
6208
|
-
"KOL-TABLE": css_248z$5,
|
|
6209
|
-
"KOL-TABS": css_248z$4,
|
|
6210
|
-
"KOL-TEXTAREA": css_248z$3,
|
|
6211
|
-
"KOL-TOAST-CONTAINER": css_248z$2,
|
|
6212
|
-
"KOL-TOOLTIP": css_248z$1
|
|
6125
|
+
const BZStv1 = KoliBri.createTheme("bzst-v1", {
|
|
6126
|
+
GLOBAL: css_248z$r,
|
|
6127
|
+
"KOL-ACCORDION": css_248z$A,
|
|
6128
|
+
"KOL-ALERT": css_248z$z,
|
|
6129
|
+
"KOL-BADGE": css_248z$y,
|
|
6130
|
+
"KOL-BREADCRUMB": css_248z$x,
|
|
6131
|
+
"KOL-BUTTON": css_248z$w,
|
|
6132
|
+
"KOL-BUTTON-GROUP": css_248z$v,
|
|
6133
|
+
"KOL-BUTTON-LINK": css_248z$u,
|
|
6134
|
+
"KOL-CARD": css_248z$t,
|
|
6135
|
+
"KOL-DETAILS": css_248z$s,
|
|
6136
|
+
"KOL-HEADING": css_248z$q,
|
|
6137
|
+
"KOL-ICON": css_248z$p,
|
|
6138
|
+
"KOL-INDENTED-TEXT": css_248z$o,
|
|
6139
|
+
"KOL-INPUT-CHECKBOX": css_248z$n,
|
|
6140
|
+
"KOL-INPUT-COLOR": css_248z$m,
|
|
6141
|
+
"KOL-INPUT-DATE": css_248z$l,
|
|
6142
|
+
"KOL-INPUT-EMAIL": css_248z$k,
|
|
6143
|
+
"KOL-INPUT-FILE": css_248z$j,
|
|
6144
|
+
"KOL-INPUT-NUMBER": css_248z$i,
|
|
6145
|
+
"KOL-INPUT-PASSWORD": css_248z$h,
|
|
6146
|
+
"KOL-INPUT-RADIO": css_248z$g,
|
|
6147
|
+
"KOL-INPUT-RANGE": css_248z$f,
|
|
6148
|
+
"KOL-INPUT-TEXT": css_248z$e,
|
|
6149
|
+
"KOL-LINK": css_248z$c,
|
|
6150
|
+
"KOL-LINK-BUTTON": css_248z$d,
|
|
6151
|
+
"KOL-LINK-GROUP": css_248z$b,
|
|
6152
|
+
"KOL-MODAL": css_248z$a,
|
|
6153
|
+
"KOL-NAV": css_248z$9,
|
|
6154
|
+
"KOL-PAGINATION": css_248z$8,
|
|
6155
|
+
"KOL-PROGRESS": css_248z$7,
|
|
6156
|
+
"KOL-SELECT": css_248z$6,
|
|
6157
|
+
"KOL-SKIP-NAV": css_248z$5,
|
|
6158
|
+
"KOL-SPIN": css_248z$4,
|
|
6159
|
+
"KOL-TABLE": css_248z$3,
|
|
6160
|
+
"KOL-TABS": css_248z$2,
|
|
6161
|
+
"KOL-TEXTAREA": css_248z$1,
|
|
6162
|
+
"KOL-TOAST-CONTAINER": css_248z
|
|
6213
6163
|
});
|
|
6214
6164
|
|
|
6215
6165
|
const css$4 = (input) => input.join(``);
|
|
@@ -6307,7 +6257,7 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6307
6257
|
}
|
|
6308
6258
|
kol-tooltip-wc .tooltip-area {
|
|
6309
6259
|
background-color: var(--color-white);
|
|
6310
|
-
color: var(--color-
|
|
6260
|
+
color: var(--color-black);
|
|
6311
6261
|
}
|
|
6312
6262
|
kol-tooltip-wc .tooltip-content {
|
|
6313
6263
|
border-radius: var(--border-radius);
|
|
@@ -6369,6 +6319,12 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6369
6319
|
border-color: var(--color-red);
|
|
6370
6320
|
color: var(--color-white);
|
|
6371
6321
|
}
|
|
6322
|
+
.success :is(a, button) > kol-span-wc,
|
|
6323
|
+
.success :is(a, button):disabled:hover > kol-span-wc {
|
|
6324
|
+
background-color: var(--color-green);
|
|
6325
|
+
border-color: var(--color-green);
|
|
6326
|
+
color: var(--color-white);
|
|
6327
|
+
}
|
|
6372
6328
|
.ghost :is(a, button) > kol-span-wc,
|
|
6373
6329
|
.ghost :is(a, button):disabled:hover > kol-span-wc {
|
|
6374
6330
|
border-color: var(--color-white);
|
|
@@ -6384,6 +6340,8 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6384
6340
|
.normal :is(a, button):hover > kol-span-wc,
|
|
6385
6341
|
.danger :is(a, button):active > kol-span-wc,
|
|
6386
6342
|
.danger :is(a, button):hover > kol-span-wc,
|
|
6343
|
+
.success :is(a, button):active > kol-span-wc,
|
|
6344
|
+
.success :is(a, button):hover > kol-span-wc,
|
|
6387
6345
|
.ghost :is(a, button):active > kol-span-wc,
|
|
6388
6346
|
.ghost :is(a, button):hover > kol-span-wc {
|
|
6389
6347
|
background-color: var(--color-ocean);
|
|
@@ -6404,6 +6362,7 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6404
6362
|
.secondary :is(a, button):active > kol-span-wc,
|
|
6405
6363
|
.normal :is(a, button):active > kol-span-wc,
|
|
6406
6364
|
.danger :is(a, button):active > kol-span-wc,
|
|
6365
|
+
.success :is(a, button):active > kol-span-wc,
|
|
6407
6366
|
.ghost :is(a, button):active > kol-span-wc {
|
|
6408
6367
|
border-color: var(--color-white);
|
|
6409
6368
|
box-shadow: none;
|
|
@@ -6430,6 +6389,14 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6430
6389
|
background-color: transparent;
|
|
6431
6390
|
border-color: transparent;
|
|
6432
6391
|
}
|
|
6392
|
+
/** CUSTOM_CLASS */
|
|
6393
|
+
:is(a, button).icon-only > kol-span-wc {
|
|
6394
|
+
padding: 8px;
|
|
6395
|
+
width: unset;
|
|
6396
|
+
}
|
|
6397
|
+
:is(a, button).icon-only > kol-span-wc > span > span {
|
|
6398
|
+
display: block;
|
|
6399
|
+
}
|
|
6433
6400
|
`,
|
|
6434
6401
|
"KOL-INPUT-TEXT": css$4`
|
|
6435
6402
|
kol-input {
|
|
@@ -7973,11 +7940,11 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
7973
7940
|
width: 100%;
|
|
7974
7941
|
min-height: 44px;
|
|
7975
7942
|
}
|
|
7976
|
-
:host kol-input.default {
|
|
7943
|
+
:host kol-input.default:not(.hide-label) {
|
|
7977
7944
|
grid-template-columns: 1.5rem auto;
|
|
7978
7945
|
gap: 0.4em;
|
|
7979
7946
|
}
|
|
7980
|
-
:host kol-input.switch {
|
|
7947
|
+
:host kol-input.switch:not(.hide-label) {
|
|
7981
7948
|
grid-template-columns: 3.5rem auto;
|
|
7982
7949
|
gap: 0.4em;
|
|
7983
7950
|
}
|
|
@@ -8022,7 +7989,7 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8022
7989
|
border-color: var(--color-grey);
|
|
8023
7990
|
border-width: 2px;
|
|
8024
7991
|
border-style: solid;
|
|
8025
|
-
border-radius: 5px;
|
|
7992
|
+
border-radius: 5px;
|
|
8026
7993
|
line-height: 24px;
|
|
8027
7994
|
font-size: 1rem;
|
|
8028
7995
|
}
|
|
@@ -8059,48 +8026,36 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8059
8026
|
background-color: var(--color-midnight);
|
|
8060
8027
|
border-color: var(--color-midnight);
|
|
8061
8028
|
}
|
|
8029
|
+
:host kol-input.default .checkbox-container {
|
|
8030
|
+
justify-content: flex-start;
|
|
8031
|
+
}
|
|
8032
|
+
:host kol-input.default input[type='checkbox']:indeterminate {
|
|
8033
|
+
background-color: var(--color-midnight);
|
|
8034
|
+
border-color: var(--color-midnight);
|
|
8035
|
+
}
|
|
8036
|
+
:host kol-input.default .icon {
|
|
8037
|
+
color: var(--color-white);
|
|
8038
|
+
margin: -0.125rem 0 0 0.25rem; /* visually align */
|
|
8039
|
+
}
|
|
8062
8040
|
:host kol-input.default input[type='checkbox'] {
|
|
8063
8041
|
border-radius: var(--border-radius);
|
|
8064
8042
|
height: calc(6 * var(--spacing));
|
|
8065
8043
|
min-width: calc(6 * var(--spacing));
|
|
8066
8044
|
width: calc(6 * var(--spacing));
|
|
8067
8045
|
}
|
|
8068
|
-
|
|
8069
|
-
|
|
8070
|
-
|
|
8071
|
-
|
|
8072
|
-
|
|
8073
|
-
|
|
8074
|
-
|
|
8075
|
-
|
|
8076
|
-
|
|
8077
|
-
|
|
8078
|
-
|
|
8079
|
-
|
|
8080
|
-
|
|
8081
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
8082
|
-
background-color: transparent;
|
|
8083
|
-
border-width: 0px 3px 3px 0px;
|
|
8084
|
-
border-color: white;
|
|
8085
|
-
border-radius: 1px;
|
|
8086
|
-
border-style: solid;
|
|
8087
|
-
height: calc(3 * var(--spacing));
|
|
8088
|
-
width: calc(1.5 * var(--spacing));
|
|
8089
|
-
}
|
|
8090
|
-
:host kol-input.default input[type='checkbox']:indeterminate {
|
|
8091
|
-
--tw-bg-opacity: 1;
|
|
8092
|
-
background-color: var(--color-midnight);
|
|
8093
|
-
}
|
|
8094
|
-
:host kol-input.default input[type='checkbox']:indeterminate:before {
|
|
8095
|
-
background-color: var(--color-white);
|
|
8096
|
-
height: 0.125rem;
|
|
8097
|
-
top: 0.6rem;
|
|
8098
|
-
left: 0.25rem;
|
|
8099
|
-
width: calc(3 * var(--spacing));
|
|
8100
|
-
transform: inherit;
|
|
8101
|
-
}
|
|
8102
|
-
:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
|
|
8103
|
-
border-width: 0px 1px 1px 0px;
|
|
8046
|
+
.default {
|
|
8047
|
+
.icon::part(icon) {
|
|
8048
|
+
font-family: 'Font Awesome 6 Free';
|
|
8049
|
+
font-weight: 900;
|
|
8050
|
+
}
|
|
8051
|
+
|
|
8052
|
+
&.checked .icon::part(icon)::before {
|
|
8053
|
+
content: '\\f00c';
|
|
8054
|
+
}
|
|
8055
|
+
|
|
8056
|
+
&.indeterminate .icon::part(icon)::before {
|
|
8057
|
+
content: '\\f068';
|
|
8058
|
+
}
|
|
8104
8059
|
}
|
|
8105
8060
|
:host kol-input.switch input[type='checkbox'] {
|
|
8106
8061
|
min-width: 3.5em;
|
|
@@ -8109,13 +8064,9 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8109
8064
|
border-width: 0;
|
|
8110
8065
|
height: 1.5em;
|
|
8111
8066
|
border-radius: 1.25em;
|
|
8112
|
-
display: inline-block;
|
|
8113
8067
|
position: relative;
|
|
8114
8068
|
}
|
|
8115
8069
|
:host kol-input.switch input[type='checkbox']:before {
|
|
8116
|
-
-webkit-transition: 0.5s;
|
|
8117
|
-
-moz-transition: 0.5s;
|
|
8118
|
-
-ms-transition: 0.5s;
|
|
8119
8070
|
transition: 0.5;
|
|
8120
8071
|
width: 1.25em;
|
|
8121
8072
|
height: 1.25em;
|
|
@@ -8129,9 +8080,6 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8129
8080
|
background-color: var(--color-midnight);
|
|
8130
8081
|
}
|
|
8131
8082
|
:host kol-input.switch input[type='checkbox']:checked:before {
|
|
8132
|
-
-webkit-transform: translateX(2em);
|
|
8133
|
-
-moz-transform: translateX(2em);
|
|
8134
|
-
-ms-transform: translateX(2em);
|
|
8135
8083
|
transform: translateX(2em);
|
|
8136
8084
|
--tw-bg-opacity: 1;
|
|
8137
8085
|
}
|
|
@@ -8139,12 +8087,12 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8139
8087
|
--tw-bg-opacity: 1;
|
|
8140
8088
|
}
|
|
8141
8089
|
:host kol-input.switch input[type='checkbox']:indeterminate:before {
|
|
8142
|
-
-webkit-transform: translateX(1em);
|
|
8143
|
-
-moz-transform: translateX(1em);
|
|
8144
|
-
-ms-transform: translateX(1em);
|
|
8145
8090
|
transform: translateX(1em);
|
|
8146
8091
|
}
|
|
8147
8092
|
.switch {
|
|
8093
|
+
& .checkbox-input-element {
|
|
8094
|
+
display: block;
|
|
8095
|
+
}
|
|
8148
8096
|
& .icon {
|
|
8149
8097
|
width: 1.25em;
|
|
8150
8098
|
height: 1.25em;
|
|
@@ -8158,13 +8106,13 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8158
8106
|
content: '\\2b';
|
|
8159
8107
|
}
|
|
8160
8108
|
}
|
|
8161
|
-
|
|
8109
|
+
&.checked .icon {
|
|
8162
8110
|
transform: translate(2em, -50%);
|
|
8163
8111
|
&::part(icon)::before {
|
|
8164
8112
|
content: '\\f00c';
|
|
8165
8113
|
}
|
|
8166
8114
|
}
|
|
8167
|
-
|
|
8115
|
+
&.indeterminate .icon {
|
|
8168
8116
|
transform: translate(1em, -50%);
|
|
8169
8117
|
&::part(icon)::before {
|
|
8170
8118
|
content: '\\f068';
|
|
@@ -8199,12 +8147,23 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8199
8147
|
min-width: 32px;
|
|
8200
8148
|
place-content: center;
|
|
8201
8149
|
}
|
|
8150
|
+
:host kol-input.button.hide-label > .input {
|
|
8151
|
+
border-top-right-radius: var(--border-radius);
|
|
8152
|
+
border-bottom-right-radius: var(--border-radius);
|
|
8153
|
+
}
|
|
8202
8154
|
:host kol-input.button > .input > div {
|
|
8203
8155
|
display: flex;
|
|
8204
8156
|
}
|
|
8205
8157
|
:host kol-input.button .icon {
|
|
8206
8158
|
height: auto;
|
|
8207
8159
|
}
|
|
8160
|
+
.button:focus-within {
|
|
8161
|
+
border-radius: var(--a11y-min-size);
|
|
8162
|
+
outline-color: var(--color-ocean);
|
|
8163
|
+
outline-offset: 2px;
|
|
8164
|
+
outline-style: solid;
|
|
8165
|
+
outline-width: 3px;
|
|
8166
|
+
}
|
|
8208
8167
|
`,
|
|
8209
8168
|
"KOL-INPUT-RADIO": css$4`
|
|
8210
8169
|
/* INPUT */
|
|
@@ -17433,6 +17392,9 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17433
17392
|
:host kol-input.button {
|
|
17434
17393
|
gap: 0.4rem 0;
|
|
17435
17394
|
}
|
|
17395
|
+
.checkbox-container {
|
|
17396
|
+
justify-content: flex-start;
|
|
17397
|
+
}
|
|
17436
17398
|
:host kol-input > div.input {
|
|
17437
17399
|
display: inherit;
|
|
17438
17400
|
min-height: var(--a11y-min-size);
|
|
@@ -17501,13 +17463,6 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17501
17463
|
cursor: pointer;
|
|
17502
17464
|
transition: 0.5s;
|
|
17503
17465
|
}
|
|
17504
|
-
:host kol-input input[type='checkbox'].kol-disabled:before {
|
|
17505
|
-
cursor: not-allowed;
|
|
17506
|
-
}
|
|
17507
|
-
:host kol-input input[type='checkbox']:before {
|
|
17508
|
-
content: '';
|
|
17509
|
-
cursor: pointer;
|
|
17510
|
-
}
|
|
17511
17466
|
:host kol-input input[type='checkbox']:checked {
|
|
17512
17467
|
background-color: var(--color-primary);
|
|
17513
17468
|
border-color: var(--color-primary);
|
|
@@ -17518,51 +17473,23 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17518
17473
|
min-width: calc(6 * 0.25rem);
|
|
17519
17474
|
width: calc(6 * 0.25rem);
|
|
17520
17475
|
}
|
|
17521
|
-
:host kol-input.default input[type='checkbox']:before {
|
|
17522
|
-
border-radius: 1.5em;
|
|
17523
|
-
background-color: transparent;
|
|
17524
|
-
display: block;
|
|
17525
|
-
height: calc(6 * 0.25rem);
|
|
17526
|
-
position: relative;
|
|
17527
|
-
width: calc(6 * 0.25rem);
|
|
17528
|
-
}
|
|
17529
|
-
:host kol-input.default input[type='checkbox']:checked:before {
|
|
17530
|
-
border-right-width: 3px;
|
|
17531
|
-
border-bottom-width: 3px;
|
|
17532
|
-
left: calc(1.5 * 0.25rem - 2px);
|
|
17533
|
-
top: calc(2.85 * 0.25rem - 2px);
|
|
17534
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
17535
|
-
background-color: transparent;
|
|
17536
|
-
border-width: 0px 3px 3px 0px;
|
|
17537
|
-
border-color: white;
|
|
17538
|
-
border-radius: 1px;
|
|
17539
|
-
border-style: solid;
|
|
17540
|
-
height: calc(3 * 0.25rem);
|
|
17541
|
-
width: calc(1.5 * 0.25rem);
|
|
17542
|
-
}
|
|
17543
17476
|
:host kol-input.default input[type='checkbox']:indeterminate {
|
|
17544
17477
|
background-color: var(--color-primary);
|
|
17545
17478
|
}
|
|
17546
|
-
:host kol-input.default
|
|
17547
|
-
|
|
17548
|
-
|
|
17549
|
-
top: 0.6rem;
|
|
17550
|
-
left: 0.25rem;
|
|
17551
|
-
width: calc(3 * 0.25rem);
|
|
17552
|
-
transform: inherit;
|
|
17553
|
-
}
|
|
17554
|
-
:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
|
|
17555
|
-
border-width: 0px 1px 1px 0px;
|
|
17479
|
+
:host kol-input.default .icon {
|
|
17480
|
+
color: var(--color-light);
|
|
17481
|
+
margin-left: 0.25rem;
|
|
17556
17482
|
}
|
|
17483
|
+
|
|
17557
17484
|
:host kol-input.switch input[type='checkbox'] {
|
|
17558
|
-
min-width: 3.5em;
|
|
17559
|
-
width: 3.5em;
|
|
17560
17485
|
background-color: var(--color-subtle);
|
|
17486
|
+
border-radius: 1.25em;
|
|
17561
17487
|
border-width: 0;
|
|
17488
|
+
display: block;
|
|
17562
17489
|
height: 1.5em;
|
|
17563
|
-
|
|
17564
|
-
display: inline-block;
|
|
17490
|
+
min-width: 3.5em;
|
|
17565
17491
|
position: relative;
|
|
17492
|
+
width: 3.5em;
|
|
17566
17493
|
}
|
|
17567
17494
|
:host kol-input.switch input[type='checkbox']:before {
|
|
17568
17495
|
width: 1.25em;
|
|
@@ -17589,17 +17516,24 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17589
17516
|
left: 2px;
|
|
17590
17517
|
}
|
|
17591
17518
|
|
|
17592
|
-
|
|
17519
|
+
&.checked .icon {
|
|
17593
17520
|
transform: translate(2em, -50%);
|
|
17594
17521
|
}
|
|
17595
17522
|
|
|
17596
|
-
|
|
17523
|
+
&.indeterminate .icon {
|
|
17597
17524
|
transform: translate(1em, -50%);
|
|
17598
17525
|
}
|
|
17599
17526
|
}
|
|
17600
17527
|
:host .disabled {
|
|
17601
17528
|
opacity: 0.33;
|
|
17602
17529
|
}
|
|
17530
|
+
.button:focus-within {
|
|
17531
|
+
border-radius: var(--border-radius);
|
|
17532
|
+
outline-color: var(--color-primary-variant);
|
|
17533
|
+
outline-offset: 2px;
|
|
17534
|
+
outline-style: solid;
|
|
17535
|
+
outline-width: calc(var(--border-width) * 2);
|
|
17536
|
+
}
|
|
17603
17537
|
`,
|
|
17604
17538
|
"KOL-INPUT-RADIO": css$3`
|
|
17605
17539
|
label {
|
|
@@ -18816,6 +18750,9 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18816
18750
|
}
|
|
18817
18751
|
`,
|
|
18818
18752
|
"KOL-INPUT-CHECKBOX": css$2`
|
|
18753
|
+
.checkbox-container {
|
|
18754
|
+
justify-content: flex-start;
|
|
18755
|
+
}
|
|
18819
18756
|
input[type='checkbox'] {
|
|
18820
18757
|
background-color: var(--color-white);
|
|
18821
18758
|
border-width: 2px;
|
|
@@ -18844,12 +18781,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18844
18781
|
background-color: var(--color-blue-130);
|
|
18845
18782
|
border-color: var(--color-blue-130);
|
|
18846
18783
|
}
|
|
18847
|
-
input[type='checkbox']:checked::before {
|
|
18848
|
-
border-color: var(--color-white);
|
|
18849
|
-
}
|
|
18850
|
-
input[type='checkbox']:indeterminate:hover::before {
|
|
18851
|
-
background-color: var(--color-blue-130);
|
|
18852
|
-
}
|
|
18853
18784
|
.error input[type='checkbox'] {
|
|
18854
18785
|
border-color: var(--color-red);
|
|
18855
18786
|
}
|
|
@@ -18864,12 +18795,20 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18864
18795
|
background-color: var(--color-red-1xx);
|
|
18865
18796
|
border-color: var(--color-red-1xx);
|
|
18866
18797
|
}
|
|
18867
|
-
.error input[type='checkbox']:indeterminate:hover::before {
|
|
18868
|
-
background-color: var(--color-red-1xx);
|
|
18869
|
-
}
|
|
18870
18798
|
.error.required label > span::after {
|
|
18871
18799
|
color: var(--color-red);
|
|
18872
18800
|
}
|
|
18801
|
+
|
|
18802
|
+
.default .icon {
|
|
18803
|
+
margin-left: 0.2rem;
|
|
18804
|
+
}
|
|
18805
|
+
.default.checked .icon {
|
|
18806
|
+
color: var(--color-white);
|
|
18807
|
+
}
|
|
18808
|
+
|
|
18809
|
+
.switch input[type='checkbox'] {
|
|
18810
|
+
display: block;
|
|
18811
|
+
}
|
|
18873
18812
|
.switch input[type='checkbox']::before,
|
|
18874
18813
|
.switch input[type='checkbox']:indeterminate::before {
|
|
18875
18814
|
background-color: var(--color-grey-75);
|
|
@@ -18909,6 +18848,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18909
18848
|
.hint {
|
|
18910
18849
|
font-size: 0.875rem;
|
|
18911
18850
|
}
|
|
18851
|
+
.button:focus-within {
|
|
18852
|
+
outline-color: var(--color-blue);
|
|
18853
|
+
outline-offset: 2px;
|
|
18854
|
+
outline-style: solid;
|
|
18855
|
+
outline-width: 2px;
|
|
18856
|
+
}
|
|
18912
18857
|
`,
|
|
18913
18858
|
"KOL-INPUT-COLOR": css$2`
|
|
18914
18859
|
kol-input {
|
|
@@ -20472,6 +20417,9 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20472
20417
|
}
|
|
20473
20418
|
`,
|
|
20474
20419
|
"KOL-INPUT-CHECKBOX": css$2`
|
|
20420
|
+
.checkbox-container {
|
|
20421
|
+
justify-content: flex-start;
|
|
20422
|
+
}
|
|
20475
20423
|
input[type='checkbox'] {
|
|
20476
20424
|
background-color: var(--color-white);
|
|
20477
20425
|
border-width: 2px;
|
|
@@ -20500,12 +20448,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20500
20448
|
background-color: var(--color-blue-130);
|
|
20501
20449
|
border-color: var(--color-blue-130);
|
|
20502
20450
|
}
|
|
20503
|
-
input[type='checkbox']:checked::before {
|
|
20504
|
-
border-color: var(--color-white);
|
|
20505
|
-
}
|
|
20506
|
-
input[type='checkbox']:indeterminate:hover::before {
|
|
20507
|
-
background-color: var(--color-blue-130);
|
|
20508
|
-
}
|
|
20509
20451
|
.error input[type='checkbox'] {
|
|
20510
20452
|
border-color: var(--color-red);
|
|
20511
20453
|
}
|
|
@@ -20520,12 +20462,19 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20520
20462
|
background-color: var(--color-red-1xx);
|
|
20521
20463
|
border-color: var(--color-red-1xx);
|
|
20522
20464
|
}
|
|
20523
|
-
.error input[type='checkbox']:indeterminate:hover::before {
|
|
20524
|
-
background-color: var(--color-red-1xx);
|
|
20525
|
-
}
|
|
20526
20465
|
.error.required label > span::after {
|
|
20527
20466
|
color: var(--color-red);
|
|
20528
20467
|
}
|
|
20468
|
+
.default .icon {
|
|
20469
|
+
margin-left: 0.2rem;
|
|
20470
|
+
}
|
|
20471
|
+
.default.checked .icon {
|
|
20472
|
+
color: var(--color-white);
|
|
20473
|
+
}
|
|
20474
|
+
|
|
20475
|
+
.switch input[type='checkbox'] {
|
|
20476
|
+
display: block;
|
|
20477
|
+
}
|
|
20529
20478
|
.switch input[type='checkbox']::before,
|
|
20530
20479
|
.switch input[type='checkbox']:indeterminate::before {
|
|
20531
20480
|
background-color: var(--color-grey-75);
|
|
@@ -20565,6 +20514,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20565
20514
|
.hint {
|
|
20566
20515
|
font-size: 0.875rem;
|
|
20567
20516
|
}
|
|
20517
|
+
.button:focus-within {
|
|
20518
|
+
outline-color: var(--color-blue-130);
|
|
20519
|
+
outline-style: solid;
|
|
20520
|
+
outline-width: 2px;
|
|
20521
|
+
}
|
|
20568
20522
|
`,
|
|
20569
20523
|
"KOL-INPUT-COLOR": css$2`
|
|
20570
20524
|
kol-input {
|
|
@@ -22649,9 +22603,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22649
22603
|
}
|
|
22650
22604
|
`,
|
|
22651
22605
|
"KOL-INPUT-CHECKBOX": css$1`
|
|
22652
|
-
|
|
22653
|
-
|
|
22654
|
-
cursor: pointer;
|
|
22606
|
+
.checkbox-container {
|
|
22607
|
+
justify-content: flex-start;
|
|
22655
22608
|
}
|
|
22656
22609
|
input {
|
|
22657
22610
|
color: var(--default-letter);
|
|
@@ -22709,58 +22662,28 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22709
22662
|
cursor: pointer;
|
|
22710
22663
|
transition: 0.5s;
|
|
22711
22664
|
}
|
|
22712
|
-
input[type='checkbox'].kol-disabled:before {
|
|
22713
|
-
cursor: not-allowed;
|
|
22714
|
-
}
|
|
22715
|
-
input[type='checkbox']:before {
|
|
22716
|
-
content: '';
|
|
22717
|
-
cursor: pointer;
|
|
22718
|
-
}
|
|
22719
22665
|
input[type='checkbox']:checked {
|
|
22720
22666
|
background-color: var(--color-petrol);
|
|
22721
22667
|
border-color: var(--color-petrol);
|
|
22722
22668
|
}
|
|
22723
22669
|
.default input[type='checkbox'] {
|
|
22724
|
-
/* border-radius: 0.25em; */
|
|
22725
22670
|
height: calc(6 * 2 * var(--spacing));
|
|
22726
22671
|
min-width: calc(6 * 2 * var(--spacing));
|
|
22727
22672
|
width: calc(6 * 2 * var(--spacing));
|
|
22728
22673
|
}
|
|
22729
|
-
|
|
22730
|
-
|
|
22731
|
-
|
|
22732
|
-
display: block;
|
|
22733
|
-
height: calc(6 * 2 * var(--spacing));
|
|
22734
|
-
position: relative;
|
|
22735
|
-
width: calc(6 * 2 * var(--spacing));
|
|
22736
|
-
}
|
|
22737
|
-
.default input[type='checkbox']:checked:before {
|
|
22738
|
-
border-right-width: 3px;
|
|
22739
|
-
border-bottom-width: 3px;
|
|
22740
|
-
left: calc(1.5 * 2 * var(--spacing) - 2px);
|
|
22741
|
-
top: calc(2.85 * 2 * var(--spacing) - 2px);
|
|
22742
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
22743
|
-
background-color: transparent;
|
|
22744
|
-
border-width: 0px 3px 3px 0px;
|
|
22745
|
-
border-color: white;
|
|
22746
|
-
border-radius: 1px;
|
|
22747
|
-
border-style: solid;
|
|
22748
|
-
height: calc(3 * 2 * var(--spacing));
|
|
22749
|
-
width: calc(1.5 * 2 * var(--spacing));
|
|
22674
|
+
|
|
22675
|
+
.default .icon {
|
|
22676
|
+
margin-left: 0.25rem;
|
|
22750
22677
|
}
|
|
22751
|
-
.default
|
|
22752
|
-
|
|
22753
|
-
height: 0.375rem;
|
|
22754
|
-
top: 0.45rem;
|
|
22755
|
-
left: 0.15rem;
|
|
22756
|
-
width: calc(4 * 2 * var(--spacing));
|
|
22678
|
+
.default.checked .icon {
|
|
22679
|
+
color: var(--color-weiss);
|
|
22757
22680
|
}
|
|
22681
|
+
|
|
22758
22682
|
.switch input[type='checkbox'] {
|
|
22759
|
-
|
|
22683
|
+
display: block;
|
|
22760
22684
|
min-width: 3.2em;
|
|
22761
22685
|
width: 3.2em;
|
|
22762
22686
|
height: 1.7em;
|
|
22763
|
-
display: inline-block;
|
|
22764
22687
|
position: relative;
|
|
22765
22688
|
}
|
|
22766
22689
|
.switch input[type='checkbox']:before {
|
|
@@ -22777,28 +22700,19 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22777
22700
|
position: absolute;
|
|
22778
22701
|
}
|
|
22779
22702
|
.switch input[type='checkbox']:checked:before {
|
|
22780
|
-
-webkit-transform: translateX(1.5em);
|
|
22781
|
-
-moz-transform: translateX(1.5em);
|
|
22782
|
-
-ms-transform: translateX(1.5em);
|
|
22783
22703
|
transform: translateX(1.5em);
|
|
22784
22704
|
background-color: white;
|
|
22785
22705
|
}
|
|
22786
22706
|
.switch input[type='checkbox']:indeterminate:before {
|
|
22787
|
-
-webkit-transform: translateX(0.75em);
|
|
22788
|
-
-moz-transform: translateX(0.75em);
|
|
22789
|
-
-ms-transform: translateX(0.75em);
|
|
22790
22707
|
transform: translateX(0.75em);
|
|
22791
22708
|
background-color: var(--color-petrol);
|
|
22792
22709
|
}
|
|
22793
|
-
.switch:
|
|
22710
|
+
.switch:is(:not(.checked), .indeterminate) .icon {
|
|
22794
22711
|
color: #fff;
|
|
22795
22712
|
}
|
|
22796
22713
|
.disabled {
|
|
22797
22714
|
opacity: 0.33;
|
|
22798
22715
|
}
|
|
22799
|
-
.default kol-icon {
|
|
22800
|
-
display: none;
|
|
22801
|
-
}
|
|
22802
22716
|
kol-input span.hint {
|
|
22803
22717
|
grid-column: span 2;
|
|
22804
22718
|
font-style: italic;
|
|
@@ -22807,6 +22721,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22807
22721
|
order: 3;
|
|
22808
22722
|
padding: 0 var(--spacing);
|
|
22809
22723
|
}
|
|
22724
|
+
.button:focus-within {
|
|
22725
|
+
border-radius: 2rem;
|
|
22726
|
+
outline-color: var(--color-achat) !important;
|
|
22727
|
+
outline-offset: 2px;
|
|
22728
|
+
outline-style: solid;
|
|
22729
|
+
outline-width: 3px;
|
|
22730
|
+
}
|
|
22810
22731
|
`,
|
|
22811
22732
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
22812
22733
|
:host input:focus {
|
|
@@ -24882,7 +24803,15 @@ const MFM = KoliBri.createTheme("mfm", {
|
|
|
24882
24803
|
}
|
|
24883
24804
|
:host .disabled {
|
|
24884
24805
|
opacity: 0.33;
|
|
24885
|
-
}
|
|
24806
|
+
}
|
|
24807
|
+
.button:focus-within {
|
|
24808
|
+
border-radius: 0.25rem;
|
|
24809
|
+
outline-color: var(--color-ocean);
|
|
24810
|
+
outline-offset: 2px;
|
|
24811
|
+
outline-style: solid;
|
|
24812
|
+
outline-width: 3px;
|
|
24813
|
+
}
|
|
24814
|
+
`,
|
|
24886
24815
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
24887
24816
|
kol-input {
|
|
24888
24817
|
display: grid;
|
|
@@ -33489,6 +33418,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33489
33418
|
content: '*';
|
|
33490
33419
|
padding-left: 0.125em;
|
|
33491
33420
|
}
|
|
33421
|
+
.checkbox-container {
|
|
33422
|
+
justify-content: flex-start;
|
|
33423
|
+
}
|
|
33492
33424
|
input:hover {
|
|
33493
33425
|
border-color: var(--kolibri-color-primary);
|
|
33494
33426
|
} /* NEU */
|
|
@@ -33529,13 +33461,6 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33529
33461
|
cursor: pointer;
|
|
33530
33462
|
transition: 0.5s;
|
|
33531
33463
|
}
|
|
33532
|
-
input[type='checkbox'].kol-disabled:before {
|
|
33533
|
-
cursor: not-allowed;
|
|
33534
|
-
}
|
|
33535
|
-
input[type='checkbox']:before {
|
|
33536
|
-
content: '';
|
|
33537
|
-
cursor: pointer;
|
|
33538
|
-
}
|
|
33539
33464
|
input[type='checkbox']:checked {
|
|
33540
33465
|
background-color: var(--kolibri-color-primary);
|
|
33541
33466
|
border-color: var(--kolibri-color-primary);
|
|
@@ -33546,41 +33471,21 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33546
33471
|
min-width: calc(6 * var(--kolibri-spacing));
|
|
33547
33472
|
width: calc(6 * var(--kolibri-spacing));
|
|
33548
33473
|
}
|
|
33549
|
-
.default
|
|
33550
|
-
|
|
33551
|
-
background-color: transparent;
|
|
33552
|
-
display: block;
|
|
33553
|
-
height: calc(6 * var(--kolibri-spacing));
|
|
33554
|
-
position: relative;
|
|
33555
|
-
width: calc(6 * var(--kolibri-spacing));
|
|
33474
|
+
.default .icon {
|
|
33475
|
+
margin-left: 0.25rem;
|
|
33556
33476
|
}
|
|
33557
|
-
.default
|
|
33558
|
-
|
|
33559
|
-
border-bottom-width: 3px;
|
|
33560
|
-
left: calc(1.5 * var(--kolibri-spacing) - 2px);
|
|
33561
|
-
top: calc(2.85 * var(--kolibri-spacing) - 2px);
|
|
33562
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
33563
|
-
background-color: transparent;
|
|
33564
|
-
border-width: 0px 3px 3px 0px;
|
|
33565
|
-
border-color: white;
|
|
33566
|
-
border-radius: 1px;
|
|
33567
|
-
border-style: solid;
|
|
33568
|
-
height: calc(3 * var(--kolibri-spacing));
|
|
33569
|
-
width: calc(1.5 * var(--kolibri-spacing));
|
|
33477
|
+
.default.checked .icon {
|
|
33478
|
+
color: #fff;
|
|
33570
33479
|
}
|
|
33571
|
-
.default
|
|
33572
|
-
|
|
33573
|
-
height: 0.375rem;
|
|
33574
|
-
top: 0.45rem;
|
|
33575
|
-
left: 0.15rem;
|
|
33576
|
-
width: calc(4 * var(--kolibri-spacing));
|
|
33480
|
+
.default.indeterminate .icon {
|
|
33481
|
+
color: var(--kolibri-color-normal);
|
|
33577
33482
|
}
|
|
33578
33483
|
.switch input[type='checkbox'] {
|
|
33484
|
+
display: block; //
|
|
33579
33485
|
min-width: 3.2em;
|
|
33580
33486
|
width: 3.2em;
|
|
33581
33487
|
height: 1.7em;
|
|
33582
33488
|
border-radius: 0.25em;
|
|
33583
|
-
display: inline-block;
|
|
33584
33489
|
position: relative;
|
|
33585
33490
|
}
|
|
33586
33491
|
.switch input[type='checkbox']:before {
|
|
@@ -33610,12 +33515,19 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33610
33515
|
transform: translateX(0.75em);
|
|
33611
33516
|
background-color: var(--kolibri-color-primary);
|
|
33612
33517
|
}
|
|
33613
|
-
.switch:
|
|
33518
|
+
.switch:is(.checked, .indeterminate) .icon {
|
|
33614
33519
|
color: #fff;
|
|
33615
33520
|
}
|
|
33616
33521
|
.disabled {
|
|
33617
33522
|
opacity: 0.33;
|
|
33618
33523
|
}
|
|
33524
|
+
.button:focus-within {
|
|
33525
|
+
border-radius: var(--kolibri-border-radius);
|
|
33526
|
+
outline-color: var(--kolibri-color-outline);
|
|
33527
|
+
outline-offset: 2px;
|
|
33528
|
+
outline-style: solid;
|
|
33529
|
+
outline-width: 3px;
|
|
33530
|
+
}
|
|
33619
33531
|
`,
|
|
33620
33532
|
"KOL-INPUT-RADIO": css`
|
|
33621
33533
|
label {
|
|
@@ -48727,12 +48639,15 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48727
48639
|
:host {
|
|
48728
48640
|
--spacing: 0.25rem;
|
|
48729
48641
|
}
|
|
48642
|
+
.checkbox-container {
|
|
48643
|
+
justify-content: flex-start;
|
|
48644
|
+
}
|
|
48730
48645
|
input {
|
|
48731
48646
|
border-color: var(--color-neutral-dark);
|
|
48732
48647
|
border-width: 2px;
|
|
48733
48648
|
border-style: solid;
|
|
48734
48649
|
}
|
|
48735
|
-
label {
|
|
48650
|
+
.input-label {
|
|
48736
48651
|
padding-left: 0.75rem;
|
|
48737
48652
|
}
|
|
48738
48653
|
kol-input:not(.disabled):hover label,
|
|
@@ -48745,10 +48660,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48745
48660
|
:host kol-input:not(.disabled) :is(.input, label) {
|
|
48746
48661
|
cursor: pointer;
|
|
48747
48662
|
}
|
|
48748
|
-
:host kol-input.disabled :is(.input, label),
|
|
48749
|
-
:host kol-input.disabled input[type='checkbox']::before {
|
|
48750
|
-
cursor: not-allowed;
|
|
48751
|
-
}
|
|
48752
48663
|
.required label > span::after {
|
|
48753
48664
|
content: '*';
|
|
48754
48665
|
padding-left: 0.125em;
|
|
@@ -48792,9 +48703,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48792
48703
|
background-color: white;
|
|
48793
48704
|
transition: 0.5s;
|
|
48794
48705
|
}
|
|
48795
|
-
input[type='checkbox']:before {
|
|
48796
|
-
content: '';
|
|
48797
|
-
}
|
|
48798
48706
|
input[type='checkbox']:checked,
|
|
48799
48707
|
input[type='checkbox']:indeterminate {
|
|
48800
48708
|
background-color: var(--color-blau);
|
|
@@ -48806,44 +48714,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48806
48714
|
min-width: calc(6 * var(--spacing));
|
|
48807
48715
|
width: calc(6 * var(--spacing));
|
|
48808
48716
|
}
|
|
48809
|
-
.default input[type='checkbox']:before {
|
|
48810
|
-
border-radius: 0.25em;
|
|
48811
|
-
background-color: transparent;
|
|
48812
|
-
display: block;
|
|
48813
|
-
height: calc(6 * var(--spacing));
|
|
48814
|
-
position: relative;
|
|
48815
|
-
width: calc(6 * var(--spacing));
|
|
48816
|
-
}
|
|
48817
|
-
.default input[type='checkbox']:checked:before {
|
|
48818
|
-
border-right-width: 3px;
|
|
48819
|
-
border-bottom-width: 3px;
|
|
48820
|
-
left: calc(1.5 * var(--spacing) - 2px);
|
|
48821
|
-
top: calc(2.85 * var(--spacing) - 2px);
|
|
48822
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
48823
|
-
background-color: transparent;
|
|
48824
|
-
border-width: 0px 3px 3px 0px;
|
|
48825
|
-
border-color: white;
|
|
48826
|
-
border-radius: 1px;
|
|
48827
|
-
border-style: solid;
|
|
48828
|
-
height: calc(3 * var(--spacing));
|
|
48829
|
-
width: calc(1.5 * var(--spacing));
|
|
48830
|
-
}
|
|
48831
48717
|
.default input[type='checkbox']:indeterminate {
|
|
48832
48718
|
background-color: var(--color-blau);
|
|
48833
48719
|
}
|
|
48834
|
-
.default
|
|
48835
|
-
|
|
48836
|
-
|
|
48837
|
-
top: 0.5rem;
|
|
48838
|
-
left: 0.25rem;
|
|
48839
|
-
width: 0.75rem;
|
|
48720
|
+
.default .icon {
|
|
48721
|
+
color: #fff;
|
|
48722
|
+
margin-left: 0.25rem;
|
|
48840
48723
|
}
|
|
48841
48724
|
.switch input[type='checkbox'] {
|
|
48725
|
+
display: block;
|
|
48842
48726
|
min-width: 3.2em;
|
|
48843
48727
|
width: 3.2em;
|
|
48844
48728
|
height: 1.7em;
|
|
48845
48729
|
border-radius: 0.25em;
|
|
48846
|
-
display: inline-block;
|
|
48847
48730
|
position: relative;
|
|
48848
48731
|
}
|
|
48849
48732
|
.switch input[type='checkbox']:before {
|
|
@@ -48860,9 +48743,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48860
48743
|
position: absolute;
|
|
48861
48744
|
}
|
|
48862
48745
|
.switch input[type='checkbox']:checked:before {
|
|
48863
|
-
-webkit-transform: translateX(1.5em);
|
|
48864
|
-
-moz-transform: translateX(1.5em);
|
|
48865
|
-
-ms-transform: translateX(1.5em);
|
|
48866
48746
|
transform: translateX(1.5em);
|
|
48867
48747
|
background-color: white;
|
|
48868
48748
|
}
|
|
@@ -48870,18 +48750,22 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48870
48750
|
background-color: var(--color-blau);
|
|
48871
48751
|
}
|
|
48872
48752
|
.switch input[type='checkbox']:indeterminate:before {
|
|
48873
|
-
-webkit-transform: translateX(0.75em);
|
|
48874
|
-
-moz-transform: translateX(0.75em);
|
|
48875
|
-
-ms-transform: translateX(0.75em);
|
|
48876
48753
|
transform: translateX(0.75em);
|
|
48877
48754
|
background-color: white;
|
|
48878
48755
|
}
|
|
48879
|
-
.switch:
|
|
48756
|
+
.switch:not(.checked):not(.indeterminate) .icon {
|
|
48880
48757
|
color: #fff;
|
|
48881
48758
|
}
|
|
48882
48759
|
.disabled {
|
|
48883
48760
|
opacity: 0.33;
|
|
48884
48761
|
}
|
|
48762
|
+
.button:focus-within {
|
|
48763
|
+
border-radius: var(--border-radius);
|
|
48764
|
+
outline-color: var(--color-blau-dark);
|
|
48765
|
+
outline-offset: 0.125rem;
|
|
48766
|
+
outline-style: solid;
|
|
48767
|
+
outline-width: 0.125rem;
|
|
48768
|
+
}
|
|
48885
48769
|
`,
|
|
48886
48770
|
"KOL-INPUT-RADIO": css`
|
|
48887
48771
|
/* ALL INPUT, SELECT, TEXTAREA */
|
|
@@ -48897,12 +48781,12 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48897
48781
|
border-width: 2px;
|
|
48898
48782
|
border-style: solid;
|
|
48899
48783
|
}
|
|
48900
|
-
kol-input
|
|
48901
|
-
kol-input
|
|
48784
|
+
kol-input.disabled input,
|
|
48785
|
+
kol-input.disabled label {
|
|
48902
48786
|
cursor: not-allowed !important;
|
|
48903
48787
|
opacity: 0.5;
|
|
48904
48788
|
}
|
|
48905
|
-
kol-input:hover:
|
|
48789
|
+
kol-input:hover:not(.disabled) label,
|
|
48906
48790
|
kol-input:focus-within {
|
|
48907
48791
|
text-decoration: underline;
|
|
48908
48792
|
}
|
|
@@ -56881,6 +56765,9 @@ const checkboxStyles = css`
|
|
|
56881
56765
|
content: '*';
|
|
56882
56766
|
padding-left: 0.125em;
|
|
56883
56767
|
}
|
|
56768
|
+
.checkbox-container {
|
|
56769
|
+
justify-content: flex-start;
|
|
56770
|
+
}
|
|
56884
56771
|
.input {
|
|
56885
56772
|
display: inline-flex;
|
|
56886
56773
|
}
|
|
@@ -56931,44 +56818,24 @@ const checkboxStyles = css`
|
|
|
56931
56818
|
border: 2px solid var(--color-neutral-dark);
|
|
56932
56819
|
height: calc(6 * var(--spacing));
|
|
56933
56820
|
width: calc(6 * var(--spacing));
|
|
56934
|
-
&::before {
|
|
56935
|
-
display: block;
|
|
56936
|
-
height: calc(6 * var(--spacing));
|
|
56937
|
-
width: calc(6 * var(--spacing));
|
|
56938
|
-
}
|
|
56939
|
-
&:checked::before {
|
|
56940
|
-
left: calc(1.5 * var(--spacing) - 2px);
|
|
56941
|
-
top: calc(2.85 * var(--spacing) - 2px);
|
|
56942
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
56943
|
-
border-width: 0 3px 3px 0;
|
|
56944
|
-
border-color: var(--color-blau);
|
|
56945
|
-
border-radius: 1px;
|
|
56946
|
-
border-style: solid;
|
|
56947
|
-
height: calc(3 * var(--spacing));
|
|
56948
|
-
width: calc(1.5 * var(--spacing));
|
|
56949
|
-
}
|
|
56950
|
-
&:indeterminate::before {
|
|
56951
|
-
background-color: var(--color-blau);
|
|
56952
|
-
height: 0.6rem;
|
|
56953
|
-
left: 0.325rem;
|
|
56954
|
-
top: 0.325rem;
|
|
56955
|
-
width: 0.6rem;
|
|
56956
|
-
}
|
|
56957
56821
|
}
|
|
56958
56822
|
kol-input.default:not(.disabled):hover input,
|
|
56959
56823
|
kol-input.default:focus-within input {
|
|
56960
56824
|
border-color: var(--color-neutral-dark-correct);
|
|
56961
56825
|
}
|
|
56826
|
+
.default .icon {
|
|
56827
|
+
margin-left: 0.25rem;
|
|
56828
|
+
}
|
|
56962
56829
|
|
|
56963
56830
|
/* SWITCH */
|
|
56964
56831
|
kol-input.switch {
|
|
56965
56832
|
grid-template-columns: calc(13 * var(--spacing)) auto;
|
|
56966
56833
|
}
|
|
56967
56834
|
.switch input[type='checkbox'] {
|
|
56835
|
+
display: block;
|
|
56968
56836
|
background: var(--color-grau-50);
|
|
56969
56837
|
border-color: transparent;
|
|
56970
56838
|
border-radius: var(--a11y-min-size);
|
|
56971
|
-
display: inline-block;
|
|
56972
56839
|
height: 1.7em;
|
|
56973
56840
|
position: relative;
|
|
56974
56841
|
transition: outline-offset 0.25s linear;
|
|
@@ -57005,14 +56872,19 @@ const checkboxStyles = css`
|
|
|
57005
56872
|
font-weight: 700;
|
|
57006
56873
|
}
|
|
57007
56874
|
}
|
|
57008
|
-
.switch:
|
|
57009
|
-
opacity: 0; /* Avoid display: none because it breaks the transform
|
|
56875
|
+
.switch:not(.checked, .indeterminate) .icon {
|
|
56876
|
+
opacity: 0; /* Avoid display: none because it breaks the 'transform' animation */
|
|
57010
56877
|
}
|
|
57011
56878
|
|
|
57012
56879
|
/* BUTTON */
|
|
57013
56880
|
kol-input.button {
|
|
57014
56881
|
grid-template-areas: 'input label' 'error error' 'hint hint';
|
|
57015
56882
|
}
|
|
56883
|
+
|
|
56884
|
+
.button:focus-within {
|
|
56885
|
+
outline: 0.125rem solid var(--color-blau);
|
|
56886
|
+
outline-offset: 0.125rem;
|
|
56887
|
+
}
|
|
57016
56888
|
`;
|
|
57017
56889
|
|
|
57018
56890
|
const detailsStyles = css`
|
|
@@ -57065,12 +56937,12 @@ const radioStyles = css`
|
|
|
57065
56937
|
border-width: 2px;
|
|
57066
56938
|
border-style: solid;
|
|
57067
56939
|
}
|
|
57068
|
-
kol-input
|
|
57069
|
-
kol-input
|
|
56940
|
+
kol-input.disabled input,
|
|
56941
|
+
kol-input.disabled label {
|
|
57070
56942
|
cursor: not-allowed !important;
|
|
57071
56943
|
opacity: 0.5;
|
|
57072
56944
|
}
|
|
57073
|
-
kol-input:hover:
|
|
56945
|
+
kol-input:hover:not(.disabled) label,
|
|
57074
56946
|
kol-input:focus-within {
|
|
57075
56947
|
text-decoration: underline;
|
|
57076
56948
|
}
|
|
@@ -65071,8 +64943,7 @@ const EN = KoliBri.createTranslation("en", {});
|
|
|
65071
64943
|
|
|
65072
64944
|
exports.BAMF = BAMF;
|
|
65073
64945
|
exports.BMF = BMF;
|
|
65074
|
-
exports.
|
|
65075
|
-
exports.BZStv2 = BZStv2;
|
|
64946
|
+
exports.BZStv1 = BZStv1;
|
|
65076
64947
|
exports.DE = DE;
|
|
65077
64948
|
exports.DEFAULT = DEFAULT;
|
|
65078
64949
|
exports.DESYv1 = DESYv1;
|