@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.mjs
CHANGED
|
@@ -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: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}";
|
|
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: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}";
|
|
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(``);
|
|
@@ -8203,6 +8153,13 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
8203
8153
|
:host kol-input.button .icon {
|
|
8204
8154
|
height: auto;
|
|
8205
8155
|
}
|
|
8156
|
+
.button:focus-within {
|
|
8157
|
+
border-radius: var(--a11y-min-size);
|
|
8158
|
+
outline-color: var(--color-ocean);
|
|
8159
|
+
outline-offset: 2px;
|
|
8160
|
+
outline-style: solid;
|
|
8161
|
+
outline-width: 3px;
|
|
8162
|
+
}
|
|
8206
8163
|
`,
|
|
8207
8164
|
"KOL-INPUT-RADIO": css$4`
|
|
8208
8165
|
/* INPUT */
|
|
@@ -17598,6 +17555,13 @@ const DEFAULT = KoliBri.createTheme("default", {
|
|
|
17598
17555
|
:host .disabled {
|
|
17599
17556
|
opacity: 0.33;
|
|
17600
17557
|
}
|
|
17558
|
+
.button:focus-within {
|
|
17559
|
+
border-radius: var(--border-radius);
|
|
17560
|
+
outline-color: var(--color-primary-variant);
|
|
17561
|
+
outline-offset: 2px;
|
|
17562
|
+
outline-style: solid;
|
|
17563
|
+
outline-width: calc(var(--border-width) * 2);
|
|
17564
|
+
}
|
|
17601
17565
|
`,
|
|
17602
17566
|
"KOL-INPUT-RADIO": css$3`
|
|
17603
17567
|
label {
|
|
@@ -18907,6 +18871,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
|
18907
18871
|
.hint {
|
|
18908
18872
|
font-size: 0.875rem;
|
|
18909
18873
|
}
|
|
18874
|
+
.button:focus-within {
|
|
18875
|
+
outline-color: var(--color-blue);
|
|
18876
|
+
outline-offset: 2px;
|
|
18877
|
+
outline-style: solid;
|
|
18878
|
+
outline-width: 2px;
|
|
18879
|
+
}
|
|
18910
18880
|
`,
|
|
18911
18881
|
"KOL-INPUT-COLOR": css$2`
|
|
18912
18882
|
kol-input {
|
|
@@ -20563,6 +20533,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
|
|
|
20563
20533
|
.hint {
|
|
20564
20534
|
font-size: 0.875rem;
|
|
20565
20535
|
}
|
|
20536
|
+
.button:focus-within {
|
|
20537
|
+
outline-color: var(--color-blue-130);
|
|
20538
|
+
outline-style: solid;
|
|
20539
|
+
outline-width: 2px;
|
|
20540
|
+
}
|
|
20566
20541
|
`,
|
|
20567
20542
|
"KOL-INPUT-COLOR": css$2`
|
|
20568
20543
|
kol-input {
|
|
@@ -22805,6 +22780,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
|
|
|
22805
22780
|
order: 3;
|
|
22806
22781
|
padding: 0 var(--spacing);
|
|
22807
22782
|
}
|
|
22783
|
+
.button:focus-within {
|
|
22784
|
+
border-radius: 2rem;
|
|
22785
|
+
outline-color: var(--color-achat) !important;
|
|
22786
|
+
outline-offset: 2px;
|
|
22787
|
+
outline-style: solid;
|
|
22788
|
+
outline-width: 3px;
|
|
22789
|
+
}
|
|
22808
22790
|
`,
|
|
22809
22791
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
22810
22792
|
:host input:focus {
|
|
@@ -24880,7 +24862,15 @@ const MFM = KoliBri.createTheme("mfm", {
|
|
|
24880
24862
|
}
|
|
24881
24863
|
:host .disabled {
|
|
24882
24864
|
opacity: 0.33;
|
|
24883
|
-
}
|
|
24865
|
+
}
|
|
24866
|
+
.button:focus-within {
|
|
24867
|
+
border-radius: 0.25rem;
|
|
24868
|
+
outline-color: var(--color-ocean);
|
|
24869
|
+
outline-offset: 2px;
|
|
24870
|
+
outline-style: solid;
|
|
24871
|
+
outline-width: 3px;
|
|
24872
|
+
}
|
|
24873
|
+
`,
|
|
24884
24874
|
"KOL-INPUT-RADIO": `/* INPUT */
|
|
24885
24875
|
kol-input {
|
|
24886
24876
|
display: grid;
|
|
@@ -33614,6 +33604,13 @@ const MAPZ = KoliBri.createTheme("mapz", {
|
|
|
33614
33604
|
.disabled {
|
|
33615
33605
|
opacity: 0.33;
|
|
33616
33606
|
}
|
|
33607
|
+
.button:focus-within {
|
|
33608
|
+
border-radius: var(--kolibri-border-radius);
|
|
33609
|
+
outline-color: var(--kolibri-color-outline);
|
|
33610
|
+
outline-offset: 2px;
|
|
33611
|
+
outline-style: solid;
|
|
33612
|
+
outline-width: 3px;
|
|
33613
|
+
}
|
|
33617
33614
|
`,
|
|
33618
33615
|
"KOL-INPUT-RADIO": css`
|
|
33619
33616
|
label {
|
|
@@ -48880,6 +48877,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|
|
|
48880
48877
|
.disabled {
|
|
48881
48878
|
opacity: 0.33;
|
|
48882
48879
|
}
|
|
48880
|
+
.button:focus-within {
|
|
48881
|
+
border-radius: var(--border-radius);
|
|
48882
|
+
outline-color: var(--color-blau-dark);
|
|
48883
|
+
outline-offset: 0.125rem;
|
|
48884
|
+
outline-style: solid;
|
|
48885
|
+
outline-width: 0.125rem;
|
|
48886
|
+
}
|
|
48883
48887
|
`,
|
|
48884
48888
|
"KOL-INPUT-RADIO": css`
|
|
48885
48889
|
/* ALL INPUT, SELECT, TEXTAREA */
|
|
@@ -57011,6 +57015,11 @@ const checkboxStyles = css`
|
|
|
57011
57015
|
kol-input.button {
|
|
57012
57016
|
grid-template-areas: 'input label' 'error error' 'hint hint';
|
|
57013
57017
|
}
|
|
57018
|
+
|
|
57019
|
+
.button:focus-within {
|
|
57020
|
+
outline: 0.125rem solid var(--color-blau);
|
|
57021
|
+
outline-offset: 0.125rem;
|
|
57022
|
+
}
|
|
57014
57023
|
`;
|
|
57015
57024
|
|
|
57016
57025
|
const detailsStyles = css`
|
|
@@ -65067,4 +65076,4 @@ const DE = KoliBri.createTranslation("de", {});
|
|
|
65067
65076
|
|
|
65068
65077
|
const EN = KoliBri.createTranslation("en", {});
|
|
65069
65078
|
|
|
65070
|
-
export { BAMF, BMF,
|
|
65079
|
+
export { BAMF, BMF, BZStv1, DE, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, EN, ITZBund, MAPZ, MFM, ZOLLv2, ZOLLv3 };
|