public-ui-kolibri

@use '../../mixins/to-rem' as *; @use './alert-wc' as *; @use './pagination-mixin' as *; @mixin kol-table-stateless-wc { @include kol-alert-theme; @include kol-pagination-styles; :host { display: flex; gap: to-rem(8); flex-direction: column; } .kol-table { $root: &; display: block; &__scroll-container { padding: 0.5em; } &__caption { padding: 0.5em; } &__cell { padding: 0.5em; &--selection, &--header { @at-root #{$root}__head-row:first-child & { border-color: var(--color-ice); border-style: solid; border-width: 0; border-top-width: to-rem(2); } @at-root #{$root}__head-row:last-child & { border-color: var(--color-ice); border-style: solid; border-width: 0; border-bottom-width: to-rem(2); } } &--header { color: var(--color-midnight); background-color: var(--color-white); font-weight: normal; } &--ascending, &--descending { font-weight: 700; .kol-button { font-weight: 700; } } } &__focus-element { &:focus { outline-color: var(--color-blue); outline-style: solid; outline-width: 2px; outline-offset: 2px; } } &__table { border-color: var(--color-ice); border-style: solid; width: 100%; border-width: 0; border-bottom-width: to-rem(2); border-spacing: 0; } &__row { &--body { &:nth-child(odd) { background-color: var(--color-grey-10); } } } &__selection { display: flex; gap: 0.5em; align-items: center; grid-template-columns: 1fr auto; } &__selection-input { &:focus { outline-color: var(--color-blue); outline-style: solid; outline-width: 2px; border-color: var(--color-blue); outline-offset: 2px; } // CHECKBOX &--checkbox { border-color: var(--color-grey-75); &:checked { background-color: var(--color-blue); border-color: var(--color-blue); } } // RADIO &--radio { border-color: var(--color-grey-75); display: block; &:not(:disabled):hover { border-color: var(--color-blue); } &:checked { border-color: var(--color-blue); border-width: 7px; &:before { background-color: var(--color-white); } } } @at-root #{$root}__selection--indeterminate & { background-color: var(--color-white); } } &__selection-icon { color: var(--color-white); @at-root #{$root}__selection--indeterminate & { color: var(--color-blue); } } .kol-icon:hover ~ &__selection-input--checkbox:not(:disabled), &__selection-input--checkbox:not(:disabled):hover { border-color: var(--color-blue); } } }