@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.mjs
CHANGED
|
@@ -4332,10 +4332,10 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
|
|
|
4332
4332
|
height: 1.25em;
|
|
4333
4333
|
left: 2px;
|
|
4334
4334
|
}
|
|
4335
|
-
|
|
4335
|
+
&.checked .icon {
|
|
4336
4336
|
transform: translate(2em, -50%);
|
|
4337
4337
|
}
|
|
4338
|
-
|
|
4338
|
+
&.indeterminate .icon {
|
|
4339
4339
|
transform: translate(1em, -50%);
|
|
4340
4340
|
}
|
|
4341
4341
|
}
|
|
@@ -6046,168 +6046,118 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
|
|
|
6046
6046
|
}`
|
|
6047
6047
|
});
|
|
6048
6048
|
|
|
6049
|
-
var css_248z$
|
|
6049
|
+
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}";
|
|
6050
6050
|
|
|
6051
|
-
var css_248z$
|
|
6051
|
+
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}";
|
|
6052
6052
|
|
|
6053
|
-
var css_248z$
|
|
6053
|
+
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}";
|
|
6054
6054
|
|
|
6055
|
-
var css_248z$
|
|
6055
|
+
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}";
|
|
6056
6056
|
|
|
6057
|
-
var css_248z$
|
|
6057
|
+
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}";
|
|
6058
6058
|
|
|
6059
|
-
var css_248z$
|
|
6059
|
+
var css_248z$v = "@layer kol-theme-component {\n div {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n }\n}";
|
|
6060
6060
|
|
|
6061
|
-
var css_248z$
|
|
6061
|
+
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}";
|
|
6062
6062
|
|
|
6063
|
-
var css_248z$
|
|
6063
|
+
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}";
|
|
6064
6064
|
|
|
6065
|
-
var css_248z$
|
|
6065
|
+
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}";
|
|
6066
6066
|
|
|
6067
|
-
var css_248z$
|
|
6067
|
+
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}";
|
|
6068
6068
|
|
|
6069
|
-
var css_248z$
|
|
6069
|
+
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}";
|
|
6070
6070
|
|
|
6071
|
-
var css_248z$
|
|
6071
|
+
var css_248z$p = "@layer kol-theme-component {\n :host {\n color: inherit;\n }\n}";
|
|
6072
6072
|
|
|
6073
|
-
var css_248z$
|
|
6073
|
+
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}";
|
|
6074
6074
|
|
|
6075
|
-
var css_248z$
|
|
6075
|
+
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}";
|
|
6076
6076
|
|
|
6077
|
-
var css_248z$
|
|
6077
|
+
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}";
|
|
6078
6078
|
|
|
6079
|
-
var css_248z$
|
|
6079
|
+
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}";
|
|
6080
6080
|
|
|
6081
|
-
var css_248z$
|
|
6081
|
+
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}";
|
|
6082
6082
|
|
|
6083
|
-
var css_248z$
|
|
6083
|
+
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}";
|
|
6084
6084
|
|
|
6085
|
-
var css_248z$
|
|
6085
|
+
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}";
|
|
6086
6086
|
|
|
6087
|
-
var css_248z$
|
|
6087
|
+
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}";
|
|
6088
6088
|
|
|
6089
|
-
var css_248z$
|
|
6089
|
+
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}";
|
|
6090
6090
|
|
|
6091
|
-
var css_248z$
|
|
6091
|
+
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}";
|
|
6092
6092
|
|
|
6093
|
-
var css_248z$
|
|
6093
|
+
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}";
|
|
6094
6094
|
|
|
6095
|
-
var css_248z$
|
|
6095
|
+
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}";
|
|
6096
6096
|
|
|
6097
|
-
var css_248z$
|
|
6097
|
+
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}";
|
|
6098
6098
|
|
|
6099
|
-
var css_248z$
|
|
6099
|
+
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}";
|
|
6100
6100
|
|
|
6101
|
-
var css_248z$
|
|
6101
|
+
var css_248z$a = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32px);\n }\n}";
|
|
6102
6102
|
|
|
6103
|
-
var css_248z$
|
|
6103
|
+
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}";
|
|
6104
6104
|
|
|
6105
|
-
var css_248z$
|
|
6105
|
+
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}";
|
|
6106
6106
|
|
|
6107
|
-
var css_248z$
|
|
6107
|
+
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}";
|
|
6108
6108
|
|
|
6109
|
-
var css_248z$
|
|
6109
|
+
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}";
|
|
6110
6110
|
|
|
6111
|
-
var css_248z$
|
|
6111
|
+
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}";
|
|
6112
6112
|
|
|
6113
|
-
var css_248z$
|
|
6113
|
+
var css_248z$4 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
|
|
6114
6114
|
|
|
6115
|
-
var css_248z$
|
|
6115
|
+
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}";
|
|
6116
6116
|
|
|
6117
|
-
var css_248z$
|
|
6117
|
+
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}";
|
|
6118
6118
|
|
|
6119
|
-
var css_248z$
|
|
6119
|
+
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}";
|
|
6120
6120
|
|
|
6121
|
-
var css_248z
|
|
6121
|
+
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}";
|
|
6122
6122
|
|
|
6123
|
-
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
|
|
6129
|
-
"KOL-
|
|
6130
|
-
"KOL-
|
|
6131
|
-
"KOL-
|
|
6132
|
-
"KOL-
|
|
6133
|
-
"KOL-
|
|
6134
|
-
"KOL-
|
|
6135
|
-
"KOL-
|
|
6136
|
-
"KOL-
|
|
6137
|
-
"KOL-
|
|
6138
|
-
"KOL-
|
|
6139
|
-
"KOL-
|
|
6140
|
-
"KOL-
|
|
6141
|
-
"KOL-
|
|
6142
|
-
"KOL-INPUT-
|
|
6143
|
-
"KOL-INPUT-
|
|
6144
|
-
"KOL-INPUT-
|
|
6145
|
-
"KOL-INPUT-
|
|
6146
|
-
"KOL-INPUT-
|
|
6147
|
-
"KOL-
|
|
6148
|
-
"KOL-
|
|
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-SPIN": css_248z$6,
|
|
6162
|
-
"KOL-TABLE": css_248z$5,
|
|
6163
|
-
"KOL-TABS": css_248z$4,
|
|
6164
|
-
"KOL-TEXTAREA": css_248z$3,
|
|
6165
|
-
"KOL-TOAST-CONTAINER": css_248z$2,
|
|
6166
|
-
"KOL-TOOLTIP": css_248z$1
|
|
6167
|
-
});
|
|
6168
|
-
|
|
6169
|
-
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}";
|
|
6170
|
-
|
|
6171
|
-
const BZStv2 = KoliBri.createTheme("bzstv2", {
|
|
6172
|
-
GLOBAL: css_248z,
|
|
6173
|
-
"KOL-ABBR": css_248z$D,
|
|
6174
|
-
"KOL-ACCORDION": css_248z$C,
|
|
6175
|
-
"KOL-ALERT": css_248z$B,
|
|
6176
|
-
"KOL-BADGE": css_248z$A,
|
|
6177
|
-
"KOL-BREADCRUMB": css_248z$z,
|
|
6178
|
-
"KOL-BUTTON": css_248z$y,
|
|
6179
|
-
"KOL-BUTTON-GROUP": css_248z$x,
|
|
6180
|
-
"KOL-BUTTON-LINK": css_248z$w,
|
|
6181
|
-
"KOL-CARD": css_248z$v,
|
|
6182
|
-
"KOL-DETAILS": css_248z$u,
|
|
6183
|
-
"KOL-HEADING": css_248z$s,
|
|
6184
|
-
"KOL-ICON": css_248z$r,
|
|
6185
|
-
"KOL-INDENTED-TEXT": css_248z$q,
|
|
6186
|
-
"KOL-INPUT-CHECKBOX": css_248z$p,
|
|
6187
|
-
"KOL-INPUT-COLOR": css_248z$o,
|
|
6188
|
-
"KOL-INPUT-DATE": css_248z$n,
|
|
6189
|
-
"KOL-INPUT-EMAIL": css_248z$m,
|
|
6190
|
-
"KOL-INPUT-FILE": css_248z$l,
|
|
6191
|
-
"KOL-INPUT-NUMBER": css_248z$k,
|
|
6192
|
-
"KOL-INPUT-PASSWORD": css_248z$j,
|
|
6193
|
-
"KOL-INPUT-RADIO": css_248z$i,
|
|
6194
|
-
"KOL-INPUT-RANGE": css_248z$h,
|
|
6195
|
-
"KOL-INPUT-TEXT": css_248z$g,
|
|
6196
|
-
"KOL-LINK": css_248z$e,
|
|
6197
|
-
"KOL-LINK-BUTTON": css_248z$f,
|
|
6198
|
-
"KOL-LINK-GROUP": css_248z$d,
|
|
6199
|
-
"KOL-MODAL": css_248z$c,
|
|
6200
|
-
"KOL-NAV": css_248z$b,
|
|
6201
|
-
"KOL-PAGINATION": css_248z$a,
|
|
6202
|
-
"KOL-PROGRESS": css_248z$9,
|
|
6203
|
-
"KOL-SELECT": css_248z$8,
|
|
6204
|
-
"KOL-SKIP-NAV": css_248z$7,
|
|
6205
|
-
"KOL-SPIN": css_248z$6,
|
|
6206
|
-
"KOL-TABLE": css_248z$5,
|
|
6207
|
-
"KOL-TABS": css_248z$4,
|
|
6208
|
-
"KOL-TEXTAREA": css_248z$3,
|
|
6209
|
-
"KOL-TOAST-CONTAINER": css_248z$2,
|
|
6210
|
-
"KOL-TOOLTIP": css_248z$1
|
|
6123
|
+
const BZStv1 = KoliBri.createTheme("bzst-v1", {
|
|
6124
|
+
GLOBAL: css_248z$r,
|
|
6125
|
+
"KOL-ACCORDION": css_248z$A,
|
|
6126
|
+
"KOL-ALERT": css_248z$z,
|
|
6127
|
+
"KOL-BADGE": css_248z$y,
|
|
6128
|
+
"KOL-BREADCRUMB": css_248z$x,
|
|
6129
|
+
"KOL-BUTTON": css_248z$w,
|
|
6130
|
+
"KOL-BUTTON-GROUP": css_248z$v,
|
|
6131
|
+
"KOL-BUTTON-LINK": css_248z$u,
|
|
6132
|
+
"KOL-CARD": css_248z$t,
|
|
6133
|
+
"KOL-DETAILS": css_248z$s,
|
|
6134
|
+
"KOL-HEADING": css_248z$q,
|
|
6135
|
+
"KOL-ICON": css_248z$p,
|
|
6136
|
+
"KOL-INDENTED-TEXT": css_248z$o,
|
|
6137
|
+
"KOL-INPUT-CHECKBOX": css_248z$n,
|
|
6138
|
+
"KOL-INPUT-COLOR": css_248z$m,
|
|
6139
|
+
"KOL-INPUT-DATE": css_248z$l,
|
|
6140
|
+
"KOL-INPUT-EMAIL": css_248z$k,
|
|
6141
|
+
"KOL-INPUT-FILE": css_248z$j,
|
|
6142
|
+
"KOL-INPUT-NUMBER": css_248z$i,
|
|
6143
|
+
"KOL-INPUT-PASSWORD": css_248z$h,
|
|
6144
|
+
"KOL-INPUT-RADIO": css_248z$g,
|
|
6145
|
+
"KOL-INPUT-RANGE": css_248z$f,
|
|
6146
|
+
"KOL-INPUT-TEXT": css_248z$e,
|
|
6147
|
+
"KOL-LINK": css_248z$c,
|
|
6148
|
+
"KOL-LINK-BUTTON": css_248z$d,
|
|
6149
|
+
"KOL-LINK-GROUP": css_248z$b,
|
|
6150
|
+
"KOL-MODAL": css_248z$a,
|
|
6151
|
+
"KOL-NAV": css_248z$9,
|
|
6152
|
+
"KOL-PAGINATION": css_248z$8,
|
|
6153
|
+
"KOL-PROGRESS": css_248z$7,
|
|
6154
|
+
"KOL-SELECT": css_248z$6,
|
|
6155
|
+
"KOL-SKIP-NAV": css_248z$5,
|
|
6156
|
+
"KOL-SPIN": css_248z$4,
|
|
6157
|
+
"KOL-TABLE": css_248z$3,
|
|
6158
|
+
"KOL-TABS": css_248z$2,
|
|
6159
|
+
"KOL-TEXTAREA": css_248z$1,
|
|
6160
|
+
"KOL-TOAST-CONTAINER": css_248z
|
|
6211
6161
|
});
|
|
6212
6162
|
|
|
6213
6163
|
const css$4 = (input) => input.join(``);
|
|
@@ -6305,7 +6255,7 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6305
6255
|
}
|
|
6306
6256
|
kol-tooltip-wc .tooltip-area {
|
|
6307
6257
|
background-color: var(--color-white);
|
|
6308
|
-
color: var(--color-
|
|
6258
|
+
color: var(--color-black);
|
|
6309
6259
|
}
|
|
6310
6260
|
kol-tooltip-wc .tooltip-content {
|
|
6311
6261
|
border-radius: var(--border-radius);
|
|
@@ -6367,6 +6317,12 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6367
6317
|
border-color: var(--color-red);
|
|
6368
6318
|
color: var(--color-white);
|
|
6369
6319
|
}
|
|
6320
|
+
.success :is(a, button) > kol-span-wc,
|
|
6321
|
+
.success :is(a, button):disabled:hover > kol-span-wc {
|
|
6322
|
+
background-color: var(--color-green);
|
|
6323
|
+
border-color: var(--color-green);
|
|
6324
|
+
color: var(--color-white);
|
|
6325
|
+
}
|
|
6370
6326
|
.ghost :is(a, button) > kol-span-wc,
|
|
6371
6327
|
.ghost :is(a, button):disabled:hover > kol-span-wc {
|
|
6372
6328
|
border-color: var(--color-white);
|
|
@@ -6382,6 +6338,8 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6382
6338
|
.normal :is(a, button):hover > kol-span-wc,
|
|
6383
6339
|
.danger :is(a, button):active > kol-span-wc,
|
|
6384
6340
|
.danger :is(a, button):hover > kol-span-wc,
|
|
6341
|
+
.success :is(a, button):active > kol-span-wc,
|
|
6342
|
+
.success :is(a, button):hover > kol-span-wc,
|
|
6385
6343
|
.ghost :is(a, button):active > kol-span-wc,
|
|
6386
6344
|
.ghost :is(a, button):hover > kol-span-wc {
|
|
6387
6345
|
background-color: var(--color-ocean);
|
|
@@ -6402,6 +6360,7 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6402
6360
|
.secondary :is(a, button):active > kol-span-wc,
|
|
6403
6361
|
.normal :is(a, button):active > kol-span-wc,
|
|
6404
6362
|
.danger :is(a, button):active > kol-span-wc,
|
|
6363
|
+
.success :is(a, button):active > kol-span-wc,
|
|
6405
6364
|
.ghost :is(a, button):active > kol-span-wc {
|
|
6406
6365
|
border-color: var(--color-white);
|
|
6407
6366
|
box-shadow: none;
|
|
@@ -6428,6 +6387,14 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
6428
6387
|
background-color: transparent;
|
|
6429
6388
|
border-color: transparent;
|
|
6430
6389
|
}
|
|
6390
|
+
/** CUSTOM_CLASS */
|
|
6391
|
+
:is(a, button).icon-only > kol-span-wc {
|
|
6392
|
+
padding: 8px;
|
|
6393
|
+
width: unset;
|
|
6394
|
+
}
|
|
6395
|
+
:is(a, button).icon-only > kol-span-wc > span > span {
|
|
6396
|
+
display: block;
|
|
6397
|
+
}
|
|
6431
6398
|
`,
|
|
6432
6399
|
"KOL-INPUT-TEXT": css$4`
|
|
6433
6400
|
kol-input {
|
|
@@ -7971,11 +7938,11 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
7971
7938
|
width: 100%;
|
|
7972
7939
|
min-height: 44px;
|
|
7973
7940
|
}
|
|
7974
|
-
:host kol-input.default {
|
|
7941
|
+
:host kol-input.default:not(.hide-label) {
|
|
7975
7942
|
grid-template-columns: 1.5rem auto;
|
|
7976
7943
|
gap: 0.4em;
|
|
7977
7944
|
}
|
|
7978
|
-
:host kol-input.switch {
|
|
7945
|
+
:host kol-input.switch:not(.hide-label) {
|
|
7979
7946
|
grid-template-columns: 3.5rem auto;
|
|
7980
7947
|
gap: 0.4em;
|
|
7981
7948
|
}
|
|
@@ -8020,7 +7987,7 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8020
7987
|
border-color: var(--color-grey);
|
|
8021
7988
|
border-width: 2px;
|
|
8022
7989
|
border-style: solid;
|
|
8023
|
-
border-radius: 5px;
|
|
7990
|
+
border-radius: 5px;
|
|
8024
7991
|
line-height: 24px;
|
|
8025
7992
|
font-size: 1rem;
|
|
8026
7993
|
}
|
|
@@ -8057,48 +8024,36 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8057
8024
|
background-color: var(--color-midnight);
|
|
8058
8025
|
border-color: var(--color-midnight);
|
|
8059
8026
|
}
|
|
8027
|
+
:host kol-input.default .checkbox-container {
|
|
8028
|
+
justify-content: flex-start;
|
|
8029
|
+
}
|
|
8030
|
+
:host kol-input.default input[type='checkbox']:indeterminate {
|
|
8031
|
+
background-color: var(--color-midnight);
|
|
8032
|
+
border-color: var(--color-midnight);
|
|
8033
|
+
}
|
|
8034
|
+
:host kol-input.default .icon {
|
|
8035
|
+
color: var(--color-white);
|
|
8036
|
+
margin: -0.125rem 0 0 0.25rem; /* visually align */
|
|
8037
|
+
}
|
|
8060
8038
|
:host kol-input.default input[type='checkbox'] {
|
|
8061
8039
|
border-radius: var(--border-radius);
|
|
8062
8040
|
height: calc(6 * var(--spacing));
|
|
8063
8041
|
min-width: calc(6 * var(--spacing));
|
|
8064
8042
|
width: calc(6 * var(--spacing));
|
|
8065
8043
|
}
|
|
8066
|
-
|
|
8067
|
-
|
|
8068
|
-
|
|
8069
|
-
|
|
8070
|
-
|
|
8071
|
-
|
|
8072
|
-
|
|
8073
|
-
|
|
8074
|
-
|
|
8075
|
-
|
|
8076
|
-
|
|
8077
|
-
|
|
8078
|
-
|
|
8079
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
8080
|
-
background-color: transparent;
|
|
8081
|
-
border-width: 0px 3px 3px 0px;
|
|
8082
|
-
border-color: white;
|
|
8083
|
-
border-radius: 1px;
|
|
8084
|
-
border-style: solid;
|
|
8085
|
-
height: calc(3 * var(--spacing));
|
|
8086
|
-
width: calc(1.5 * var(--spacing));
|
|
8087
|
-
}
|
|
8088
|
-
:host kol-input.default input[type='checkbox']:indeterminate {
|
|
8089
|
-
--tw-bg-opacity: 1;
|
|
8090
|
-
background-color: var(--color-midnight);
|
|
8091
|
-
}
|
|
8092
|
-
:host kol-input.default input[type='checkbox']:indeterminate:before {
|
|
8093
|
-
background-color: var(--color-white);
|
|
8094
|
-
height: 0.125rem;
|
|
8095
|
-
top: 0.6rem;
|
|
8096
|
-
left: 0.25rem;
|
|
8097
|
-
width: calc(3 * var(--spacing));
|
|
8098
|
-
transform: inherit;
|
|
8099
|
-
}
|
|
8100
|
-
:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
|
|
8101
|
-
border-width: 0px 1px 1px 0px;
|
|
8044
|
+
.default {
|
|
8045
|
+
.icon::part(icon) {
|
|
8046
|
+
font-family: 'Font Awesome 6 Free';
|
|
8047
|
+
font-weight: 900;
|
|
8048
|
+
}
|
|
8049
|
+
|
|
8050
|
+
&.checked .icon::part(icon)::before {
|
|
8051
|
+
content: '\\f00c';
|
|
8052
|
+
}
|
|
8053
|
+
|
|
8054
|
+
&.indeterminate .icon::part(icon)::before {
|
|
8055
|
+
content: '\\f068';
|
|
8056
|
+
}
|
|
8102
8057
|
}
|
|
8103
8058
|
:host kol-input.switch input[type='checkbox'] {
|
|
8104
8059
|
min-width: 3.5em;
|
|
@@ -8107,13 +8062,9 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8107
8062
|
border-width: 0;
|
|
8108
8063
|
height: 1.5em;
|
|
8109
8064
|
border-radius: 1.25em;
|
|
8110
|
-
display: inline-block;
|
|
8111
8065
|
position: relative;
|
|
8112
8066
|
}
|
|
8113
8067
|
:host kol-input.switch input[type='checkbox']:before {
|
|
8114
|
-
-webkit-transition: 0.5s;
|
|
8115
|
-
-moz-transition: 0.5s;
|
|
8116
|
-
-ms-transition: 0.5s;
|
|
8117
8068
|
transition: 0.5;
|
|
8118
8069
|
width: 1.25em;
|
|
8119
8070
|
height: 1.25em;
|
|
@@ -8127,9 +8078,6 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8127
8078
|
background-color: var(--color-midnight);
|
|
8128
8079
|
}
|
|
8129
8080
|
:host kol-input.switch input[type='checkbox']:checked:before {
|
|
8130
|
-
-webkit-transform: translateX(2em);
|
|
8131
|
-
-moz-transform: translateX(2em);
|
|
8132
|
-
-ms-transform: translateX(2em);
|
|
8133
8081
|
transform: translateX(2em);
|
|
8134
8082
|
--tw-bg-opacity: 1;
|
|
8135
8083
|
}
|
|
@@ -8137,12 +8085,12 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8137
8085
|
--tw-bg-opacity: 1;
|
|
8138
8086
|
}
|
|
8139
8087
|
:host kol-input.switch input[type='checkbox']:indeterminate:before {
|
|
8140
|
-
-webkit-transform: translateX(1em);
|
|
8141
|
-
-moz-transform: translateX(1em);
|
|
8142
|
-
-ms-transform: translateX(1em);
|
|
8143
8088
|
transform: translateX(1em);
|
|
8144
8089
|
}
|
|
8145
8090
|
.switch {
|
|
8091
|
+
& .checkbox-input-element {
|
|
8092
|
+
display: block;
|
|
8093
|
+
}
|
|
8146
8094
|
& .icon {
|
|
8147
8095
|
width: 1.25em;
|
|
8148
8096
|
height: 1.25em;
|
|
@@ -8156,13 +8104,13 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8156
8104
|
content: '\\2b';
|
|
8157
8105
|
}
|
|
8158
8106
|
}
|
|
8159
|
-
|
|
8107
|
+
&.checked .icon {
|
|
8160
8108
|
transform: translate(2em, -50%);
|
|
8161
8109
|
&::part(icon)::before {
|
|
8162
8110
|
content: '\\f00c';
|
|
8163
8111
|
}
|
|
8164
8112
|
}
|
|
8165
|
-
|
|
8113
|
+
&.indeterminate .icon {
|
|
8166
8114
|
transform: translate(1em, -50%);
|
|
8167
8115
|
&::part(icon)::before {
|
|
8168
8116
|
content: '\\f068';
|
|
@@ -8197,12 +8145,23 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8197
8145
|
min-width: 32px;
|
|
8198
8146
|
place-content: center;
|
|
8199
8147
|
}
|
|
8148
|
+
:host kol-input.button.hide-label > .input {
|
|
8149
|
+
border-top-right-radius: var(--border-radius);
|
|
8150
|
+
border-bottom-right-radius: var(--border-radius);
|
|
8151
|
+
}
|
|
8200
8152
|
:host kol-input.button > .input > div {
|
|
8201
8153
|
display: flex;
|
|
8202
8154
|
}
|
|
8203
8155
|
:host kol-input.button .icon {
|
|
8204
8156
|
height: auto;
|
|
8205
8157
|
}
|
|
8158
|
+
.button:focus-within {
|
|
8159
|
+
border-radius: var(--a11y-min-size);
|
|
8160
|
+
outline-color: var(--color-ocean);
|
|
8161
|
+
outline-offset: 2px;
|
|
8162
|
+
outline-style: solid;
|
|
8163
|
+
outline-width: 3px;
|
|
8164
|
+
}
|
|
8206
8165
|
`,
|
|
8207
8166
|
"KOL-INPUT-RADIO": css$4`
|
|
8208
8167
|
/* INPUT */
|
|
@@ -17431,6 +17390,9 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17431
17390
|
:host kol-input.button {
|
|
17432
17391
|
gap: 0.4rem 0;
|
|
17433
17392
|
}
|
|
17393
|
+
.checkbox-container {
|
|
17394
|
+
justify-content: flex-start;
|
|
17395
|
+
}
|
|
17434
17396
|
:host kol-input > div.input {
|
|
17435
17397
|
display: inherit;
|
|
17436
17398
|
min-height: var(--a11y-min-size);
|
|
@@ -17499,13 +17461,6 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17499
17461
|
cursor: pointer;
|
|
17500
17462
|
transition: 0.5s;
|
|
17501
17463
|
}
|
|
17502
|
-
:host kol-input input[type='checkbox'].kol-disabled:before {
|
|
17503
|
-
cursor: not-allowed;
|
|
17504
|
-
}
|
|
17505
|
-
:host kol-input input[type='checkbox']:before {
|
|
17506
|
-
content: '';
|
|
17507
|
-
cursor: pointer;
|
|
17508
|
-
}
|
|
17509
17464
|
:host kol-input input[type='checkbox']:checked {
|
|
17510
17465
|
background-color: var(--color-primary);
|
|
17511
17466
|
border-color: var(--color-primary);
|
|
@@ -17516,51 +17471,23 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17516
17471
|
min-width: calc(6 * 0.25rem);
|
|
17517
17472
|
width: calc(6 * 0.25rem);
|
|
17518
17473
|
}
|
|
17519
|
-
:host kol-input.default input[type='checkbox']:before {
|
|
17520
|
-
border-radius: 1.5em;
|
|
17521
|
-
background-color: transparent;
|
|
17522
|
-
display: block;
|
|
17523
|
-
height: calc(6 * 0.25rem);
|
|
17524
|
-
position: relative;
|
|
17525
|
-
width: calc(6 * 0.25rem);
|
|
17526
|
-
}
|
|
17527
|
-
:host kol-input.default input[type='checkbox']:checked:before {
|
|
17528
|
-
border-right-width: 3px;
|
|
17529
|
-
border-bottom-width: 3px;
|
|
17530
|
-
left: calc(1.5 * 0.25rem - 2px);
|
|
17531
|
-
top: calc(2.85 * 0.25rem - 2px);
|
|
17532
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
17533
|
-
background-color: transparent;
|
|
17534
|
-
border-width: 0px 3px 3px 0px;
|
|
17535
|
-
border-color: white;
|
|
17536
|
-
border-radius: 1px;
|
|
17537
|
-
border-style: solid;
|
|
17538
|
-
height: calc(3 * 0.25rem);
|
|
17539
|
-
width: calc(1.5 * 0.25rem);
|
|
17540
|
-
}
|
|
17541
17474
|
:host kol-input.default input[type='checkbox']:indeterminate {
|
|
17542
17475
|
background-color: var(--color-primary);
|
|
17543
17476
|
}
|
|
17544
|
-
:host kol-input.default
|
|
17545
|
-
|
|
17546
|
-
|
|
17547
|
-
top: 0.6rem;
|
|
17548
|
-
left: 0.25rem;
|
|
17549
|
-
width: calc(3 * 0.25rem);
|
|
17550
|
-
transform: inherit;
|
|
17551
|
-
}
|
|
17552
|
-
:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
|
|
17553
|
-
border-width: 0px 1px 1px 0px;
|
|
17477
|
+
:host kol-input.default .icon {
|
|
17478
|
+
color: var(--color-light);
|
|
17479
|
+
margin-left: 0.25rem;
|
|
17554
17480
|
}
|
|
17481
|
+
|
|
17555
17482
|
:host kol-input.switch input[type='checkbox'] {
|
|
17556
|
-
min-width: 3.5em;
|
|
17557
|
-
width: 3.5em;
|
|
17558
17483
|
background-color: var(--color-subtle);
|
|
17484
|
+
border-radius: 1.25em;
|
|
17559
17485
|
border-width: 0;
|
|
17486
|
+
display: block;
|
|
17560
17487
|
height: 1.5em;
|
|
17561
|
-
|
|
17562
|
-
display: inline-block;
|
|
17488
|
+
min-width: 3.5em;
|
|
17563
17489
|
position: relative;
|
|
17490
|
+
width: 3.5em;
|
|
17564
17491
|
}
|
|
17565
17492
|
:host kol-input.switch input[type='checkbox']:before {
|
|
17566
17493
|
width: 1.25em;
|
|
@@ -17587,17 +17514,24 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17587
17514
|
left: 2px;
|
|
17588
17515
|
}
|
|
17589
17516
|
|
|
17590
|
-
|
|
17517
|
+
&.checked .icon {
|
|
17591
17518
|
transform: translate(2em, -50%);
|
|
17592
17519
|
}
|
|
17593
17520
|
|
|
17594
|
-
|
|
17521
|
+
&.indeterminate .icon {
|
|
17595
17522
|
transform: translate(1em, -50%);
|
|
17596
17523
|
}
|
|
17597
17524
|
}
|
|
17598
17525
|
:host .disabled {
|
|
17599
17526
|
opacity: 0.33;
|
|
17600
17527
|
}
|
|
17528
|
+
.button:focus-within {
|
|
17529
|
+
border-radius: var(--border-radius);
|
|
17530
|
+
outline-color: var(--color-primary-variant);
|
|
17531
|
+
outline-offset: 2px;
|
|
17532
|
+
outline-style: solid;
|
|
17533
|
+
outline-width: calc(var(--border-width) * 2);
|
|
17534
|
+
}
|
|
17601
17535
|
`,
|
|
17602
17536
|
"KOL-INPUT-RADIO": css$3`
|
|
17603
17537
|
label {
|
|
@@ -18814,6 +18748,9 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18814
18748
|
}
|
|
18815
18749
|
`,
|
|
18816
18750
|
"KOL-INPUT-CHECKBOX": css$2`
|
|
18751
|
+
.checkbox-container {
|
|
18752
|
+
justify-content: flex-start;
|
|
18753
|
+
}
|
|
18817
18754
|
input[type='checkbox'] {
|
|
18818
18755
|
background-color: var(--color-white);
|
|
18819
18756
|
border-width: 2px;
|
|
@@ -18842,12 +18779,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18842
18779
|
background-color: var(--color-blue-130);
|
|
18843
18780
|
border-color: var(--color-blue-130);
|
|
18844
18781
|
}
|
|
18845
|
-
input[type='checkbox']:checked::before {
|
|
18846
|
-
border-color: var(--color-white);
|
|
18847
|
-
}
|
|
18848
|
-
input[type='checkbox']:indeterminate:hover::before {
|
|
18849
|
-
background-color: var(--color-blue-130);
|
|
18850
|
-
}
|
|
18851
18782
|
.error input[type='checkbox'] {
|
|
18852
18783
|
border-color: var(--color-red);
|
|
18853
18784
|
}
|
|
@@ -18862,12 +18793,20 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18862
18793
|
background-color: var(--color-red-1xx);
|
|
18863
18794
|
border-color: var(--color-red-1xx);
|
|
18864
18795
|
}
|
|
18865
|
-
.error input[type='checkbox']:indeterminate:hover::before {
|
|
18866
|
-
background-color: var(--color-red-1xx);
|
|
18867
|
-
}
|
|
18868
18796
|
.error.required label > span::after {
|
|
18869
18797
|
color: var(--color-red);
|
|
18870
18798
|
}
|
|
18799
|
+
|
|
18800
|
+
.default .icon {
|
|
18801
|
+
margin-left: 0.2rem;
|
|
18802
|
+
}
|
|
18803
|
+
.default.checked .icon {
|
|
18804
|
+
color: var(--color-white);
|
|
18805
|
+
}
|
|
18806
|
+
|
|
18807
|
+
.switch input[type='checkbox'] {
|
|
18808
|
+
display: block;
|
|
18809
|
+
}
|
|
18871
18810
|
.switch input[type='checkbox']::before,
|
|
18872
18811
|
.switch input[type='checkbox']:indeterminate::before {
|
|
18873
18812
|
background-color: var(--color-grey-75);
|
|
@@ -18907,6 +18846,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18907
18846
|
.hint {
|
|
18908
18847
|
font-size: 0.875rem;
|
|
18909
18848
|
}
|
|
18849
|
+
.button:focus-within {
|
|
18850
|
+
outline-color: var(--color-blue);
|
|
18851
|
+
outline-offset: 2px;
|
|
18852
|
+
outline-style: solid;
|
|
18853
|
+
outline-width: 2px;
|
|
18854
|
+
}
|
|
18910
18855
|
`,
|
|
18911
18856
|
"KOL-INPUT-COLOR": css$2`
|
|
18912
18857
|
kol-input {
|
|
@@ -20470,6 +20415,9 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20470
20415
|
}
|
|
20471
20416
|
`,
|
|
20472
20417
|
"KOL-INPUT-CHECKBOX": css$2`
|
|
20418
|
+
.checkbox-container {
|
|
20419
|
+
justify-content: flex-start;
|
|
20420
|
+
}
|
|
20473
20421
|
input[type='checkbox'] {
|
|
20474
20422
|
background-color: var(--color-white);
|
|
20475
20423
|
border-width: 2px;
|
|
@@ -20498,12 +20446,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20498
20446
|
background-color: var(--color-blue-130);
|
|
20499
20447
|
border-color: var(--color-blue-130);
|
|
20500
20448
|
}
|
|
20501
|
-
input[type='checkbox']:checked::before {
|
|
20502
|
-
border-color: var(--color-white);
|
|
20503
|
-
}
|
|
20504
|
-
input[type='checkbox']:indeterminate:hover::before {
|
|
20505
|
-
background-color: var(--color-blue-130);
|
|
20506
|
-
}
|
|
20507
20449
|
.error input[type='checkbox'] {
|
|
20508
20450
|
border-color: var(--color-red);
|
|
20509
20451
|
}
|
|
@@ -20518,12 +20460,19 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20518
20460
|
background-color: var(--color-red-1xx);
|
|
20519
20461
|
border-color: var(--color-red-1xx);
|
|
20520
20462
|
}
|
|
20521
|
-
.error input[type='checkbox']:indeterminate:hover::before {
|
|
20522
|
-
background-color: var(--color-red-1xx);
|
|
20523
|
-
}
|
|
20524
20463
|
.error.required label > span::after {
|
|
20525
20464
|
color: var(--color-red);
|
|
20526
20465
|
}
|
|
20466
|
+
.default .icon {
|
|
20467
|
+
margin-left: 0.2rem;
|
|
20468
|
+
}
|
|
20469
|
+
.default.checked .icon {
|
|
20470
|
+
color: var(--color-white);
|
|
20471
|
+
}
|
|
20472
|
+
|
|
20473
|
+
.switch input[type='checkbox'] {
|
|
20474
|
+
display: block;
|
|
20475
|
+
}
|
|
20527
20476
|
.switch input[type='checkbox']::before,
|
|
20528
20477
|
.switch input[type='checkbox']:indeterminate::before {
|
|
20529
20478
|
background-color: var(--color-grey-75);
|
|
@@ -20563,6 +20512,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20563
20512
|
.hint {
|
|
20564
20513
|
font-size: 0.875rem;
|
|
20565
20514
|
}
|
|
20515
|
+
.button:focus-within {
|
|
20516
|
+
outline-color: var(--color-blue-130);
|
|
20517
|
+
outline-style: solid;
|
|
20518
|
+
outline-width: 2px;
|
|
20519
|
+
}
|
|
20566
20520
|
`,
|
|
20567
20521
|
"KOL-INPUT-COLOR": css$2`
|
|
20568
20522
|
kol-input {
|
|
@@ -22647,9 +22601,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22647
22601
|
}
|
|
22648
22602
|
`,
|
|
22649
22603
|
"KOL-INPUT-CHECKBOX": css$1`
|
|
22650
|
-
|
|
22651
|
-
|
|
22652
|
-
cursor: pointer;
|
|
22604
|
+
.checkbox-container {
|
|
22605
|
+
justify-content: flex-start;
|
|
22653
22606
|
}
|
|
22654
22607
|
input {
|
|
22655
22608
|
color: var(--default-letter);
|
|
@@ -22707,58 +22660,28 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22707
22660
|
cursor: pointer;
|
|
22708
22661
|
transition: 0.5s;
|
|
22709
22662
|
}
|
|
22710
|
-
input[type='checkbox'].kol-disabled:before {
|
|
22711
|
-
cursor: not-allowed;
|
|
22712
|
-
}
|
|
22713
|
-
input[type='checkbox']:before {
|
|
22714
|
-
content: '';
|
|
22715
|
-
cursor: pointer;
|
|
22716
|
-
}
|
|
22717
22663
|
input[type='checkbox']:checked {
|
|
22718
22664
|
background-color: var(--color-petrol);
|
|
22719
22665
|
border-color: var(--color-petrol);
|
|
22720
22666
|
}
|
|
22721
22667
|
.default input[type='checkbox'] {
|
|
22722
|
-
/* border-radius: 0.25em; */
|
|
22723
22668
|
height: calc(6 * 2 * var(--spacing));
|
|
22724
22669
|
min-width: calc(6 * 2 * var(--spacing));
|
|
22725
22670
|
width: calc(6 * 2 * var(--spacing));
|
|
22726
22671
|
}
|
|
22727
|
-
|
|
22728
|
-
|
|
22729
|
-
|
|
22730
|
-
display: block;
|
|
22731
|
-
height: calc(6 * 2 * var(--spacing));
|
|
22732
|
-
position: relative;
|
|
22733
|
-
width: calc(6 * 2 * var(--spacing));
|
|
22734
|
-
}
|
|
22735
|
-
.default input[type='checkbox']:checked:before {
|
|
22736
|
-
border-right-width: 3px;
|
|
22737
|
-
border-bottom-width: 3px;
|
|
22738
|
-
left: calc(1.5 * 2 * var(--spacing) - 2px);
|
|
22739
|
-
top: calc(2.85 * 2 * var(--spacing) - 2px);
|
|
22740
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
22741
|
-
background-color: transparent;
|
|
22742
|
-
border-width: 0px 3px 3px 0px;
|
|
22743
|
-
border-color: white;
|
|
22744
|
-
border-radius: 1px;
|
|
22745
|
-
border-style: solid;
|
|
22746
|
-
height: calc(3 * 2 * var(--spacing));
|
|
22747
|
-
width: calc(1.5 * 2 * var(--spacing));
|
|
22672
|
+
|
|
22673
|
+
.default .icon {
|
|
22674
|
+
margin-left: 0.25rem;
|
|
22748
22675
|
}
|
|
22749
|
-
.default
|
|
22750
|
-
|
|
22751
|
-
height: 0.375rem;
|
|
22752
|
-
top: 0.45rem;
|
|
22753
|
-
left: 0.15rem;
|
|
22754
|
-
width: calc(4 * 2 * var(--spacing));
|
|
22676
|
+
.default.checked .icon {
|
|
22677
|
+
color: var(--color-weiss);
|
|
22755
22678
|
}
|
|
22679
|
+
|
|
22756
22680
|
.switch input[type='checkbox'] {
|
|
22757
|
-
|
|
22681
|
+
display: block;
|
|
22758
22682
|
min-width: 3.2em;
|
|
22759
22683
|
width: 3.2em;
|
|
22760
22684
|
height: 1.7em;
|
|
22761
|
-
display: inline-block;
|
|
22762
22685
|
position: relative;
|
|
22763
22686
|
}
|
|
22764
22687
|
.switch input[type='checkbox']:before {
|
|
@@ -22775,28 +22698,19 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22775
22698
|
position: absolute;
|
|
22776
22699
|
}
|
|
22777
22700
|
.switch input[type='checkbox']:checked:before {
|
|
22778
|
-
-webkit-transform: translateX(1.5em);
|
|
22779
|
-
-moz-transform: translateX(1.5em);
|
|
22780
|
-
-ms-transform: translateX(1.5em);
|
|
22781
22701
|
transform: translateX(1.5em);
|
|
22782
22702
|
background-color: white;
|
|
22783
22703
|
}
|
|
22784
22704
|
.switch input[type='checkbox']:indeterminate:before {
|
|
22785
|
-
-webkit-transform: translateX(0.75em);
|
|
22786
|
-
-moz-transform: translateX(0.75em);
|
|
22787
|
-
-ms-transform: translateX(0.75em);
|
|
22788
22705
|
transform: translateX(0.75em);
|
|
22789
22706
|
background-color: var(--color-petrol);
|
|
22790
22707
|
}
|
|
22791
|
-
.switch:
|
|
22708
|
+
.switch:is(:not(.checked), .indeterminate) .icon {
|
|
22792
22709
|
color: #fff;
|
|
22793
22710
|
}
|
|
22794
22711
|
.disabled {
|
|
22795
22712
|
opacity: 0.33;
|
|
22796
22713
|
}
|
|
22797
|
-
.default kol-icon {
|
|
22798
|
-
display: none;
|
|
22799
|
-
}
|
|
22800
22714
|
kol-input span.hint {
|
|
22801
22715
|
grid-column: span 2;
|
|
22802
22716
|
font-style: italic;
|
|
@@ -22805,6 +22719,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22805
22719
|
order: 3;
|
|
22806
22720
|
padding: 0 var(--spacing);
|
|
22807
22721
|
}
|
|
22722
|
+
.button:focus-within {
|
|
22723
|
+
border-radius: 2rem;
|
|
22724
|
+
outline-color: var(--color-achat) !important;
|
|
22725
|
+
outline-offset: 2px;
|
|
22726
|
+
outline-style: solid;
|
|
22727
|
+
outline-width: 3px;
|
|
22728
|
+
}
|
|
22808
22729
|
`,
|
|
22809
22730
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
22810
22731
|
:host input:focus {
|
|
@@ -24880,7 +24801,15 @@ const MFM = KoliBri.createTheme("mfm", {
|
|
|
24880
24801
|
}
|
|
24881
24802
|
:host .disabled {
|
|
24882
24803
|
opacity: 0.33;
|
|
24883
|
-
}
|
|
24804
|
+
}
|
|
24805
|
+
.button:focus-within {
|
|
24806
|
+
border-radius: 0.25rem;
|
|
24807
|
+
outline-color: var(--color-ocean);
|
|
24808
|
+
outline-offset: 2px;
|
|
24809
|
+
outline-style: solid;
|
|
24810
|
+
outline-width: 3px;
|
|
24811
|
+
}
|
|
24812
|
+
`,
|
|
24884
24813
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
24885
24814
|
kol-input {
|
|
24886
24815
|
display: grid;
|
|
@@ -33487,6 +33416,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33487
33416
|
content: '*';
|
|
33488
33417
|
padding-left: 0.125em;
|
|
33489
33418
|
}
|
|
33419
|
+
.checkbox-container {
|
|
33420
|
+
justify-content: flex-start;
|
|
33421
|
+
}
|
|
33490
33422
|
input:hover {
|
|
33491
33423
|
border-color: var(--kolibri-color-primary);
|
|
33492
33424
|
} /* NEU */
|
|
@@ -33527,13 +33459,6 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33527
33459
|
cursor: pointer;
|
|
33528
33460
|
transition: 0.5s;
|
|
33529
33461
|
}
|
|
33530
|
-
input[type='checkbox'].kol-disabled:before {
|
|
33531
|
-
cursor: not-allowed;
|
|
33532
|
-
}
|
|
33533
|
-
input[type='checkbox']:before {
|
|
33534
|
-
content: '';
|
|
33535
|
-
cursor: pointer;
|
|
33536
|
-
}
|
|
33537
33462
|
input[type='checkbox']:checked {
|
|
33538
33463
|
background-color: var(--kolibri-color-primary);
|
|
33539
33464
|
border-color: var(--kolibri-color-primary);
|
|
@@ -33544,41 +33469,21 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33544
33469
|
min-width: calc(6 * var(--kolibri-spacing));
|
|
33545
33470
|
width: calc(6 * var(--kolibri-spacing));
|
|
33546
33471
|
}
|
|
33547
|
-
.default
|
|
33548
|
-
|
|
33549
|
-
background-color: transparent;
|
|
33550
|
-
display: block;
|
|
33551
|
-
height: calc(6 * var(--kolibri-spacing));
|
|
33552
|
-
position: relative;
|
|
33553
|
-
width: calc(6 * var(--kolibri-spacing));
|
|
33472
|
+
.default .icon {
|
|
33473
|
+
margin-left: 0.25rem;
|
|
33554
33474
|
}
|
|
33555
|
-
.default
|
|
33556
|
-
|
|
33557
|
-
border-bottom-width: 3px;
|
|
33558
|
-
left: calc(1.5 * var(--kolibri-spacing) - 2px);
|
|
33559
|
-
top: calc(2.85 * var(--kolibri-spacing) - 2px);
|
|
33560
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
33561
|
-
background-color: transparent;
|
|
33562
|
-
border-width: 0px 3px 3px 0px;
|
|
33563
|
-
border-color: white;
|
|
33564
|
-
border-radius: 1px;
|
|
33565
|
-
border-style: solid;
|
|
33566
|
-
height: calc(3 * var(--kolibri-spacing));
|
|
33567
|
-
width: calc(1.5 * var(--kolibri-spacing));
|
|
33475
|
+
.default.checked .icon {
|
|
33476
|
+
color: #fff;
|
|
33568
33477
|
}
|
|
33569
|
-
.default
|
|
33570
|
-
|
|
33571
|
-
height: 0.375rem;
|
|
33572
|
-
top: 0.45rem;
|
|
33573
|
-
left: 0.15rem;
|
|
33574
|
-
width: calc(4 * var(--kolibri-spacing));
|
|
33478
|
+
.default.indeterminate .icon {
|
|
33479
|
+
color: var(--kolibri-color-normal);
|
|
33575
33480
|
}
|
|
33576
33481
|
.switch input[type='checkbox'] {
|
|
33482
|
+
display: block; //
|
|
33577
33483
|
min-width: 3.2em;
|
|
33578
33484
|
width: 3.2em;
|
|
33579
33485
|
height: 1.7em;
|
|
33580
33486
|
border-radius: 0.25em;
|
|
33581
|
-
display: inline-block;
|
|
33582
33487
|
position: relative;
|
|
33583
33488
|
}
|
|
33584
33489
|
.switch input[type='checkbox']:before {
|
|
@@ -33608,12 +33513,19 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33608
33513
|
transform: translateX(0.75em);
|
|
33609
33514
|
background-color: var(--kolibri-color-primary);
|
|
33610
33515
|
}
|
|
33611
|
-
.switch:
|
|
33516
|
+
.switch:is(.checked, .indeterminate) .icon {
|
|
33612
33517
|
color: #fff;
|
|
33613
33518
|
}
|
|
33614
33519
|
.disabled {
|
|
33615
33520
|
opacity: 0.33;
|
|
33616
33521
|
}
|
|
33522
|
+
.button:focus-within {
|
|
33523
|
+
border-radius: var(--kolibri-border-radius);
|
|
33524
|
+
outline-color: var(--kolibri-color-outline);
|
|
33525
|
+
outline-offset: 2px;
|
|
33526
|
+
outline-style: solid;
|
|
33527
|
+
outline-width: 3px;
|
|
33528
|
+
}
|
|
33617
33529
|
`,
|
|
33618
33530
|
"KOL-INPUT-RADIO": css`
|
|
33619
33531
|
label {
|
|
@@ -48725,12 +48637,15 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48725
48637
|
:host {
|
|
48726
48638
|
--spacing: 0.25rem;
|
|
48727
48639
|
}
|
|
48640
|
+
.checkbox-container {
|
|
48641
|
+
justify-content: flex-start;
|
|
48642
|
+
}
|
|
48728
48643
|
input {
|
|
48729
48644
|
border-color: var(--color-neutral-dark);
|
|
48730
48645
|
border-width: 2px;
|
|
48731
48646
|
border-style: solid;
|
|
48732
48647
|
}
|
|
48733
|
-
label {
|
|
48648
|
+
.input-label {
|
|
48734
48649
|
padding-left: 0.75rem;
|
|
48735
48650
|
}
|
|
48736
48651
|
kol-input:not(.disabled):hover label,
|
|
@@ -48743,10 +48658,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48743
48658
|
:host kol-input:not(.disabled) :is(.input, label) {
|
|
48744
48659
|
cursor: pointer;
|
|
48745
48660
|
}
|
|
48746
|
-
:host kol-input.disabled :is(.input, label),
|
|
48747
|
-
:host kol-input.disabled input[type='checkbox']::before {
|
|
48748
|
-
cursor: not-allowed;
|
|
48749
|
-
}
|
|
48750
48661
|
.required label > span::after {
|
|
48751
48662
|
content: '*';
|
|
48752
48663
|
padding-left: 0.125em;
|
|
@@ -48790,9 +48701,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48790
48701
|
background-color: white;
|
|
48791
48702
|
transition: 0.5s;
|
|
48792
48703
|
}
|
|
48793
|
-
input[type='checkbox']:before {
|
|
48794
|
-
content: '';
|
|
48795
|
-
}
|
|
48796
48704
|
input[type='checkbox']:checked,
|
|
48797
48705
|
input[type='checkbox']:indeterminate {
|
|
48798
48706
|
background-color: var(--color-blau);
|
|
@@ -48804,44 +48712,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48804
48712
|
min-width: calc(6 * var(--spacing));
|
|
48805
48713
|
width: calc(6 * var(--spacing));
|
|
48806
48714
|
}
|
|
48807
|
-
.default input[type='checkbox']:before {
|
|
48808
|
-
border-radius: 0.25em;
|
|
48809
|
-
background-color: transparent;
|
|
48810
|
-
display: block;
|
|
48811
|
-
height: calc(6 * var(--spacing));
|
|
48812
|
-
position: relative;
|
|
48813
|
-
width: calc(6 * var(--spacing));
|
|
48814
|
-
}
|
|
48815
|
-
.default input[type='checkbox']:checked:before {
|
|
48816
|
-
border-right-width: 3px;
|
|
48817
|
-
border-bottom-width: 3px;
|
|
48818
|
-
left: calc(1.5 * var(--spacing) - 2px);
|
|
48819
|
-
top: calc(2.85 * var(--spacing) - 2px);
|
|
48820
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
48821
|
-
background-color: transparent;
|
|
48822
|
-
border-width: 0px 3px 3px 0px;
|
|
48823
|
-
border-color: white;
|
|
48824
|
-
border-radius: 1px;
|
|
48825
|
-
border-style: solid;
|
|
48826
|
-
height: calc(3 * var(--spacing));
|
|
48827
|
-
width: calc(1.5 * var(--spacing));
|
|
48828
|
-
}
|
|
48829
48715
|
.default input[type='checkbox']:indeterminate {
|
|
48830
48716
|
background-color: var(--color-blau);
|
|
48831
48717
|
}
|
|
48832
|
-
.default
|
|
48833
|
-
|
|
48834
|
-
|
|
48835
|
-
top: 0.5rem;
|
|
48836
|
-
left: 0.25rem;
|
|
48837
|
-
width: 0.75rem;
|
|
48718
|
+
.default .icon {
|
|
48719
|
+
color: #fff;
|
|
48720
|
+
margin-left: 0.25rem;
|
|
48838
48721
|
}
|
|
48839
48722
|
.switch input[type='checkbox'] {
|
|
48723
|
+
display: block;
|
|
48840
48724
|
min-width: 3.2em;
|
|
48841
48725
|
width: 3.2em;
|
|
48842
48726
|
height: 1.7em;
|
|
48843
48727
|
border-radius: 0.25em;
|
|
48844
|
-
display: inline-block;
|
|
48845
48728
|
position: relative;
|
|
48846
48729
|
}
|
|
48847
48730
|
.switch input[type='checkbox']:before {
|
|
@@ -48858,9 +48741,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48858
48741
|
position: absolute;
|
|
48859
48742
|
}
|
|
48860
48743
|
.switch input[type='checkbox']:checked:before {
|
|
48861
|
-
-webkit-transform: translateX(1.5em);
|
|
48862
|
-
-moz-transform: translateX(1.5em);
|
|
48863
|
-
-ms-transform: translateX(1.5em);
|
|
48864
48744
|
transform: translateX(1.5em);
|
|
48865
48745
|
background-color: white;
|
|
48866
48746
|
}
|
|
@@ -48868,18 +48748,22 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48868
48748
|
background-color: var(--color-blau);
|
|
48869
48749
|
}
|
|
48870
48750
|
.switch input[type='checkbox']:indeterminate:before {
|
|
48871
|
-
-webkit-transform: translateX(0.75em);
|
|
48872
|
-
-moz-transform: translateX(0.75em);
|
|
48873
|
-
-ms-transform: translateX(0.75em);
|
|
48874
48751
|
transform: translateX(0.75em);
|
|
48875
48752
|
background-color: white;
|
|
48876
48753
|
}
|
|
48877
|
-
.switch:
|
|
48754
|
+
.switch:not(.checked):not(.indeterminate) .icon {
|
|
48878
48755
|
color: #fff;
|
|
48879
48756
|
}
|
|
48880
48757
|
.disabled {
|
|
48881
48758
|
opacity: 0.33;
|
|
48882
48759
|
}
|
|
48760
|
+
.button:focus-within {
|
|
48761
|
+
border-radius: var(--border-radius);
|
|
48762
|
+
outline-color: var(--color-blau-dark);
|
|
48763
|
+
outline-offset: 0.125rem;
|
|
48764
|
+
outline-style: solid;
|
|
48765
|
+
outline-width: 0.125rem;
|
|
48766
|
+
}
|
|
48883
48767
|
`,
|
|
48884
48768
|
"KOL-INPUT-RADIO": css`
|
|
48885
48769
|
/* ALL INPUT, SELECT, TEXTAREA */
|
|
@@ -48895,12 +48779,12 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48895
48779
|
border-width: 2px;
|
|
48896
48780
|
border-style: solid;
|
|
48897
48781
|
}
|
|
48898
|
-
kol-input
|
|
48899
|
-
kol-input
|
|
48782
|
+
kol-input.disabled input,
|
|
48783
|
+
kol-input.disabled label {
|
|
48900
48784
|
cursor: not-allowed !important;
|
|
48901
48785
|
opacity: 0.5;
|
|
48902
48786
|
}
|
|
48903
|
-
kol-input:hover:
|
|
48787
|
+
kol-input:hover:not(.disabled) label,
|
|
48904
48788
|
kol-input:focus-within {
|
|
48905
48789
|
text-decoration: underline;
|
|
48906
48790
|
}
|
|
@@ -56879,6 +56763,9 @@ const checkboxStyles = css`
|
|
|
56879
56763
|
content: '*';
|
|
56880
56764
|
padding-left: 0.125em;
|
|
56881
56765
|
}
|
|
56766
|
+
.checkbox-container {
|
|
56767
|
+
justify-content: flex-start;
|
|
56768
|
+
}
|
|
56882
56769
|
.input {
|
|
56883
56770
|
display: inline-flex;
|
|
56884
56771
|
}
|
|
@@ -56929,44 +56816,24 @@ const checkboxStyles = css`
|
|
|
56929
56816
|
border: 2px solid var(--color-neutral-dark);
|
|
56930
56817
|
height: calc(6 * var(--spacing));
|
|
56931
56818
|
width: calc(6 * var(--spacing));
|
|
56932
|
-
&::before {
|
|
56933
|
-
display: block;
|
|
56934
|
-
height: calc(6 * var(--spacing));
|
|
56935
|
-
width: calc(6 * var(--spacing));
|
|
56936
|
-
}
|
|
56937
|
-
&:checked::before {
|
|
56938
|
-
left: calc(1.5 * var(--spacing) - 2px);
|
|
56939
|
-
top: calc(2.85 * var(--spacing) - 2px);
|
|
56940
|
-
transform: rotate(40deg) translate(-50%, -50%);
|
|
56941
|
-
border-width: 0 3px 3px 0;
|
|
56942
|
-
border-color: var(--color-blau);
|
|
56943
|
-
border-radius: 1px;
|
|
56944
|
-
border-style: solid;
|
|
56945
|
-
height: calc(3 * var(--spacing));
|
|
56946
|
-
width: calc(1.5 * var(--spacing));
|
|
56947
|
-
}
|
|
56948
|
-
&:indeterminate::before {
|
|
56949
|
-
background-color: var(--color-blau);
|
|
56950
|
-
height: 0.6rem;
|
|
56951
|
-
left: 0.325rem;
|
|
56952
|
-
top: 0.325rem;
|
|
56953
|
-
width: 0.6rem;
|
|
56954
|
-
}
|
|
56955
56819
|
}
|
|
56956
56820
|
kol-input.default:not(.disabled):hover input,
|
|
56957
56821
|
kol-input.default:focus-within input {
|
|
56958
56822
|
border-color: var(--color-neutral-dark-correct);
|
|
56959
56823
|
}
|
|
56824
|
+
.default .icon {
|
|
56825
|
+
margin-left: 0.25rem;
|
|
56826
|
+
}
|
|
56960
56827
|
|
|
56961
56828
|
/* SWITCH */
|
|
56962
56829
|
kol-input.switch {
|
|
56963
56830
|
grid-template-columns: calc(13 * var(--spacing)) auto;
|
|
56964
56831
|
}
|
|
56965
56832
|
.switch input[type='checkbox'] {
|
|
56833
|
+
display: block;
|
|
56966
56834
|
background: var(--color-grau-50);
|
|
56967
56835
|
border-color: transparent;
|
|
56968
56836
|
border-radius: var(--a11y-min-size);
|
|
56969
|
-
display: inline-block;
|
|
56970
56837
|
height: 1.7em;
|
|
56971
56838
|
position: relative;
|
|
56972
56839
|
transition: outline-offset 0.25s linear;
|
|
@@ -57003,14 +56870,19 @@ const checkboxStyles = css`
|
|
|
57003
56870
|
font-weight: 700;
|
|
57004
56871
|
}
|
|
57005
56872
|
}
|
|
57006
|
-
.switch:
|
|
57007
|
-
opacity: 0; /* Avoid display: none because it breaks the transform
|
|
56873
|
+
.switch:not(.checked, .indeterminate) .icon {
|
|
56874
|
+
opacity: 0; /* Avoid display: none because it breaks the 'transform' animation */
|
|
57008
56875
|
}
|
|
57009
56876
|
|
|
57010
56877
|
/* BUTTON */
|
|
57011
56878
|
kol-input.button {
|
|
57012
56879
|
grid-template-areas: 'input label' 'error error' 'hint hint';
|
|
57013
56880
|
}
|
|
56881
|
+
|
|
56882
|
+
.button:focus-within {
|
|
56883
|
+
outline: 0.125rem solid var(--color-blau);
|
|
56884
|
+
outline-offset: 0.125rem;
|
|
56885
|
+
}
|
|
57014
56886
|
`;
|
|
57015
56887
|
|
|
57016
56888
|
const detailsStyles = css`
|
|
@@ -57063,12 +56935,12 @@ const radioStyles = css`
|
|
|
57063
56935
|
border-width: 2px;
|
|
57064
56936
|
border-style: solid;
|
|
57065
56937
|
}
|
|
57066
|
-
kol-input
|
|
57067
|
-
kol-input
|
|
56938
|
+
kol-input.disabled input,
|
|
56939
|
+
kol-input.disabled label {
|
|
57068
56940
|
cursor: not-allowed !important;
|
|
57069
56941
|
opacity: 0.5;
|
|
57070
56942
|
}
|
|
57071
|
-
kol-input:hover:
|
|
56943
|
+
kol-input:hover:not(.disabled) label,
|
|
57072
56944
|
kol-input:focus-within {
|
|
57073
56945
|
text-decoration: underline;
|
|
57074
56946
|
}
|
|
@@ -65067,4 +64939,4 @@ const DE = KoliBri.createTranslation("de", {});
|
|
|
65067
64939
|
|
|
65068
64940
|
const EN = KoliBri.createTranslation("en", {});
|
|
65069
64941
|
|
|
65070
|
-
export { BAMF, BMF,
|
|
64942
|
+
export { BAMF, BMF, BZStv1, DE, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, EN, ITZBund, MAPZ, MFM, ZOLLv2, ZOLLv3 };
|