@public-ui/theme-default 2.2.17-rc.0 → 2.2.17
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 +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +9 -9
package/dist/index.cjs
CHANGED
|
@@ -1007,9 +1007,9 @@ var css_248z$9 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-w
|
|
|
1007
1007
|
|
|
1008
1008
|
var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-color: var(--color-primary);\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-text);\n background-color: var(--color-light);\n border-color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\n }\n .primary:is(a, button):active > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):active > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc {\n box-shadow: none;\n outline: none;\n border-color: var(--color-light);\n }\n :is(a, button).hide-label > .kol-span-wc {\n width: unset;\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost:is(a, button).small > .kol-span-wc {\n background-color: transparent;\n box-shadow: none;\n border: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n background-color: var(--color-light);\n border-color: var(--color-light);\n border-style: solid;\n border-radius: 1.5em;\n border-width: var(--border-width);\n }\n .ghost:is(a, button).small:active > .kol-span-wc > span,\n .ghost:is(a, button).small:hover > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:hover > .kol-span-wc > span {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: 0;\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-left: none;\n border-top-left-radius: 0;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n }\n}";
|
|
1009
1009
|
|
|
1010
|
-
var css_248z$7 = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n:host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n
|
|
1010
|
+
var css_248z$7 = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n:host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n table {\n border-color: var(--color-primary-variant);\n border-style: solid;\n width: 100%;\n border-width: 0;\n border-spacing: 0.075rem;\n }\n th,\n thead td {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n tbody td {\n border-color: var(--color-primary);\n border-style: solid;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .input input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-primary);\n outline-offset: 2px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n border-color: var(--color-subtle);\n display: flex;\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n th .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(255, 255, 255, 0.24);\n border-color: var(--color-light);\n }\n th .input input:focus {\n outline-color: var(--color-mute-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-light);\n outline-offset: 2px;\n }\n th .input input:focus:hover {\n box-shadow: none;\n }\n th .input input[type=checkbox] {\n background-color: var(--color-primary);\n border-color: var(--color-mute);\n border-radius: 5px;\n }\n th .input input[type=checkbox]:checked {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input .icon {\n color: var(--color-primary);\n }\n th .input.indeterminate input {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input kol-icon:hover ~ input[type=checkbox],\n th .input input[type=checkbox]:hover {\n border-color: var(--color-light);\n }\n}";
|
|
1011
1011
|
|
|
1012
|
-
var css_248z$6 = ":host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n
|
|
1012
|
+
var css_248z$6 = ":host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n table {\n border-color: var(--color-primary-variant);\n border-style: solid;\n width: 100%;\n border-width: 0;\n border-spacing: 0.075rem;\n }\n th,\n thead td {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n tbody td {\n border-color: var(--color-primary);\n border-style: solid;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .input input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-primary);\n outline-offset: 2px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n border-color: var(--color-subtle);\n display: flex;\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n th .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(255, 255, 255, 0.24);\n border-color: var(--color-light);\n }\n th .input input:focus {\n outline-color: var(--color-mute-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-light);\n outline-offset: 2px;\n }\n th .input input:focus:hover {\n box-shadow: none;\n }\n th .input input[type=checkbox] {\n background-color: var(--color-primary);\n border-color: var(--color-mute);\n border-radius: 5px;\n }\n th .input input[type=checkbox]:checked {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input .icon {\n color: var(--color-primary);\n }\n th .input.indeterminate input {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input kol-icon:hover ~ input[type=checkbox],\n th .input input[type=checkbox]:hover {\n border-color: var(--color-light);\n }\n}";
|
|
1013
1013
|
|
|
1014
1014
|
var css_248z$5 = "@layer kol-theme-component {\n :host .tabs-button-group {\n display: inline-flex;\n gap: calc(32rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n color: var(--color-subtle);\n background-color: transparent;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n line-height: 1.2;\n border: 0;\n font-style: normal;\n }\n button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n gap: inherit;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .tabs-button-group button {\n border: none;\n }\n}";
|
|
1015
1015
|
|
package/dist/index.mjs
CHANGED
|
@@ -1005,9 +1005,9 @@ var css_248z$9 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-w
|
|
|
1005
1005
|
|
|
1006
1006
|
var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-color: var(--color-primary);\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-text);\n background-color: var(--color-light);\n border-color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\n }\n .primary:is(a, button):active > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):active > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .danger:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary:is(a, button):active > .kol-span-wc,\n .secondary:is(a, button):active > .kol-span-wc,\n .tertiary:is(a, button):active > .kol-span-wc,\n .danger:is(a, button):active > .kol-span-wc,\n .ghost:is(a, button):active > .kol-span-wc {\n box-shadow: none;\n outline: none;\n border-color: var(--color-light);\n }\n :is(a, button).hide-label > .kol-span-wc {\n width: unset;\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost:is(a, button).small > .kol-span-wc {\n background-color: transparent;\n box-shadow: none;\n border: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n background-color: var(--color-light);\n border-color: var(--color-light);\n border-style: solid;\n border-radius: 1.5em;\n border-width: var(--border-width);\n }\n .ghost:is(a, button).small:active > .kol-span-wc > span,\n .ghost:is(a, button).small:hover > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost:is(a, button).small.transparent:hover > .kol-span-wc > span {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button > .button > .kol-span-wc {\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: 0;\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-left: none;\n border-top-left-radius: 0;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n }\n}";
|
|
1007
1007
|
|
|
1008
|
-
var css_248z$7 = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n:host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n
|
|
1008
|
+
var css_248z$7 = "@layer kol-theme-component {\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n:host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n table {\n border-color: var(--color-primary-variant);\n border-style: solid;\n width: 100%;\n border-width: 0;\n border-spacing: 0.075rem;\n }\n th,\n thead td {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n tbody td {\n border-color: var(--color-primary);\n border-style: solid;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .input input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-primary);\n outline-offset: 2px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n border-color: var(--color-subtle);\n display: flex;\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n th .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(255, 255, 255, 0.24);\n border-color: var(--color-light);\n }\n th .input input:focus {\n outline-color: var(--color-mute-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-light);\n outline-offset: 2px;\n }\n th .input input:focus:hover {\n box-shadow: none;\n }\n th .input input[type=checkbox] {\n background-color: var(--color-primary);\n border-color: var(--color-mute);\n border-radius: 5px;\n }\n th .input input[type=checkbox]:checked {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input .icon {\n color: var(--color-primary);\n }\n th .input.indeterminate input {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input kol-icon:hover ~ input[type=checkbox],\n th .input input[type=checkbox]:hover {\n border-color: var(--color-light);\n }\n}";
|
|
1009
1009
|
|
|
1010
|
-
var css_248z$6 = ":host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n
|
|
1010
|
+
var css_248z$6 = ":host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n}\n\n@layer kol-theme-component {\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n table {\n border-color: var(--color-primary-variant);\n border-style: solid;\n width: 100%;\n border-width: 0;\n border-spacing: 0.075rem;\n }\n th,\n thead td {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n tbody td {\n border-color: var(--color-primary);\n border-style: solid;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n .input input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-primary);\n outline-offset: 2px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n border-color: var(--color-subtle);\n display: flex;\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n th .input input:hover {\n box-shadow: 0 2px 8px 2px rgba(255, 255, 255, 0.24);\n border-color: var(--color-light);\n }\n th .input input:focus {\n outline-color: var(--color-mute-variant);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-light);\n outline-offset: 2px;\n }\n th .input input:focus:hover {\n box-shadow: none;\n }\n th .input input[type=checkbox] {\n background-color: var(--color-primary);\n border-color: var(--color-mute);\n border-radius: 5px;\n }\n th .input input[type=checkbox]:checked {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input .icon {\n color: var(--color-primary);\n }\n th .input.indeterminate input {\n background-color: var(--color-light);\n border-color: var(--color-light);\n }\n th .input kol-icon:hover ~ input[type=checkbox],\n th .input input[type=checkbox]:hover {\n border-color: var(--color-light);\n }\n}";
|
|
1011
1011
|
|
|
1012
1012
|
var css_248z$5 = "@layer kol-theme-component {\n :host .tabs-button-group {\n display: inline-flex;\n gap: calc(32rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n color: var(--color-subtle);\n background-color: transparent;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n line-height: 1.2;\n border: 0;\n font-style: normal;\n }\n button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n gap: inherit;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .tabs-button-group button {\n border: none;\n }\n}";
|
|
1013
1013
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/theme-default",
|
|
3
|
-
"version": "2.2.17
|
|
3
|
+
"version": "2.2.17",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -43,28 +43,28 @@
|
|
|
43
43
|
"type": "module",
|
|
44
44
|
"sideEffects": false,
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@rollup/plugin-commonjs": "28.0.
|
|
47
|
-
"@rollup/plugin-node-resolve": "16.0.
|
|
46
|
+
"@rollup/plugin-commonjs": "28.0.7",
|
|
47
|
+
"@rollup/plugin-node-resolve": "16.0.3",
|
|
48
48
|
"@rollup/plugin-typescript": "12.1.4",
|
|
49
49
|
"@typescript-eslint/eslint-plugin": "7.18.0",
|
|
50
50
|
"@typescript-eslint/parser": "7.18.0",
|
|
51
51
|
"autoprefixer": "10.4.21",
|
|
52
52
|
"cpy-cli": "6.0.0",
|
|
53
|
-
"cross-env": "10.
|
|
53
|
+
"cross-env": "10.1.0",
|
|
54
54
|
"eslint": "8.57.1",
|
|
55
55
|
"nodemon": "3.1.10",
|
|
56
56
|
"npm-run-all2": "8.0.4",
|
|
57
57
|
"postcss": "8.5.6",
|
|
58
|
-
"rollup": "4.52.
|
|
58
|
+
"rollup": "4.52.4",
|
|
59
59
|
"rollup-plugin-postcss": "4.0.2",
|
|
60
60
|
"sass-embedded": "1.93.2",
|
|
61
|
-
"typescript": "5.9.
|
|
61
|
+
"typescript": "5.9.3",
|
|
62
62
|
"unbuild": "3.6.1",
|
|
63
|
-
"@public-ui/components": "2.2.17
|
|
64
|
-
"@public-ui/visual-tests": "2.2.17
|
|
63
|
+
"@public-ui/components": "2.2.17",
|
|
64
|
+
"@public-ui/visual-tests": "2.2.17"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
|
-
"@public-ui/components": "2.2.17
|
|
67
|
+
"@public-ui/components": "2.2.17"
|
|
68
68
|
},
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|