@public-ui/themes 2.0.0-rc.11 → 2.0.0-rc.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +136 -128
- package/dist/index.d.ts +2 -53
- package/dist/index.mjs +136 -127
- package/package.json +9 -9
package/dist/index.cjs
CHANGED
|
@@ -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:has(input:focus) {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n label {\n font-size: 1.125rem;\n font-weight: bold;\n opacity: 1;\n }\n kol-input.disabled label {\n color: var(--color-disabled-gray);\n }\n .input {\n display: inline-flex;\n order: 1;\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 input[type=checkbox] {\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 input[type=checkbox]:is(:checked, :indeterminate) {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .default input[type=checkbox]:disabled {\n border-color: var(--color-disabled-gray);\n background-color: var(--color-secondary-40);\n }\n .default input[type=checkbox]:enabled:hover {\n outline: 1px solid var(--color-primary); /* Increase visual border-width without shifting contents */\n }\n .default input[type=checkbox]:enabled:hover:is(:checked, :indeterminate) {\n background: var(--color-white);\n outline-color: var(--color-primary-60);\n border-color: var(--color-primary-60);\n }\n .default input[type=checkbox]:checked::before {\n left: calc(1.5 * var(--spacing) - var(--border-width));\n top: calc(2.85 * var(--spacing) - var(--border-width));\n transform: rotate(40deg) translate(-50%, -50%);\n background-color: transparent;\n border-width: 0 3px 3px 0;\n border-color: var(--color-white);\n border-style: solid;\n height: calc(3 * var(--spacing));\n width: calc(1.5 * var(--spacing));\n }\n .default input[type=checkbox]:checked:enabled:hover::before {\n border-color: var(--color-primary-60);\n }\n .default input[type=checkbox]:checked:disabled::before {\n border-color: var(--color-disabled-gray);\n }\n .default input[type=checkbox]:indeterminate::before {\n background-color: var(--color-white);\n height: 0.3rem;\n top: 0.5rem;\n left: 0.2rem;\n width: calc(4 * var(--spacing));\n transform: rotate(45deg);\n }\n .default input[type=checkbox]:indeterminate:enabled:hover::before {\n background-color: var(--color-primary-60);\n }\n .default input[type=checkbox]:indeterminate:disabled::before {\n background-color: var(--color-disabled-gray);\n }\n /* variant switch */\n .switch input[type=checkbox] {\n border-radius: 1.7em;\n border-width: 1px;\n border-color: var(--color-primary);\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:has(input:focus) {\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(``);
|
|
@@ -8205,6 +8155,13 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8205
8155
|
:host kol-input.button .icon {
|
|
8206
8156
|
height: auto;
|
|
8207
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
|
+
}
|
|
8208
8165
|
`,
|
|
8209
8166
|
"KOL-INPUT-RADIO": css$4`
|
|
8210
8167
|
/* INPUT */
|
|
@@ -17600,6 +17557,13 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17600
17557
|
:host .disabled {
|
|
17601
17558
|
opacity: 0.33;
|
|
17602
17559
|
}
|
|
17560
|
+
.button:focus-within {
|
|
17561
|
+
border-radius: var(--border-radius);
|
|
17562
|
+
outline-color: var(--color-primary-variant);
|
|
17563
|
+
outline-offset: 2px;
|
|
17564
|
+
outline-style: solid;
|
|
17565
|
+
outline-width: calc(var(--border-width) * 2);
|
|
17566
|
+
}
|
|
17603
17567
|
`,
|
|
17604
17568
|
"KOL-INPUT-RADIO": css$3`
|
|
17605
17569
|
label {
|
|
@@ -18909,6 +18873,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18909
18873
|
.hint {
|
|
18910
18874
|
font-size: 0.875rem;
|
|
18911
18875
|
}
|
|
18876
|
+
.button:focus-within {
|
|
18877
|
+
outline-color: var(--color-blue);
|
|
18878
|
+
outline-offset: 2px;
|
|
18879
|
+
outline-style: solid;
|
|
18880
|
+
outline-width: 2px;
|
|
18881
|
+
}
|
|
18912
18882
|
`,
|
|
18913
18883
|
"KOL-INPUT-COLOR": css$2`
|
|
18914
18884
|
kol-input {
|
|
@@ -20565,6 +20535,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20565
20535
|
.hint {
|
|
20566
20536
|
font-size: 0.875rem;
|
|
20567
20537
|
}
|
|
20538
|
+
.button:focus-within {
|
|
20539
|
+
outline-color: var(--color-blue-130);
|
|
20540
|
+
outline-style: solid;
|
|
20541
|
+
outline-width: 2px;
|
|
20542
|
+
}
|
|
20568
20543
|
`,
|
|
20569
20544
|
"KOL-INPUT-COLOR": css$2`
|
|
20570
20545
|
kol-input {
|
|
@@ -22807,6 +22782,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22807
22782
|
order: 3;
|
|
22808
22783
|
padding: 0 var(--spacing);
|
|
22809
22784
|
}
|
|
22785
|
+
.button:focus-within {
|
|
22786
|
+
border-radius: 2rem;
|
|
22787
|
+
outline-color: var(--color-achat) !important;
|
|
22788
|
+
outline-offset: 2px;
|
|
22789
|
+
outline-style: solid;
|
|
22790
|
+
outline-width: 3px;
|
|
22791
|
+
}
|
|
22810
22792
|
`,
|
|
22811
22793
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
22812
22794
|
:host input:focus {
|
|
@@ -24882,7 +24864,15 @@ const MFM = KoliBri.createTheme("mfm", {
|
|
|
24882
24864
|
}
|
|
24883
24865
|
:host .disabled {
|
|
24884
24866
|
opacity: 0.33;
|
|
24885
|
-
}
|
|
24867
|
+
}
|
|
24868
|
+
.button:focus-within {
|
|
24869
|
+
border-radius: 0.25rem;
|
|
24870
|
+
outline-color: var(--color-ocean);
|
|
24871
|
+
outline-offset: 2px;
|
|
24872
|
+
outline-style: solid;
|
|
24873
|
+
outline-width: 3px;
|
|
24874
|
+
}
|
|
24875
|
+
`,
|
|
24886
24876
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
24887
24877
|
kol-input {
|
|
24888
24878
|
display: grid;
|
|
@@ -33616,6 +33606,13 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33616
33606
|
.disabled {
|
|
33617
33607
|
opacity: 0.33;
|
|
33618
33608
|
}
|
|
33609
|
+
.button:focus-within {
|
|
33610
|
+
border-radius: var(--kolibri-border-radius);
|
|
33611
|
+
outline-color: var(--kolibri-color-outline);
|
|
33612
|
+
outline-offset: 2px;
|
|
33613
|
+
outline-style: solid;
|
|
33614
|
+
outline-width: 3px;
|
|
33615
|
+
}
|
|
33619
33616
|
`,
|
|
33620
33617
|
"KOL-INPUT-RADIO": css`
|
|
33621
33618
|
label {
|
|
@@ -48882,6 +48879,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48882
48879
|
.disabled {
|
|
48883
48880
|
opacity: 0.33;
|
|
48884
48881
|
}
|
|
48882
|
+
.button:focus-within {
|
|
48883
|
+
border-radius: var(--border-radius);
|
|
48884
|
+
outline-color: var(--color-blau-dark);
|
|
48885
|
+
outline-offset: 0.125rem;
|
|
48886
|
+
outline-style: solid;
|
|
48887
|
+
outline-width: 0.125rem;
|
|
48888
|
+
}
|
|
48885
48889
|
`,
|
|
48886
48890
|
"KOL-INPUT-RADIO": css`
|
|
48887
48891
|
/* ALL INPUT, SELECT, TEXTAREA */
|
|
@@ -57013,6 +57017,11 @@ const checkboxStyles = css`
|
|
|
57013
57017
|
kol-input.button {
|
|
57014
57018
|
grid-template-areas: 'input label' 'error error' 'hint hint';
|
|
57015
57019
|
}
|
|
57020
|
+
|
|
57021
|
+
.button:focus-within {
|
|
57022
|
+
outline: 0.125rem solid var(--color-blau);
|
|
57023
|
+
outline-offset: 0.125rem;
|
|
57024
|
+
}
|
|
57016
57025
|
`;
|
|
57017
57026
|
|
|
57018
57027
|
const detailsStyles = css`
|
|
@@ -65071,8 +65080,7 @@ const EN = KoliBri.createTranslation("en", {});
|
|
|
65071
65080
|
|
|
65072
65081
|
exports.BAMF = BAMF;
|
|
65073
65082
|
exports.BMF = BMF;
|
|
65074
|
-
exports.
|
|
65075
|
-
exports.BZStv2 = BZStv2;
|
|
65083
|
+
exports.BZStv1 = BZStv1;
|
|
65076
65084
|
exports.DE = DE;
|
|
65077
65085
|
exports.DEFAULT = DEFAULT;
|
|
65078
65086
|
exports.DESYv1 = DESYv1;
|