@public-ui/themes 1.4.2-rc.1 → 1.4.2-rc.3
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 +82 -80
- package/dist/index.mjs +82 -80
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -6,37 +6,36 @@ const BAMF = KoliBri.createTheme("bamf", {
|
|
|
6
6
|
|
|
7
7
|
const BMF = KoliBri.createTheme("bmf", {
|
|
8
8
|
GLOBAL: "/* Design Tokens */:host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: 0.25rem;}:host {--color-midnight: #004b76;--color-ocean: #0077b6;--color-sky: #99c9e2;--color-ice: #cce4f0;--color-crimson: #780f2d;--color-red: #c0003c;--color-pink: #f2ccd8;--color-olive: #004d38;--color-green: #005c45;--color-jungle: #00854a;--color-lime: #c1ca31;--color-mint: #ccdeda;--color-fire: #7a2e1f;--color-orange: #c44931;--color-coral: #f5dcd7;--color-bronze: #c44931;--color-yellow: #c44931;--color-ivory: #c44931;--color-purple: #c44931;--color-lavender: #c44931;--color-black: #202020;--color-metal: #454d4f;--color-grey: #576164;--color-granite: #bec5c9;--color-silver: #e5e8e9;--color-smoke: #f2f3f4;--color-white: #ffffff;--font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;--font-size: 16px;--spacing: 0.25em;}:host {font-family: var(--font-family);font-size: var(--font-size);}* {box-sizing: border-box;}*:not(i) {font-family: var(--font-family);}h1,h2,h3,h4,h5,h6 {font-family: var(--font-family);font-size: var(--font-size);margin: 0;}a,button {align-items: center;background-color: transparent;border: 0;cursor: pointer;display: inline-flex;gap: 0.25rem;justify-items: center;}input,option,select,summary,textarea {display: inline-block;}a,button,input,option,select,summary,textarea {-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;letter-spacing: inherit;word-break: break-word;}*[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,summary:focus,textarea:focus {cursor: pointer;outline-color: var(--color-ocean);outline-offset: 2px;outline-style: solid;outline-width: 3px;transition: outline-offset 0.2s linear;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}kol-heading-wc {font-weight: 700;}",
|
|
9
|
-
"KOL-BUTTON": ":host {display: inline-block;}button {background-color: transparent;border: 0;cursor: pointer;border-radius: 1.5em;min-width: 44px;min-height: 44px;padding: 0;text-decoration: none !important;}button > kol-span-wc {display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}button:disabled > kol-span-wc {cursor: not-allowed;opacity: 0.5;}button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);} /*-----------*/button.primary:active > kol-span-wc,button.primary:hover > kol-span-wc,button.secondary:active > kol-span-wc,button.secondary:hover > kol-span-wc,button.normal:active > kol-span-wc,button.normal:hover > kol-span-wc,button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc,button.ghost:active > kol-span-wc,button.ghost:hover > kol-span-wc {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc {background-color: var(--color-crimson);border-color: var(--color-crimson);}button:disabled:hover > kol-span-wc,button:focus:hover > kol-span-wc {box-shadow: none;}button.primary:active > kol-span-wc,button.secondary:active > kol-span-wc,button.normal:active > kol-span-wc,button.danger:active > kol-span-wc,button.ghost:active > kol-span-wc {border-color: var(--color-white);box-shadow: none;outline: none;}:host button > kol-span-wc > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}button.icon-only > kol-span-wc {padding: 8px;}button.icon-only > kol-span-wc > span > span {display: none;}button.icon-only > kol-span-wc kol-icon {
|
|
10
|
-
"KOL-INPUT-TEXT": 'kol-input {display: grid;}kol-input label {
|
|
11
|
-
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;}kol-input label {
|
|
12
|
-
"KOL-INPUT-NUMBER": 'kol-input {display: grid;}kol-input label {
|
|
13
|
-
"KOL-INPUT-EMAIL": 'kol-input {display: grid;}kol-input label {
|
|
14
|
-
"KOL-INPUT-FILE": 'kol-input {display: grid;}kol-input label {
|
|
15
|
-
"KOL-TEXTAREA": 'kol-input {display: grid;}kol-input label {
|
|
9
|
+
"KOL-BUTTON": ":host {display: inline-block;}button {background-color: transparent;border: 0;cursor: pointer;border-radius: 1.5em;min-width: 44px;min-height: 44px;padding: 0;text-decoration: none !important;}button > kol-span-wc {display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}button:disabled > kol-span-wc {cursor: not-allowed;opacity: 0.5;}button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);} /*-----------*/button.primary:active > kol-span-wc,button.primary:hover > kol-span-wc,button.secondary:active > kol-span-wc,button.secondary:hover > kol-span-wc,button.normal:active > kol-span-wc,button.normal:hover > kol-span-wc,button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc,button.ghost:active > kol-span-wc,button.ghost:hover > kol-span-wc {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc {background-color: var(--color-crimson);border-color: var(--color-crimson);}button:disabled:hover > kol-span-wc,button:focus:hover > kol-span-wc {box-shadow: none;}button.primary:active > kol-span-wc,button.secondary:active > kol-span-wc,button.normal:active > kol-span-wc,button.danger:active > kol-span-wc,button.ghost:active > kol-span-wc {border-color: var(--color-white);box-shadow: none;outline: none;}:host button > kol-span-wc > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}button.icon-only > kol-span-wc {padding: 8px;}button.icon-only > kol-span-wc > span > span {display: none;}button.icon-only > kol-span-wc kol-icon {width: 1.5em;height: 1.5em;}button.loading > kol-span-wc kol-icon {animation: spin 5s infinite linear;} /** small ghost button */button.small.ghost > kol-span-wc {border: none;background-color: transparent;box-shadow: none;}button.small.ghost > kol-span-wc > span {border-radius: 1.5em;border-style: solid;border-width: 2px;border-color: var(--color-white);background-color: var(--color-white);}button.small.ghost:active > kol-span-wc > span,button.small.ghost:hover > kol-span-wc > span,button.small.ghost.transparent:active > kol-span-wc > span,button.small.ghost.transparent:hover > kol-span-wc > span {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);} /** button with transparent background */button.transparent > kol-span-wc > span,button.small.ghost.transparent > kol-span-wc > span,button.transparent > kol-span-wc {background-color: transparent;border-color: transparent;}",
|
|
10
|
+
"KOL-INPUT-TEXT": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
11
|
+
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
12
|
+
"KOL-INPUT-NUMBER": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
13
|
+
"KOL-INPUT-EMAIL": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
14
|
+
"KOL-INPUT-FILE": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
15
|
+
"KOL-TEXTAREA": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
16
16
|
"KOL-ALERT": ':host .msg,:host .msg {border-width: 0;}:host > div {border-width: 2px;border-style: solid;border-radius: 5px;display: flex;width: 100%;overflow: unset;border-color: transparent;background-color: white;}:host > div > div.heading {display: flex;gap: calc(2 * var(--kolibri-spacing));place-items: center;}:host > div > div.heading > div {display: grid;gap: var(--kolibri-spacing);}:host > div.msg > div.heading > kol-icon {place-self: baseline;}:host > div > div.heading > div {display: grid;gap: var(--spacing);}:host > div > div.heading > kol-button-wc.close {place-self: center;}:host > div.msg {align-items: start;}:host > div.default {border-color: var(--color-grey);}:host > div.default.msg .heading-icon {color: var(--color-grey);}:host > div.error {border-color: var(--color-red);}:host > div.error.msg .heading-icon {color: var(--color-red);}:host > div.info {border-color: var(--color-midnight);}:host > div.info.msg .heading-icon {color: var(--color-midnight);}:host > div.success {border-color: var(--color-green);}:host > div.success.msg .heading-icon {color: var(--color-green);}:host > div.warning {border-color: var(--color-orange);}:host > div.warning.msg .heading-icon {color: var(--color-orange);}:host .heading-icon {align-items: center;color: white;display: inline-flex;}:host > div > div.heading .heading-icon {padding: 0;}:host > div.msg > .heading > .heading-icon {padding-top: 0;place-items: baseline;}:host > div.msg > .heading > .heading-icon::part(icon) {line-height: 1.375rem;}:host > div.msg.default .heading > div > kol-heading-wc {color: var(--color-grey);}:host > div.msg.error .heading > div > kol-heading-wc {color: var(--color-red);}:host > div.msg.info .heading > div > kol-heading-wc {color: var(--color-midnight);}:host > div.msg.success .heading > div > kol-heading-wc {color: var(--color-green);}:host > div.msg.warning .heading > div > kol-heading-wc {color: var(--color-orange);}/*:host > div.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}:host > div.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}:host > div.msg > div > .close {display: flex;}*/:host > div.msg.default .close .icon {color: var(--color-grey);}:host > div.msg.error .close .icon {color: var(--color-red);}:host > div.msg.info .close .icon {color: var(--color-midnight);}:host > div.msg.success .close .icon {color: var(--color-green);}:host > div.msg.warning .close .icon {color: var(--color-orange);} /** CARD **/:host .card,:host .card {border: 3px solid #004b76;filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));flex-direction: column;}:host > div.card > .heading {grid-template-columns: 2.5em auto 44px;gap: 8px;min-height: 44px;padding: 0.5rem 1rem;}:host > div.card > .heading > div {width: 100%;}:host > div.card > .heading .heading-icon {justify-self: right;}:host > div.card > .heading kol-heading-wc {width: 100%;color: white;display: flex;font-size: 1.25rem;line-height: 1.75rem;}:host > div.card > .heading kol-heading-wc > * {margin: auto 0;}:host > div.card > div.content {padding: 0.5rem 1rem;}:host > div.card.default > .heading {background-color: var(--color-grey);}:host > div.card.error > .heading {background-color: var(--color-red);}:host > div.card.info > .heading {background-color: var(--color-midnight);}:host > div.card.success > .heading {background-color: var(--color-green);}:host > div.card.warning > .heading {background-color: var(--color-orange);}:host > div kol-icon::part(icon)::before {font-family: "Font Awesome 6 Free" !important;font-weight: 900;}:host > div.error > .heading > kol-icon::part(icon)::before {content: "\\f06a";}:host > div.info > .heading > kol-icon::part(icon)::before {content: "\\f05a";}:host > div.success > .heading > kol-icon::part(icon)::before {content: "\\f058";}:host > div.warning > .heading > kol-icon::part(icon)::before {content: "\\f071";}:host > div.card > div > .content {grid-row: 2;grid-column: 1 / span 2;}:host > div.card.default .close {background-color: var(--color-grey);}:host > div.card.error .close {background-color: var(--color-red);}:host > div.card.info .close {background-color: var(--color-midnight);}:host > div.card.success .close {background-color: var(--color-green);}:host > div.card.warning .close {background-color: var(--color-orange);}.close > button {min-width: 44px;color: var(--color-white);min-height: 44px;display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;background-color: rgba(0, 0, 0, 0);border-color: rgba(0, 0, 0, 0);}.close > button.icon-only {padding: 8px;}.close > button.icon-only kol-icon {display: inline-block;width: 1.5em;height: 1.5em;}.close > button:active {box-shadow: none;outline: none;}',
|
|
17
17
|
"KOL-HEADING": "h1,h2,h3,h4,h5,h6 {color: inherit;font-style: normal;margin: 0;padding: 0;}h1,h2,h3 {font-weight: 700;}h1 {font-size: 1.5rem;line-height: 3.25rem;}h2 {font-size: 1.25rem;line-height: 1.75rem;}h3 {font-size: 1.125rem;line-height: 1.5rem;}",
|
|
18
18
|
"KOL-BADGE": ":host {display: inline-block;}:host > span {border-radius: 0.3125rem;display: inline-flex;font-size: 0.875em;font-style: normal;font-weight: 700;line-height: 1rem;}:host > span.smart-button {align-items: center;}:host > span kol-button-wc:hover > button {background-color: var(--color-ocean);color: var(--color-white);}:host > span kol-button-wc > button {color: inherit;font-size: 1rem;border-top-right-radius: 0.3125rem;border-bottom-right-radius: 0.3125rem;padding: 2px;}:host > span kol-span-wc {padding: 0.25rem 0.5rem;}:host > span > kol-span-wc {align-items: center;font-style: normal;gap: 0.5rem;}:host > span > kol-span-wc > span {display: flex;gap: 0.25rem;}",
|
|
19
19
|
"KOL-BUTTON-GROUP": ":host > kol-button-group-wc {display: flex;flex-wrap: wrap;gap: 0.5em;}",
|
|
20
20
|
"KOL-INDENTED-TEXT": ":host > div {background-color: var(--color-white);border-left: none;box-shadow: -4px 0px 0px var(--color-ocean);padding: 0.25em 0.5em;width: 100%;}",
|
|
21
21
|
"KOL-LINK": "a,button {background-color: transparent;border: 0;cursor: pointer;display: inline-block;}kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--color-midnight);font-style: normal;font-weight: 400;display: inline-flex;line-height: 1.5em;text-decoration-line: underline;border-radius: 0.25rem;}a:hover,button:hover {text-decoration-thickness: 0.25em;}a:visited,button:visited {color: var(--visited);}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
22
|
-
"KOL-
|
|
23
|
-
"KOL-DETAILS": "details > kol-indented-text {margin: 0.25rem 0 0 0.7rem;}",
|
|
22
|
+
"KOL-DETAILS": "",
|
|
24
23
|
"KOL-SPIN": ".spin {display: inline-block;height: 1rem;position: relative;width: 3rem;}.spin span {animation-timing-function: cubic-bezier(0, 1, 1, 0);border: 0.1rem solid rgb(255, 255, 255);border-radius: 50%;height: 0.8rem;width: 0.8rem;top: 0.1rem;position: absolute;}.spin span:nth-child(1) {background-color: #fc0;z-index: 0;animation: 2s ease 0s infinite normal none running spin1;left: 0.1rem;}.spin span:nth-child(2) {background-color: #f00;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 0.1rem;}.spin span:nth-child(3) {background-color: #000;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 1.1rem;}.spin span:nth-child(4) {background-color: #666;z-index: 0;animation: 2s ease 0s infinite normal none running spin3;left: 2.1rem;}@keyframes spin1 {0% {transform: scale(0);}100% {transform: scale(1);}}@keyframes spin2 {0% {transform: translate(0px, 0px);}100% {transform: translate(1rem, 0px);}}@keyframes spin3 {0% {transform: scale(1);}100% {transform: scale(0);}}",
|
|
25
24
|
"KOL-PROGRESS": ":host progress,:host span {display: block;height: 0px;overflow: hidden;width: 0px;}:host svg line:first-child,:host svg circle:first-child {fill: transparent;stroke: var(--color-ice);}:host svg line:last-child,:host svg circle:last-child {fill: transparent;stroke: var(--color-midnight);}",
|
|
26
|
-
"KOL-SELECT": 'kol-input {display: grid;}kol-input label {
|
|
27
|
-
"KOL-INPUT-COLOR": 'kol-input {display: grid;}kol-input label {
|
|
25
|
+
"KOL-SELECT": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
26
|
+
"KOL-INPUT-COLOR": 'kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;}kol-button-wc button {border-radius: 0.25rem;}kol-button-wc button kol-span-wc {border: 1px solid var(--color-grey);display: grid;min-height: 44px;min-width: 44px;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
28
27
|
"KOL-ACCORDION": ':host > div {font-family: var(--font-family);padding: 0 0.5rem 0 0;}:host > div > kol-heading-wc {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host > div > kol-heading-wc button {cursor: pointer;width: 100%;margin: 0;display: flex;gap: 0.5em;border: 0;align-items: center;overflow: hidden;font-size: inherit;line-height: 1.75em;background-color: transparent;padding: 0;}:host > div > kol-heading-wc button kol-icon {text-align: center;width: 1em;margin-left: 0.5em;}:host > div[part*="open"] > kol-heading-wc button {padding-bottom: 0;}:host > div > kol-heading-wc button kol-icon::part(icon) {font-weight: 900;color: var(--color-midnight);}:host > div > kol-heading-wc button kol-icon::part(close)::before {font-family: "Font Awesome 6 Free";content: "\\f077";}:host > div > kol-heading-wc button kol-icon::part(open)::before {font-family: "Font Awesome 6 Free";content: "\\f078";}:host > div {width: 100%;height: 100%;display: grid;}:host > div div[part="header"],:host > div[part*="open"] div[part="content"] {margin: 0;padding-left: 2em;}button {font-weight: inherit;font-size: inherit;line-height: inherit;}:host > div {background: var(--color-white);}:host > div[part*="open"] {padding-bottom: 1em;}',
|
|
29
28
|
"KOL-TABLE": ':host * {hyphens: var(--kolibri-hyphens);font-family: var(--kolibri-font-family);line-height: var(--kolibri-line-height);word-break: break-word;}:host > div {overflow-x: auto;overflow-y: hidden;}caption {padding: 0.5em;}th {font-weight: normal;color: var(--color-midnight);}:host table thead tr:first-child th,:host table thead tr:first-child td {border-width: 0;border-top-width: 2px;border-style: solid;border-color: var(--color-ice);}table {width: 100%;border-spacing: 0;}table,:host table thead tr:last-child th,:host table thead tr:last-child td {border-width: 0;border-bottom-width: 2px;border-style: solid;border-color: var(--color-ice);}th {background-color: var(--color-white);}th div {width: 100%;display: flex;gap: 0.5em;grid-template-columns: 1fr auto;align-items: center;}th div.center {justify-content: center;}th div.right {justify-content: end;}tr:nth-child(even) {background-color: #f2f2f2;}th,td {padding: 0.5em;}td.center > div {display: flex;justify-content: center;}td.right > div {display: flex;justify-content: end;}th[aria-sort="ascending"],th[aria-sort="descending"] {font-weight: 700;}:host > div:last-child {padding: 0.5em;}:host > div:last-child,:host > div:last-child > div:last-child {display: grid;align-items: center;justify-items: center;gap: 1em;}@media (min-width: 1024px) {:host > div:last-child,:host > div:last-child > div:last-child {grid-auto-flow: column;}:host > div:last-child kol-pagination{display: flex;gap: 1rem}}',
|
|
30
29
|
"KOL-NAV": '* {margin: 0;padding: 0;}nav {font-family: var(--font-family);font-size: var(--font-size);background-color: var(--color-smoke);}ul {list-style: none;}a {background-color: var(--color-white);text-decoration: none;color: var(--color-midnight);width: 100%;display: flex;align-items: center;font-style: normal;padding: 0.75rem 0.5rem 0.75rem 0;border-left-color: var(--color-white);border-left-style: solid;border-left-width: 0.5rem;line-height: 1.5rem;min-height: 44px;min-width: 44px;transition-duration: 0.5s;transition-property: background-color, color, border-color;letter-spacing: 0.175px;}a:hover {border-left-color: var(--color-ocean);font-weight: 700;letter-spacing: unset;}.selected a,[exportparts*="selected"] a {background-color: var(--color-ice);border-left-color: var(--color-midnight);color: var(--color-midnight);font-weight: 700;letter-spacing: unset;}a:hover,.selected a:hover,[exportparts*="selected"] a:hover {background-color: var(--color-ocean);color: var(--color-white);}a.icon-only > kol-span-wc {justify-items: center;}a.icon-only > kol-span-wc kol-icon {display: inline-block;text-align: center;width: 44px;flex-shrink: 0;}kol-icon ~ span {padding-left: 0.5rem;}.hidden {display: none;}:host > div {width: 100%;}:host > div > div:last-child {margin-top: 0.5em;width: 100%;text-align: center;} /* horizontal */ul.flex {display: flex;}li > div > div.absolute {position: absolute;}.horizontal a {display: block;}:host kol-span-wc {margin: 0 0.25rem;justify-items: baseline;}',
|
|
31
30
|
"KOL-CARD": "/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */:host > div {display: grid;width: 100%;height: 100%;background-color: white;grid-template-rows: min-content 2fr min-content;box-shadow: 0 0 0.25rem var(--color-grey);border-radius: 0.25rem;}:host kol-heading-wc {display: inline-flex;font-style: normal;font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host div.header {padding: 1rem 1rem 0.5rem 1rem;}:host div.content {padding: 0.5rem 1rem 1rem;overflow: hidden;}:host div.footer {padding: 0.5rem 1rem;}:host > div > div.content + div.footer {border-top: 2px solid var(--color-ice);}",
|
|
32
|
-
"KOL-INPUT-CHECKBOX": '/* INPUT */:host kol-input {display: grid;align-items: center;justify-items: left;width: 100%;min-height: 44px;}:host kol-input.checkbox {grid-template-columns: 2rem auto;}:host kol-input.switch {grid-template-columns: 4rem auto;}:host kol-input > div.input {display:
|
|
33
|
-
"KOL-INPUT-RADIO": '/* INPUT */label {cursor: pointer;display: grid;line-height: 20px;gap: 8px;width: 100%;}input {cursor: pointer;width: 100%;border-color: var(--color-grey);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}input:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}input:focus:hover {box-shadow: none;}input:hover {border-color: var(--color-midnight);}kol-alert {display: block;width: 100%;
|
|
34
|
-
"KOL-LINK-GROUP": "
|
|
31
|
+
"KOL-INPUT-CHECKBOX": '/* INPUT */:host kol-input {display: grid;align-items: center;justify-items: left;width: 100%;min-height: 44px;gap: 0.4em;}:host kol-input.checkbox {grid-template-columns: 2rem auto;}:host kol-input.switch {grid-template-columns: 4rem auto;}:host kol-input > div.input {display: inherit;min-height: 44px;order: 2;}:host kol-input > div.input input {margin: 0px;}:host kol-input > label {cursor: pointer;order: 3;}:host kol-input > kol-alert.error {order: 1;padding-top: 0.25em;grid-column: span 2 / auto;}:host kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}:host kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}:host kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}:host input {cursor: pointer;order: 1;width: 100%;border-color: var(--color-grey);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 1rem;}:host input:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}:host input:focus:hover {box-shadow: none;}:host input:active {box-shadow: none;}:host kol-alert {display: block;width: 100%;} /* CHECKBOX */:host kol-input label span {margin-top: 0.125rem;}:host .required label > span::after {content: "*";padding-left: 0.125em;}:host kol-input input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}:host kol-input input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}:host kol-input input[type="checkbox"]:before {content: "";cursor: pointer;}:host kol-input input[type="checkbox"]:checked {background-color: var(--color-midnight);border-color: var(--color-midnight);}:host kol-input.checkbox input[type="checkbox"] {border-radius: 0.25em;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:before {border-radius: 1.5em;background-color: transparent;display: block;height: calc(6 * var(--spacing));position: relative;width: calc(6 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:checked:before {border-right-width: 3px;border-bottom-width: 3px;left: calc(1.5 * var(--spacing) - 2px);top: calc(2.85 * var(--spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(3 * var(--spacing));width: calc(1.5 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1; /* background-color: white; */}:host kol-input.checkbox input[type="checkbox"]:indeterminate:before {background-color: var(--color-white);height: 0.125rem;top: 0.6rem;left: 0.1rem;width: calc(4 * var(--spacing));transform: inherit;}:host kol-input.checkbox input[type="checkbox"]:checked:indeterminate:before {border-width: 0px 1px 1px 0px;}:host kol-input.switch input[type="checkbox"] {min-width: 3.5em;width: 3.5em;background-color: var(--color-grey);border-width: 0;height: 1.5em;border-radius: 1.25em;display: inline-block;position: relative;}:host kol-input.switch input[type="checkbox"]:before {-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.25em;height: 1.25em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);border-radius: 1.25em;background-color: white;position: absolute;}:host kol-input.switch input[type="checkbox"]:checked {background-color: var(--color-midnight);}:host kol-input.switch input[type="checkbox"]:checked:before {-webkit-transform: translateX(2em);-moz-transform: translateX(2em);-ms-transform: translateX(2em);transform: translateX(2em);--tw-bg-opacity: 1;}:host kol-input.switch input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1;}:host kol-input.switch input[type="checkbox"]:indeterminate:before {-webkit-transform: translateX(1em);-moz-transform: translateX(1em);-ms-transform: translateX(1em);transform: translateX(1em);}:host .disabled {opacity: 0.33;}',
|
|
32
|
+
"KOL-INPUT-RADIO": '/* INPUT */kol-input {display: grid;gap: 0.4em;}label {cursor: pointer;display: grid;line-height: 20px;gap: 8px;width: 100%;}input {cursor: pointer;width: 100%;border-color: var(--color-grey);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}input:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}input:focus:hover {box-shadow: none;}input:hover {border-color: var(--color-midnight);}kol-alert {display: block;width: 100%;}.required legend > span::after {content: "*";padding-left: 0.125em;} /* RADIO */fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}fieldset div {cursor: pointer;display: flex;flex-direction: row;align-items: center;position: relative;min-height: 44px;margin: 0;}fieldset div label {cursor: pointer;display: flex;padding-left: 0.25em;width: 100%;}fieldset div label span {margin-top: 0.125em;}fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * var(--spacing) - 2px);top: calc(1.5 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * var(--spacing));width: calc(3 * var(--spacing));}fieldset div input[type="radio"]:checked:before {background-color: var(--color-midnight);}fieldset div input[type="radio"]:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}fieldset #error {order: 1;}fieldset legend {order: 2;display: contents;}fieldset kol-input {order: 3;}fieldset.error {padding-left: 1em;border-left: 3px solid var(--color-red);}fieldset kol-alert#error {color: var(--color-red);font-weight: 700;}fieldset.error input:focus,fieldset.error select:focus,fieldset.error textarea:focus {outline-color: var(--color-red) !important;}fieldset.error kol-alert.error {margin-left: -0.25em;color: var(--color-red);font-weight: 700;}.disabled {opacity: 0.33;}fieldset.horizontal {display: flex;flex-wrap: wrap;gap: 0.5rem 1rem;}fieldset.horizontal legend {display: inline-block;margin-bottom: 0.25em;}',
|
|
33
|
+
"KOL-LINK-GROUP": "",
|
|
35
34
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
|
36
35
|
"KOL-TABS": 'button:disabled {opacity: 0.5;cursor: not-allowed;}:host kol-button-group-wc {display: inline-flex;gap: 2rem;flex-wrap: wrap;}button {box-sizing: border-box;background-color: transparent;border: 0;border-radius: 0.25rem;font-style: normal;font-weight: 700;font-size: 18px;line-height: 22px;min-height: 44px;min-width: 44px;text-transform: uppercase;color: var(--color-grey);padding: 0;}button:hover {color: var(--color-midnight);}button.primary,button.selected {/* border-bottom: 0.025rem solid var(--color-midnight); */color: var(--color-midnight);text-decoration-line: underline;text-underline-offset: 5px;text-decoration-thickness: 0.25em;}button kol-span-wc > span {gap: 0.5rem;}:host > div > div {padding: 0.25em 0;}.close-button {display: none;font-size: 25%;height: fit-content;width: 0;}.close-button button {width: 1rem;position: relative;height: 1rem;left: -4.25em;top: 0.25em;}div[role="tabpanel"] {height: 100%;}div.grid {height: 100%;}:host > .tabs-align-right {display: grid;grid-template-columns: 1fr auto;}:host > .tabs-align-right kol-button-group-wc {display: grid;order: 2;}:host > .tabs-align-left {display: grid;grid-template-columns: auto 1fr;}:host > .tabs-align-left kol-button-group-wc {display: grid;order: 0;}:host > .tabs-align-bottom {display: grid;grid-template-rows: 1fr auto;}:host > .tabs-align-bottom kol-button-group-wc {order: 2;}:host > .tabs-align-bottom kol-button-group-wc > div {display: flex;}:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {margin: 0px 1em 0px 0px;}:host > .tabs-align-bottom > kol-button-group-wc > div > div {margin: 0px 1em;}:host > .tabs-align-top {display: grid;grid-template-rows: auto 1fr;}:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-top kol-button-group-wc > div {display: flex;}:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {margin: 0px 1em 0px 0px;}:host > .tabs-align-top > kol-button-group-wc > div > div {margin: 0px 1em;}:host > div {display: grid;}:host > div.tabs-align-left {grid-template-columns: auto 1fr;}:host > div.tabs-align-right {grid-template-columns: 1fr auto;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-bottom kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {order: 1;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {gap: inherit;}:host > div.tabs-align-left kol-button-group-wc > div,:host > div.tabs-align-left kol-button-group-wc > div > div,:host > div.tabs-align-right kol-button-group-wc > div,:host > div.tabs-align-right kol-button-group-wc > div > div {display: grid;}:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {width: 100%;}:host > div.tabs-align-bottom kol-button-group-wc div,:host > div.tabs-align-top kol-button-group-wc div {display: flex;flex-wrap: wrap;}:host kol-button-group-wc button {border: none;}',
|
|
37
36
|
"KOL-PAGINATION": ":host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}:host .selected button {min-width: 44px;min-height: 44px;display: grid;line-height: 1.5rem;font-family: var(--font-family);cursor: not-allowed;font-weight: 700;padding: 10px 12px;border-radius: 1.5em;border: none;font-size: 16px;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;color: var(--color-midnight);background-color: var(--color-ice);border-color: var(--color-ice);}:host > div > span {align-self: flex-end;padding-bottom: 0.5rem;color: var(--color-midnight);}",
|
|
38
|
-
"KOL-INPUT-RANGE": '/* https://www.cssportal.com/style-input-range/ */kol-input {display: grid;}kol-input label {
|
|
39
|
-
"KOL-LINK-BUTTON": "a {display: inline-flex;gap: 0.25rem;align-items: center;justify-items: center;}a {background-color: transparent;border: 0;cursor: pointer;border-radius: 1.5em;min-width: 44px;min-height: 44px;padding: 0;text-decoration: none !important;}a > kol-span-wc {display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}a:disabled > kol-span-wc {cursor: not-allowed;opacity: 0.5;}.primary a > kol-span-wc,.primary a:disabled:hover > kol-span-wc {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}.secondary a > kol-span-wc,.secondary a:disabled:hover > kol-span-wc,.normal a > kol-span-wc,.normal a:disabled:hover > kol-span-wc {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}.danger a > kol-span-wc,.danger a:disabled:hover > kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}.ghost a > kol-span-wc,.ghost a:disabled:hover > kol-span-wc {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);} /*-----------*/.primary a:active > kol-span-wc,.primary a:hover > kol-span-wc,.secondary a:active > kol-span-wc,.secondary a:hover > kol-span-wc,.normal a:active > kol-span-wc,.normal a:hover > kol-span-wc,.danger a:active > kol-span-wc,.danger a:hover > kol-span-wc,.ghost a:active > kol-span-wc,.ghost a:hover > kol-span-wc {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}.danger a:active > kol-span-wc,.danger a:hover > kol-span-wc {background-color: var(--color-crimson);border-color: var(--color-crimson);}a:disabled:hover > kol-span-wc,a:focus:hover > kol-span-wc {box-shadow: none;}.primary a:active > kol-span-wc,.secondary a:active > kol-span-wc,.normal a:active > kol-span-wc,.danger a:active > kol-span-wc,.ghost a:active > kol-span-wc {border-color: var(--color-white);box-shadow: none;outline: none;}:host a > kol-span-wc > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}a.icon-only > kol-span-wc {padding: 8px;}a.icon-only > kol-span-wc > span > span {display: none;}a.icon-only > kol-span-wc kol-icon {
|
|
37
|
+
"KOL-INPUT-RANGE": '/* https://www.cssportal.com/style-input-range/ */kol-input {display: grid;gap: 0.4em;}kol-input label {order: 2;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: calc(100% - 4em);}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required #label::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.725em 0.875em;box-sizing: border-box;border-color: transparent;border-width: 2px;border-style: solid;}.icon-left input,.icon-left select {padding-left: calc(0.875em + 1em + 0.5em);}.icon-right input,.icon-right select {padding-right: calc(0.875em + 1em + 0.5em);}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -33px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}.icon-left input,.icon-left select {margin-left: 2em;}.icon-right input,.icon-right select {margin-right: 2em;}input[type="range"] {appearance: none;-webkit-appearance: none;-moz-appearance: none;}input[type="range"] {overflow: visible;background-color: var(--color-ice);border: 0;height: 0.5rem;padding: 0;padding-bottom: 0;margin-bottom: 0;}input[type="range"]::-webkit-slider-thumb {box-sizing: border-box;background-color: var(--color-midnight);height: 20px;width: 20px;border-radius: 20px;cursor: pointer;-webkit-appearance: none;}',
|
|
38
|
+
"KOL-LINK-BUTTON": "a {display: inline-flex;gap: 0.25rem;align-items: center;justify-items: center;}a {background-color: transparent;border: 0;cursor: pointer;border-radius: 1.5em;min-width: 44px;min-height: 44px;padding: 0;text-decoration: none !important;}a > kol-span-wc {display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}a:disabled > kol-span-wc {cursor: not-allowed;opacity: 0.5;}.primary a > kol-span-wc,.primary a:disabled:hover > kol-span-wc {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}.secondary a > kol-span-wc,.secondary a:disabled:hover > kol-span-wc,.normal a > kol-span-wc,.normal a:disabled:hover > kol-span-wc {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}.danger a > kol-span-wc,.danger a:disabled:hover > kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}.ghost a > kol-span-wc,.ghost a:disabled:hover > kol-span-wc {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);} /*-----------*/.primary a:active > kol-span-wc,.primary a:hover > kol-span-wc,.secondary a:active > kol-span-wc,.secondary a:hover > kol-span-wc,.normal a:active > kol-span-wc,.normal a:hover > kol-span-wc,.danger a:active > kol-span-wc,.danger a:hover > kol-span-wc,.ghost a:active > kol-span-wc,.ghost a:hover > kol-span-wc {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}.danger a:active > kol-span-wc,.danger a:hover > kol-span-wc {background-color: var(--color-crimson);border-color: var(--color-crimson);}a:disabled:hover > kol-span-wc,a:focus:hover > kol-span-wc {box-shadow: none;}.primary a:active > kol-span-wc,.secondary a:active > kol-span-wc,.normal a:active > kol-span-wc,.danger a:active > kol-span-wc,.ghost a:active > kol-span-wc {border-color: var(--color-white);box-shadow: none;outline: none;}:host a > kol-span-wc > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}a.icon-only > kol-span-wc {padding: 8px;}a.icon-only > kol-span-wc > span > span {display: none;}a.icon-only > kol-span-wc kol-icon {width: 1.5em;height: 1.5em;}a.loading > kol-span-wc kol-icon {animation: spin 5s infinite linear;} /** small ghost a */.ghost.small a > kol-span-wc {border: none;background-color: transparent;box-shadow: none;}.ghost.small a > kol-span-wc > span {border-radius: 1.5em;border-style: solid;border-width: 2px;border-color: var(--color-white);background-color: var(--color-white);}.ghost.small a:active > kol-span-wc > span,.ghost.small a:hover > kol-span-wc > span,.ghost.small.transparent a:active > kol-span-wc > span,.ghost.small.transparent a:hover > kol-span-wc > span {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);} /** a with transparent background */.transparent a > kol-span-wc > span,.ghost.small.transparent a > kol-span-wc > span,.transparent a > kol-span-wc {background-color: transparent;border-color: transparent;}.loading a > kol-span-wc kol-icon {animation: spin 5s infinite linear;}",
|
|
40
39
|
"KOL-BUTTON-LINK": "a,button {background-color: transparent;border: 0;cursor: pointer;display: inline-block;margin: 0;padding: 0;}kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--color-midnight);font-style: normal;font-weight: 400;display: inline-flex;line-height: 1.5em;text-decoration-line: underline;border-radius: 0.25rem;}a:hover,button:hover {text-decoration-thickness: 0.25em;}a:visited,button:visited {color: var(--visited);}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
41
40
|
"KOL-ABBR": "abbr {border-bottom: dotted var(--color-metal) 1px;text-decoration: none !important;}"
|
|
42
41
|
});
|
|
@@ -44,12 +43,12 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
44
43
|
const BPA = KoliBri.createTheme("bpa", {
|
|
45
44
|
GLOBAL: ":host {--primary: #007a89;--secondary: #0b4d59;--normal: #f2f3f4;--danger: #bc0000;--danger-light: rgba(188, 0, 0, 0.1);--ghost: white;--font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;--font-size: 16px;--error: var(--danger);--dark-red: #780f2d;--dark-green: #005c45;--red-orange: #c44931;--visited: #5f316e;--secondary-blue: #004b76;--default-letter: #202020;--default-border: #576164;--default-border-hover: var(--secondary);--border-default: #bec5c9;--background-light-grey: #f2f3f4;--kolibri-color-spin-1: blue;--kolibri-color-spin-2: red;--kolibri-color-spin-3: green;--spacing: 0.25em;}:host {font-family: var(--font-family);font-size: var(--font-size);}:host * {box-sizing: border-box;letter-spacing: inherit;font-family: inherit;word-spacing: inherit;hyphens: auto;word-break: break-word;}:host div {background-color: white;}:host button {cursor: pointer;}.hidden {visibility: hidden;height: 0;}",
|
|
46
45
|
"KOL-BUTTON": ':host button {padding: 7px 20px;border: solid 2px #007a89;border-radius: 27px;color: #fff;font-size: 12px;font-weight: bold;line-height: 2.16667;text-align: center;display: inline-flex;align-items: center;justify-content: center;position: relative;text-transform: uppercase;transition-duration: 0.5s;transition-property: background-color, color, border-color;}:host button.icon-only {padding: 7px 14px;}:host button:hover::before,:host button:focus::before {font-family: "Font Awesome 5 Free" !important;content: "\\f061";font-weight: 900;margin-right: 0.5em;}:host button:focus {outline-color: var(--primary);outline-offset: 2px;outline-style: solid;outline-width: 2px;}button:disabled {cursor: not-allowed;opacity: 0.5;}button.primary,button.primary:disabled:hover {color: white;background-color: var(--primary);border-color: var(--primary);}button.secondary,button.secondary:disabled:hover,button.normal,button.normal:disabled:hover {color: var(--secondary-blue);background-color: var(--normal);border-color: var(--normal);}button.danger,button.danger:disabled:hover {color: white;background-color: var(--danger);border-color: var(--danger);}button.ghost,button.ghost:disabled:hover {color: var(--primary);border-color: var(--primary);background-color: white;}button.primary:hover,button.primary:focus {background-color: var(--secondary);}button.danger:hover,button.danger:focus {background-color: var(--dark-red);}button.ghost:hover,button.ghost:focus {background-color: var(--primary);border-color: var(--primary);color: white;}button.primary:active,button.secondary:active,button.normal:active,button.danger:active,button.ghost:active {outline: 0 !important;}:host button:disabled:hover::before,:host button:disabled:focus::before {display: none;}',
|
|
47
|
-
"KOL-INPUT-TEXT": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
48
|
-
"KOL-INPUT-PASSWORD": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
49
|
-
"KOL-INPUT-NUMBER": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
50
|
-
"KOL-INPUT-EMAIL": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
51
|
-
"KOL-INPUT-FILE": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
52
|
-
"KOL-TEXTAREA": 'textarea:hover,textarea:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
46
|
+
"KOL-INPUT-TEXT": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.75em;}input.error {background-color: var(--danger-light) !important;border-color: var(--danger);}input::placeholder {font-style: italic;color: var(--default-border);}input:read-only,input:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: " *";}',
|
|
47
|
+
"KOL-INPUT-PASSWORD": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.75em;}input.error {background-color: var(--danger-light) !important;border-color: var(--danger);}input::placeholder {font-style: italic;color: var(--default-border);}input:read-only,input:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: " *";}',
|
|
48
|
+
"KOL-INPUT-NUMBER": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.75em;}input.error {background-color: var(--danger-light) !important;border-color: var(--danger);}input::placeholder {font-style: italic;color: var(--default-border);}input:read-only,input:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: " *";}',
|
|
49
|
+
"KOL-INPUT-EMAIL": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.75em;}input.error {background-color: var(--danger-light) !important;border-color: var(--danger);}input::placeholder {font-style: italic;color: var(--default-border);}input:read-only,input:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: " *";}',
|
|
50
|
+
"KOL-INPUT-FILE": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.75em;}input.error {background-color: var(--danger-light) !important;border-color: var(--danger);}input::placeholder {font-style: italic;color: var(--default-border);}input:read-only,input:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: " *";}',
|
|
51
|
+
"KOL-TEXTAREA": 'textarea:hover,textarea:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}textarea.error {background-color: var(--danger-light) !important;border-color: var(--danger);}textarea {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.75em;}textarea::placeholder {color: var(--default-border);}textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}.kol-required span::after {content: "*";}kol-alert {margin-top: var(--spacing);display: block;}',
|
|
53
52
|
"KOL-ALERT": ":host > div {border-width: 2px;border-style: solid;border-radius: 5px;display: flex;width: 100%;overflow: hidden;border-color: transparent;}:host > div.error {border-color: var(--danger);}:host > div.error .icon {background-color: var(--danger);}:host > div.info {border-color: var(--secondary-blue);}:host > div.info .icon {background-color: var(--secondary-blue);}:host > div.success {border-color: var(--dark-green);}:host > div.success .icon {background-color: var(--dark-green);}:host > div.warning {border-color: var(--dark-red);}:host > div.warning .icon {background-color: var(--dark-red);}:host .icon {color: white;display: inline-block;padding: 0 0.25rem;}:host > div > div > .heading {padding: 0 0.25rem;display: inline-block;}:host > div > div > .heading > .icon {margin-left: -0.25rem;margin-right: 0.25rem;border-radius: 0 0 0.25rem 0;}:host > div > div > div:last-child {padding: 0.25rem;}",
|
|
54
53
|
"KOL-HEADING": "h1,h2,h3,h4,h5,h6 {line-height: 1.5em;margin: 0;padding: 0;}h1 {font-size: 1.2rem;}h2,h3,h4,h5,h6 {font-size: 1.1rem;}",
|
|
55
54
|
"KOL-BADGE": ":host {display: inline-block;}span {align-items: center;border-radius: 0.3125rem;display: flex;line-height: 1.25rem;gap: 0.5rem;padding: 0.25rem 0.75rem;}",
|
|
@@ -60,14 +59,14 @@ const BPA = KoliBri.createTheme("bpa", {
|
|
|
60
59
|
"KOL-DETAILS": "summary {cursor: pointer;display: flow-root;}summary span {text-decoration: underline;}",
|
|
61
60
|
"KOL-SPIN": ".spin {display: inline-block;height: 1rem;position: relative;width: 3rem;}.spin span {animation-timing-function: cubic-bezier(0, 1, 1, 0);border: 0.1rem solid rgb(255, 255, 255);border-radius: 50%;height: 0.8rem;width: 0.8rem;top: 0.1rem;position: absolute;}.spin span:nth-child(1) {background-color: #fc0;z-index: 0;animation: 2s ease 0s infinite normal none running spin1;left: 0.1rem;}.spin span:nth-child(2) {background-color: #f00;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 0.1rem;}.spin span:nth-child(3) {background-color: #000;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 1.1rem;}.spin span:nth-child(4) {background-color: #666;z-index: 0;animation: 2s ease 0s infinite normal none running spin3;left: 2.1rem;}@keyframes spin1 {0% {transform: scale(0);}100% {transform: scale(1);}}@keyframes spin2 {0% {transform: translate(0px, 0px);}100% {transform: translate(1rem, 0px);}}@keyframes spin3 {0% {transform: scale(1);}100% {transform: scale(0);}}",
|
|
62
61
|
"KOL-PROGRESS": ":host progress,:host span {display: block;height: 0px;overflow: hidden;width: 0px;}svg line:first-child,svg circle:first-child {fill: transparent;stroke: #efefef;}svg line:last-child,svg circle:last-child {stroke: var(--secondary);fill: transparent;}progress {display: none;}",
|
|
63
|
-
"KOL-SELECT": 'select:hover,select:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
64
|
-
"KOL-INPUT-COLOR": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
62
|
+
"KOL-SELECT": 'select:hover,select:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}select.error {background-color: var(--danger-light) !important;border-color: var(--danger);}select {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.75em;}select:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}option {height: 2em;padding: 0.5em;}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: "*";}',
|
|
63
|
+
"KOL-INPUT-COLOR": 'input:hover,input:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;padding: 0.25em;overflow: hidden;height: 3em;}input.error {background-color: var(--danger-light) !important;border-color: var(--danger);}input:read-only,input:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: "*";}',
|
|
65
64
|
"KOL-ACCORDION": ':host > div > kol-heading > button {width: 100%;display: flex;align-items: center;overflow: hidden;font-size: inherit;border: 0;padding: 0.25rem 0.5rem;background-color: transparent;}:host button:focus {outline-color: var(--primary) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}:host > div > kol-heading > button > span {padding-top: 0.1em;}:host > div > kol-heading > button i[part*="icon"] {font-family: "Font Awesome 5 Free" !important;width: 2rem;padding-right: 0.5rem;display: block;}:host > div > kol-heading > button i[part*="close"]::before {content: "\\f139";font-weight: 900;color: var(--secondary);}:host > div > kol-heading > button i[part*="open"]::before {content: "\\f13a";font-weight: 900;color: var(--secondary);}:host > div {width: 100%;height: 100%;display: grid;border-radius: 5px;border: 2px solid var(--border-default);}:host > div[part*="open"] {background-color: #f2f3f4;}:host > div[part*="open"] div[part="header"],:host > div[part*="open"] div[part="content"] {padding: 0 0.5rem 0.5rem 2.5rem;}button {font-weight: inherit;font-size: inherit;line-height: inherit;}',
|
|
66
65
|
"KOL-TABLE": ':host > div {overflow: auto;}th {font-size: 0.875rem;font-weight: normal;color: var(--secondary);}:host table thead tr:first-child th,:host table thead tr:first-child td {border-width: 0;border-top-width: 1px;border-style: solid;border-color: var(--background-light-grey);}table {width: 100%;}table,:host table thead tr:last-child th,:host table thead tr:last-child td {border-width: 0;border-bottom-width: 1px;border-style: solid;border-color: var(--background-light-grey);}th div {width: 100%;display: flex;gap: 0.5em;align-items: center;}th,td {padding: 0.5em;}th[aria-sort="ascending"],th[aria-sort="descending"] {font-weight: 700;}:host > div:last-child {display: grid;grid-auto-flow: column;align-items: center;}:host > div:last-child > div:last-child {display: grid;grid-auto-flow: column;align-items: center;}.hidden {display: none;}',
|
|
67
66
|
"KOL-NAV": 'ul {width: 100%;list-style: none;margin: 0px;padding: 0px;}:host div.horizontal > nav > ul {display: flex;}li {height: 100%;width: 100%;padding: 0.5em;}a {align-items: center;border-radius: 0.25em;line-height: 2em;height: 100%;text-decoration: none;background-image: none;padding: 0.25em 0.5em;color: #333;font-weight: bold;text-transform: uppercase;display: flex;position: relative;cursor: pointer;}a:focus {outline-color: var(--primary) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}i {padding: 0.25em;display: block;}a:hover {box-shadow: 0px 0.125rem 0.5rem 0.125rem rgba(128, 128, 128, 0.5);color: var(--secondary);}a:hover {background-color: var(--background-light-grey);}a:active {outline: none;}a[part*="selected"] {box-shadow: 0px 0.0625rem 0.25rem 0.0625rem rgba(128, 206, 237, 0.5);color: white;background-color: var(--primary);}a > span[class="hidden"] {visibility: hidden;height: 0px;display: none;}:host div > div {margin-top: 0.5rem;width: 100%;text-align: center;}:host div.inline-block {display: inline-block;}',
|
|
68
67
|
"KOL-CARD": ":host > div {background-color: white;border-color: var(--border-default);border-style: solid;border-width: 1px;border-radius: unset;width: 100%;height: 100%;overflow: hidden;}kol-heading {padding: 0.5rem;display: block;border-bottom-style: solid;border-bottom-color: var(--border-default);border-bottom-width: 1px;}:host > div > div {display: block;padding: 0.5rem;}:host > div > div:last-child {display: block;padding: 0.5rem;border-top-style: solid;border-top-color: var(--border-default);border-top-width: 1px;}",
|
|
69
|
-
"KOL-INPUT-CHECKBOX": '/* INPUT */:host input:focus {outline-color: var(--primary) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}label {color: var(--default-letter);
|
|
70
|
-
"KOL-INPUT-RADIO": '/* INPUT */:host input:focus {outline-color: var(--primary) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}label {color: var(--default-letter);
|
|
68
|
+
"KOL-INPUT-CHECKBOX": '/* INPUT */:host input:focus {outline-color: var(--primary) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;}input {width: 100%;color: var(--default-letter);border-color: var(--default-border);border-width: 2px;border-style: solid;line-height: 24px;font-size: 16px;}input:hover {border-color: var(--default-border-hover);}kol-alert {display: block;width: 100%;}.kol-required span::after {content: "*";} /* CHECKBOX */label {cursor: pointer;display: flex;flex-direction: row;position: relative;grid-gap: calc(2 * var(--spacing));gap: calc(2 * var(--spacing));}label span {margin-top: 0.125rem;}label.kol-required span::after {content: "*";}label input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}label input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}label input[type="checkbox"]:before {content: "";cursor: pointer;}label input[type="checkbox"]:checked {background-color: var(--secondary);}label input[type="checkbox"].checkbox {height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}label input[type="checkbox"].checkbox:before {background-color: transparent;display: block;height: calc(6 * var(--spacing));position: relative;width: calc(6 * var(--spacing));}label input[type="checkbox"].checkbox:checked:before {border-right-width: 3px;border-bottom-width: 3px;left: calc(1.5 * var(--spacing) - 2px);top: calc(2.85 * var(--spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(3 * var(--spacing));width: calc(1.5 * var(--spacing));}label input[type="checkbox"].checkbox:indeterminate {--tw-bg-opacity: 1;background-color: rgba(242, 242, 242, var(--tw-bg-opacity));}label input[type="checkbox"].checkbox:indeterminate:before {background-color: var(--secondary);height: 0.375rem;top: 0.45rem;left: 0.15rem;width: calc(4 * var(--spacing));}label input[type="checkbox"].switch {min-width: 3.2em;width: 3.2em;height: 1.7em;display: inline-block;position: relative;}label input[type="checkbox"].switch:before {-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.2em;height: 1.2em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);box-shadow: 0 0 0.1rem var(--background-light-grey);background-color: var(--secondary);position: absolute;}label input[type="checkbox"].switch:checked:before {-webkit-transform: translateX(1.5em);-moz-transform: translateX(1.5em);-ms-transform: translateX(1.5em);transform: translateX(1.5em);--tw-bg-opacity: 1;background-color: rgba(252, 252, 252, var(--tw-bg-opacity));}label input[type="checkbox"].switch:indeterminate {--tw-bg-opacity: 1;background-color: rgba(242, 242, 242, var(--tw-bg-opacity));}label input[type="checkbox"].switch:indeterminate:before {-webkit-transform: translateX(0.75em);-moz-transform: translateX(0.75em);-ms-transform: translateX(0.75em);transform: translateX(0.75em);}',
|
|
69
|
+
"KOL-INPUT-RADIO": '/* INPUT */:host input:focus {outline-color: var(--primary) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;}input {width: 100%;color: var(--default-letter);border-color: var(--default-border);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}input:hover {border-color: var(--default-border-hover);}kol-alert {display: block;width: 100%;}.kol-required span::after {content: "*";}/* RADIO */:host fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}:host fieldset legend {display: block;width: 100%;line-height: 1.5em;}:host fieldset div {cursor: pointer;display: flex;flex-direction: row;gap: 0.5em;margin-top: 0.25em;margin-bottom: 0.25em;align-items: center;position: relative;}:host fieldset div label {cursor: pointer;display: flex;width: 100%;}:host fieldset div label span {margin-top: 0.125em;}:host fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}:host fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * var(--spacing) - 2px);top: calc(1.5 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * var(--spacing));width: calc(3 * var(--spacing));}:host fieldset div input[type="radio"]:checked:before {box-shadow: 0 0 0.1rem black;background-color: var(--secondary);}:host fieldset div input[type="radio"]:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}',
|
|
71
70
|
"KOL-LINK-GROUP": "nav {background-color: white;}ul {list-style: none;margin: 0px;padding: 0px;}nav.horizontal ul {display: flex;flex-wrap: wrap;}li {margin-left: 1rem;margin-right: 0.5rem;}li.list-none {list-style-type: none !important;margin-left: 0;}",
|
|
72
71
|
"KOL-TOAST": ":host > div {display: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 50;}:host > div > kol-alert {display: block;padding: 1em;margin: auto;max-width: 750px;}"
|
|
73
72
|
});
|
|
@@ -103,7 +102,7 @@ const BZSt = KoliBri.createTheme("bzst", {
|
|
|
103
102
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
|
104
103
|
"KOL-TABS": 'button:disabled {opacity: 0.5;cursor: not-allowed;}:host {font-family: var(--font-family);}:host > div {display: block;width: 100%;}:host kol-button-group-wc {display: inline-block;border-radius: 0.25rem 0.25rem 0 0;background-color: var(--kolibri-color-normal);}:host kol-button-group-wc > div {display: inline-flex;}:host kol-button-group-wc > div + div {margin-left: 0.25em;}:host > div > div {padding: 0.25em;border: 1px solid var(--kolibri-border-color);border-radius: 0 0 0.25rem 0.25rem;}button {box-sizing: border-box;font-size: inherit;line-height: 1.25em;cursor: pointer;border-width: 2px;box-shadow: 0 0 0.25em gray;font-family: var(--kolibri-font-family);width: inherit;border-radius: var(--kolibri-border-radius);border-style: solid;padding: calc(2 * var(--kolibri-spacing));display: grid;gap: 0.25em;align-items: center;justify-content: center;text-align: center;transition-duration: 0.5s;transition-property: background-color, color, border-color;}kol-button-wc[aria-selected="true"] button {border-bottom-width: 0.25em !important;border-bottom-style: solid;border-bottom-color: var(--kolibri-color-accent) !important;}button > kol-span-wc span {display: flex;gap: 0.25em;align-items: center;justify-content: center;}button:disabled {cursor: not-allowed;opacity: 0.5;}button.primary,button.primary:disabled:hover {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);color: white;}button.primary:hover,button.primary:focus {color: var(--kolibri-color-primary);}button.secondary,button.secondary:disabled:hover {background-color: var(--kolibri-color-secondary);border-color: var(--kolibri-color-secondary);color: white;}button.secondary:hover,button.secondary:focus {color: var(--kolibri-color-secondary);}button.normal,button.normal:disabled:hover {background-color: var(--kolibri-color-normal);border-color: var(--kolibri-color-normal);color: white;}button.normal:hover,button.normal:focus {color: var(--kolibri-color-normal);}button.danger,button.danger:disabled:hover {background-color: var(--kolibri-color-danger);border-color: var(--kolibri-color-danger);color: white;}button.danger:hover,button.danger:focus {color: var(--kolibri-color-danger);}button.ghost,button.ghost:disabled:hover {background-color: white;border-color: var(--kolibri-color-ghost);color: var(--kolibri-color-ghost);}button.ghost:hover,button.ghost:focus {background-color: var(--kolibri-color-ghost);color: white;}button:hover,button:focus {background-color: white;box-shadow: 0 0 0.25em black;}button:active {outline: 0 !important;box-shadow: none !important;}.close-button {font-size: 25%;height: fit-content;width: 0;}.close-button button {width: 1rem;position: relative;height: 1rem;left: -4.25em;top: 0.25em;}:host > div {display: grid;}:host > div.tabs-align-left {grid-template-columns: auto 1fr;}:host > div.tabs-align-right {grid-template-columns: 1fr auto;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-bottom kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {order: 1;}:host > div.tabs-align-left kol-button-group-wc > div,:host > div.tabs-align-left kol-button-group-wc > div > div,:host > div.tabs-align-right kol-button-group-wc > div,:host > div.tabs-align-right kol-button-group-wc > div > div {display: grid;}:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {width: 100%;}:host > div.tabs-align-bottom kol-button-group-wc div,:host > div.tabs-align-top kol-button-group-wc div {display: flex;flex-wrap: wrap;}:host > div.tabs-align-bottom > kol-button-group-wc {border-radius: 0 0 0.25rem 0.25rem;}:host > div.tabs-align-bottom > div {border-radius: 0.25rem 0.25rem 0 0;}:host > div.tabs-align-top > kol-button-group-wc {border-radius: 0.25rem 0.25rem 0 0;}:host > div.tabs-align-top > div {border-radius: 0 0 0.25rem 0.25rem;}:host > div.tabs-align-left > kol-button-group-wc {border-radius: 0.25rem 0 0 0.25rem;}:host > div.tabs-align-left > div {border-radius: 0 0.25rem 0.25rem 0;}:host > div.tabs-align-right > kol-button-group-wc {border-radius: 0 0.25rem 0.25rem 0;}:host > div.tabs-align-right > div {border-radius: 0.25rem 0 0 0.25rem;}',
|
|
105
104
|
"KOL-PAGINATION": ":host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}:host .selected button {min-width: 44px;min-height: 44px;display: grid;line-height: 1.5;font-family: var(--font-family);cursor: not-allowed;font-weight: 700;padding: 10px 12px;border-radius: 1.5em;border: none;font-size: 16px;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;color: var(--color-midnight);background-color: var(--color-ice);border-color: var(--color-ice);}:host > div > span {align-self: flex-end;padding-bottom: 0.5rem;color: var(--color-midnight);}:host kol-select label {padding: 0;}",
|
|
106
|
-
"KOL-INPUT-RANGE": '/* https://www.cssportal.com/style-input-range/ */kol-input {display: grid;}kol-input label {
|
|
105
|
+
"KOL-INPUT-RANGE": '/* https://www.cssportal.com/style-input-range/ */kol-input {display: grid;}kol-input label {order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: calc(100% - 4em);}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required #label::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.725em 0.875em;box-sizing: border-box;border-color: transparent;border-width: 2px;border-style: solid;}.icon-left input,.icon-left select {padding-left: calc(0.875em + 1em + 0.5em);}.icon-right input,.icon-right select {padding-right: calc(0.875em + 1em + 0.5em);}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -33px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}.icon-left input,.icon-left select {margin-left: 2em;}.icon-right input,.icon-right select {margin-right: 2em;}input[type="range"] {appearance: none;-webkit-appearance: none;-moz-appearance: none;}input[type="range"] {overflow: visible;background-color: var(--color-ice);border: 0;height: 0.5rem;padding: 0;padding-bottom: 0;margin-bottom: 0;}input[type="range"]::-webkit-slider-thumb {box-sizing: border-box;background-color: var(--color-midnight);height: 20px;width: 20px;border-radius: 20px;cursor: pointer;-webkit-appearance: none;}',
|
|
107
106
|
"KOL-LINK-BUTTON": ":host {display: inline-block;} /*-----------*/a {border-width: 1px;border-style: solid;min-width: 44px;min-height: 44px;display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;font-size: var(--font-size);align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}a:hover:enabled {text-decoration: underline;}.primary a,.primary a:active,.primary a:hover {background-color: var(--color-gruen-dunkel);border-color: var(--color-gruen-dunkel);color: var(--color-weiss);}.secondary a,.danger a,.normal a,.ghost a {background-color: var(--color-weiss);border-color: var(--color-gruen-hell);color: var(--color-grau-dunkel);}.secondary a:active,.secondary a:hover {background-color: var(--color-gruen-dunkel);border-color: var(--color-gruen-dunkel);border-width: 1px;color: var(--color-weiss);}a:disabled,a:disabled:hover {background-color: var(--color-weiss);border-color: var(--color-grau-hell);color: var(--color-graublau);cursor: not-allowed;}a > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;}a.icon-only {padding: 8px;}a.icon-only kol-icon {display: inline-block;width: 1.5em;height: 1.5em;}a.loading kol-icon {animation: spin 5s infinite linear;}",
|
|
108
107
|
"KOL-BUTTON-LINK": "button {background-color: transparent;border: 0;cursor: pointer;}kol-link-button-wc {display: inline-block;}button {color: var(--color-blau);font-style: normal;font-weight: 400;display: inline-flex;line-height: 1.5em;text-decoration-line: none !important;outline: none !important;}button:focus-within,button:hover {box-shadow: inset 0 -1px 0 0 var(--color-blau);}kol-icon {padding: 0 0.25em;display: inline-block;}",
|
|
109
108
|
"KOL-ABBR": "abbr {text-decoration: none;border-bottom: dotted var(--color-metal) 1px;}"
|
|
@@ -128,17 +127,17 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
|
|
|
128
127
|
"KOL-TABS": 'button:disabled {opacity: 0.5;cursor: not-allowed;}kol-button-group > div {margin: 0 1rem;}kol-button-group > div:first-child {margin-left: 0;}kol-button-group > div:last-child {margin-right: 0;}kol-button-group > div {margin: 0;}button {background-color: transparent;border: 0;font-style: normal;font-weight: normal;font-size: 18px;line-height: 22px;color: var(--color-primary);padding: 0.3em 1em;box-shadow: inset 0px -3px 0 0 var(--color-gray-70);}button:enabled {box-shadow: inset 0px -3px 0 0 var(--color-primary-10);}button:hover {color: var(--color-midnight);}button.primary {text-underline-offset: 5px;text-decoration-thickness: 0.25em;font-weight: bold;color: var(--color-gray-10);box-shadow: inset 0px -3px 0 0 var(--color-gray-70),inset 0px -6px 0 0 var(--color-primary-10);}button:hover,button:focus {color: var(--color-gray-10);box-shadow: inset 0px -6px 0 0 var(--color-primary-10);outline: none;}button:not(.primary) {cursor: pointer;}:host > div > div {padding: 0.25em 0;}.close-button {display: none;font-size: 25%;height: fit-content;width: 0;}.close-button button {width: 1rem;position: relative;height: 1rem;left: -4.25em;top: 0.25em;}div[role="tabpanel"] {height: 100%;}div.grid {height: 100%;}div.grid {height: 100%;}:host > .tabs-align-right {display: grid;grid-template-columns: 1fr auto;}:host > .tabs-align-right kol-button-group-wc {display: grid;order: 2;}:host > .tabs-align-left {display: grid;grid-template-columns: auto 1fr;}:host > .tabs-align-left kol-button-group-wc {display: grid;order: 0;}:host > .tabs-align-bottom {display: grid;grid-template-rows: 1fr auto;}:host > .tabs-align-bottom kol-button-group-wc {order: 2;}:host > .tabs-align-bottom kol-button-group-wc > div {display: flex;}:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {margin: 0px 1em 0px 0px;}:host > .tabs-align-bottom > kol-button-group-wc > div > div {margin: 0px 1em;}:host > .tabs-align-top {display: grid;grid-template-rows: auto 1fr;}:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-top kol-button-group-wc > div {display: flex;}:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {margin: 0px 1em 0px 0px;}:host > .tabs-align-top > kol-button-group-wc > div > div {margin: 0px 1em;}:host > div {display: grid;}:host > div.tabs-align-left {grid-template-columns: auto 1fr;}:host > div.tabs-align-right {grid-template-columns: 1fr auto;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-bottom kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {order: 1;}:host > div.tabs-align-left kol-button-group-wc > div,:host > div.tabs-align-left kol-button-group-wc > div > div,:host > div.tabs-align-right kol-button-group-wc > div,:host > div.tabs-align-right kol-button-group-wc > div > div {display: grid;}:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {width: 100%;}:host > div.tabs-align-bottom kol-button-group-wc div,:host > div.tabs-align-top kol-button-group-wc div {display: flex;flex-wrap: wrap;}',
|
|
129
128
|
"KOL-PAGINATION": ":host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}:host kol-button-wc.selected button {min-width: 44px;min-height: 44px;display: grid;gap: 0.25em;line-height: 1.5rem;font-weight: 700;cursor: default;font-size: 1rem;align-items: center;padding: 0px 7px;justify-content: center;font-style: normal;text-align: center;outline: none;color: var(--color-white);border: unset;background-color: var(--color-primary);}:host kol-button-wc.selected button:focus,:host kol-button-wc.selected button:hover {background-color: var(--color-primary-20);}",
|
|
130
129
|
"KOL-LINK": "a,button {background-color: transparent;border: 0;cursor: pointer;display: inline-block;}kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--color-primary);font-style: normal;font-weight: 400;display: inline-flex;line-height: 1.5em;text-decoration-line: none !important;outline: none !important;}a:focus-within,a:hover,button:focus-within,button:hover {box-shadow: inset 0 -1px 0 0 var(--color-primary);}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
131
|
-
"KOL-INPUT-TEXT": 'kol-input {display: grid;}kol-input label {
|
|
130
|
+
"KOL-INPUT-TEXT": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
132
131
|
"KOL-INPUT-CHECKBOX": '/* INPUT */kol-input {display: grid;align-items: center;justify-items: left;width: 100%;min-height: 44px;}kol-input.checkbox {grid-template-columns: 2rem auto;}kol-input.switch {grid-template-columns: 4rem auto;}kol-input > div.input {display: inline-flex;order: 1;}kol-input > div.input input {margin: 0px;}kol-input > label {cursor: pointer;order: 2;}kol-input > kol-alert.error {order: 3;padding-top: 0.25em;margin-bottom: 0.4em;margin-top: 0.2em;grid-column: span 2 / auto;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning) !important;box-shadow: 0 0 0 1px var(--color-warning) inset;}kol-input.error kol-alert.error {color: var(--color-warning);}input {cursor: pointer;order: 1;width: 100%;border-color: var(--color-gray-30);border-width: 1px;border-style: solid;line-height: 24px;font-size: 1rem;}input:focus,input:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus:hover {box-shadow: none;}input:active {box-shadow: none;}kol-alert {display: block;width: 100%;} /* CHECKBOX */kol-input label span {margin-top: 0.125rem;}.required label > span::after {content: "*";padding-left: 0.125em;}kol-input input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}kol-input input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}kol-input input[type="checkbox"]:before {content: "";cursor: pointer;}kol-input input[type="checkbox"]:checked {background-color: var(--color-primary-20);border-color: var(--color-primary-20);}kol-input.checkbox input[type="checkbox"] {width: 1rem;height: 1rem;}kol-input.checkbox input[type="checkbox"]:before {background-color: transparent;display: block;height: calc(2 * var(--spacing));position: relative;width: calc(2 * var(--spacing));}kol-input.checkbox input[type="checkbox"]:checked:before {border-right-width: 1px;border-bottom-width: 1px;left: calc(1.2 * var(--spacing) - 2px);top: calc(2.2 * var(--spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(2 * var(--spacing));width: calc(1 * var(--spacing));}kol-input.checkbox input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1;background-color: white;}kol-input.checkbox input[type="checkbox"]:indeterminate:before {background-color: var(--color-gray-30);height: 0.2rem;top: 0.35rem;left: 0.15rem;width: calc(2.5 * var(--spacing));}kol-input.switch input[type="checkbox"] {min-width: 3.5em;width: 3.5em;background-color: var(--color-gray-30);border-width: 0;height: 1.5em;border-radius: 1.25em;display: inline-block;position: relative;}kol-input.switch input[type="checkbox"]:before {-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.25em;height: 1.25em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);border-radius: 1.25em;background-color: white;position: absolute;}kol-input.switch input[type="checkbox"]:checked {background-color: var(--color-primary-20);}kol-input.switch input[type="checkbox"]:checked:before {-webkit-transform: translateX(2em);-moz-transform: translateX(2em);-ms-transform: translateX(2em);transform: translateX(2em);--tw-bg-opacity: 1;}kol-input.switch input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1;}kol-input.switch input[type="checkbox"]:indeterminate:before {-webkit-transform: translateX(1em);-moz-transform: translateX(1em);-ms-transform: translateX(1em);transform: translateX(1em);}.disabled {opacity: 0.33;}',
|
|
133
132
|
"KOL-INPUT-RADIO": '/* INPUT */label {cursor: pointer;display: grid;line-height: 20px;gap: 8px;width: 100%;}input {cursor: pointer;width: 100%;border-color: var(--color-grey-20);border-width: 1px;border-style: solid;border-radius: 5px;/* padding: 10px 14px; */line-height: 24px;font-size: 16px;}:host fieldset div input[type="radio"]:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}:host fieldset div input[type="radio"]:focus:hover {box-shadow: none;}:host fieldset div input[type="radio"]:active {box-shadow: none;}kol-alert {display: block;width: 100%;margin-bottom: 0.4em;}.required legend > span::after {content: "*";padding-left: 0.125em;}/* RADIO */:host fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}:host fieldset div {cursor: pointer;display: flex;flex-direction: row;align-items: center;position: relative;min-height: 44px;}:host fieldset div label {cursor: pointer;display: flex;padding-left: 0.25em;width: 100%;}:host fieldset div label span {margin-top: 0.125em;}:host fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: 1rem;min-width: 1rem;width: 1rem;}:host fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1 * var(--spacing) - 1px);top: calc(1 * var(--spacing) - 1px);position: relative;border-radius: 100%;display: block;height: calc(2 * var(--spacing));width: calc(2 * var(--spacing));}:host fieldset div input[type="radio"]:checked:before {background-color: var(--color-primary-20);}:host fieldset div input[type="radio"]:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}:host fieldset #error {order: 3;}:host fieldset legend {order: 1;display: contents;}:host fieldset kol-input {order: 2;}:host fieldset kol-alert#error {padding-left: 0.5em;color: var(--color-warning);}fieldset.error input:focus,fieldset.error select:focus,fieldset.error textarea:focus {border-color: var(--color-warning) !important;box-shadow: 0 0 0 1px var(--color-warning) inset;}:host fieldset.error kol-alert.error {margin-left: -0.25em;color: var(--color-warning);}.disabled {opacity: 0.33;}:host fieldset.horizontal {display: flex;flex-wrap: wrap;}:host fieldset.horizontal legend {display: inline-block;margin-bottom: 0.25em;}',
|
|
134
|
-
"KOL-SELECT": 'kol-input {display: grid;}kol-input label {
|
|
135
|
-
"KOL-TEXTAREA": 'kol-input {display: grid;}kol-input label {
|
|
136
|
-
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;}kol-input label {
|
|
137
|
-
"KOL-INPUT-NUMBER": 'kol-input {display: grid;}kol-input label {
|
|
138
|
-
"KOL-INPUT-EMAIL": 'kol-input {display: grid;}kol-input label {
|
|
139
|
-
"KOL-INPUT-FILE": 'kol-input {display: grid;}kol-input label {
|
|
140
|
-
"KOL-INPUT-COLOR": 'kol-input {display: grid;}kol-input label {
|
|
141
|
-
"KOL-INPUT-RANGE": 'kol-input {display: grid;}kol-input label {
|
|
133
|
+
"KOL-SELECT": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
134
|
+
"KOL-TEXTAREA": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
135
|
+
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
136
|
+
"KOL-INPUT-NUMBER": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
137
|
+
"KOL-INPUT-EMAIL": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
138
|
+
"KOL-INPUT-FILE": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
139
|
+
"KOL-INPUT-COLOR": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
140
|
+
"KOL-INPUT-RANGE": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
142
141
|
"KOL-NAV": '/* :host * {hyphens: var(--hyphens);font-family: var(--font-family);line-height: var(--line-height);word-break: break-word;} */:host .hidden {display: none;}:host > div > nav ul {list-style: none;margin: 0px;padding: 0px;border-radius: var(--border-radius);background-color: var(--color-primary);}:host > div > nav ul > li {border-radius: var(--border-radius);overflow: hidden;padding: 0.125em;}:host > div > nav ul > li[part*="vertical"] + li {border-radius: 0;border-top: 0.1em dotted white;}:host > div > nav ul > li[part*="vertical selected"] {border-right: 0.375em solid var(--color-yellow-neutral);}:host > div > nav ul > li[part*="horizontal"] + li {border-radius: 0;border-left: 0.1em dotted white;}:host > div > nav ul > li[part*="horizontal selected"] {border-bottom: 0.375em solid var(--color-yellow-neutral);}:host > div > nav ul > li > div {height: 100%;}:host > div > nav kol-link-wc {width: 100%; /*height: 100%;font-weight: 600;*/display: block;}:host > div > nav kol-link-wc a {border-radius: var(--border-radius);background-color: var(--color-primary);border: 1px solid transparent;grid: flex;line-height: 2em;padding: 0.5em;color: white;height: 100%;-webkit-box-align: center;align-items: center;display: flex;cursor: pointer;text-decoration: inherit;}:host > div > nav kol-link-wc[exportparts*="selected"] a {background-color: var(--color-primary-20);font-weight: 700;}:host > div > nav kol-link-wc a kol-icon.mr-2 {margin-right: calc(2 * var(--spacing));}:host > div > nav kol-link-wc a kol-icon.ml-2 {margin-left: calc(2 * var(--spacing));}:host > div > nav kol-link-wc a:focus,:host > div > nav kol-link-wc a:hover {border: 1px solid white;background-color: var(--kolibri-color-focus);} /* compact button */:host > div > div:last-child {margin-top: 0.5em;width: 100%;text-align: center;}:host > div > nav kol-link-wc a.text-center {display: grid;align-items: center;justify-items: center;} /* horizontal */ul.flex {display: flex;}li > div > div.absolute {position: absolute;}kol-span-wc {justify-items: baseline;}',
|
|
143
142
|
"KOL-BREADCRUMB": 'nav {width: 100%;}ul {margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;align-items: center;}kol-link {display: inline;}:host kol-icon[exportparts*="separator"] {padding: 0 0.5rem;}:host kol-icon::part(icon separator) {font-weight: 900;font-size: 0.875rem;}:host kol-icon::part(icon separator)::before {color: black;content: "\\f054";font-family: "Font Awesome 6 Free";}:host li > kol-link > kol-link-wc > a {color: red !important;}',
|
|
144
143
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
|
@@ -163,17 +162,17 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
|
|
|
163
162
|
"KOL-TABS": 'button:disabled {opacity: 0.5;cursor: not-allowed;}kol-button-group > div {margin: 0 1rem;}kol-button-group > div:first-child {margin-left: 0;}kol-button-group > div:last-child {margin-right: 0;}kol-button-group > div {margin: 0;}button {background-color: transparent;border: 0;font-style: normal;font-weight: normal;font-size: 18px;line-height: 22px;color: var(--color-primary);padding: 0.3em 1em;box-shadow: inset 0px -3px 0 0 var(--color-gray-70);}button:enabled {box-shadow: inset 0px -3px 0 0 var(--color-primary-10);}button:hover {color: var(--color-midnight);}button.primary {text-underline-offset: 5px;text-decoration-thickness: 0.25em;font-weight: bold;color: var(--color-gray-10);box-shadow: inset 0px -3px 0 0 var(--color-gray-70),inset 0px -6px 0 0 var(--color-primary-10);}button:hover,button:focus {color: var(--color-gray-10);box-shadow: inset 0px -6px 0 0 var(--color-primary-10);outline: none;}button:not(.primary) {cursor: pointer;}:host > div > div {padding: 0.25em 0;}.close-button {display: none;font-size: 25%;height: fit-content;width: 0;}.close-button button {width: 1rem;position: relative;height: 1rem;left: -4.25em;top: 0.25em;}div[role="tabpanel"] {height: 100%;}div.grid {height: 100%;}div.grid {height: 100%;}:host > .tabs-align-right {display: grid;grid-template-columns: 1fr auto;}:host > .tabs-align-right kol-button-group-wc {display: grid;order: 2;}:host > .tabs-align-left {display: grid;grid-template-columns: auto 1fr;}:host > .tabs-align-left kol-button-group-wc {display: grid;order: 0;}:host > .tabs-align-bottom {display: grid;grid-template-rows: 1fr auto;}:host > .tabs-align-bottom kol-button-group-wc {order: 2;}:host > .tabs-align-bottom kol-button-group-wc > div {display: flex;}:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {margin: 0px 1em 0px 0px;}:host > .tabs-align-bottom > kol-button-group-wc > div > div {margin: 0px 1em;}:host > .tabs-align-top {display: grid;grid-template-rows: auto 1fr;}:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-top kol-button-group-wc > div {display: flex;}:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {margin: 0px 1em 0px 0px;}:host > .tabs-align-top > kol-button-group-wc > div > div {margin: 0px 1em;}:host > div {display: grid;}:host > div.tabs-align-left {grid-template-columns: auto 1fr;}:host > div.tabs-align-right {grid-template-columns: 1fr auto;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-bottom kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {order: 1;}:host > div.tabs-align-left kol-button-group-wc > div,:host > div.tabs-align-left kol-button-group-wc > div > div,:host > div.tabs-align-right kol-button-group-wc > div,:host > div.tabs-align-right kol-button-group-wc > div > div {display: grid;}:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {width: 100%;}:host > div.tabs-align-bottom kol-button-group-wc div,:host > div.tabs-align-top kol-button-group-wc div {display: flex;flex-wrap: wrap;}',
|
|
164
163
|
"KOL-PAGINATION": ":host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}:host kol-button-wc.selected button {min-width: 44px;min-height: 44px;display: grid;gap: 0.25em;line-height: 1.5rem;font-weight: 700;cursor: default;font-size: 1rem;align-items: center;padding: 0px 7px;justify-content: center;font-style: normal;text-align: center;outline: none;color: var(--color-white);border: unset;background-color: var(--color-primary);}:host kol-button-wc.selected button:focus,:host kol-button-wc.selected button:hover {background-color: var(--color-primary-20);}",
|
|
165
164
|
"KOL-LINK": "a,button {background-color: transparent;border: 0;cursor: pointer;display: inline-block;}kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--color-primary);font-style: normal;font-weight: 400;display: inline-flex;line-height: 1.5em;text-decoration-line: none !important;outline: none !important;}a:focus-within,a:hover,button:focus-within,button:hover {box-shadow: inset 0 -1px 0 0 var(--color-primary);}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
166
|
-
"KOL-INPUT-TEXT": 'kol-input {display: grid;}kol-input label {
|
|
165
|
+
"KOL-INPUT-TEXT": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
167
166
|
"KOL-INPUT-CHECKBOX": '/* INPUT */kol-input {display: grid;align-items: center;justify-items: left;width: 100%;min-height: 44px;}kol-input.checkbox {grid-template-columns: 2rem auto;}kol-input.switch {grid-template-columns: 4rem auto;}kol-input > div.input {display: inline-flex;order: 1;}kol-input > div.input input {margin: 0px;}kol-input > label {cursor: pointer;order: 2;}kol-input > kol-alert.error {order: 3;padding-top: 0.25em;margin-bottom: 0.4em;margin-top: 0.2em;grid-column: span 2 / auto;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning) !important;box-shadow: 0 0 0 1px var(--color-warning) inset;}kol-input.error kol-alert.error {color: var(--color-warning);}input {cursor: pointer;order: 1;width: 100%;border-color: var(--color-gray-30);border-width: 1px;border-style: solid;line-height: 24px;font-size: 1rem;}input:focus,input:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus:hover {box-shadow: none;}input:active {box-shadow: none;}kol-alert {display: block;width: 100%;} /* CHECKBOX */kol-input label span {margin-top: 0.125rem;}.required label > span::after {content: "*";padding-left: 0.125em;}kol-input input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}kol-input input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}kol-input input[type="checkbox"]:before {content: "";cursor: pointer;}kol-input input[type="checkbox"]:checked {background-color: var(--color-primary-20);border-color: var(--color-primary-20);}kol-input.checkbox input[type="checkbox"] {width: 1rem;height: 1rem;}kol-input.checkbox input[type="checkbox"]:before {background-color: transparent;display: block;height: calc(2 * var(--spacing));position: relative;width: calc(2 * var(--spacing));}kol-input.checkbox input[type="checkbox"]:checked:before {border-right-width: 1px;border-bottom-width: 1px;left: calc(1.2 * var(--spacing) - 2px);top: calc(2.2 * var(--spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(2 * var(--spacing));width: calc(1 * var(--spacing));}kol-input.checkbox input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1;background-color: white;}kol-input.checkbox input[type="checkbox"]:indeterminate:before {background-color: var(--color-gray-30);height: 0.2rem;top: 0.35rem;left: 0.15rem;width: calc(2.5 * var(--spacing));}kol-input.switch input[type="checkbox"] {min-width: 3.5em;width: 3.5em;background-color: var(--color-gray-30);border-width: 0;height: 1.5em;border-radius: 1.25em;display: inline-block;position: relative;}kol-input.switch input[type="checkbox"]:before {-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.25em;height: 1.25em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);border-radius: 1.25em;background-color: white;position: absolute;}kol-input.switch input[type="checkbox"]:checked {background-color: var(--color-primary-20);}kol-input.switch input[type="checkbox"]:checked:before {-webkit-transform: translateX(2em);-moz-transform: translateX(2em);-ms-transform: translateX(2em);transform: translateX(2em);--tw-bg-opacity: 1;}kol-input.switch input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1;}kol-input.switch input[type="checkbox"]:indeterminate:before {-webkit-transform: translateX(1em);-moz-transform: translateX(1em);-ms-transform: translateX(1em);transform: translateX(1em);}.disabled {opacity: 0.33;}',
|
|
168
167
|
"KOL-INPUT-RADIO": '/* INPUT */label {cursor: pointer;display: grid;line-height: 20px;gap: 8px;width: 100%;}input {cursor: pointer;width: 100%;border-color: var(--color-grey-20);border-width: 1px;border-style: solid;border-radius: 5px;/* padding: 10px 14px; */line-height: 24px;font-size: 16px;}:host fieldset div input[type="radio"]:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}:host fieldset div input[type="radio"]:focus:hover {box-shadow: none;}:host fieldset div input[type="radio"]:active {box-shadow: none;}kol-alert {display: block;width: 100%;margin-bottom: 0.4em;}.required legend > span::after {content: "*";padding-left: 0.125em;}/* RADIO */:host fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}:host fieldset div {cursor: pointer;display: flex;flex-direction: row;align-items: center;position: relative;min-height: 44px;}:host fieldset div label {cursor: pointer;display: flex;padding-left: 0.25em;width: 100%;}:host fieldset div label span {margin-top: 0.125em;}:host fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: 1rem;min-width: 1rem;width: 1rem;}:host fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1 * var(--spacing) - 1px);top: calc(1 * var(--spacing) - 1px);position: relative;border-radius: 100%;display: block;height: calc(2 * var(--spacing));width: calc(2 * var(--spacing));}:host fieldset div input[type="radio"]:checked:before {background-color: var(--color-primary-20);}:host fieldset div input[type="radio"]:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}:host fieldset #error {order: 3;}:host fieldset legend {order: 1;display: contents;}:host fieldset kol-input {order: 2;}:host fieldset kol-alert#error {padding-left: 0.5em;color: var(--color-warning);}fieldset.error input:focus,fieldset.error select:focus,fieldset.error textarea:focus {border-color: var(--color-warning) !important;box-shadow: 0 0 0 1px var(--color-warning) inset;}:host fieldset.error kol-alert.error {margin-left: -0.25em;color: var(--color-warning);}.disabled {opacity: 0.33;}:host fieldset.horizontal {display: flex;flex-wrap: wrap;}:host fieldset.horizontal legend {display: inline-block;margin-bottom: 0.25em;}',
|
|
169
|
-
"KOL-SELECT": 'kol-input {display: grid;}kol-input label {
|
|
170
|
-
"KOL-TEXTAREA": 'kol-input {display: grid;}kol-input label {
|
|
171
|
-
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;}kol-input label {
|
|
172
|
-
"KOL-INPUT-NUMBER": 'kol-input {display: grid;}kol-input label {
|
|
173
|
-
"KOL-INPUT-EMAIL": 'kol-input {display: grid;}kol-input label {
|
|
174
|
-
"KOL-INPUT-FILE": 'kol-input {display: grid;}kol-input label {
|
|
175
|
-
"KOL-INPUT-COLOR": 'kol-input {display: grid;}kol-input label {
|
|
176
|
-
"KOL-INPUT-RANGE": 'kol-input {display: grid;}kol-input label {
|
|
168
|
+
"KOL-SELECT": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
169
|
+
"KOL-TEXTAREA": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
170
|
+
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
171
|
+
"KOL-INPUT-NUMBER": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
172
|
+
"KOL-INPUT-EMAIL": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
173
|
+
"KOL-INPUT-FILE": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
174
|
+
"KOL-INPUT-COLOR": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
175
|
+
"KOL-INPUT-RANGE": 'kol-input {display: grid;}kol-input label {order: 1;padding: 0.125rem 0 0.4rem;vertical-align: text-top;line-height: 1.2;}kol-input div.input {box-sizing: border-box;order: 2;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;margin-top: 0.2em;order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;border-color: var(--color-grey);border-width: 1px;border-style: solid;overflow: hidden;width: 100%;line-height: normal;padding: 0.4rem 8px;}input:hover,select:hover,textarea:hover {border-color: #2d6f9e;box-shadow: 0 0 0 1px #2d6f9e inset;}input:focus,select:focus,textarea:focus {border-color: var(--color-primary-20);box-shadow: inset 0 0 0 1px var(--color-primary-20);outline: none;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {border-color: var(--color-warning);box-shadow: inset 0 0 0 1px var(--color-warning);}kol-input.error kol-alert.error {color: var(--color-warning);}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -2.7em;}kol-button-wc button {border: 0;height: 2.7em;box-sizing: border-box;background-color: transparent;cursor: pointer;}kol-button-wc button:focus,kol-button-wc button:hover {background-color: var(--color-primary);color: var(--color-white);}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-primary);color: white;}',
|
|
177
176
|
"KOL-NAV": '/* :host * {hyphens: var(--hyphens);font-family: var(--font-family);line-height: var(--line-height);word-break: break-word;} */:host .hidden {display: none;}:host > div > nav ul {list-style: none;margin: 0px;padding: 0px;border-radius: var(--border-radius);background-color: var(--color-primary);}:host > div > nav ul > li {border-radius: var(--border-radius);overflow: hidden;padding: 0.125em;}:host > div > nav ul > li[part*="vertical"] + li {border-radius: 0;border-top: 0.1em dotted white;}:host > div > nav ul > li[part*="vertical selected"] {border-right: 0.375em solid var(--color-yellow-neutral);}:host > div > nav ul > li[part*="horizontal"] + li {border-radius: 0;border-left: 0.1em dotted white;}:host > div > nav ul > li[part*="horizontal selected"] {border-bottom: 0.375em solid var(--color-yellow-neutral);}:host > div > nav ul > li > div {height: 100%;}:host > div > nav kol-link-wc {width: 100%; /*height: 100%;font-weight: 600;*/display: block;}:host > div > nav kol-link-wc a {border-radius: var(--border-radius);background-color: var(--color-primary);border: 1px solid transparent;grid: flex;line-height: 2em;padding: 0.5em;color: white;height: 100%;-webkit-box-align: center;align-items: center;display: flex;cursor: pointer;text-decoration: inherit;}:host > div > nav kol-link-wc[exportparts*="selected"] a {background-color: var(--color-primary-20);font-weight: 700;}:host > div > nav kol-link-wc a kol-icon.mr-2 {margin-right: calc(2 * var(--spacing));}:host > div > nav kol-link-wc a kol-icon.ml-2 {margin-left: calc(2 * var(--spacing));}:host > div > nav kol-link-wc a:focus,:host > div > nav kol-link-wc a:hover {border: 1px solid white;background-color: var(--kolibri-color-focus);} /* compact button */:host > div > div:last-child {margin-top: 0.5em;width: 100%;text-align: center;}:host > div > nav kol-link-wc a.text-center {display: grid;align-items: center;justify-items: center;} /* horizontal */ul.flex {display: flex;}li > div > div.absolute {position: absolute;}kol-span-wc {justify-items: baseline;}',
|
|
178
177
|
"KOL-BREADCRUMB": 'nav {width: 100%;}ul {margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;align-items: center;}kol-link {display: inline;}:host kol-icon[exportparts*="separator"] {padding: 0 0.5rem;}:host kol-icon::part(icon separator) {font-weight: 900;font-size: 0.875rem;}:host kol-icon::part(icon separator)::before {color: black;content: "\\f054";font-family: "Font Awesome 6 Free";}:host li > kol-link > kol-link-wc > a {color: red !important;}',
|
|
179
178
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
|
@@ -182,95 +181,98 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
|
|
|
182
181
|
});
|
|
183
182
|
|
|
184
183
|
const ECL_EC = KoliBri.createTheme("ecl-ec", {
|
|
185
|
-
GLOBAL: ":host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: unset;}:host {--color-blue: #004494;--color-yellow: #ffd617;--color-grey: #404040;--color-blue-130: #002f67;--color-blue-120: #003776;--color-blue-110: #003d84;--color-blue-100: var(--color-blue);--color-blue-75: #4073af;--color-blue-50: #bfd0e4;--color-blue-25: #bfd0e4;--color-blue-5: #f2f5f9;--color-yellow-120: #f8ae21;--color-yellow-110: #fbc11d;--color-yellow-100: var(--color-yellow);--color-yellow-75: #ffde39;--color-yellow-50: #ffe879;--color-yellow-25: #fff4bb;--color-grey-100: var(--color-grey);--color-grey-75: #707070;--color-grey-50: #9f9f9f;--color-grey-25: #cfcfcf;--color-grey-20: #d9d9d9;--color-grey-15: #e3e3e3;--color-grey-10: #ebebeb;--color-grey-5: #f5f5f5;--color-grey-3: #f9f9f9;--color-blue-n: #006fb4;--color-orange: #f29527;--color-green: #467a39;--color-red: #da2131;--color-black: #000;--color-white: #fff;--font-family: Arial, sans-serif;--font-size: 16px;--font-weight: 400;--font-weight-bold: 600;--line-height: 1.5em;--line-height-heading: 1.2em; /* ?! */--spacing-4xl: 64px;--spacing-3xl: 48px;--spacing-2xl: 40px;--spacing-xl: 32px;--spacing-l: 24px;--spacing-m: 16px;--spacing-s: 12px;--spacing-xs: 8px;--spacing-2xs: 4px; /* ?! */}:host {font-family: var(--font-family);font-size: var(--font-size);}a,button {font-size: var(--font-size);outline: none;}h1,h2,h3,h4,h5,h6 {font-weight: var(--font-weight-bold);line-height: var(--line-height-heading);}p {font-weight: var(--font-weight);}",
|
|
184
|
+
GLOBAL: ":host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: unset;}:host {--color-blue: #004494;--color-yellow: #ffd617;--color-grey: #404040;--color-blue-130: #002f67;--color-blue-120: #003776;--color-blue-110: #003d84;--color-blue-100: var(--color-blue);--color-blue-75: #4073af;--color-blue-50: #bfd0e4;--color-blue-25: #bfd0e4;--color-blue-5: #f2f5f9;--color-yellow-120: #f8ae21;--color-yellow-110: #fbc11d;--color-yellow-100: var(--color-yellow);--color-yellow-75: #ffde39;--color-yellow-50: #ffe879;--color-yellow-25: #fff4bb;--color-grey-100: var(--color-grey);--color-grey-75: #707070;--color-grey-50: #9f9f9f;--color-grey-25: #cfcfcf;--color-grey-20: #d9d9d9;--color-grey-15: #e3e3e3;--color-grey-10: #ebebeb;--color-grey-5: #f5f5f5;--color-grey-3: #f9f9f9;--color-blue-n: #006fb4;--color-orange: #f29527;--color-green: #467a39;--color-red: #da2131;--color-red-1xx: #981722;--color-black: #000;--color-white: #fff;--font-family: Arial, sans-serif;--font-size: 16px;--font-weight: 400;--font-weight-bold: 600;--line-height: 1.5em;--line-height-heading: 1.2em; /* ?! */--spacing-4xl: 64px;--spacing-3xl: 48px;--spacing-2xl: 40px;--spacing-xl: 32px;--spacing-l: 24px;--spacing-m: 16px;--spacing-s: 12px;--spacing-xs: 8px;--spacing-2xs: 4px; /* ?! */}:host {font-family: var(--font-family);font-size: var(--font-size);}a,button {font-size: var(--font-size);outline: none;}h1,h2,h3,h4,h5,h6 {font-weight: var(--font-weight-bold);line-height: var(--line-height-heading);}p {font-weight: var(--font-weight);}",
|
|
186
185
|
"KOL-HEADING": "h1 {font-size: 2rem;line-height: 2.5rem;}h2 {font-size: 1.75rem;line-height: 2rem;}h3 {font-size: 1.5rem;line-height: 1.75rem;}h4 {font-size: 1.25rem;line-height: 1.75rem;}h5 {font-size: 1rem;line-height: 1.5rem;}h6 {color: rgb(234, 0, 255);}",
|
|
187
186
|
"KOL-ACCORDION": ':host > div {background-color: var(--color-grey-5);border-color: var(--color-grey-25);border-style: solid;border-width: 1px;}:host > div .headline button {text-align: left;width: 100%;padding: 0 var(--spacing-m);display: flex;place-items: center;}:host > div .headline button kol-icon {margin-bottom: 0.75rem;margin-inline-end: 1rem;margin-inline-start: 0;margin-top: 0.75rem;}:host > div .headline button span {color: var(--color-grey);font-weight: var(--font-weight-bold);padding: 0.75rem 0;width: 100%;}:host > div[part*="open"] .headline button span {border-bottom: 1px solid var(--color-grey);}:host > div .headline button:focus,:host > div .headline button:hover {background-color: var(--color-grey-25);}:host > div .headline button:focus {outline: 2px solid var(--color-blue);outline-offset: -2px;}div[part="content"] {padding: var(--spacing-s) var(--spacing-m);}',
|
|
188
187
|
"KOL-INDENTED-TEXT": ":host > div {border-end-start-radius: 0;border-inline-start: 10px solid #ffd617;border-start-start-radius: 0;padding-bottom: 1rem;padding-inline-start: 1.5rem;padding-top: 1rem;margin: 0;}",
|
|
189
|
-
"KOL-BUTTON": ":host {--kolibri-spacing: 0.25rem;}a,button {appearance: none;background: none;outline: none;}a kol-span-wc,button kol-span-wc {appearance: none;background: none;border-radius: 0;border-style: solid;border-width: 2px;
|
|
190
|
-
"KOL-LINK-BUTTON": ":host {--kolibri-spacing: 0.25rem;}a,button {appearance: none;background: none;outline: none;}a kol-span-wc,button kol-span-wc {appearance: none;background: none;border-radius: 0;border-style: solid;border-width: 2px;
|
|
188
|
+
"KOL-BUTTON": ":host {--kolibri-spacing: 0.25rem;}a,button {appearance: none;background: none;outline: none;text-decoration: none;}a kol-span-wc,button kol-span-wc {appearance: none;background: none;border-radius: 0;border-style: solid;border-width: 2px;font-weight: var(--font-weight-bold);margin: 0;padding: 0.75rem;}a:focus kol-span-wc,button:focus kol-span-wc {outline-offset: -4px;outline-width: 2px;outline-style: solid;}button.ghost:focus kol-span-wc {outline-offset: -2px;}.primary a kol-span-wc,.primary button kol-span-wc {background-color: var(--color-blue);border-color: var(--color-blue);color: var(--color-white);}.primary a:focus kol-span-wc,.primary button:focus kol-span-wc {outline-color: var(--color-white);}.primary a:hover kol-span-wc,.primary button:hover kol-span-wc {background-color: var(--color-blue-130);border-color: var(--color-blue-130);}.secondary a kol-span-wc,.secondary button kol-span-wc {background-color: var(--color-white);border-color: var(--color-blue);color: var(--color-blue);}.secondary a:focus kol-span-wc,.secondary button:focus kol-span-wc {outline-color: var(--color-blue);outline-offset: -6px;}.secondary a:hover kol-span-wc,.secondary button:hover kol-span-wc {border-color: var(--color-blue-130);color: var(--color-blue-130);}.normal a kol-span-wc, /* CTA */.normal button kol-span-wc {background-color: var(--color-yellow);border-color: var(--color-yellow);color: var(--color-black);}.normal a:hover kol-span-wc, /* CTA */.normal button:hover kol-span-wc {background-color: var(--color-yellow-120);border-color: var(--color-yellow-120);}.danger a kol-span-wc,.danger button kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}.danger a:hover kol-span-wc,.danger button:hover kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);}.ghost a kol-span-wc,.ghost button kol-span-wc {background-color: transparent;border-color: transparent;color: var(--color-blue);}.ghost a:focus kol-span-wc,.ghost button:focus kol-span-wc {outline-color: var(--color-blue);}.ghost a:hover kol-span-wc,.ghost button:hover kol-span-wc {color: var(--color-blue-130);}",
|
|
189
|
+
"KOL-LINK-BUTTON": ":host {--kolibri-spacing: 0.25rem;}a,button {appearance: none;background: none;outline: none;text-decoration: none;}a kol-span-wc,button kol-span-wc {appearance: none;background: none;border-radius: 0;border-style: solid;border-width: 2px;font-weight: var(--font-weight-bold);margin: 0;padding: 0.75rem;}a:focus kol-span-wc,button:focus kol-span-wc {outline-offset: -4px;outline-width: 2px;outline-style: solid;}button.ghost:focus kol-span-wc {outline-offset: -2px;}.primary a kol-span-wc,.primary button kol-span-wc {background-color: var(--color-blue);border-color: var(--color-blue);color: var(--color-white);}.primary a:focus kol-span-wc,.primary button:focus kol-span-wc {outline-color: var(--color-white);}.primary a:hover kol-span-wc,.primary button:hover kol-span-wc {background-color: var(--color-blue-130);border-color: var(--color-blue-130);}.secondary a kol-span-wc,.secondary button kol-span-wc {background-color: var(--color-white);border-color: var(--color-blue);color: var(--color-blue);}.secondary a:focus kol-span-wc,.secondary button:focus kol-span-wc {outline-color: var(--color-blue);outline-offset: -6px;}.secondary a:hover kol-span-wc,.secondary button:hover kol-span-wc {border-color: var(--color-blue-130);color: var(--color-blue-130);}.normal a kol-span-wc, /* CTA */.normal button kol-span-wc {background-color: var(--color-yellow);border-color: var(--color-yellow);color: var(--color-black);}.normal a:hover kol-span-wc, /* CTA */.normal button:hover kol-span-wc {background-color: var(--color-yellow-120);border-color: var(--color-yellow-120);}.danger a kol-span-wc,.danger button kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}.danger a:hover kol-span-wc,.danger button:hover kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);}.ghost a kol-span-wc,.ghost button kol-span-wc {background-color: transparent;border-color: transparent;color: var(--color-blue);}.ghost a:focus kol-span-wc,.ghost button:focus kol-span-wc {outline-color: var(--color-blue);}.ghost a:hover kol-span-wc,.ghost button:hover kol-span-wc {color: var(--color-blue-130);}",
|
|
191
190
|
"KOL-BADGE": ":host {--kolibri-spacing: 0.25rem;}:host > span > kol-span-wc {font: normal normal var(--font-weight) 0.875rem/1rem var(--font-family);padding: calc(0.5rem - 1px) calc(0.75rem - 1px);text-transform: uppercase;}",
|
|
192
|
-
"KOL-ALERT": ":host > div {background-color: var(--color-white);border-style: solid;border-width: 2px;}:host .msg .heading kol-icon {
|
|
191
|
+
"KOL-ALERT": ":host > div {background-color: var(--color-white);}:host > div.card {border-style: solid;border-width: 2px;}:host > div.msg {border: none;}:host .msg .heading kol-icon {font-size: 1.5em;margin: var(--spacing-2xs);}:host .msg .heading > div {padding: var(--spacing-2xs);}:host .card {padding-bottom: 1.5rem;padding-inline-end: 0.5rem;padding-inline-start: 1.5rem;padding-top: 1.5rem;}:host .card .heading {gap: 0.5rem;}:host .card .content {margin-left: 2.5rem;}:host .card .heading kol-icon {font-size: 2rem;}:host .default {border-color: var(--color-grey);}:host .default .heading kol-icon {color: var(--color-grey);}:host .error {border-color: var(--color-red);}:host .error .heading kol-icon {color: var(--color-red);}:host .info {border-color: var(--color-blue);}:host .info .heading kol-icon {color: var(--color-blue);}:host .success {border-color: var(--color-green);}:host .success .heading kol-icon {color: var(--color-green);}:host .warning {border-color: var(--color-orange);}:host .warning .heading kol-icon {color: var(--color-orange);}",
|
|
193
192
|
"KOL-TABS": ":host {--kolibri-spacing: 0.25rem;}kol-button-group-wc {border-bottom: 1px solid var(--color-grey-25);margin-bottom: -1px;}kol-button-group-wc button {border: none;margin-bottom: -1px;}kol-button-group-wc button kol-span-wc {padding: 0.5rem;min-height: 44px;min-width: 44px;}kol-button-group-wc button.selected kol-span-wc {border-color: var(--color-grey-25);border-style: solid;border-width: 1px;border-bottom-color: white;border-top-color: var(--color-blue);box-shadow: 0 -3px var(--color-blue);font-weight: var(--font-weight-bold);color: var(--color-blue);}kol-button-group-wc button:hover:not(:disabled) kol-span-wc {color: var(--color-blue-130);}kol-button-group-wc button:focus kol-span-wc {outline-color: var(--color-blue-130);outline-style: solid;outline-width: 2px;}",
|
|
194
193
|
"KOL-LINK": ":host {--kolibri-spacing: 0.25rem;}a,button {appearance: none;color: var(--color-blue);text-decoration: underline;}a:hover,button:hover {color: var(--color-blue-130);}",
|
|
195
194
|
"KOL-BUTTON-LINK": ":host {--kolibri-spacing: 0.25rem;}a,button {appearance: none;color: var(--color-blue);text-decoration: underline;}a:hover,button:hover {color: var(--color-blue-130);}",
|
|
196
195
|
"KOL-BREADCRUMB": ':host {font: normal normal 400 0.875rem/1rem arial, sans-serif;font-weight: var(--font-weight-bold);}kol-icon::part(icon separator)::before {color: var(--color-blue);}li:last-child {color: var(--color-grey-75);}kol-icon[exportparts*="separator"] {margin-inline-end: 0.5rem;margin-inline-start: 0.5rem;padding: 0;}',
|
|
197
|
-
"KOL-DETAILS": "details > kol-indented-text {margin: 0.
|
|
196
|
+
"KOL-DETAILS": "details > kol-indented-text {margin: 0.175rem;padding: 0;}",
|
|
198
197
|
"KOL-PROGRESS": ":host progress,:host span {display: block;height: 0px;overflow: hidden;width: 0px;}svg line:first-child,svg circle:first-child {fill: transparent;stroke: var(--color-grey-25);}svg line:last-child,svg circle:last-child {stroke: var(--color-blue-130);fill: transparent;}progress {display: none;}",
|
|
199
198
|
"KOL-SPIN": ".spin span:nth-child(1) {background-color: var(--color-blue-75);}.spin span:nth-child(2) {background-color: var(--color-blue);}.spin span:nth-child(3) {background-color: var(--color-blue-130);}.spin span:nth-child(4) {background-color: var(--color-grey-25);}",
|
|
200
|
-
"KOL-PAGINATION": ":host {--kolibri-spacing: var(--spacing-m);}:host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}button > kol-span-wc {border: none;color: var(--color-black);font-weight: var(--font-weight-bold);}"
|
|
199
|
+
"KOL-PAGINATION": ":host {--kolibri-spacing: var(--spacing-m);}:host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}button > kol-span-wc {border: none;color: var(--color-black);font-weight: var(--font-weight-bold);}",
|
|
200
|
+
"KOL-INPUT-CHECKBOX": 'input[type="checkbox"] {background-color: var(--color-white);border-width: 2px;border-style: solid;color: var(--color-grey);line-height: 1.5em;font-size: 1rem;}input[type="checkbox"]:focus {outline-color: var(--color-blue);outline-offset: 2px;outline-style: solid;outline-width: 2px;}input[type="checkbox"] {border-color: var(--color-grey-75);}input[type="checkbox"]:checked {background-color: var(--color-blue);border-color: var(--color-blue);}input[type="checkbox"]:hover {border-color: var(--color-blue);}input[type="checkbox"]:checked:hover {background-color: var(--color-blue-130);border-color: var(--color-blue-130);}input[type="checkbox"]:indeterminate:hover::before {background-color: var(--color-blue-130);}.error input[type="checkbox"] {border-color: var(--color-red);}.error input[type="checkbox"]:checked {background-color: var(--color-red);border-color: var(--color-red);}.error input[type="checkbox"]:hover {border-color: var(--color-red);}.error input[type="checkbox"]:checked:hover {background-color: var(--color-red-1xx);border-color: var(--color-red-1xx);}.error input[type="checkbox"]:checked:hover::before {border-color: var(--color-white);}.error input[type="checkbox"]:indeterminate:hover::before {background-color: var(--color-red-1xx);}.error.required label > span::after {color: var(--color-red);}.switch input[type="checkbox"]::before,.switch input[type="checkbox"]:indeterminate::before {background-color: var(--color-grey-75);}.switch input[type="checkbox"]:hover::before,.switch input[type="checkbox"]:indeterminate:hover::before {background-color: var(--color-blue);}.switch input[type="checkbox"]:checked::before,.switch input[type="checkbox"]:checked:hover::before {background-color: var(--color-white);}.switch.error input[type="checkbox"]::before {background-color: var(--color-red);}.switch.error input[type="checkbox"]:checked::before {background-color: var(--color-white);}.switch.error input[type="checkbox"]:indeterminate:hover::before {background-color: var(--color-red-1xx);}kol-input {gap: var(--spacing-xs);}kol-input.error > kol-alert {color: var(--color-red);font-size: 0.875em;margin-left: calc(-1 * var(--spacing-2xs));order: 1;}kol-input.error > .input {order: 2;}kol-input.error > label {order: 3;}kol-input.error > .hint {font-size: 0.875rem;order: 4;}',
|
|
201
|
+
"KOL-INPUT-COLOR": "kol-input.error > kol-alert {color: var(--color-red);font-size: 0.875rem;margin-left: calc(-1 * var(--spacing-2xs));order: 1;}"
|
|
201
202
|
});
|
|
202
203
|
|
|
203
204
|
const ECL_EU = KoliBri.createTheme("ecl-eu", {});
|
|
204
205
|
|
|
205
206
|
const ITZBund = KoliBri.createTheme("itzbund", {
|
|
206
|
-
GLOBAL: ":host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: unset;}:host {--border-color: var(--color-anthrazit);--border-radius: 0.125rem;--color-anthrazit: #333;--color-jade: #f3f7fb;--color-weiss: #fff;--color-petrol: #007a89;--color-achat: #0b4d59;--color-teal: #056773;--color-fluorit: #66ddec;--color-rotton: rgba(188, 0, 0, 1);--color-rotton-20: rgba(188, 0, 0, 0.2);--color-gras: #138510;--color-warn: #f0541e;--color-blut: var(--color-rotton);--color-input-bg-default: #e8edf2;--gradient-petrol-achat: linear-gradient(67deg,var(--color-petrol),var(--color-achat));--color-citrin: #d4c912;--color-umber: #494500;--color-gelb: #fff443;--color-lichtgelb: #eeff6c;--gradient-gelb-citrin: linear-gradient(67deg,var(--color-gelb),var(--color-citrin));--font-family-sans: BundesSans Web;--font-family-serif: BundesSerif Web;--font-size: 16px;--spacing: 0.125em;--kolibri-spacing: calc(2 * var(--spacing));}
|
|
207
|
-
"KOL-BUTTON": "
|
|
207
|
+
GLOBAL: ":host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: unset;}:host {--border-color: var(--color-anthrazit);--border-radius: 0.125rem;--color-anthrazit: #333;--color-jade: #f3f7fb;--color-weiss: #fff;--color-petrol: #007a89;--color-achat: #0b4d59;--color-teal: #056773;--color-fluorit: #66ddec;--color-rotton: rgba(188, 0, 0, 1);--color-rotton-20: rgba(188, 0, 0, 0.2);--color-gras: #138510;--color-warn: #f0541e;--color-blut: var(--color-rotton);--color-input-bg-default: #e8edf2;--gradient-petrol-achat: linear-gradient(67deg,var(--color-petrol),var(--color-achat));--color-citrin: #d4c912;--color-umber: #494500;--color-gelb: #fff443;--color-lichtgelb: #eeff6c;--gradient-gelb-citrin: linear-gradient(67deg,var(--color-gelb),var(--color-citrin));--font-family-sans: BundesSans Web;--font-family-serif: BundesSerif Web;--font-size: 16px;--spacing: 0.125em;--kolibri-spacing: calc(2 * var(--spacing));}",
|
|
208
|
+
"KOL-BUTTON": "button {background-color: transparent;}a,button {border-radius: 2rem !important;font-family: var(--font-family-sans);text-transform: uppercase;}a > kol-span-wc,button > kol-span-wc {border-radius: 2rem;border-style: solid;min-width: 44px;min-height: 44px;border-width: var(--spacing);font-size: inherit; /*line-height: 1.25em;*/ /*padding: calc(4 * var(--spacing));*/padding: 0 1rem;}.button a.icon-only > kol-span-wc,.button button.icon-only > kol-span-wc {padding: 0 0.5rem;}a > kol-span-wc,button > kol-span-wc {gap: 0.25em;transition-delay: 0;transition-timing-function: ease-in-out;transition-duration: 0.5s;transition-property: background, color, border-color;}kol-link-wc.primary > a > kol-span-wc,kol-link-wc.primary > a:disabled:hover > kol-span-wc,button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--color-petrol);border-color: var(--color-petrol);color: var(--color-weiss);}kol-link-wc.primary > a:hover > kol-span-wc,kol-link-wc.primary > a:focus > kol-span-wc,button.primary:hover > kol-span-wc,button.primary:focus > kol-span-wc {background-color: var(--color-achat);border-color: var(--color-achat);}kol-link-wc.secondary > a > kol-span-wc,kol-link-wc.secondary > a:disabled:hover > kol-span-wc,button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc {background-color: var(--color-weiss);border-color: var(--color-petrol);color: var(--color-petrol);}kol-link-wc.secondary > a:hover > kol-span-wc,kol-link-wc.secondary > a:focus > kol-span-wc,button.secondary:hover > kol-span-wc,button.secondary:focus > kol-span-wc {background-color: var(--color-petrol);border-color: var(--color-petrol);color: var(--color-weiss);}kol-link-wc.normal > a > kol-span-wc,kol-link-wc.normal > a:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--color-weiss);border-color: var(--color-anthrazit);color: var(--color-anthrazit);}kol-link-wc.normal > a:hover > kol-span-wc,kol-link-wc.normal > a:focus > kol-span-wc,button.normal:hover > kol-span-wc,button.normal:focus > kol-span-wc {background-color: var(--color-anthrazit);border-color: var(--color-anthrazit);color: var(--color-weiss);}kol-link-wc.danger > a > kol-span-wc,kol-link-wc.danger > a:disabled:hover > kol-span-wc,button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--color-weiss);border-color: var(--color-blut);color: var(--color-blut);}kol-link-wc.danger > a:hover > kol-span-wc,kol-link-wc.danger > a:focus > kol-span-wc,button.danger:hover > kol-span-wc,button.danger:focus > kol-span-wc {background-color: var(--color-blut);border-color: var(--color-blut);color: var(--color-weiss);}kol-link-wc.ghost > a > kol-span-wc,kol-link-wc.ghost > a:disabled:hover > kol-span-wc,button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {background-color: var(--color-ghost);border-color: transparent;color: var(--color-anthrazit);}kol-link-wc.ghost > a:hover > kol-span-wc,kol-link-wc.ghost > a:focus > kol-span-wc,button.ghost:hover > kol-span-wc,button.ghost:focus > kol-span-wc {background-color: var(--color-ghost);border-color: var(--color-ghost);color: var(--color-anthrazit);}",
|
|
208
209
|
"KOL-BUTTON-GROUP": ":host > kol-button-group-wc {display: inline-flex;flex-wrap: wrap;gap: 0.25rem;}",
|
|
209
|
-
"KOL-LINK-BUTTON": "
|
|
210
|
+
"KOL-LINK-BUTTON": "a,button {border-radius: 2rem !important;font-family: var(--font-family-sans);text-transform: uppercase;}a > kol-span-wc,button > kol-span-wc {border-radius: 2rem;border-style: solid;min-width: 44px;min-height: 44px;border-width: var(--spacing);font-size: inherit; /*line-height: 1.25em;*/ /*padding: calc(4 * var(--spacing));*/padding: 0 1rem;}.button a.icon-only > kol-span-wc,.button button.icon-only > kol-span-wc {padding: 0 0.5rem;}a > kol-span-wc,button > kol-span-wc {gap: 0.25em;transition-delay: 0;transition-timing-function: ease-in-out;transition-duration: 0.5s;transition-property: background, color, border-color;}kol-link-wc.primary > a > kol-span-wc,kol-link-wc.primary > a:disabled:hover > kol-span-wc,button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--color-petrol);border-color: var(--color-petrol);color: var(--color-weiss);}kol-link-wc.primary > a:hover > kol-span-wc,kol-link-wc.primary > a:focus > kol-span-wc,button.primary:hover > kol-span-wc,button.primary:focus > kol-span-wc {background-color: var(--color-achat);border-color: var(--color-achat);}kol-link-wc.secondary > a > kol-span-wc,kol-link-wc.secondary > a:disabled:hover > kol-span-wc,button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc {background-color: var(--color-weiss);border-color: var(--color-petrol);color: var(--color-petrol);}kol-link-wc.secondary > a:hover > kol-span-wc,kol-link-wc.secondary > a:focus > kol-span-wc,button.secondary:hover > kol-span-wc,button.secondary:focus > kol-span-wc {background-color: var(--color-petrol);border-color: var(--color-petrol);color: var(--color-weiss);}kol-link-wc.normal > a > kol-span-wc,kol-link-wc.normal > a:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--color-weiss);border-color: var(--color-anthrazit);color: var(--color-anthrazit);}kol-link-wc.normal > a:hover > kol-span-wc,kol-link-wc.normal > a:focus > kol-span-wc,button.normal:hover > kol-span-wc,button.normal:focus > kol-span-wc {background-color: var(--color-anthrazit);border-color: var(--color-anthrazit);color: var(--color-weiss);}kol-link-wc.danger > a > kol-span-wc,kol-link-wc.danger > a:disabled:hover > kol-span-wc,button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--color-weiss);border-color: var(--color-blut);color: var(--color-blut);}kol-link-wc.danger > a:hover > kol-span-wc,kol-link-wc.danger > a:focus > kol-span-wc,button.danger:hover > kol-span-wc,button.danger:focus > kol-span-wc {background-color: var(--color-blut);border-color: var(--color-blut);color: var(--color-weiss);}kol-link-wc.ghost > a > kol-span-wc,kol-link-wc.ghost > a:disabled:hover > kol-span-wc,button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {background-color: var(--color-ghost);border-color: transparent;color: var(--color-anthrazit);}kol-link-wc.ghost > a:hover > kol-span-wc,kol-link-wc.ghost > a:focus > kol-span-wc,button.ghost:hover > kol-span-wc,button.ghost:focus > kol-span-wc {background-color: var(--color-ghost);border-color: var(--color-ghost);color: var(--color-anthrazit);}",
|
|
210
211
|
"KOL-PAGINATION": ":host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}button > kol-span-wc {cursor: not-allowed;background-color: var(--color-achat);border-color: var(--color-achat);border-radius: 2rem;border-style: solid;color: var(--color-weiss);min-width: 44px;min-height: 44px;border-width: var(--spacing);font-size: inherit;font-weight: bold;line-height: 1.25em;padding: calc(4 * var(--spacing));text-decoration: underline;}",
|
|
211
212
|
"KOL-BUTTON-LINK": "kol-link-wc a,kol-button-wc button {text-decoration-line: none;}a,button {background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);background-repeat: no-repeat;background-position: left 0 bottom 0;background-size: 25% 0.25ex;border-radius: var(--spacing);color: var(--color-petrol);font-family: var(--font-family-sans);font-size: inherit;text-transform: uppercase;transition-delay: 0;transition-timing-function: ease-in-out;transition-duration: 0.5s;transition-property: background, color, border-color;}a:focus,a:hover,button:focus,button:hover {background-size: 100% 0.25ex;color: var(--color-achat);}a > kol-span-wc,button > kol-span-wc {gap: 0.25em;}.hidden {display: none;visibility: hidden;}a.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;}a.skip:focus {background-color: white;box-shadow: 0 0 0.5rem 0.5rem white;left: unset;position: unset;}",
|
|
212
|
-
"KOL-INPUT-TEXT": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);
|
|
213
|
-
"KOL-INPUT-PASSWORD": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);
|
|
214
|
-
"KOL-INPUT-NUMBER": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);
|
|
215
|
-
"KOL-INPUT-EMAIL": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);
|
|
216
|
-
"KOL-INPUT-FILE": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);
|
|
217
|
-
"KOL-TEXTAREA": 'textarea:hover,textarea:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
213
|
+
"KOL-INPUT-TEXT": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {cursor: pointer;width: 100%;color: var(--color-anthrazit);border-width: 1px;border-style: solid;border-color: var(--color-petrol);border-radius: 0;background-color: #e8edf2 !important;overflow: hidden;line-height: 24px;font-size: 16px;}.error input {background-color: var(--color-rotton-20) !important;border-color: var(--color-rotton) !important;}input:disabled {background-color: var(--color-input-bg-default);border-color: var(--border-color);cursor: not-allowed;}kol-alert {margin-top: calc(2 * var(--spacing));display: block;}.kol-required span::after {content: "*";}input::placeholder {font-style: italic;}',
|
|
214
|
+
"KOL-INPUT-PASSWORD": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {cursor: pointer;width: 100%;color: var(--color-anthrazit);border-width: 1px;border-style: solid;border-color: var(--color-petrol);border-radius: 0;background-color: #e8edf2 !important;overflow: hidden;line-height: 24px;font-size: 16px;}.error input {background-color: var(--color-rotton-20) !important;border-color: var(--color-rotton) !important;}input:disabled {background-color: var(--color-input-bg-default);border-color: var(--border-color);cursor: not-allowed;}kol-alert {margin-top: calc(2 * var(--spacing));display: block;}.kol-required span::after {content: "*";}input::placeholder {font-style: italic;}',
|
|
215
|
+
"KOL-INPUT-NUMBER": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {cursor: pointer;width: 100%;color: var(--color-anthrazit);border-width: 1px;border-style: solid;border-color: var(--color-petrol);border-radius: 0;background-color: #e8edf2 !important;overflow: hidden;line-height: 24px;font-size: 16px;}.error input {background-color: var(--color-rotton-20) !important;border-color: var(--color-rotton) !important;}input:disabled {background-color: var(--color-input-bg-default);border-color: var(--border-color);cursor: not-allowed;}kol-alert {margin-top: calc(2 * var(--spacing));display: block;}.kol-required span::after {content: "*";}input::placeholder {font-style: italic;}',
|
|
216
|
+
"KOL-INPUT-EMAIL": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {cursor: pointer;width: 100%;color: var(--color-anthrazit);border-width: 1px;border-style: solid;border-color: var(--color-petrol);border-radius: 0;background-color: #e8edf2 !important;overflow: hidden;line-height: 24px;font-size: 16px;}.error input {background-color: var(--color-rotton-20) !important;border-color: var(--color-rotton) !important;}input:disabled {background-color: var(--color-input-bg-default);border-color: var(--border-color);cursor: not-allowed;}kol-alert {margin-top: calc(2 * var(--spacing));display: block;}.kol-required span::after {content: "*";}input::placeholder {font-style: italic;}',
|
|
217
|
+
"KOL-INPUT-FILE": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {cursor: pointer;width: 100%;color: var(--color-anthrazit);border-width: 1px;border-style: solid;border-color: var(--color-petrol);border-radius: 0;background-color: #e8edf2 !important;overflow: hidden;line-height: 24px;font-size: 16px;}.error input {background-color: var(--color-rotton-20) !important;border-color: var(--color-rotton) !important;}input:disabled {background-color: var(--color-input-bg-default);border-color: var(--border-color);cursor: not-allowed;}kol-alert {margin-top: calc(2 * var(--spacing));display: block;}.kol-required span::after {content: "*";}input::placeholder {font-style: italic;}',
|
|
218
|
+
"KOL-TEXTAREA": 'textarea:hover,textarea:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}textarea.error {background-color: var(--danger-light) !important;border-color: var(--danger);}textarea {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;}textarea::placeholder {color: var(--default-border);}textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}.kol-required span::after {content: "*";}kol-alert {margin-top: var(--spacing);display: block;}',
|
|
218
219
|
"KOL-ALERT": ":host {--kolibri-border-width: 1px;}:host .default {border-color: var(--color-anthrazit);}.default .heading-icon {background-color: var(--color-anthrazit);}:host .error {border-color: var(--color-rotton);}.error .heading-icon {background-color: var(--color-rotton);}:host .info {border-color: var(--color-petrol);}.info .heading-icon {background-color: var(--color-petrol);}:host .success {border-color: var(--color-gras);}:host .success .heading-icon {background-color: var(--color-gras);}:host .warning {border-color: var(--color-warn);}.warning .heading-icon {background-color: var(--color-warn);}",
|
|
219
220
|
"KOL-HEADING": "h1,h2,h3,h4,h5,h6 {line-height: 1em;margin: 0;padding: 0;}h1 {font-family: var(--font-family-serif);font-size: 54px;font-weight: bold;}h2 {font-family: var(--font-family-serif);font-size: 32px;font-weight: bold;}h3 {font-family: var(--font-family-serif);font-size: 26px;font-weight: bold;}h4 {font-family: var(--font-family-serif);font-size: 20px;font-weight: normal;}h5 {font-family: var(--font-family-serif);font-size: 17px;font-weight: bold;}h6 {font-family: var(--font-family-sans);font-size: 17px;font-weight: normal;}",
|
|
220
221
|
"KOL-BADGE": ":host {display: inline-block;}:host > span {border-radius: 0.3125rem;display: inline-flex;line-height: 1.25rem;}:host > span kol-button-wc {border-left: 1px solid rgba(0, 0, 0, 0.25);}:host > span kol-span-wc {padding: 0.25rem 0.5rem;}:host > span > kol-span-wc {align-items: center;font-style: normal;gap: 0.5rem;}:host > span > kol-span-wc > span {display: flex;gap: 0.25rem;}:host button {border-radius: 0 var(--spacing) var(--spacing) 0;}",
|
|
221
222
|
"KOL-INDENTED-TEXT": ":host > div {background: var(--color-white);border-left: none;box-shadow: -4px 0px 0px var(--color-petrol);padding: 0.25em 0.5em;width: 100%;}",
|
|
222
223
|
"KOL-LINK": "kol-link-wc a,kol-button-wc button {text-decoration-line: none;}a,button {background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);background-repeat: no-repeat;background-position: left 0 bottom 0;background-size: 25% 0.25ex;border-radius: var(--spacing);color: var(--color-petrol);font-family: var(--font-family-sans);font-size: inherit;text-transform: uppercase;transition-delay: 0;transition-timing-function: ease-in-out;transition-duration: 0.5s;transition-property: background, color, border-color;}a:focus,a:hover,button:focus,button:hover {background-size: 100% 0.25ex;color: var(--color-achat);}a > kol-span-wc,button > kol-span-wc {gap: 0.25em;}.hidden {display: none;visibility: hidden;}a.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;}a.skip:focus {background-color: white;box-shadow: 0 0 0.5rem 0.5rem white;left: unset;position: unset;}",
|
|
223
|
-
"KOL-BREADCRUMB":
|
|
224
|
-
"KOL-DETAILS": "
|
|
224
|
+
"KOL-BREADCRUMB": "li > span {font-weight: bold;text-transform: uppercase;}",
|
|
225
|
+
"KOL-DETAILS": "",
|
|
225
226
|
"KOL-SPIN": ".spin {display: inline-block;height: 1rem;position: relative;width: 3rem;}.spin span {animation-timing-function: cubic-bezier(0, 1, 1, 0);border: 0.1rem solid rgb(255, 255, 255);border-radius: 50%;height: 0.8rem;width: 0.8rem;top: 0.1rem;position: absolute;}.spin span:nth-child(1) {background-color: #fc0;z-index: 0;animation: 2s ease 0s infinite normal none running spin1;left: 0.1rem;}.spin span:nth-child(2) {background-color: #f00;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 0.1rem;}.spin span:nth-child(3) {background-color: #000;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 1.1rem;}.spin span:nth-child(4) {background-color: #666;z-index: 0;animation: 2s ease 0s infinite normal none running spin3;left: 2.1rem;}@keyframes spin1 {0% {transform: scale(0);}100% {transform: scale(1);}}@keyframes spin2 {0% {transform: translate(0px, 0px);}100% {transform: translate(1rem, 0px);}}@keyframes spin3 {0% {transform: scale(1);}100% {transform: scale(0);}}",
|
|
226
227
|
"KOL-PROGRESS": ":host progress,:host span {display: block;height: 0px;overflow: hidden;width: 0px;}svg line:first-child,svg circle:first-child {fill: transparent;stroke: var(--color-fluorit);}svg line:last-child,svg circle:last-child {stroke: var(--color-achat);fill: transparent;}progress {display: none;}",
|
|
227
|
-
"KOL-SELECT": 'select:hover,select:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);
|
|
228
|
-
"KOL-INPUT-COLOR": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);
|
|
228
|
+
"KOL-SELECT": 'select:hover,select:focus {border-color: var(--default-border-hover);outline-color: var(--primary) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--default-letter);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}select.error {background-color: var(--danger-light) !important;border-color: var(--danger);}select {width: 100%;color: var(--default-letter);border-width: 1px;border-style: solid;line-height: 24px;font-size: 16px;border-color: var(--kolibri-color-normal);border-radius: 0;background-color: #e8edf2 !important;}select:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}option {height: 2em;padding: 0.5em;}kol-alert {margin-top: var(--spacing);display: block;}.kol-required span::after {content: "*";}',
|
|
229
|
+
"KOL-INPUT-COLOR": 'input:hover,input:focus {border-color: var(--border-color) !important;border-radius: none !important;outline-color: var(--color-achat) !important;outline-offset: 0;outline-style: solid;outline-width: 1px;}label {color: var(--color-anthrazit);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;font-weight: bold;}input {cursor: pointer;width: 100%;color: var(--color-anthrazit);border-width: 1px;border-style: solid;border-color: var(--color-petrol);border-radius: 0;background-color: #e8edf2 !important;overflow: hidden;line-height: 24px;font-size: 16px;}.error input {background-color: var(--color-rotton-20) !important;border-color: var(--color-rotton) !important;}input:disabled {background-color: var(--color-input-bg-default);border-color: var(--border-color);cursor: not-allowed;}kol-alert {margin-top: calc(2 * var(--spacing));display: block;}.kol-required span::after {content: "*";}input::placeholder {font-style: italic;}',
|
|
229
230
|
"KOL-ACCORDION": ':host > div {font-family: var(--font-family);box-sizing: border-box;width: 100%;height: 100%;display: grid;border-color: var(--kolibri-border-color);border-width: 1px;border-style: solid;border-radius: 0.25rem;}:host > div > kol-heading-wc {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host > div > kol-heading-wc button {cursor: pointer;width: 100%;margin: 0;display: flex;gap: 0.5em;border: 0;align-items: center;overflow: hidden;font-size: inherit;line-height: 1.75em;background-color: transparent;padding: 0.5rem;}:host > div[part*="open"] > kol-heading-wc button {padding-bottom: 0;}:host > div[part*="open"] > kol-heading-wc button kol-icon {width: 1em;}:host > div div[part="header"],:host > div[part*="open"] div[part="content"] {margin: 0;}:host > div div[part="header"] {padding-left: 2rem;}:host > div[part*="open"] div[part="content"] {margin: 0;padding: 0 1rem 1rem 2.25rem;}:host > div > kol-heading-wc button kol-icon::part(icon) {color: var(--color-midnight);}button {cursor: pointer;font-weight: inherit;font-size: inherit;line-height: inherit;}:host > div > kol-heading-wc button kol-icon::part(close)::before {font-family: "Font Awesome 6 Free";content: "\\f077";}:host > div > kol-heading-wc button kol-icon::part(open)::before {font-family: "Font Awesome 6 Free";content: "\\f078";}',
|
|
230
231
|
"KOL-TABLE": ":host > div {overflow-x: auto;overflow-y: hidden;}:host > div:first-child {border-style: solid;border-width: 1px;border-color: var(--border-color);}table {width: 100%;border-collapse: collapse;border-spacing: 0;}table,tr,th,td {border: 0 solid var(--border-color);}tr {border-top-width: 1px;}tr:nth-child(even) {background-color: #f2f2f2;}th,td {border-right-width: 1px;padding: 0.25em 0.5em;}th {background-color: #eee;}th > div {display: grid;grid-template-columns: 1fr auto;align-items: center;gap: 0.25em;}:host > div.pagination {padding: 0.5em;}:host > div.pagination,:host > div.pagination > div:last-child {display: grid;align-items: center;justify-items: center;gap: 0.5em;}@media (min-width: 1024px) {:host > div.pagination,:host > div.pagination > div:last-child {grid-auto-flow: column;}:host > div.pagination kol-pagination {display: flex;gap: 1rem;}}",
|
|
231
232
|
"KOL-NAV": ':host .hidden {display: none;}:host > div > nav ul {list-style: none;margin: 0px;padding: 0px;border-radius: var(--border-radius);background-color: var(--color-petrol);}:host > div > nav ul > li {border-radius: var(--border-radius);overflow: hidden;padding: 0.125em;}:host > div > nav ul > li[part*="vertical"] + li {border-radius: 0;border-top: 0.1em dotted white;}:host > div > nav ul > li[part*="vertical selected"] {border-right: 0.375em solid var(--color-citrin);}:host > div > nav ul > li[part*="horizontal"] + li {border-radius: 0;border-left: 0.1em dotted white;}:host > div > nav ul > li[part*="horizontal selected"] {border-bottom: 0.375em solid var(--color-citrin);}:host > div > nav ul > li > div {height: 100%;}:host > div > nav kol-link-wc {width: 100%;/*height: 100%;font-weight: 600;*/display: block;}:host > div > nav kol-link-wc a {border-radius: var(--border-radius);background-color: var(--color-petrol);border: 1px solid transparent;grid: flex;line-height: 2em;padding: 0.5em;color: white;height: 100%;-webkit-box-align: center;align-items: center;display: flex;cursor: pointer;text-decoration: inherit;}:host > div > nav kol-link-wc[exportparts*="selected"] a {background-color: var(--color-achat);font-weight: 700;}:host > div > nav kol-link-wc a kol-icon.mr-2 {margin-right: calc(2 * 2 * var(--spacing));}:host > div > nav kol-link-wc a kol-icon.ml-2 {margin-left: calc(2 * 2 * var(--spacing));}:host > div > nav kol-link-wc a:focus,:host > div > nav kol-link-wc a:hover {border: 1px solid white;background-color: var(--color-fluorit);color: var(--color-anthrazit);}/* compact button */:host > div > div:last-child {margin-top: 0.5em;width: 100%;text-align: center;}:host > div > nav kol-link-wc a.text-center {display: grid;align-items: center;justify-items: center;}/* horizontal */ul.flex {display: flex;}li > div > div.absolute {position: absolute;}kol-span-wc {justify-items: baseline;}',
|
|
232
233
|
"KOL-CARD": ":host > div {background-color: white;border-color: var(--border-color);border-style: solid;border-width: 1px;border-radius: calc(2 * var(--border-radius));width: 100%;height: 100%;overflow: hidden;}kol-heading {padding: 0.5rem;display: block;border-bottom-style: solid;border-bottom-color: var(--border-color);border-bottom-width: 1px;}:host > div > div {display: block;padding: 0.5rem;}:host > div > div:last-child {display: block;padding: 0.5rem;border-top-style: solid;border-top-color: var(--color-achat);border-top-width: 1px;}",
|
|
233
234
|
"KOL-INPUT-CHECKBOX": '/* ALL INPUT, SELECT, TEXTAREA */label {cursor: pointer;}input {color: var(--default-letter);border-color: var(--default-border);border-width: 2px;border-style: solid;line-height: 24px;font-size: 16px;}.required label > span::after {content: "*";padding-left: 0.125em;}input:hover {border-color: var(--color-petrol);}/* NEU */kol-input {display: grid;align-items: center;justify-items: left;width: 100%;}kol-input.checkbox {grid-template-columns: calc(6 * 2 * var(--spacing)) auto;}kol-input.switch {grid-template-columns: calc(13 * 2 * var(--spacing)) auto;}kol-input > div.input {display: inline-flex;order: 1;}kol-input > div.input input {margin: 0px;}kol-input > label {order: 2;padding-left: calc(2 * 2 * var(--spacing));}kol-input > kol-alert.error {order: 3;padding-top: 0.25em;grid-column: span 2 / auto;}/* CHECKBOX */input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}input[type="checkbox"]:before {content: "";cursor: pointer;}input[type="checkbox"]:checked {background-color: var(--color-petrol);border-color: var(--color-petrol);}.checkbox input[type="checkbox"] {/* border-radius: 0.25em; */height: calc(6 * 2 * var(--spacing));min-width: calc(6 * 2 * var(--spacing));width: calc(6 * 2 * var(--spacing));}.checkbox input[type="checkbox"]:before {/* border-radius: 0.25em; */background-color: transparent;display: block;height: calc(6 * 2 * var(--spacing));position: relative;width: calc(6 * 2 * var(--spacing));}.checkbox input[type="checkbox"]:checked:before {border-right-width: 3px;border-bottom-width: 3px;left: calc(1.5 * 2 * var(--spacing) - 2px);top: calc(2.85 * 2 * var(--spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(3 * 2 * var(--spacing));width: calc(1.5 * 2 * var(--spacing));}.checkbox input[type="checkbox"]:indeterminate:before {background-color: var(--kolibri-color-normal);height: 0.375rem;top: 0.45rem;left: 0.15rem;width: calc(4 * 2 * var(--spacing));}.switch input[type="checkbox"] {/* border-radius: 0.25em; */min-width: 3.2em;width: 3.2em;height: 1.7em;display: inline-block;position: relative;}.switch input[type="checkbox"]:before {/* border-radius: 0.25em; */-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.2em;height: 1.2em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);background-color: black;position: absolute;}.switch input[type="checkbox"]:checked:before {-webkit-transform: translateX(1.5em);-moz-transform: translateX(1.5em);-ms-transform: translateX(1.5em);transform: translateX(1.5em);background-color: white;}.switch input[type="checkbox"]:indeterminate:before {-webkit-transform: translateX(0.75em);-moz-transform: translateX(0.75em);-ms-transform: translateX(0.75em);transform: translateX(0.75em);background-color: var(--color-petrol);}.disabled {opacity: 0.33;}.checkbox kol-icon,.switch kol-icon {display: none;}kol-input span.hint {grid-column: span 2;font-style: italic;color: gray;display: block;order: 3;padding: 0 var(--spacing);}',
|
|
234
|
-
"KOL-INPUT-RADIO": '/* INPUT */:host input:focus {outline-color: var(--color-achat) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}label {color: var(--color-anthrazit);
|
|
235
|
-
"KOL-LINK-GROUP": "
|
|
235
|
+
"KOL-INPUT-RADIO": '/* INPUT */:host input:focus {outline-color: var(--color-achat) !important;outline-offset: 2px;outline-style: solid;outline-width: 3px;}label {color: var(--color-anthrazit);font-size: 14px;line-height: 20px;gap: 8px;width: 100%;}input {width: 100%;color: var(--color-anthrazit);border-color: var(--default-border);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}input:hover {border-color: var(--color-achat);}kol-alert {display: block;width: 100%;}.kol-required span::after {content: "*";} /* RADIO */fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}fieldset legend {display: block;width: 100%;line-height: 1.5em;}fieldset div {cursor: pointer;display: flex;flex-direction: row;gap: 0.5em;margin-top: 0.25em;margin-bottom: 0.25em;align-items: center;position: relative;}fieldset div label {cursor: pointer;display: flex;width: 100%;}fieldset div label span {margin-top: 0.125em;}fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: calc(6 * 2 * var(--spacing));min-width: calc(6 * 2 * var(--spacing));width: calc(6 * 2 * var(--spacing));}fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * 2 * var(--spacing) - 2px);top: calc(1.5 * 2 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * 2 * var(--spacing));width: calc(3 * 2 * var(--spacing));}fieldset div input[type="radio"]:checked:before {box-shadow: 0 0 0.1rem black;background-color: var(--color-petrol);}fieldset div input[type="radio"]:disabled {background-color: var(--color-input-bg-default);border-color: #999;cursor: not-allowed;}',
|
|
236
|
+
"KOL-LINK-GROUP": "",
|
|
236
237
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
|
237
|
-
"KOL-TABS": ':host > div {display: block;width: 100%;}:host kol-button-group-wc {display: flex;background-color: var(--color-petrol);}:host kol-button-group-wc > div {display: inline-flex;}:host kol-button-group-wc > div + div {margin-left: 0.25em;}:host > div > div {padding: 0.25em;border: 1px solid var(--border-color);}button {box-sizing: border-box;font-size: inherit;line-height: 1.25em;cursor: pointer;border-width: 2px;box-shadow: 0 0 0.25em gray;width: inherit;overflow: hidden;border-style: solid;padding: calc(4 * var(--spacing));display: grid;gap: 0.25em;align-items: center;justify-content: center;text-align: center;transition-duration: 0.5s;transition-property: background-color, color, border-color;}kol-button-wc button.selected,kol-button-wc[aria-selected="true"] button {background-color: white;border-bottom-width: 0.25em !important;border-bottom-style: solid;border-bottom-color: var(--color-citrin) !important;}button > kol-span-wc span {display: flex;gap: 0.25em;align-items: center;justify-content: center;}button:disabled {cursor: not-allowed;opacity: 0.5;}button.primary,button.primary:disabled:hover {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);color: white;}button.primary:hover,button.primary:focus {color: var(--kolibri-color-primary);}button.secondary,button.secondary:disabled:hover {background-color: var(--kolibri-color-secondary);border-color: var(--kolibri-color-secondary);color: white;}button.secondary:hover,button.secondary:focus {color: var(--kolibri-color-secondary);}button.normal,button.normal:disabled:hover {background-color: var(--color-petrol);border-color: var(--color-petrol);color: white;}button.normal:hover,button.normal:focus {color: var(--color-petrol);}button.danger,button.danger:disabled:hover {background-color: var(--kolibri-color-danger);border-color: var(--kolibri-color-danger);color: white;}button.danger:hover,button.danger:focus {color: var(--kolibri-color-danger);}button.ghost,button.ghost:disabled:hover {background-color: white;border-color: var(--kolibri-color-ghost);color: var(--kolibri-color-ghost);}button.ghost:hover,button.ghost:focus {background-color: var(--kolibri-color-ghost);color: white;}button:hover,button:focus {background-color: white;box-shadow: 0 0 0.25em black;}button:active {outline: 0 !important;box-shadow: none !important;}.close-button {font-size: 25%;height: fit-content;width: 0;}.close-button button {width: 1rem;position: relative;height: 1rem;left: -4.25em;top: 0.25em;}:host > div {display: grid;}:host > div.tabs-align-left {grid-template-columns: auto 1fr;}:host > div.tabs-align-right {grid-template-columns: 1fr auto;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-bottom kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {order: 1;}:host > div.tabs-align-left kol-button-group-wc > div,:host > div.tabs-align-left kol-button-group-wc > div > div,:host > div.tabs-align-right kol-button-group-wc > div,:host > div.tabs-align-right kol-button-group-wc > div > div {display: grid;}:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {width: 100%;}:host > div.tabs-align-bottom kol-button-group-wc div,:host > div.tabs-align-top kol-button-group-wc div {display: flex;flex-wrap: wrap;}'
|
|
238
|
+
"KOL-TABS": ':host > div {display: block;width: 100%;}:host kol-button-group-wc {display: flex;background-color: var(--color-petrol);}:host kol-button-group-wc > div {display: inline-flex;}:host kol-button-group-wc > div + div {margin-left: 0.25em;}:host > div > div {padding: 0.25em;border: 1px solid var(--border-color);}button {box-sizing: border-box;font-size: inherit;line-height: 1.25em;cursor: pointer;border-width: 2px;box-shadow: 0 0 0.25em gray;width: inherit;overflow: hidden;border-style: solid;padding: calc(4 * var(--spacing));display: grid;gap: 0.25em;align-items: center;justify-content: center;text-align: center;transition-duration: 0.5s;transition-property: background-color, color, border-color;}kol-button-wc button.selected,kol-button-wc[aria-selected="true"] button {background-color: white;border-bottom-width: 0.25em !important;border-bottom-style: solid;border-bottom-color: var(--color-citrin) !important;}button > kol-span-wc span {display: flex;gap: 0.25em;align-items: center;justify-content: center;}button:disabled {cursor: not-allowed;opacity: 0.5;}button.primary,button.primary:disabled:hover {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);color: white;}button.primary:hover,button.primary:focus {color: var(--kolibri-color-primary);}button.secondary,button.secondary:disabled:hover {background-color: var(--kolibri-color-secondary);border-color: var(--kolibri-color-secondary);color: white;}button.secondary:hover,button.secondary:focus {color: var(--kolibri-color-secondary);}button.normal,button.normal:disabled:hover {background-color: var(--color-petrol);border-color: var(--color-petrol);color: white;}button.normal:hover,button.normal:focus {color: var(--color-petrol);}button.danger,button.danger:disabled:hover {background-color: var(--kolibri-color-danger);border-color: var(--kolibri-color-danger);color: white;}button.danger:hover,button.danger:focus {color: var(--kolibri-color-danger);}button.ghost,button.ghost:disabled:hover {background-color: white;border-color: var(--kolibri-color-ghost);color: var(--kolibri-color-ghost);}button.ghost:hover,button.ghost:focus {background-color: var(--kolibri-color-ghost);color: white;}button:hover,button:focus {background-color: white;box-shadow: 0 0 0.25em black;}button:active {outline: 0 !important;box-shadow: none !important;}.close-button {font-size: 25%;height: fit-content;width: 0;}.close-button button {width: 1rem;position: relative;height: 1rem;left: -4.25em;top: 0.25em;}:host > div {display: grid;}:host > div.tabs-align-left {grid-template-columns: auto 1fr;}:host > div.tabs-align-right {grid-template-columns: 1fr auto;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-bottom kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {order: 1;}:host > div.tabs-align-left kol-button-group-wc > div,:host > div.tabs-align-left kol-button-group-wc > div > div,:host > div.tabs-align-right kol-button-group-wc > div,:host > div.tabs-align-right kol-button-group-wc > div > div {display: grid;}:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {width: 100%;}:host > div.tabs-align-bottom kol-button-group-wc div,:host > div.tabs-align-top kol-button-group-wc div {display: flex;flex-wrap: wrap;}',
|
|
239
|
+
"KOL-INPUT-RANGE": ""
|
|
238
240
|
});
|
|
239
241
|
|
|
240
242
|
const MAPZ = KoliBri.createTheme("mapz", {
|
|
241
|
-
GLOBAL: ":host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: unset;}:host {--kolibri-background-color: white;--kolibri-background-color-modal: rgba(0, 0, 0, 0.5);--kolibri-border-color: #aaaaaa;--kolibri-border-radius: 0.25rem;--kolibri-border-width: 2px;--kolibri-color: black;--kolibri-color-undefined: #fb00d2;--kolibri-color-visited: #880b73;--kolibri-color-accent: #ffb752; /* #ef9e48 */--kolibri-color-active: #1e538f;--kolibri-color-hover: #1e538f;--kolibri-color-focus: #1e538f;--kolibri-color-danger: #ad0e0b; /* --kolibri-color-dark: #222222; */--kolibri-color-error: #ad0e0b;--kolibri-color-ghost: #333333;--kolibri-color-info: #28568a; /* --kolibri-color-light: #f2f2f2; */--kolibri-color-normal: #326cae;--kolibri-color-outline: var(--kolibri-color-focus);--kolibri-color-primary: #1e538f;--kolibri-color-secondary: #444444;--kolibri-color-spin-1: #000000;--kolibri-color-spin-2: #ff0000;--kolibri-color-spin-3: #ffcc00;--kolibri-color-success: #12632f;--kolibri-color-warning: #854000;--kolibri-color-gray: #666;--kolibri-font-family: var(--font-family);--kolibri-font-size: var(--font-size);--kolibri-hyphens: auto;--kolibri-line-height: 1.5em;--kolibri-shadow-color: black;--kolibri-spacing: 0.25em;--spacing: 0.25em;--font-family: Roboto, Droid Sans, Arial, Helvetica, sans-serif;--font-size: 16px;}
|
|
243
|
+
GLOBAL: ":host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: unset;}:host {--kolibri-background-color: white;--kolibri-background-color-modal: rgba(0, 0, 0, 0.5);--kolibri-border-color: #aaaaaa;--kolibri-border-radius: 0.25rem;--kolibri-border-width: 2px;--kolibri-color: black;--kolibri-color-undefined: #fb00d2;--kolibri-color-visited: #880b73;--kolibri-color-accent: #ffb752; /* #ef9e48 */--kolibri-color-active: #1e538f;--kolibri-color-hover: #1e538f;--kolibri-color-focus: #1e538f;--kolibri-color-danger: #ad0e0b; /* --kolibri-color-dark: #222222; */--kolibri-color-error: #ad0e0b;--kolibri-color-ghost: #333333;--kolibri-color-info: #28568a; /* --kolibri-color-light: #f2f2f2; */--kolibri-color-normal: #326cae;--kolibri-color-outline: var(--kolibri-color-focus);--kolibri-color-primary: #1e538f;--kolibri-color-secondary: #444444;--kolibri-color-spin-1: #000000;--kolibri-color-spin-2: #ff0000;--kolibri-color-spin-3: #ffcc00;--kolibri-color-success: #12632f;--kolibri-color-warning: #854000;--kolibri-color-gray: #666;--kolibri-font-family: var(--font-family);--kolibri-font-size: var(--font-size);--kolibri-hyphens: auto;--kolibri-line-height: 1.5em;--kolibri-shadow-color: black;--kolibri-spacing: 0.25em;--spacing: 0.25em;--font-family: Roboto, Droid Sans, Arial, Helvetica, sans-serif;--font-size: 16px;}",
|
|
242
244
|
"KOL-BUTTON": "a,button {border-radius: var(--kolibri-border-radius);overflow: hidden;}a > kol-span-wc,button > kol-span-wc {border-radius: var(--kolibri-border-radius);border-style: solid;border-width: 2px;min-height: 44px;min-width: 44px;box-shadow: 0 0 0.25em gray;font-family: var(--kolibri-font-family);font-size: inherit;line-height: 1.25em;padding: calc(2 * var(--kolibri-spacing));}a > kol-span-wc,button > kol-span-wc {gap: 0.25em;}kol-link-wc.primary > a > kol-span-wc,kol-link-wc.primary > a:disabled:hover > kol-span-wc,button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);color: white;}kol-link-wc.primary > a:hover > kol-span-wc,kol-link-wc.primary > a:focus > kol-span-wc,button.primary:hover > kol-span-wc,button.primary:focus > kol-span-wc {color: var(--kolibri-color-primary);}kol-link-wc.secondary > a > kol-span-wc,kol-link-wc.secondary > a:disabled:hover > kol-span-wc,button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-secondary);border-color: var(--kolibri-color-secondary);color: white;}kol-link-wc.secondary > a:hover > kol-span-wc,kol-link-wc.secondary > a:focus > kol-span-wc,button.secondary:hover > kol-span-wc,button.secondary:focus > kol-span-wc {color: var(--kolibri-color-secondary);}kol-link-wc.normal > a > kol-span-wc,kol-link-wc.normal > a:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-normal);border-color: var(--kolibri-color-normal);color: white;}kol-link-wc.normal > a:hover > kol-span-wc,kol-link-wc.normal > a:focus > kol-span-wc,button.normal:hover > kol-span-wc,button.normal:focus > kol-span-wc {color: var(--kolibri-color-normal);}kol-link-wc.danger > a > kol-span-wc,kol-link-wc.danger > a:disabled:hover > kol-span-wc,button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-danger);border-color: var(--kolibri-color-danger);color: white;}kol-link-wc.danger > a:hover > kol-span-wc,kol-link-wc.danger > a:focus > kol-span-wc,button.danger:hover > kol-span-wc,button.danger:focus > kol-span-wc {color: var(--kolibri-color-danger);}kol-link-wc.ghost > a > kol-span-wc,kol-link-wc.ghost > a:disabled:hover > kol-span-wc,button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {background-color: white;border-color: var(--kolibri-color-ghost);color: var(--kolibri-color-ghost);}kol-link-wc.ghost > a:hover > kol-span-wc,kol-link-wc.ghost > a:focus > kol-span-wc,button.ghost:hover > kol-span-wc,button.ghost:focus > kol-span-wc {background-color: var(--kolibri-color-ghost);color: white;}kol-link-wc > a:hover > kol-span-wc,kol-link-wc > a:focus > kol-span-wc,button:hover > kol-span-wc,button:focus > kol-span-wc {background-color: white;box-shadow: 0 0 0.25em black;}",
|
|
243
|
-
"KOL-ALERT": ":host {--kolibri-border-width: 1px;}.heading kol-icon {align-self: stretch;align-items: center;}.heading
|
|
244
|
-
"KOL-INPUT-TEXT": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
245
|
+
"KOL-ALERT": ":host {--kolibri-border-width: 1px;}.heading kol-icon {align-self: stretch;align-items: center;}.heading .heading-icon {height: 100%;width: 2em;padding: calc(2 * var(--kolibri-spacing));}div.default {border-color: var(--kolibri-color-gray);}.default .heading-icon {background-color: var(--kolibri-color-gray);}div.error {border-color: var(--kolibri-color-error);}.error .heading-icon {background-color: var(--kolibri-color-error);}div.info {border-color: var(--kolibri-color-info);}.info .heading-icon {background-color: var(--kolibri-color-info);}div.success {border-color: var(--kolibri-color-success);}.success .heading-icon {background-color: var(--kolibri-color-success);}div.warning {border-color: var(--kolibri-color-warning);}.warning .heading-icon {background-color: var(--kolibri-color-warning);}",
|
|
246
|
+
"KOL-INPUT-TEXT": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
245
247
|
"KOL-BUTTON-GROUP": "div {display: inline-flex;flex-wrap: wrap;padding: 0.25em;border-radius: 5px;gap: 0.25em;}",
|
|
246
|
-
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
247
|
-
"KOL-INPUT-NUMBER": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
248
|
-
"KOL-INPUT-EMAIL": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
249
|
-
"KOL-INPUT-FILE": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
250
|
-
"KOL-TEXTAREA": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
248
|
+
"KOL-INPUT-PASSWORD": ':host {--kolibri-spacing: 0.25rem;}kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
249
|
+
"KOL-INPUT-NUMBER": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
250
|
+
"KOL-INPUT-EMAIL": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
251
|
+
"KOL-INPUT-FILE": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
252
|
+
"KOL-TEXTAREA": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
251
253
|
"KOL-HEADING": "h1,h2,h3,h4,h5,h6 {line-height: 1.25em;margin: 0;padding: 0;}h1 {font-size: 1.5rem !important;}h2 {font-size: 1.4rem !important;}h3 {font-size: 1.3rem !important;}h4 {font-size: 1.2rem !important;}h5 {font-size: 1.1rem !important;}h6 {font-size: 1rem !important;}",
|
|
252
254
|
"KOL-INPUT-CHECKBOX": '/* ALL INPUT, SELECT, TEXTAREA */label {cursor: pointer;}input {color: var(--default-letter);border-color: var(--default-border);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}.required label > span::after {content: "*";padding-left: 0.125em;}input:hover {border-color: var(--kolibri-color-primary);} /* NEU */kol-input {display: grid;align-items: center;justify-items: left;width: 100%;}kol-input.checkbox {grid-template-columns: calc(6 * var(--spacing)) auto;}kol-input.switch {grid-template-columns: calc(13 * var(--spacing)) auto;}kol-input > div.input {display: inline-flex;order: 1;}kol-input > div.input input {margin: 0px;}kol-input > label {order: 2;padding-left: calc(2 * var(--spacing));}kol-input > kol-alert.error {order: 3;padding-top: 0.25em;grid-column: span 2 / auto;} /* CHECKBOX */input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}input[type="checkbox"]:before {content: "";cursor: pointer;}input[type="checkbox"]:checked {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);}.checkbox input[type="checkbox"] {border-radius: 0.25em;height: calc(6 * var(--kolibri-spacing));min-width: calc(6 * var(--kolibri-spacing));width: calc(6 * var(--kolibri-spacing));}.checkbox input[type="checkbox"]:before {border-radius: 0.25em;background-color: transparent;display: block;height: calc(6 * var(--kolibri-spacing));position: relative;width: calc(6 * var(--kolibri-spacing));}.checkbox input[type="checkbox"]:checked:before {border-right-width: 3px;border-bottom-width: 3px;left: calc(1.5 * var(--kolibri-spacing) - 2px);top: calc(2.85 * var(--kolibri-spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(3 * var(--kolibri-spacing));width: calc(1.5 * var(--kolibri-spacing));}.checkbox input[type="checkbox"]:indeterminate:before {background-color: var(--kolibri-color-normal);height: 0.375rem;top: 0.45rem;left: 0.15rem;width: calc(4 * var(--kolibri-spacing));}.switch input[type="checkbox"] {min-width: 3.2em;width: 3.2em;height: 1.7em;border-radius: 0.25em;display: inline-block;position: relative;}.switch input[type="checkbox"]:before {-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.2em;height: 1.2em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);border-radius: 0.25em;background-color: black;position: absolute;}.switch input[type="checkbox"]:checked:before {-webkit-transform: translateX(1.5em);-moz-transform: translateX(1.5em);-ms-transform: translateX(1.5em);transform: translateX(1.5em);background-color: white;}.switch input[type="checkbox"]:indeterminate:before {-webkit-transform: translateX(0.75em);-moz-transform: translateX(0.75em);-ms-transform: translateX(0.75em);transform: translateX(0.75em);background-color: var(--kolibri-color-primary);}.disabled {opacity: 0.33;}',
|
|
253
255
|
"KOL-INPUT-RADIO": 'label {cursor: pointer;display: grid;font-size: 14px;line-height: 20px;gap: 8px;width: 100%;}input {cursor: pointer;width: 100%;border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}input:hover {border-color: var(--kolibri-color-primary);}kol-alert {display: block;width: 100%;margin-bottom: 0.4em;}.required label > span::after {content: "*";padding-left: 0.125em;} /* RADIO */fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}fieldset div {cursor: pointer;display: flex;flex-direction: row;margin-top: 0.125em;margin-bottom: 0.125em;align-items: center;position: relative;}fieldset div label {cursor: pointer;display: flex;padding-left: 0.25em;width: 100%;}fieldset div label span {margin-top: 0.125em;}fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * var(--spacing) - 2px);top: calc(1.5 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * var(--spacing));width: calc(3 * var(--spacing));}fieldset div input[type="radio"]:checked:before {box-shadow: 0 0 0.1rem black;background-color: var(--kolibri-color-primary);}fieldset #error {margin: 0.4em 0;order: 3;}fieldset legend {order: 1;display: contents;}fieldset kol-input {order: 2;}.disabled {opacity: 0.33;}fieldset.horizontal {display: flex;flex-wrap: wrap;gap: 0.5rem 1rem;}fieldset.horizontal legend {display: inline-block;margin-bottom: 0.25em;}',
|
|
254
256
|
"KOL-BADGE": ":host {display: inline-block;}:host > span {border-radius: 0.3125rem;gap: 0.5rem;line-height: 1.25rem;}",
|
|
255
257
|
"KOL-LINK": "kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--kolibri-color-primary);text-decoration-line: underline;}a:hover,button:hover {text-decoration-thickness: 0.2em;}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
256
|
-
"KOL-BREADCRUMB":
|
|
258
|
+
"KOL-BREADCRUMB": "",
|
|
257
259
|
"KOL-SPIN": ".spin {display: inline-block;height: 1rem;position: relative;width: 3rem;}.spin span {animation-timing-function: cubic-bezier(0, 1, 1, 0);border: 0.1rem solid rgb(255, 255, 255);border-radius: 50%;height: 0.8rem;width: 0.8rem;top: 0.1rem;position: absolute;}.spin span:nth-child(1) {background-color: #fc0;z-index: 0;animation: 2s ease 0s infinite normal none running spin1;left: 0.1rem;}.spin span:nth-child(2) {background-color: #f00;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 0.1rem;}.spin span:nth-child(3) {background-color: #000;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 1.1rem;}.spin span:nth-child(4) {background-color: #666;z-index: 0;animation: 2s ease 0s infinite normal none running spin3;left: 2.1rem;}@keyframes spin1 {0% {transform: scale(0);}100% {transform: scale(1);}}@keyframes spin2 {0% {transform: translate(0px, 0px);}100% {transform: translate(1rem, 0px);}}@keyframes spin3 {0% {transform: scale(1);}100% {transform: scale(0);}}",
|
|
258
260
|
"KOL-PROGRESS": ":host progress,:host span {display: block;height: 0px;overflow: hidden;width: 0px;}svg line:first-child,svg circle:first-child {fill: transparent;stroke: #efefef;}svg line:last-child,svg circle:last-child {stroke: var(--kolibri-color-normal);fill: transparent;}",
|
|
259
|
-
"KOL-SELECT": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
260
|
-
"KOL-INPUT-COLOR": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;
|
|
261
|
+
"KOL-SELECT": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
262
|
+
"KOL-INPUT-COLOR": 'kol-input {display: grid;padding: 0;margin: 0;}input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {border-color: var(--kolibri-color-secondary);}kol-input > label {order: 1;}kol-input > label > span {color: var(--default-letter);font-size: 0.875rem;line-height: 1.5rem;}kol-input > div.input {background-color: white;border-radius: 0.25rem;display: block;order: 2;}kol-input > kol-alert.error {order: 3;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;color: var(--default-letter);border-color: var(--kolibri-border-color);border-width: 2px;border-style: solid;padding: 0.5em 0.75em;border-radius: 0.25rem;overflow: hidden;width: 100%;}input:not([type="range"]),select:not([multiple]) {height: 2.75em;}textarea {display: inherit;}input::placeholder {color: var(--default-border-hover);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;background-color: var(--background-light-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background-color: var(--kolibri-color-primary);color: white;}',
|
|
261
263
|
"KOL-ACCORDION": ':host > div {font-family: var(--font-family);box-sizing: border-box;width: 100%;height: 100%;display: grid;border-color: var(--kolibri-border-color);border-width: 1px;border-style: solid;border-radius: 0.25rem;}:host > div > kol-heading-wc {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host > div > kol-heading-wc button {cursor: pointer;width: 100%;margin: 0;display: flex;gap: 0.5em;border: 0;align-items: center;overflow: hidden;font-size: inherit;line-height: 1.75em;background-color: transparent;padding: 0.5rem;}:host > div > kol-heading-wc button kol-icon {width: 1.5em;}:host > div div[part="header"],:host > div[part*="open"] div[part="content"] {margin: 0;padding-left: 2.5em;}:host > div > kol-heading-wc button kol-icon::part(icon) {color: var(--color-midnight);}button {cursor: pointer;font-weight: inherit;font-size: inherit;line-height: inherit;}',
|
|
262
264
|
"KOL-CARD": ":host > div {border-color: var(--kolibri-border-color);border-style: solid;border-width: 2px;border-radius: 0.25rem;display: grid;width: 100%;height: 100%;background-color: white;grid-template-rows: min-content 2fr min-content;}:host kol-heading-wc {display: inline-flex;font-style: normal;font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host div.footer,:host div.header {padding: 0.5rem;}:host div.content {padding: 0;}:host div.content,:host div.content + div.footer {border-top: 1px solid var(--kolibri-border-color);}",
|
|
263
265
|
"KOL-LINK-GROUP": "ul {list-style: none;margin: 0px;padding: 0px;}nav.horizontal ul {display: flex;flex-wrap: wrap;}nav.horizontal li {margin-left: 1.25rem;margin-right: 0.25rem;}nav.horizontal li:first-child {margin-left: 0;}nav.horizontal li:last-child {margin-right: 0;}nav.vertical li {margin-left: 1.75rem;margin-right: 0.5rem;}li.list-none {list-style-type: none !important;margin-left: 0;}",
|
|
264
266
|
"KOL-PAGINATION": ":host {display: grid;gap: 1rem;}:host > div {display: inline-flex;flex-wrap: wrap;align-items: center;gap: 0.5em;}:host .selected button {min-width: 44px;min-height: 44px;box-sizing: border-box;line-height: 1.25em;font-size: inherit;cursor: pointer;border-width: 2px;box-shadow: 0 0 0.25em gray;font-family: var(--kolibri-font-family);width: inherit;border-radius: var(--kolibri-border-radius);border-style: solid;padding: calc(2 * var(--kolibri-spacing));display: grid;gap: 0.25em;align-items: center;justify-content: center;text-align: center;transition-duration: 0.5s;transition-property: background-color, color, border-color;}:host .selected button {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);color: white;cursor: not-allowed;font-weight: 700;text-decoration: underline;}",
|
|
265
267
|
"KOL-TABS": ':host {font-family: var(--font-family);}:host > div {display: block;width: 100%;}:host kol-button-group-wc {border-radius: 0.25rem 0.25rem 0 0;background-color: var(--kolibri-color-normal);}:host kol-button-group-wc > div {display: inline-flex;}:host kol-button-group-wc > div + div {margin-left: 0.25em;}:host kol-button-group-wc button {width: 100%;}:host > div > div {padding: 0.25em;border: 1px solid var(--kolibri-border-color);border-radius: 0 0 0.25rem 0.25rem;}button {box-sizing: border-box;font-size: inherit;line-height: 1.25em;cursor: pointer;border-width: 2px;box-shadow: 0 0 0.25em gray;font-family: var(--kolibri-font-family);width: inherit;border-radius: var(--kolibri-border-radius);border-style: solid;padding: calc(2 * var(--kolibri-spacing));display: grid;gap: 0.25em;align-items: center;justify-content: center;text-align: center;transition-duration: 0.5s;transition-property: background-color, color, border-color;}kol-button-wc button.selected,kol-button-wc[aria-selected="true"] button {background-color: white;border-bottom-width: 0.25em !important;border-bottom-style: solid;border-bottom-color: var(--kolibri-color-accent) !important;}button > kol-span-wc span {display: flex;gap: 0.25em;align-items: center;justify-content: center;}button:disabled {cursor: not-allowed;opacity: 0.5;}button.primary,button.primary:disabled:hover {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);color: white;}button.primary:hover,button.primary:focus {color: var(--kolibri-color-primary);}button.secondary,button.secondary:disabled:hover {background-color: var(--kolibri-color-secondary);border-color: var(--kolibri-color-secondary);color: white;}button.secondary:hover,button.secondary:focus {color: var(--kolibri-color-secondary);}button.normal,button.normal:disabled:hover {background-color: var(--kolibri-color-normal);border-color: var(--kolibri-color-normal);color: white;}button.normal:hover,button.normal:focus {color: var(--kolibri-color-normal);}button.danger,button.danger:disabled:hover {background-color: var(--kolibri-color-danger);border-color: var(--kolibri-color-danger);color: white;}button.danger:hover,button.danger:focus {color: var(--kolibri-color-danger);}button.ghost,button.ghost:disabled:hover {background-color: white;border-color: var(--kolibri-color-ghost);color: var(--kolibri-color-ghost);}button.ghost:hover,button.ghost:focus {background-color: var(--kolibri-color-ghost);color: white;}button:hover,button:focus {background-color: white;box-shadow: 0 0 0.25em black;}button:active {outline: 0 !important;box-shadow: none !important;}.close-button {font-size: 25%;height: fit-content;width: 0;}.close-button button {width: 1rem;position: relative;height: 1rem;left: -4.25em;top: 0.25em;}:host > div {display: grid;}:host > div.tabs-align-left {grid-template-columns: auto 1fr;}:host > div.tabs-align-right {grid-template-columns: 1fr auto;}:host > .tabs-align-left kol-button-group-wc,:host > .tabs-align-top kol-button-group-wc {order: 0;}:host > .tabs-align-bottom kol-button-group-wc,:host > .tabs-align-right kol-button-group-wc {order: 1;}:host > div.tabs-align-left kol-button-group-wc > div,:host > div.tabs-align-left kol-button-group-wc > div > div,:host > div.tabs-align-right kol-button-group-wc > div,:host > div.tabs-align-right kol-button-group-wc > div > div {display: grid;}:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {width: 100%;}:host > div.tabs-align-bottom kol-button-group-wc div,:host > div.tabs-align-top kol-button-group-wc div {display: flex;flex-wrap: wrap;}:host > div.tabs-align-bottom > kol-button-group-wc {border-radius: 0 0 0.25rem 0.25rem;}:host > div.tabs-align-bottom > div {border-radius: 0.25rem 0.25rem 0 0;}:host > div.tabs-align-top > kol-button-group-wc {border-radius: 0.25rem 0.25rem 0 0;}:host > div.tabs-align-top > div {border-radius: 0 0 0.25rem 0.25rem;}:host > div.tabs-align-left > kol-button-group-wc {border-radius: 0.25rem 0 0 0.25rem;}:host > div.tabs-align-left > div {border-radius: 0 0.25rem 0.25rem 0;}:host > div.tabs-align-right > kol-button-group-wc {border-radius: 0 0.25rem 0.25rem 0;}:host > div.tabs-align-right > div {border-radius: 0.25rem 0 0 0.25rem;}',
|
|
266
268
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
|
267
|
-
"KOL-INPUT-RANGE":
|
|
269
|
+
"KOL-INPUT-RANGE": "",
|
|
268
270
|
"KOL-NAV": ':host * {hyphens: var(--kolibri-hyphens);font-family: var(--font-family);line-height: var(--kolibri-line-height);word-break: break-word;}:host .hidden {display: none;}:host > div > nav ul {list-style: none;margin: 0px;padding: 0px;border-radius: var(--kolibri-border-radius);background-color: var(--kolibri-color-normal);}:host > div > nav ul > li {border-radius: var(--kolibri-border-radius);overflow: hidden;padding: 0.125em;}:host > div > nav ul > li[part*="vertical"] + li {border-radius: 0;border-top: 0.1em dotted white;}:host > div > nav ul > li[part*="vertical selected"] {border-right: 0.375em solid var(--kolibri-color-accent);}:host > div > nav ul > li[part*="horizontal"] + li {border-radius: 0;border-left: 0.1em dotted white;}:host > div > nav ul > li[part*="horizontal selected"] {border-bottom: 0.375em solid var(--kolibri-color-accent);}:host > div > nav ul > li > div {height: 100%;}:host > div > nav kol-link-wc {width: 100%; /*height: 100%;font-weight: 600;*/display: block;}:host > div > nav kol-link-wc a {border-radius: var(--kolibri-border-radius);background-color: var(--kolibri-color-normal);border: 1px solid transparent;grid: flex;line-height: 2em;padding: 0.5em;color: white;height: 100%;-webkit-box-align: center;align-items: center;display: flex;cursor: pointer;text-decoration: inherit;}:host > div > nav kol-link-wc[exportparts*="selected"] a {background-color: var(--kolibri-color-active);font-weight: 700;}:host > div > nav kol-link-wc a kol-icon.mr-2 {margin-right: calc(2 * var(--kolibri-spacing));}:host > div > nav kol-link-wc a kol-icon.ml-2 {margin-left: calc(2 * var(--kolibri-spacing));}:host > div > nav kol-link-wc a:focus,:host > div > nav kol-link-wc a:hover {border: 1px solid white;background-color: var(--kolibri-color-focus);} /* compact button */:host > div > div:last-child {margin-top: 0.5em;width: 100%;text-align: center;}:host > div > nav kol-link-wc a.text-center {display: grid;align-items: center;justify-items: center;} /* horizontal */ul.flex {display: flex;}li > div > div.absolute {position: absolute;}kol-span-wc {justify-items: baseline;}',
|
|
269
271
|
"KOL-TABLE": ":host * {hyphens: var(--kolibri-hyphens);font-family: var(--kolibri-font-family);line-height: var(--kolibri-line-height);word-break: break-word;}:host > div {overflow-x: auto;overflow-y: hidden;}:host > div:first-child {border-radius: var(--kolibri-border-radius);border-style: solid;border-width: 1px;border-color: var(--kolibri-border-color);}:host table {width: 100%;border-collapse: collapse;border-spacing: 0;}:host table,:host tr,:host th,:host td {border: 0 solid var(--kolibri-border-color);}:host tr {border-top-width: 1px;}:host tr:nth-child(even) {background-color: #f2f2f2;}:host th,:host td {border-right-width: 1px;padding: 0.25em 0.5em;}:host th {background-color: #eee;}:host th > div {display: grid;grid-template-columns: 1fr auto;align-items: center;gap: 0.25em;}:host > div.pagination {padding: 0.5em;}:host > div.pagination,:host > div.pagination > div:last-child {display: grid;align-items: center;justify-items: center;gap: 0.5em;}@media (min-width: 1024px) {:host > div.pagination,:host > div.pagination > div:last-child {grid-auto-flow: column;}:host > div.pagination kol-pagination {display: flex;gap: 1rem;}}",
|
|
270
272
|
"KOL-LINK-BUTTON": "a > kol-span-wc,button > kol-span-wc {border-radius: var(--kolibri-border-radius);border-style: solid;border-width: 2px;min-height: 44px;min-width: 44px;box-shadow: 0 0 0.25em gray;font-family: var(--kolibri-font-family);font-size: inherit;line-height: 1.25em;padding: calc(2 * var(--kolibri-spacing));}a > kol-span-wc,button > kol-span-wc {gap: 0.25em;}kol-link-wc.primary > a > kol-span-wc,kol-link-wc.primary > a:disabled:hover > kol-span-wc,button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-primary);border-color: var(--kolibri-color-primary);color: white;}kol-link-wc.primary > a:hover > kol-span-wc,kol-link-wc.primary > a:focus > kol-span-wc,button.primary:hover > kol-span-wc,button.primary:focus > kol-span-wc {color: var(--kolibri-color-primary);}kol-link-wc.secondary > a > kol-span-wc,kol-link-wc.secondary > a:disabled:hover > kol-span-wc,button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-secondary);border-color: var(--kolibri-color-secondary);color: white;}kol-link-wc.secondary > a:hover > kol-span-wc,kol-link-wc.secondary > a:focus > kol-span-wc,button.secondary:hover > kol-span-wc,button.secondary:focus > kol-span-wc {color: var(--kolibri-color-secondary);}kol-link-wc.normal > a > kol-span-wc,kol-link-wc.normal > a:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-normal);border-color: var(--kolibri-color-normal);color: white;}kol-link-wc.normal > a:hover > kol-span-wc,kol-link-wc.normal > a:focus > kol-span-wc,button.normal:hover > kol-span-wc,button.normal:focus > kol-span-wc {color: var(--kolibri-color-normal);}kol-link-wc.danger > a > kol-span-wc,kol-link-wc.danger > a:disabled:hover > kol-span-wc,button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--kolibri-color-danger);border-color: var(--kolibri-color-danger);color: white;}kol-link-wc.danger > a:hover > kol-span-wc,kol-link-wc.danger > a:focus > kol-span-wc,button.danger:hover > kol-span-wc,button.danger:focus > kol-span-wc {color: var(--kolibri-color-danger);}kol-link-wc.ghost > a > kol-span-wc,kol-link-wc.ghost > a:disabled:hover > kol-span-wc,button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {background-color: white;border-color: var(--kolibri-color-ghost);color: var(--kolibri-color-ghost);}kol-link-wc.ghost > a:hover > kol-span-wc,kol-link-wc.ghost > a:focus > kol-span-wc,button.ghost:hover > kol-span-wc,button.ghost:focus > kol-span-wc {background-color: var(--kolibri-color-ghost);color: white;}kol-link-wc > a:hover > kol-span-wc,kol-link-wc > a:focus > kol-span-wc,button:hover > kol-span-wc,button:focus > kol-span-wc {background-color: white;box-shadow: 0 0 0.25em black;}",
|
|
271
273
|
"KOL-BUTTON-LINK": "a,button {background-color: transparent;border: 0;cursor: pointer;display: inline-block;}kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--kolibri-color-primary);display: inline-flex;flex-wrap: wrap;text-decoration-line: underline;}a:hover,button:hover {text-decoration-thickness: 0.2em;}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
272
274
|
"KOL-INDENTED-TEXT": ":host > div {border-left: none;box-shadow: -4px 0px 0px var(--kolibri-color-primary);padding: 0.25em 0.5em;width: 100%;}",
|
|
273
|
-
"KOL-DETAILS": "
|
|
275
|
+
"KOL-DETAILS": ""
|
|
274
276
|
});
|
|
275
277
|
|
|
276
278
|
const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
|