public-ui-kolibri

@use '../mixins/to-rem' as *; @use './kol-table-settings-wc' as *; @use './alert-wc' as *; @use './pagination-mixin' as *; @mixin kol-table-stateless-theme { @include kol-table-settings-theme; @include kol-alert-theme; @include kol-pagination-styles; :host { display: flex; gap: to-rem(8); flex-direction: column; } .kol-table { $root: &; padding: to-rem(8); &__table { width: 100%; border-spacing: 0.075rem; } &__head { position: sticky; top: 0; } &__caption { min-height: calc(var(--a11y-min-size) + 2px); // leave some extra space so the settings button doesn't overlap the table borders padding: to-rem(8) var(--a11y-min-size) to-rem(8) to-rem(8); } &__scroll-container { max-height: 80vh; overflow: auto; @at-root #{$root}:has(#{$root}__focus-element:focus) & { outline-color: var(--color-primary-variant); outline-style: solid; outline-width: 3px; outline-offset: 2px; transition: outline-offset 0.2s linear; } } &__focus-element { outline: none; // override global styles } &__cell { border-color: var(--color-primary); border-style: solid; padding: to-rem(8); border-width: 0; border-bottom-width: calc(var(--border-width) * 2); &--header { color: var(--color-light); background-color: var(--color-primary); font-weight: normal; .kol-button:focus { outline-color: var(--color-mute-variant); } } &--ascending, &--descending { font-weight: 700; .kol-button { font-weight: 700; } } } &__selection { display: flex; gap: to-rem(8); align-items: center; grid-template-columns: 1fr auto; } &__spacer { display: none; } &__selection { --kol-selection-input-main-color: var(--color-primary); --kol-selection-input-off-color: var(--color-subtle); --kol-selection-input-focus-color: var(--color-primary-variant); --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24); --kol-selection-input-icon-color: var(--color-light); &-input { &:not(:disabled):hover { box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color); border-color: var(--kol-selection-input-main-color); } &:focus { outline-color: var(--kol-selection-input-focus-color); outline-style: solid; outline-width: 3px; border-color: var(--kol-selection-input-main-color); outline-offset: 2px; } &:focus:hover { box-shadow: none; } // CHECKBOX &--checkbox { border-color: var(--kol-selection-input-off-color); border-radius: 5px; &:checked { background-color: var(--kol-selection-input-main-color); border-color: var(--kol-selection-input-main-color); } } // RADIO &--radio { border-color: var(--kol-selection-input-off-color); display: flex; &:checked { border-color: var(--kol-selection-input-main-color); &:before { background-color: var(--kol-selection-input-main-color); } } } } // icon in the checkbox &-icon { color: var(--kol-selection-input-icon-color); } //switch the colors in the table header @at-root #{$root}__head-row & { --kol-selection-input-main-color: var(--color-light); --kol-selection-input-off-color: var(--color-mute); --kol-selection-input-focus-color: var(--color-mute-variant); --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24); --kol-selection-input-icon-color: var(--color-primary); } } } }