diff --git a/packages/components/src/components/abbr/style.css b/packages/components/src/components/abbr/style.css
index d04a7217db..f88c0178d4 100644
--- a/packages/components/src/components/abbr/style.css
+++ b/packages/components/src/components/abbr/style.css
@@ -1,4 +1,6 @@
@import url(../style.css);
-:host > abbr {
- cursor: help;
+@layer kol-component {
+ :host > abbr {
+ cursor: help;
+ }
}
diff --git a/packages/components/src/components/accordion/style.css b/packages/components/src/components/accordion/style.css
index 203b385190..6681a6fc12 100644
--- a/packages/components/src/components/accordion/style.css
+++ b/packages/components/src/components/accordion/style.css
@@ -1,33 +1,39 @@
@import url(../style.css);
@import url(../host-display-block.css);
-/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */
-.wrapper {
- display: grid;
- grid-template-rows: 0fr;
- overflow: hidden;
- transition: grid-template-rows 0.3s;
-}
-.accordion.open .wrapper {
- grid-template-rows: 1fr;
-}
-.animation-wrapper {
- min-height: 0;
- transition: visibility 0.3s;
- /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */
- visibility: hidden;
-}
-.accordion.open .animation-wrapper {
- visibility: visible;
-}
-@media (prefers-reduced-motion) {
- .animation-wrapper,
+@layer kol-component {
+ /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */
.wrapper {
- transition-duration: 0s;
+ display: grid;
+ grid-template-rows: 0fr;
+ overflow: hidden;
+ transition: grid-template-rows 0.3s;
}
-} /*
+
+ .accordion.open .wrapper {
+ grid-template-rows: 1fr;
+ }
+
+ .animation-wrapper {
+ min-height: 0;
+ transition: visibility 0.3s;
+ /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */
+ visibility: hidden;
+ }
+
+ .accordion.open .animation-wrapper {
+ visibility: visible;
+ }
+
+ @media (prefers-reduced-motion) {
+ .animation-wrapper,
+ .wrapper {
+ transition-duration: 0s;
+ }
+ } /*
* Inside a button, the caption text is always centered.
* So we have to align the text to the left.
*/
-.accordion kol-heading-wc kol-button-wc button kol-span-wc {
- justify-items: start;
+ .accordion kol-heading-wc kol-button-wc button kol-span-wc {
+ justify-items: start;
+ }
}
diff --git a/packages/components/src/components/alert/style.css b/packages/components/src/components/alert/style.css
index 1397167a11..a883ca07b3 100644
--- a/packages/components/src/components/alert/style.css
+++ b/packages/components/src/components/alert/style.css
@@ -1,12 +1,16 @@
@import url(../style.css);
@import url(../host-display-block.css);
-kol-alert-wc {
- display: grid;
-}
-kol-alert-wc .heading {
- display: flex;
- place-items: center;
-}
-kol-alert-wc .heading > div {
- flex-grow: 1;
+@layer kol-component {
+ kol-alert-wc {
+ display: grid;
+ }
+
+ kol-alert-wc .heading {
+ display: flex;
+ place-items: center;
+ }
+
+ kol-alert-wc .heading > div {
+ flex-grow: 1;
+ }
}
diff --git a/packages/components/src/components/avatar/style.css b/packages/components/src/components/avatar/style.css
index 0ffd1c6630..f4e5eb1453 100644
--- a/packages/components/src/components/avatar/style.css
+++ b/packages/components/src/components/avatar/style.css
@@ -1,23 +1,27 @@
@import url(../style.css);
@import url(../host-display-block.css);
-.container {
- border-radius: 50%;
- overflow: hidden;
- /*theme?*/
- width: 100px;
- height: 100px;
-}
-.image {
- width: 100%;
- height: 100%;
-}
-.initials {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- /*theme?*/
- background: #d3d3d3;
- font-size: 2rem;
+@layer kol-component {
+ .container {
+ border-radius: 50%;
+ overflow: hidden;
+ /*theme?*/
+ width: 100px;
+ height: 100px;
+ }
+
+ .image {
+ width: 100%;
+ height: 100%;
+ }
+
+ .initials {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /*theme?*/
+ background: #d3d3d3;
+ font-size: 2rem;
+ }
}
diff --git a/packages/components/src/components/badge/style.css b/packages/components/src/components/badge/style.css
index dbc1a2a21e..b673996690 100644
--- a/packages/components/src/components/badge/style.css
+++ b/packages/components/src/components/badge/style.css
@@ -1,8 +1,11 @@
@import url(../style.css);
-:host > span {
- display: inline-flex;
- place-items: center;
-}
-:host > span > kol-button-wc button {
- color: inherit;
+@layer kol-component {
+ :host > span {
+ display: inline-flex;
+ place-items: center;
+ }
+
+ :host > span > kol-button-wc button {
+ color: inherit;
+ }
}
diff --git a/packages/components/src/components/breadcrumb/style.css b/packages/components/src/components/breadcrumb/style.css
index 6a8bc024b3..fbd1ff1750 100644
--- a/packages/components/src/components/breadcrumb/style.css
+++ b/packages/components/src/components/breadcrumb/style.css
@@ -1,19 +1,23 @@
@import url(../style.css);
-li,
-ul {
- margin: 0;
- padding: 0;
- list-style: none;
- display: flex;
- gap: 0.5em;
- flex-wrap: wrap;
- place-items: center;
-}
-kol-icon::part(separator) {
- font-weight: 900;
- font-size: 0.7em;
-}
-kol-icon::part(separator):before {
- content: '\f054';
- font-family: 'Font Awesome 6 Free';
+@layer kol-component {
+ li,
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ gap: 0.5em;
+ flex-wrap: wrap;
+ place-items: center;
+ }
+
+ kol-icon::part(separator) {
+ font-weight: 900;
+ font-size: 0.7em;
+ }
+
+ kol-icon::part(separator):before {
+ content: '\f054';
+ font-family: 'Font Awesome 6 Free';
+ }
}
diff --git a/packages/components/src/components/button-group/style.css b/packages/components/src/components/button-group/style.css
index ec06f257ac..7d7412f222 100644
--- a/packages/components/src/components/button-group/style.css
+++ b/packages/components/src/components/button-group/style.css
@@ -1,5 +1,7 @@
@import url(../style.css);
-:host > kol-button-group-wc {
- display: flex;
- flex-wrap: wrap;
+@layer kol-component {
+ :host > kol-button-group-wc {
+ display: flex;
+ flex-wrap: wrap;
+ }
}
diff --git a/packages/components/src/components/card/style.css b/packages/components/src/components/card/style.css
index 0915f318ea..0c80d5c9d8 100644
--- a/packages/components/src/components/card/style.css
+++ b/packages/components/src/components/card/style.css
@@ -1,10 +1,13 @@
@import url(../style.css);
-:host > div.card {
- height: 100%;
- position: relative;
-}
-.close {
- position: absolute;
- top: 0;
- right: 0;
+@layer kol-component {
+ :host > div.card {
+ height: 100%;
+ position: relative;
+ }
+
+ .close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
}
diff --git a/packages/components/src/components/details/style.css b/packages/components/src/components/details/style.css
index 2bb69bdb4d..cf6b3ec62d 100644
--- a/packages/components/src/components/details/style.css
+++ b/packages/components/src/components/details/style.css
@@ -1,22 +1,28 @@
@import url(../style.css);
@import url(../host-display-block.css);
-details {
- display: grid;
-}
-details > summary {
- cursor: pointer;
- display: flex;
- place-items: center;
-}
-details > summary > span {
- border-bottom-color: grey;
- border-bottom-style: solid;
-}
-details > summary:focus > span,
-details > summary:hover > span,
-details[open] > summary > span {
- border-bottom-color: #000;
-}
-details > kol-indented-text {
- margin: 0.25em 0 0 0.5em;
+@layer kol-component {
+ details {
+ display: grid;
+ }
+
+ details > summary {
+ cursor: pointer;
+ display: flex;
+ place-items: center;
+ }
+
+ details > summary > span {
+ border-bottom-color: grey;
+ border-bottom-style: solid;
+ }
+
+ details > summary:focus > span,
+ details > summary:hover > span,
+ details[open] > summary > span {
+ border-bottom-color: #000;
+ }
+
+ details > kol-indented-text {
+ margin: 0.25em 0 0 0.5em;
+ }
}
diff --git a/packages/components/src/components/heading/style.css b/packages/components/src/components/heading/style.css
index abf4821396..788d42f8df 100644
--- a/packages/components/src/components/heading/style.css
+++ b/packages/components/src/components/heading/style.css
@@ -1,10 +1,14 @@
@import url(../style.css);
-:host > kol-heading-wc {
- display: grid;
-}
-:host > kol-heading-wc > .overline {
- order: 1;
-}
-:host > kol-heading-wc > .headline {
- order: 2;
+@layer kol-component {
+ :host > kol-heading-wc {
+ display: grid;
+ }
+
+ :host > kol-heading-wc > .overline {
+ order: 1;
+ }
+
+ :host > kol-heading-wc > .headline {
+ order: 2;
+ }
}
diff --git a/packages/components/src/components/host-display-block.css b/packages/components/src/components/host-display-block.css
index d0a69bc1ec..bdfc9e5773 100644
--- a/packages/components/src/components/host-display-block.css
+++ b/packages/components/src/components/host-display-block.css
@@ -1,3 +1,5 @@
-:host {
- display: block;
+@layer kol-component {
+ :host {
+ display: block;
+ }
}
diff --git a/packages/components/src/components/icon/style.css b/packages/components/src/components/icon/style.css
index 880b4223a8..be0d5584cd 100644
--- a/packages/components/src/components/icon/style.css
+++ b/packages/components/src/components/icon/style.css
@@ -1,19 +1,23 @@
@import url(../../assets/codicons/codicon.css);
-:host {
- color: inherit;
- display: contents;
- height: 1em;
- line-height: inherit;
- width: 1em;
-}
-:host > i {
- height: 1em;
- width: 1em;
-}
-/*
- * The :important is important, because we should always override the font icon style.
- */
-:host > i,
-:host > i:before {
- font-size: inherit !important;
+@layer kol-component {
+ :host {
+ color: inherit;
+ display: contents;
+ height: 1em;
+ line-height: inherit;
+ width: 1em;
+ }
+
+ :host > i {
+ height: 1em;
+ width: 1em;
+ }
+
+ /*
+ * The :important is important, because we should always override the font icon style.
+ */
+ :host > i,
+ :host > i:before {
+ font-size: inherit !important;
+ }
}
diff --git a/packages/components/src/components/image/style.css b/packages/components/src/components/image/style.css
index 73aedac2e9..3589a3a56d 100644
--- a/packages/components/src/components/image/style.css
+++ b/packages/components/src/components/image/style.css
@@ -1,4 +1,6 @@
-img {
- max-height: 100%;
- max-width: 100%;
+@layer kol-component {
+ img {
+ max-height: 100%;
+ max-width: 100%;
+ }
}
diff --git a/packages/components/src/components/indented-text/style.css b/packages/components/src/components/indented-text/style.css
index f07429c499..0fa11a3045 100644
--- a/packages/components/src/components/indented-text/style.css
+++ b/packages/components/src/components/indented-text/style.css
@@ -1,6 +1,8 @@
@import url(../style.css);
@import url(../host-display-block.css);
-:host > div {
- border-left-style: solid;
- padding-left: 0.5em;
+@layer kol-component {
+ :host > div {
+ border-left-style: solid;
+ padding-left: 0.5em;
+ }
}
diff --git a/packages/components/src/components/input-checkbox/button.css b/packages/components/src/components/input-checkbox/button.css
index 9f70fd61c5..c9fafb24cd 100644
--- a/packages/components/src/components/input-checkbox/button.css
+++ b/packages/components/src/components/input-checkbox/button.css
@@ -1,31 +1,40 @@
-.button {
- display: grid;
- grid-template-columns: var(--a11y-min-size) auto;
- grid-template-areas: 'error error' 'input label' 'hint hint';
-}
-.button[tabindex]:focus {
- /* override global `[tabindex]:focus` style */
- cursor: inherit;
-}
-.button input {
- display: none;
-}
-.button > .error {
- grid-area: error;
-}
-.button > label {
- grid-area: label;
-}
-.button > .input {
- grid-area: input;
-}
-.button > .hint {
- grid-area: hint;
-}
-.button .icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: var(--a11y-min-size);
- height: var(--a11y-min-size);
+@layer kol-component {
+ .button {
+ display: grid;
+ grid-template-columns: var(--a11y-min-size) auto;
+ grid-template-areas: 'error error' 'input label' 'hint hint';
+ }
+
+ .button[tabindex]:focus {
+ /* override global `[tabindex]:focus` style */
+ cursor: inherit;
+ }
+
+ .button input {
+ display: none;
+ }
+
+ .button > .error {
+ grid-area: error;
+ }
+
+ .button > label {
+ grid-area: label;
+ }
+
+ .button > .input {
+ grid-area: input;
+ }
+
+ .button > .hint {
+ grid-area: hint;
+ }
+
+ .button .icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--a11y-min-size);
+ height: var(--a11y-min-size);
+ }
}
diff --git a/packages/components/src/components/input-checkbox/checkbox.css b/packages/components/src/components/input-checkbox/checkbox.css
index 91c241330d..c1b711310c 100644
--- a/packages/components/src/components/input-checkbox/checkbox.css
+++ b/packages/components/src/components/input-checkbox/checkbox.css
@@ -1,27 +1,32 @@
-.default input[type='checkbox'] {
- height: 1.5em;
- width: 1.5em;
-}
-.default input[type='checkbox']:before {
- display: block;
- height: 1.5em;
- position: relative;
- width: 1.5em;
-}
-.default input[type='checkbox']:checked:before {
- border-radius: 1px;
- border-style: solid;
- border-width: 0 3px 3px 0;
- height: 0.75em;
- left: calc(0.375em - 2px);
- transform: rotate(40deg) translate(-50%, -50%);
- top: calc(0.7125em - 2px);
- width: 0.375em;
-}
-.default input[type='checkbox']:indeterminate:before {
- background-color: #000;
- height: 0.2em;
- left: 0.24em;
- top: 0.575em;
- width: 0.8em;
+@layer kol-component {
+ .default input[type='checkbox'] {
+ height: 1.5em;
+ width: 1.5em;
+ }
+
+ .default input[type='checkbox']:before {
+ display: block;
+ height: 1.5em;
+ position: relative;
+ width: 1.5em;
+ }
+
+ .default input[type='checkbox']:checked:before {
+ border-radius: 1px;
+ border-style: solid;
+ border-width: 0 3px 3px 0;
+ height: 0.75em;
+ left: calc(0.375em - 2px);
+ transform: rotate(40deg) translate(-50%, -50%);
+ top: calc(0.7125em - 2px);
+ width: 0.375em;
+ }
+
+ .default input[type='checkbox']:indeterminate:before {
+ background-color: #000;
+ height: 0.2em;
+ left: 0.24em;
+ top: 0.575em;
+ width: 0.8em;
+ }
}
diff --git a/packages/components/src/components/input-checkbox/common.css b/packages/components/src/components/input-checkbox/common.css
index a9ecaf42c5..33d2f7d55d 100644
--- a/packages/components/src/components/input-checkbox/common.css
+++ b/packages/components/src/components/input-checkbox/common.css
@@ -1,63 +1,81 @@
-label {
- cursor: pointer;
-}
-kol-input {
- align-items: center;
- display: grid;
- justify-items: left;
-}
-kol-input.default,
-kol-input.switch {
- grid-template-columns: auto 1fr;
-}
-kol-input .input {
- align-items: center;
- display: grid;
- order: 1;
-}
-kol-input .input div {
- display: inline-flex;
-}
-kol-input .input input {
- margin: 0;
-}
-kol-input label {
- order: 2;
-}
-kol-input .hint,
-kol-input.error > kol-alert {
- grid-column: span 2;
-}
-kol-input kol-alert.error {
- order: 3;
-}
-kol-input .hint {
- order: 4;
-}
-.error.hidden {
- display: none;
-}
-input {
- border-style: solid;
- border-width: 2px;
- line-height: 24px;
-}
-input[type='checkbox'] {
- appearance: none;
- background-color: #fff;
- cursor: pointer;
- transition: 0.5s;
-}
-input[type='checkbox'].kol-disabled:before {
- cursor: not-allowed;
-}
-input[type='checkbox']:before {
- content: '';
- cursor: pointer;
-}
-.default kol-icon {
- display: none;
-}
-kol-input.required .tooltip-content .span-label::after {
- content: '*';
+@layer kol-component {
+ label {
+ cursor: pointer;
+ }
+
+ kol-input {
+ align-items: center;
+ display: grid;
+ justify-items: left;
+ }
+
+ kol-input.default,
+ kol-input.switch {
+ grid-template-columns: auto 1fr;
+ }
+
+ kol-input .input {
+ align-items: center;
+ display: grid;
+ order: 1;
+ }
+
+ kol-input .input div {
+ display: inline-flex;
+ }
+
+ kol-input .input input {
+ margin: 0;
+ }
+
+ kol-input label {
+ order: 2;
+ }
+
+ kol-input .hint,
+ kol-input.error > kol-alert {
+ grid-column: span 2;
+ }
+
+ kol-input kol-alert.error {
+ order: 3;
+ }
+
+ kol-input .hint {
+ order: 4;
+ }
+
+ .error.hidden {
+ display: none;
+ }
+
+ input {
+ border-style: solid;
+ border-width: 2px;
+ line-height: 24px;
+ }
+
+ input[type='checkbox'] {
+ appearance: none;
+ background-color: #fff;
+ cursor: pointer;
+ transition: 0.5s;
+ }
+
+ input[type='checkbox'].kol-disabled:before {
+ cursor: not-allowed;
+ }
+
+ input[type='checkbox']:before {
+ content: '';
+ cursor: pointer;
+ }
+
+ .default kol-icon {
+ display: none;
+ }
+
+ kol-input.required .tooltip-content .span-label::after {
+ content: '*';
+ }
}
diff --git a/packages/components/src/components/input-checkbox/switch.css b/packages/components/src/components/input-checkbox/switch.css
index bc2ea44484..21cbc4708a 100644
--- a/packages/components/src/components/input-checkbox/switch.css
+++ b/packages/components/src/components/input-checkbox/switch.css
@@ -1,46 +1,55 @@
-.switch .input {
- position: relative;
-}
-.switch input[type='checkbox'] {
- display: inline-block;
- height: 1.7em;
- min-width: 3.2em;
- position: relative;
- width: 3.2em;
-}
-.switch input[type='checkbox']::before {
- background-color: #000;
- height: 1.2em;
- left: calc(0.25em - 2px);
- top: calc(0.25em - 2px);
- position: absolute;
- transition: 0.5s;
- width: 1.2em;
-}
-.switch input[type='checkbox']:checked::before {
- transform: translateX(1.5em);
-}
-.switch input[type='checkbox']:indeterminate::before {
- transform: translateX(0.75em);
-}
-.switch .icon {
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 1.2em;
- height: 1.2em;
- position: absolute;
- z-index: 1;
- top: 50%;
- left: 4px;
- transform: translate(0, -50%);
- transition: 0.5s;
- color: #000;
-}
-.switch:has(input:checked) .icon {
- transform: translate(1.5em, -50%);
-}
-.switch:has(input:indeterminate) .icon {
- transform: translate(0.75em, -50%);
+@layer kol-component {
+ .switch .input {
+ position: relative;
+ }
+
+ .switch input[type='checkbox'] {
+ display: inline-block;
+ height: 1.7em;
+ min-width: 3.2em;
+ position: relative;
+ width: 3.2em;
+ }
+
+ .switch input[type='checkbox']::before {
+ background-color: #000;
+ height: 1.2em;
+ left: calc(0.25em - 2px);
+ top: calc(0.25em - 2px);
+ position: absolute;
+ transition: 0.5s;
+ width: 1.2em;
+ }
+
+ .switch input[type='checkbox']:checked::before {
+ transform: translateX(1.5em);
+ }
+
+ .switch input[type='checkbox']:indeterminate::before {
+ transform: translateX(0.75em);
+ }
+
+ .switch .icon {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.2em;
+ height: 1.2em;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ left: 4px;
+ transform: translate(0, -50%);
+ transition: 0.5s;
+ color: #000;
+ }
+
+ .switch:has(input:checked) .icon {
+ transform: translate(1.5em, -50%);
+ }
+
+ .switch:has(input:indeterminate) .icon {
+ transform: translate(0.75em, -50%);
+ }
}
diff --git a/packages/components/src/components/input-color/style.css b/packages/components/src/components/input-color/style.css
index 5a635ebfba..d75f4efb2a 100644
--- a/packages/components/src/components/input-color/style.css
+++ b/packages/components/src/components/input-color/style.css
@@ -1,7 +1,10 @@
@import url(../input-line.css);
-div.input {
- cursor: pointer;
-}
-.error.hidden {
- display: none;
+@layer kol-component {
+ div.input {
+ cursor: pointer;
+ }
+
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-date/style.css b/packages/components/src/components/input-date/style.css
index 78b9c59994..41d52516ca 100644
--- a/packages/components/src/components/input-date/style.css
+++ b/packages/components/src/components/input-date/style.css
@@ -1,7 +1,10 @@
@import url(../input-line.css);
-kol-input-number {
- display: block;
-}
-.error.hidden {
- display: none;
+@layer kol-component {
+ kol-input-number {
+ display: block;
+ }
+
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-email/style.css b/packages/components/src/components/input-email/style.css
index 176b8585b7..9ec3f41e70 100644
--- a/packages/components/src/components/input-email/style.css
+++ b/packages/components/src/components/input-email/style.css
@@ -1,4 +1,6 @@
@import url(../input-line.css);
-.error.hidden {
- display: none;
+@layer kol-component {
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-file/style.css b/packages/components/src/components/input-file/style.css
index d67f49c645..2c108c097c 100644
--- a/packages/components/src/components/input-file/style.css
+++ b/packages/components/src/components/input-file/style.css
@@ -1,16 +1,22 @@
@import url(../input-line.css);
-label input[type='file']::-webkit-file-upload-button {
- display: none;
-}
-label input[type='file']:before {
- content: 'Datei auswählen';
-}
-label input[multiple]:before {
- content: 'Dateien auswählen';
-}
-div.input {
- cursor: pointer;
-}
-.error.hidden {
- display: none;
+@layer kol-component {
+ label input[type='file']::-webkit-file-upload-button {
+ display: none;
+ }
+
+ label input[type='file']:before {
+ content: 'Datei auswählen';
+ }
+
+ label input[multiple]:before {
+ content: 'Dateien auswählen';
+ }
+
+ div.input {
+ cursor: pointer;
+ }
+
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-line.css b/packages/components/src/components/input-line.css
index 6e26d85542..6dbb213ffc 100644
--- a/packages/components/src/components/input-line.css
+++ b/packages/components/src/components/input-line.css
@@ -1,29 +1,37 @@
@import url(input.css);
-kol-input {
- display: grid;
-}
-kol-input .input-slot {
- flex-grow: 1;
-}
-input:not([type='checkbox'], [type='radio']),
-select:not([multiple], [size]) {
- height: 2.75em;
-}
-input:focus,
-option:focus,
-select:focus,
-textarea:focus {
- outline: 0;
-}
-.input {
- display: flex;
- align-items: center;
-}
-.input > kol-icon {
- display: grid;
- height: var(--a11y-min-size);
- place-items: center;
-}
-kol-input.required .input-tooltip .span-label::after {
- content: '*';
+@layer kol-component {
+ kol-input {
+ display: grid;
+ }
+
+ kol-input .input-slot {
+ flex-grow: 1;
+ }
+
+ input:not([type='checkbox'], [type='radio']),
+ select:not([multiple], [size]) {
+ height: 2.75em;
+ }
+
+ input:focus,
+ option:focus,
+ select:focus,
+ textarea:focus {
+ outline: 0;
+ }
+
+ .input {
+ display: flex;
+ align-items: center;
+ }
+
+ .input > kol-icon {
+ display: grid;
+ height: var(--a11y-min-size);
+ place-items: center;
+ }
+
+ kol-input.required .input-tooltip .span-label::after {
+ content: '*';
+ }
}
diff --git a/packages/components/src/components/input-number/style.css b/packages/components/src/components/input-number/style.css
index 176b8585b7..9ec3f41e70 100644
--- a/packages/components/src/components/input-number/style.css
+++ b/packages/components/src/components/input-number/style.css
@@ -1,4 +1,6 @@
@import url(../input-line.css);
-.error.hidden {
- display: none;
+@layer kol-component {
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-password/style.css b/packages/components/src/components/input-password/style.css
index 176b8585b7..9ec3f41e70 100644
--- a/packages/components/src/components/input-password/style.css
+++ b/packages/components/src/components/input-password/style.css
@@ -1,4 +1,6 @@
@import url(../input-line.css);
-.error.hidden {
- display: none;
+@layer kol-component {
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-radio/style.css b/packages/components/src/components/input-radio/style.css
index 7e5f0a568f..29a14fca98 100644
--- a/packages/components/src/components/input-radio/style.css
+++ b/packages/components/src/components/input-radio/style.css
@@ -1,52 +1,64 @@
@import url(../input.css);
-:host {
- --border-width: 2px;
- --input-size: 1.5em;
-}
-kol-input .icons {
- display: none;
-}
-label {
- cursor: pointer;
-}
-input {
- appearance: none;
- border-width: var(--border-width);
- border-style: solid;
- border-radius: 100%;
- cursor: pointer;
- display: flex;
- height: var(--input-size);
- margin: 0;
- min-height: var(--input-size);
- min-width: var(--input-size);
- padding: 0;
- width: var(--input-size);
-}
-input:before {
- border-radius: 100%;
- content: '';
- margin: auto;
- height: calc(var(--input-size) / 2);
- width: calc(var(--input-size) / 2);
-}
-input:checked:before {
- background-color: #000;
-}
-fieldset {
- display: flex;
-}
-fieldset.vertical {
- flex-direction: column;
-}
-fieldset .input-slot {
- align-items: center;
- display: flex;
-}
-/* required star is on fieldset legend */
-.required label > span::after {
- content: '';
-}
-.error.hidden {
- display: none;
+@layer kol-component {
+ :host {
+ --border-width: 2px;
+ --input-size: 1.5em;
+ }
+
+ kol-input .icons {
+ display: none;
+ }
+
+ label {
+ cursor: pointer;
+ }
+
+ input {
+ appearance: none;
+ border-width: var(--border-width);
+ border-style: solid;
+ border-radius: 100%;
+ cursor: pointer;
+ display: flex;
+ height: var(--input-size);
+ margin: 0;
+ min-height: var(--input-size);
+ min-width: var(--input-size);
+ padding: 0;
+ width: var(--input-size);
+ }
+
+ input:before {
+ border-radius: 100%;
+ content: '';
+ margin: auto;
+ height: calc(var(--input-size) / 2);
+ width: calc(var(--input-size) / 2);
+ }
+
+ input:checked:before {
+ background-color: #000;
+ }
+
+ fieldset {
+ display: flex;
+ }
+
+ fieldset.vertical {
+ flex-direction: column;
+ }
+
+ fieldset .input-slot {
+ align-items: center;
+ display: flex;
+ }
+
+ /* required star is on fieldset legend */
+ .required label > span::after {
+ content: '';
+ }
+
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-range/style.css b/packages/components/src/components/input-range/style.css
index 87b503166b..32a1f0f680 100644
--- a/packages/components/src/components/input-range/style.css
+++ b/packages/components/src/components/input-range/style.css
@@ -1,47 +1,54 @@
@import url(../input-line.css);
-.inputs-wrapper {
- align-items: center;
- display: flex;
- flex-direction: row;
-}
-input[type='number'] {
- min-height: var(--a11y-min-size);
- min-width: var(--a11y-min-size);
- width: var(--kolibri-input-range--input-number--width);
-}
-/*
- * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.
- */
-input[type='range'] {
- appearance: none;
- background-color: #d3d3d3;
- border: 1px solid #000;
- display: inline-block;
- flex-grow: 1;
- height: 0.5rem;
- line-height: 1.5em;
- padding: 0;
- margin: 0;
- width: 0; /* Design-Hack - related with flex-grow */
-}
-input[type='range']::-webkit-slider-thumb {
- box-sizing: border-box;
- background-color: #000;
- height: 20px;
- width: 20px;
- border-radius: 20px;
- cursor: pointer;
- -webkit-appearance: none;
-}
-input[type='range']::-moz-range-thumb {
- box-sizing: border-box;
- background-color: #000;
- height: 20px;
- width: 20px;
- border-radius: 20px;
- cursor: pointer;
- -moz-appearance: none;
-}
-.error.hidden {
- display: none;
+@layer kol-component {
+ .inputs-wrapper {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ }
+
+ input[type='number'] {
+ min-height: var(--a11y-min-size);
+ min-width: var(--a11y-min-size);
+ width: var(--kolibri-input-range--input-number--width);
+ }
+
+ /*
+ * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.
+ */
+ input[type='range'] {
+ appearance: none;
+ background-color: #d3d3d3;
+ border: 1px solid #000;
+ display: inline-block;
+ flex-grow: 1;
+ height: 0.5rem;
+ line-height: 1.5em;
+ padding: 0;
+ margin: 0;
+ width: 0; /* Design-Hack - related with flex-grow */
+ }
+
+ input[type='range']::-webkit-slider-thumb {
+ box-sizing: border-box;
+ background-color: #000;
+ height: 20px;
+ width: 20px;
+ border-radius: 20px;
+ cursor: pointer;
+ -webkit-appearance: none;
+ }
+
+ input[type='range']::-moz-range-thumb {
+ box-sizing: border-box;
+ background-color: #000;
+ height: 20px;
+ width: 20px;
+ border-radius: 20px;
+ cursor: pointer;
+ -moz-appearance: none;
+ }
+
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input-text/style.css b/packages/components/src/components/input-text/style.css
index 176b8585b7..9ec3f41e70 100644
--- a/packages/components/src/components/input-text/style.css
+++ b/packages/components/src/components/input-text/style.css
@@ -1,4 +1,6 @@
@import url(../input-line.css);
-.error.hidden {
- display: none;
+@layer kol-component {
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/input.css b/packages/components/src/components/input.css
index 5a3cd6bbf0..dc63562ce1 100644
--- a/packages/components/src/components/input.css
+++ b/packages/components/src/components/input.css
@@ -1,51 +1,58 @@
@import url(label.css);
@import url(host-display-block.css);
-input,
-textarea {
- cursor: text;
-}
-input[type='checkbox'],
-input[type='color'],
-input[type='file'],
-input[type='radio'],
-input[type='range'],
-label,
-option,
-select {
- cursor: pointer;
-}
-/* input[type='checkbox'], */
-/* input[type='radio'], */
-/* input[type='range'], */
-input[type='color'],
-input[type='date'],
-input[type='datetime-local'],
-input[type='email'],
-input[type='file'],
-input[type='month'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='tel'],
-input[type='text'],
-input[type='time'],
-input[type='url'],
-input[type='week'],
-select,
-select[multiple] option,
-textarea {
- font-size: 1rem;
- width: 100%;
-}
-/* needed hack for vertical alignment */
-input[type='file'] {
- padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;
-}
-/* needed hack for vertical alignment */
-select[multiple] option {
- padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;
-}
-kol-input.disabled :is(button, input, label, option, select, textarea) {
- cursor: not-allowed;
- opacity: 0.5;
+@layer kol-component {
+ input,
+ textarea {
+ cursor: text;
+ }
+
+ input[type='checkbox'],
+ input[type='color'],
+ input[type='file'],
+ input[type='radio'],
+ input[type='range'],
+ label,
+ option,
+ select {
+ cursor: pointer;
+ }
+
+ /* input[type='checkbox'], */
+ /* input[type='radio'], */
+ /* input[type='range'], */
+ input[type='color'],
+ input[type='date'],
+ input[type='datetime-local'],
+ input[type='email'],
+ input[type='file'],
+ input[type='month'],
+ input[type='number'],
+ input[type='password'],
+ input[type='search'],
+ input[type='tel'],
+ input[type='text'],
+ input[type='time'],
+ input[type='url'],
+ input[type='week'],
+ select,
+ select[multiple] option,
+ textarea {
+ font-size: 1rem;
+ width: 100%;
+ }
+
+ /* needed hack for vertical alignment */
+ input[type='file'] {
+ padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;
+ }
+
+ /* needed hack for vertical alignment */
+ select[multiple] option {
+ padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;
+ }
+
+ kol-input.disabled :is(button, input, label, option, select, textarea) {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
}
diff --git a/packages/components/src/components/kolibri/style.css b/packages/components/src/components/kolibri/style.css
index 3d6476480f..8499a1807d 100644
--- a/packages/components/src/components/kolibri/style.css
+++ b/packages/components/src/components/kolibri/style.css
@@ -1,12 +1,16 @@
@import url(../style.css);
-:host {
- display: inline-block;
-}
-text {
- font-size: 90px;
- letter-spacing: normal;
- word-spacing: normal;
-}
-svg {
- max-height: 100%;
+@layer kol-component {
+ :host {
+ display: inline-block;
+ }
+
+ text {
+ font-size: 90px;
+ letter-spacing: normal;
+ word-spacing: normal;
+ }
+
+ svg {
+ max-height: 100%;
+ }
}
diff --git a/packages/components/src/components/label.css b/packages/components/src/components/label.css
index 32ab09469d..1127dbcdad 100644
--- a/packages/components/src/components/label.css
+++ b/packages/components/src/components/label.css
@@ -1,5 +1,7 @@
@import url(style.css);
-.required label > span::after,
-.required legend > span::after {
- content: '*';
+@layer kol-component {
+ .required label > span::after,
+ .required legend > span::after {
+ content: '*';
+ }
}
diff --git a/packages/components/src/components/link-group/style.css b/packages/components/src/components/link-group/style.css
index db05ed76f3..f6d96a2ffe 100644
--- a/packages/components/src/components/link-group/style.css
+++ b/packages/components/src/components/link-group/style.css
@@ -1,28 +1,36 @@
@import url(../style.css);
-ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-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;
+@layer kol-component {
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ 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;
+ }
}
diff --git a/packages/components/src/components/link.css b/packages/components/src/components/link.css
index b8ab6c8d2b..b0276994dd 100644
--- a/packages/components/src/components/link.css
+++ b/packages/components/src/components/link.css
@@ -1,34 +1,42 @@
@import url(style.css);
-:host {
- display: inline-block;
-}
-:is(a, button) {
- align-items: baseline;
- display: inline-flex;
- place-items: center;
- text-align: left;
- text-decoration-line: underline;
-}
-:is(a, button):is(:focus, :hover) {
- text-decoration-thickness: 0.2em;
-}
-.hidden {
- display: none;
- visibility: hidden;
-}
-.skip {
- left: -99999px;
- overflow: hidden;
- position: absolute;
- z-index: 9999999;
- line-height: 1em;
-}
-.skip:focus {
- background-color: #fff;
- left: unset;
- padding: 1em;
- position: unset;
-}
-kol-icon.external-link-icon {
- display: inline-flex;
+@layer kol-component {
+ :host {
+ display: inline-block;
+ }
+
+ :is(a, button) {
+ align-items: baseline;
+ display: inline-flex;
+ place-items: center;
+ text-align: left;
+ text-decoration-line: underline;
+ }
+
+ :is(a, button):is(:focus, :hover) {
+ text-decoration-thickness: 0.2em;
+ }
+
+ .hidden {
+ display: none;
+ visibility: hidden;
+ }
+
+ .skip {
+ left: -99999px;
+ overflow: hidden;
+ position: absolute;
+ z-index: 9999999;
+ line-height: 1em;
+ }
+
+ .skip:focus {
+ background-color: #fff;
+ left: unset;
+ padding: 1em;
+ position: unset;
+ }
+
+ kol-icon.external-link-icon {
+ display: inline-flex;
+ }
}
diff --git a/packages/components/src/components/logo/style.css b/packages/components/src/components/logo/style.css
index 99ccf62273..0942931b8c 100644
--- a/packages/components/src/components/logo/style.css
+++ b/packages/components/src/components/logo/style.css
@@ -1,12 +1,16 @@
@import url(../style.css);
-:host {
- display: inline-block;
-}
-text {
- font-size: 16px;
- letter-spacing: normal;
- word-spacing: normal;
-}
-svg {
- max-height: 100%;
+@layer kol-component {
+ :host {
+ display: inline-block;
+ }
+
+ text {
+ font-size: 16px;
+ letter-spacing: normal;
+ word-spacing: normal;
+ }
+
+ svg {
+ max-height: 100%;
+ }
}
diff --git a/packages/components/src/components/modal/style.css b/packages/components/src/components/modal/style.css
index daa4f08bfa..f97196bac0 100644
--- a/packages/components/src/components/modal/style.css
+++ b/packages/components/src/components/modal/style.css
@@ -1,15 +1,18 @@
@import url(../style.css);
-.overlay {
- background-color: rgba(0, 0, 0, 0.33);
- display: flex;
- height: 100%;
- inset: 0;
- position: fixed;
- width: 100%;
- z-index: 100;
-}
-.modal {
- margin: auto;
- max-height: 100%;
- max-width: 100%;
+@layer kol-component {
+ .overlay {
+ background-color: rgba(0, 0, 0, 0.33);
+ display: flex;
+ height: 100%;
+ inset: 0;
+ position: fixed;
+ width: 100%;
+ z-index: 100;
+ }
+
+ .modal {
+ margin: auto;
+ max-height: 100%;
+ max-width: 100%;
+ }
}
diff --git a/packages/components/src/components/nav/style.css b/packages/components/src/components/nav/style.css
index 1b2dedee89..b8587e6d87 100644
--- a/packages/components/src/components/nav/style.css
+++ b/packages/components/src/components/nav/style.css
@@ -1,28 +1,36 @@
@import url(../style.css);
-:host > div {
- display: grid;
- place-items: center;
-}
-nav {
- width: 100%;
-}
-.list {
- display: flex;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-.list.vertical {
- flex-direction: column;
-}
-.entry {
- display: flex;
-}
-.entry kol-button-wc:first-child,
-.entry kol-link-wc,
-.entry kol-span-wc {
- flex-grow: 1;
-}
-.entry kol-span-wc {
- justify-items: start;
+@layer kol-component {
+ :host > div {
+ display: grid;
+ place-items: center;
+ }
+
+ nav {
+ width: 100%;
+ }
+
+ .list {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .list.vertical {
+ flex-direction: column;
+ }
+
+ .entry {
+ display: flex;
+ }
+
+ .entry kol-button-wc:first-child,
+ .entry kol-link-wc,
+ .entry kol-span-wc {
+ flex-grow: 1;
+ }
+
+ .entry kol-span-wc {
+ justify-items: start;
+ }
}
diff --git a/packages/components/src/components/pagination/style.css b/packages/components/src/components/pagination/style.css
index 5952cf951d..449f5cda9a 100644
--- a/packages/components/src/components/pagination/style.css
+++ b/packages/components/src/components/pagination/style.css
@@ -1,7 +1,10 @@
@import url(../style.css);
-.navigation-list {
- list-style: none;
-}
-.separator:before {
- content: '•••';
+@layer kol-component {
+ .navigation-list {
+ list-style: none;
+ }
+
+ .separator:before {
+ content: '•••';
+ }
}
diff --git a/packages/components/src/components/popover/style.css b/packages/components/src/components/popover/style.css
index a1d992e523..8ae804adb8 100644
--- a/packages/components/src/components/popover/style.css
+++ b/packages/components/src/components/popover/style.css
@@ -1,37 +1,45 @@
@import url(../style.css);
-kol-popover {
- height: 0;
- position: absolute;
-}
-kol-popover .popover {
- background-color: #fff;
- min-height: max-content;
- min-width: max-content;
- opacity: 0;
- position: absolute;
-}
-kol-popover .hidden {
- display: none;
-}
-kol-popover .show {
- animation: 0.3s ease-in forwards fadeInOpacity;
-}
-kol-popover .disappear {
- animation: 0.3s ease-in backwards fadeInOpacity;
-}
-kol-popover .arrow {
- background-color: inherit;
- height: var(--font-size);
- position: absolute;
- rotate: 0.125turn;
- width: var(--font-size);
- z-index: -1;
-}
-@keyframes fadeInOpacity {
- 0% {
+@layer kol-component {
+ kol-popover {
+ height: 0;
+ position: absolute;
+ }
+
+ kol-popover .popover {
+ background-color: #fff;
+ min-height: max-content;
+ min-width: max-content;
opacity: 0;
+ position: absolute;
+ }
+
+ kol-popover .hidden {
+ display: none;
+ }
+
+ kol-popover .show {
+ animation: 0.3s ease-in forwards fadeInOpacity;
+ }
+
+ kol-popover .disappear {
+ animation: 0.3s ease-in backwards fadeInOpacity;
+ }
+
+ kol-popover .arrow {
+ background-color: inherit;
+ height: var(--font-size);
+ position: absolute;
+ rotate: 0.125turn;
+ width: var(--font-size);
+ z-index: -1;
}
- 100% {
- opacity: 1;
+
+ @keyframes fadeInOpacity {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
}
diff --git a/packages/components/src/components/progress/style.css b/packages/components/src/components/progress/style.css
index cac505cc23..3704bb89d2 100644
--- a/packages/components/src/components/progress/style.css
+++ b/packages/components/src/components/progress/style.css
@@ -1,46 +1,56 @@
@import url(../style.css);
-progress {
- display: block;
- height: 0;
- overflow: hidden;
- width: 0;
-}
-.bar .border {
- fill: transparent;
- stroke: black;
-}
-.bar .background {
- fill: lightgray;
- stroke: white;
-}
-.bar .progress {
- fill: #0075ff;
- stroke: transparent;
- transition: 250ms ease-in-out 50ms;
-}
-.cycle .background {
- fill: transparent;
- stroke: lightgray;
-}
-.cycle .border {
- fill: transparent;
- stroke: black;
-}
-.cycle .whitespace {
- fill: transparent;
- stroke: white;
-}
-.cycle .progress {
- fill: transparent;
- stroke: #0075ff;
- transform-origin: 50% 50%;
- transform: rotate(-90deg);
- transition: 250ms ease-in-out 50ms;
-}
-/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
-@media (prefers-reduced-motion) {
- .progress {
- transition-duration: 0s;
- transition-delay: 0s;
+@layer kol-component {
+ progress {
+ display: block;
+ height: 0;
+ overflow: hidden;
+ width: 0;
+ }
+
+ .bar .border {
+ fill: transparent;
+ stroke: black;
+ }
+
+ .bar .background {
+ fill: lightgray;
+ stroke: white;
+ }
+
+ .bar .progress {
+ fill: #0075ff;
+ stroke: transparent;
+ transition: 250ms ease-in-out 50ms;
+ }
+
+ .cycle .background {
+ fill: transparent;
+ stroke: lightgray;
+ }
+
+ .cycle .border {
+ fill: transparent;
+ stroke: black;
+ }
+
+ .cycle .whitespace {
+ fill: transparent;
+ stroke: white;
+ }
+
+ .cycle .progress {
+ fill: transparent;
+ stroke: #0075ff;
+ transform-origin: 50% 50%;
+ transform: rotate(-90deg);
+ transition: 250ms ease-in-out 50ms;
+ }
+
+ /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
+ @media (prefers-reduced-motion) {
+ .progress {
+ transition-duration: 0s;
+ transition-delay: 0s;
+ }
}
}
diff --git a/packages/components/src/components/quote/style.css b/packages/components/src/components/quote/style.css
index bc520a6729..3fafae98b5 100644
--- a/packages/components/src/components/quote/style.css
+++ b/packages/components/src/components/quote/style.css
@@ -1,23 +1,30 @@
@import url(../style.css);
-cite,
-figure,
-q + figcaption {
- display: inline;
- margin: 0;
- padding: 0;
-}
-blockquote:before {
- content: open-quote;
-}
-blockquote::after {
- content: close-quote;
-}
-cite:before {
- content: '—';
-}
-.block cite:before {
- padding-right: 0.5em;
-}
-.inline cite:before {
- padding: 0.5em;
+@layer kol-component {
+ cite,
+ figure,
+ q + figcaption {
+ display: inline;
+ margin: 0;
+ padding: 0;
+ }
+
+ blockquote:before {
+ content: open-quote;
+ }
+
+ blockquote::after {
+ content: close-quote;
+ }
+
+ cite:before {
+ content: '—';
+ }
+
+ .block cite:before {
+ padding-right: 0.5em;
+ }
+
+ .inline cite:before {
+ padding: 0.5em;
+ }
}
diff --git a/packages/components/src/components/select/style.css b/packages/components/src/components/select/style.css
index 176b8585b7..9ec3f41e70 100644
--- a/packages/components/src/components/select/style.css
+++ b/packages/components/src/components/select/style.css
@@ -1,4 +1,6 @@
@import url(../input-line.css);
-.error.hidden {
- display: none;
+@layer kol-component {
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/skip-nav/style.css b/packages/components/src/components/skip-nav/style.css
index 6b860fc705..8223e5e85a 100644
--- a/packages/components/src/components/skip-nav/style.css
+++ b/packages/components/src/components/skip-nav/style.css
@@ -1,21 +1,26 @@
@import url(../style.css);
-ul {
- display: grid;
- list-style: none;
- place-items: center;
-}
-ul li {
- height: 0;
-}
-kol-link-wc a {
- left: -99999px;
- overflow: hidden;
- position: absolute;
- z-index: 9999999;
- line-height: 1em;
-}
-kol-link-wc a:focus {
- background-color: #fff;
- left: unset;
- position: unset;
+@layer kol-component {
+ ul {
+ display: grid;
+ list-style: none;
+ place-items: center;
+ }
+
+ ul li {
+ height: 0;
+ }
+
+ kol-link-wc a {
+ left: -99999px;
+ overflow: hidden;
+ position: absolute;
+ z-index: 9999999;
+ line-height: 1em;
+ }
+
+ kol-link-wc a:focus {
+ background-color: #fff;
+ left: unset;
+ position: unset;
+ }
}
diff --git a/packages/components/src/components/spin/cycle.css b/packages/components/src/components/spin/cycle.css
index 22bffadacc..050440e581 100644
--- a/packages/components/src/components/spin/cycle.css
+++ b/packages/components/src/components/spin/cycle.css
@@ -1,56 +1,62 @@
-.spin.cycle {
- width: 3rem;
- height: 3rem;
-}
-.spin.cycle > .loader {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- position: relative;
- animation: 2s linear infinite rotate;
-}
-.spin.cycle > .loader::before {
- content: '';
- box-sizing: border-box;
- position: absolute;
- inset: 0px;
- border-radius: 50%;
- border: 5px solid #333;
- animation: 3s linear infinite prixClipFix;
-}
-@keyframes rotate {
- 100% {
- transform: rotate(360deg);
- }
-}
-@keyframes prixClipFix {
- 0% {
- border-color: #fff;
- clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+@layer kol-component {
+ .spin.cycle {
+ width: 3rem;
+ height: 3rem;
}
- 25% {
- border-color: #666;
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
- }
- 50% {
- border-color: #fc0;
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
- }
- 75% {
- border-color: red;
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
- }
- 100% {
- border-color: #000;
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
- }
-} /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
-@media (prefers-reduced-motion) {
+
.spin.cycle > .loader {
- animation-duration: 4s;
- }
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ position: relative;
+ animation: 2s linear infinite rotate;
+ }
+
.spin.cycle > .loader::before {
- animation-duration: 6s;
+ content: '';
+ box-sizing: border-box;
+ position: absolute;
+ inset: 0px;
+ border-radius: 50%;
+ border: 5px solid #333;
+ animation: 3s linear infinite prixClipFix;
+ }
+
+ @keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes prixClipFix {
+ 0% {
+ border-color: #fff;
+ clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+ }
+ 25% {
+ border-color: #666;
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+ }
+ 50% {
+ border-color: #fc0;
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+ }
+ 75% {
+ border-color: red;
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+ }
+ 100% {
+ border-color: #000;
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+ }
+ } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
+ @media (prefers-reduced-motion) {
+ .spin.cycle > .loader {
+ animation-duration: 4s;
+ }
+
+ .spin.cycle > .loader::before {
+ animation-duration: 6s;
+ }
}
}
diff --git a/packages/components/src/components/spin/dot.css b/packages/components/src/components/spin/dot.css
index b1f4e4ef5d..1455013677 100644
--- a/packages/components/src/components/spin/dot.css
+++ b/packages/components/src/components/spin/dot.css
@@ -1,69 +1,77 @@
-.spin.dot {
- height: 1rem;
- width: 3rem;
-}
-.spin.dot > span {
- animation-timing-function: cubic-bezier(0, 1, 1, 0);
- border-radius: 50%;
- border: 0.1rem solid #fff;
- height: 0.8rem;
- position: absolute;
- top: 0.1rem;
- width: 0.8rem;
-}
-.spin.dot > span:first-child {
- background-color: #fc0;
- z-index: 0;
- animation: 1s infinite spin1;
- left: 0.1rem;
-}
-.spin.dot > span:nth-child(2) {
- background-color: red;
- z-index: 1;
- animation: 1s infinite spin2;
- left: 0.1rem;
-}
-.spin.dot > span:nth-child(3) {
- background-color: #000;
- z-index: 1;
- animation: 1s infinite spin2;
- left: 1.1rem;
-}
-.spin.dot > span:nth-child(4) {
- background-color: #666;
- z-index: 0;
- animation: 1s infinite spin3;
- left: 2.1rem;
-}
-@keyframes spin1 {
- 0% {
- transform: scale(0);
+@layer kol-component {
+ .spin.dot {
+ height: 1rem;
+ width: 3rem;
}
- 100% {
- transform: scale(1);
+
+ .spin.dot > span {
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
+ border-radius: 50%;
+ border: 0.1rem solid #fff;
+ height: 0.8rem;
+ position: absolute;
+ top: 0.1rem;
+ width: 0.8rem;
}
-}
-@keyframes spin2 {
- 0% {
- transform: translate(0, 0);
- }
- 100% {
- transform: translate(1rem, 0);
+
+ .spin.dot > span:first-child {
+ background-color: #fc0;
+ z-index: 0;
+ animation: 1s infinite spin1;
+ left: 0.1rem;
}
-}
-@keyframes spin3 {
- 0% {
- transform: scale(1);
+
+ .spin.dot > span:nth-child(2) {
+ background-color: red;
+ z-index: 1;
+ animation: 1s infinite spin2;
+ left: 0.1rem;
}
- 100% {
- transform: scale(0);
+
+ .spin.dot > span:nth-child(3) {
+ background-color: #000;
+ z-index: 1;
+ animation: 1s infinite spin2;
+ left: 1.1rem;
}
-} /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
-@media (prefers-reduced-motion) {
- .spin.dot > span:first-child,
- .spin.dot > span:nth-child(2),
- .spin.dot > span:nth-child(3),
+
.spin.dot > span:nth-child(4) {
- animation-duration: 2s;
+ background-color: #666;
+ z-index: 0;
+ animation: 1s infinite spin3;
+ left: 2.1rem;
+ }
+
+ @keyframes spin1 {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+ @keyframes spin2 {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 100% {
+ transform: translate(1rem, 0);
+ }
+ }
+ @keyframes spin3 {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(0);
+ }
+ } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
+ @media (prefers-reduced-motion) {
+ .spin.dot > span:first-child,
+ .spin.dot > span:nth-child(2),
+ .spin.dot > span:nth-child(3),
+ .spin.dot > span:nth-child(4) {
+ animation-duration: 2s;
+ }
}
}
diff --git a/packages/components/src/components/spin/style.css b/packages/components/src/components/spin/style.css
index 605bf83553..9545f1e037 100644
--- a/packages/components/src/components/spin/style.css
+++ b/packages/components/src/components/spin/style.css
@@ -1,8 +1,10 @@
@import url(../style.css);
@import url(cycle.css);
@import url(dot.css);
-.spin {
- display: block;
- padding: 0.125rem;
- position: relative;
+@layer kol-component {
+ .spin {
+ display: block;
+ padding: 0.125rem;
+ position: relative;
+ }
}
diff --git a/packages/components/src/components/split-button/style.css b/packages/components/src/components/split-button/style.css
index 4b7d6427ae..3986811c01 100644
--- a/packages/components/src/components/split-button/style.css
+++ b/packages/components/src/components/split-button/style.css
@@ -1,37 +1,45 @@
@import url(../style.css);
-:host {
- display: flex;
- position: relative;
-}
-.main-button {
- flex-grow: 1;
- text-align: left;
-}
-.main-button kol-span-wc {
- place-items: start;
-}
-.secondary-button button {
- height: 100%;
-}
-.horizontal-line {
- background-color: rgba(0, 0, 0, 0.2);
- border-radius: 2px;
- height: 70%;
- margin-block: auto;
- width: 1px;
-}
-/* popover */
-.popover {
- height: 0;
- left: 0;
- min-width: 100%;
- overflow: hidden;
- position: absolute;
- top: 100%;
- transition: height 0.3s ease-in-out;
-}
-.popover-content {
- inset: 0 0 auto 0;
- min-width: 100%;
- position: absolute;
+@layer kol-component {
+ :host {
+ display: flex;
+ position: relative;
+ }
+
+ .main-button {
+ flex-grow: 1;
+ text-align: left;
+ }
+
+ .main-button kol-span-wc {
+ place-items: start;
+ }
+
+ .secondary-button button {
+ height: 100%;
+ }
+
+ .horizontal-line {
+ background-color: rgba(0, 0, 0, 0.2);
+ border-radius: 2px;
+ height: 70%;
+ margin-block: auto;
+ width: 1px;
+ }
+
+ /* popover */
+ .popover {
+ height: 0;
+ left: 0;
+ min-width: 100%;
+ overflow: hidden;
+ position: absolute;
+ top: 100%;
+ transition: height 0.3s ease-in-out;
+ }
+
+ .popover-content {
+ inset: 0 0 auto 0;
+ min-width: 100%;
+ position: absolute;
+ }
}
diff --git a/packages/components/src/components/table/style.css b/packages/components/src/components/table/style.css
index 55b7672a05..e4250e712c 100644
--- a/packages/components/src/components/table/style.css
+++ b/packages/components/src/components/table/style.css
@@ -1,36 +1,45 @@
@import url(../style.css);
@import url(../host-display-block.css);
-:host {
- display: grid;
-}
-:host > div.table {
- max-width: 100%;
- order: 1;
- overflow-x: auto;
- overflow-y: hidden;
-}
-:host > div.table table {
- width: 100%;
-}
-th > div {
- display: grid;
- grid-template-columns: 1fr auto;
- place-items: center;
-}
-div.pagination {
- order: 2;
-}
-div.pagination,
-div.pagination > div:last-child {
- display: grid;
- place-items: center;
-}
-@media (min-width: 1024px) {
+@layer kol-component {
+ :host {
+ display: grid;
+ }
+
+ :host > div.table {
+ max-width: 100%;
+ order: 1;
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+
+ :host > div.table table {
+ width: 100%;
+ }
+
+ th > div {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ place-items: center;
+ }
+
+ div.pagination {
+ order: 2;
+ }
+
div.pagination,
div.pagination > div:last-child {
- grid-auto-flow: column;
+ display: grid;
+ place-items: center;
}
- div.pagination kol-pagination {
- display: flex;
+
+ @media (min-width: 1024px) {
+ div.pagination,
+ div.pagination > div:last-child {
+ grid-auto-flow: column;
+ }
+
+ div.pagination kol-pagination {
+ display: flex;
+ }
}
}
diff --git a/packages/components/src/components/tabs/style.css b/packages/components/src/components/tabs/style.css
index efb1afc7f7..e16a2f1e2d 100644
--- a/packages/components/src/components/tabs/style.css
+++ b/packages/components/src/components/tabs/style.css
@@ -1,89 +1,113 @@
@import url(../style.css);
@import url(../host-display-block.css);
-kol-button-group-wc {
- display: inline-flex;
- flex-wrap: wrap;
-}
-kol-button-group-wc button {
- border-bottom-color: transparent;
- border-bottom-style: solid;
- display: block;
-}
-div.grid,
-div[role='tabpanel'] {
- 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: 0 1em 0 0;
-}
-:host > .tabs-align-bottom > kol-button-group-wc > div > div {
- margin: 0 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: 0 1em 0 0;
-}
-:host > .tabs-align-top > kol-button-group-wc > div > div {
- margin: 0 1em;
-}
-:host > div {
- display: grid;
-}
-: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;
+@layer kol-component {
+ kol-button-group-wc {
+ display: inline-flex;
+ flex-wrap: wrap;
+ }
+
+ kol-button-group-wc button {
+ border-bottom-color: transparent;
+ border-bottom-style: solid;
+ display: block;
+ }
+
+ div.grid,
+ div[role='tabpanel'] {
+ 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: 0 1em 0 0;
+ }
+
+ :host > .tabs-align-bottom > kol-button-group-wc > div > div {
+ margin: 0 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: 0 1em 0 0;
+ }
+
+ :host > .tabs-align-top > kol-button-group-wc > div > div {
+ margin: 0 1em;
+ }
+
+ :host > div {
+ display: grid;
+ }
+
+ :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;
+ }
}
diff --git a/packages/components/src/components/textarea/style.css b/packages/components/src/components/textarea/style.css
index 176b8585b7..9ec3f41e70 100644
--- a/packages/components/src/components/textarea/style.css
+++ b/packages/components/src/components/textarea/style.css
@@ -1,4 +1,6 @@
@import url(../input-line.css);
-.error.hidden {
- display: none;
+@layer kol-component {
+ .error.hidden {
+ display: none;
+ }
}
diff --git a/packages/components/src/components/toast-container/style.css b/packages/components/src/components/toast-container/style.css
index dddae75d3c..1f285155bf 100644
--- a/packages/components/src/components/toast-container/style.css
+++ b/packages/components/src/components/toast-container/style.css
@@ -1,9 +1,12 @@
-:host {
- display: flex;
- flex-direction: column;
- position: fixed;
- z-index: 200;
-}
-.close-all {
- align-self: flex-end;
+@layer kol-component {
+ :host {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ z-index: 200;
+ }
+
+ .close-all {
+ align-self: flex-end;
+ }
}
diff --git a/packages/components/src/components/tooltip/style.css b/packages/components/src/components/tooltip/style.css
index 2087699f36..022ac0001e 100644
--- a/packages/components/src/components/tooltip/style.css
+++ b/packages/components/src/components/tooltip/style.css
@@ -1,40 +1,46 @@
@import url(../style.css);
-kol-tooltip-wc .tooltip-floating {
- animation-duration: 0.5s;
- animation-iteration-count: 1;
- animation-name: fadeInOpacity;
- animation-timing-function: ease-in;
- box-sizing: border-box;
- display: none;
- position: absolute;
- visibility: hidden;
- /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
- top: 0;
- left: 0;
- max-width: 90vw;
- max-height: 90vh;
-}
-/* Shared between content and arrow */
-kol-tooltip-wc .tooltip-area {
- background-color: #fff;
- color: #000;
-}
-kol-tooltip-wc .tooltip-arrow {
- height: 10px;
- position: absolute;
- transform: rotate(45deg);
- width: 10px;
- z-index: 999;
-}
-kol-tooltip-wc .tooltip-content {
- position: relative;
- z-index: 1000;
-}
-@keyframes fadeInOpacity {
- 0% {
- opacity: 0;
+@layer kol-component {
+ kol-tooltip-wc .tooltip-floating {
+ animation-duration: 0.5s;
+ animation-iteration-count: 1;
+ animation-name: fadeInOpacity;
+ animation-timing-function: ease-in;
+ box-sizing: border-box;
+ display: none;
+ position: absolute;
+ visibility: hidden;
+ /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
+ top: 0;
+ left: 0;
+ max-width: 90vw;
+ max-height: 90vh;
+ }
+
+ /* Shared between content and arrow */
+ kol-tooltip-wc .tooltip-area {
+ background-color: #fff;
+ color: #000;
+ }
+
+ kol-tooltip-wc .tooltip-arrow {
+ height: 10px;
+ position: absolute;
+ transform: rotate(45deg);
+ width: 10px;
+ z-index: 999;
+ }
+
+ kol-tooltip-wc .tooltip-content {
+ position: relative;
+ z-index: 1000;
}
- 100% {
- opacity: 1;
+
+ @keyframes fadeInOpacity {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
}