voyager-admin/voyager

@import "@sassmixins/bg-color";
@import "@sassmixins/border-color";
@import "@sassmixins/text-color";

.dark .voyager-table {
    @include border-color(table-border-color-dark, 'colors.gray.600');
    @include bg-color(table-bg-color-dark, 'colors.gray.800');

    table {
        thead{
            @include bg-color(table-head-bg-color-dark, 'colors.transparent');
            @include text-color(table-head-text-color-dark, 'colors.gray.300');
            tr {
                @include border-color(table-head-border-color-dark, 'colors.gray.600');
            }
        }
    
        tbody {
            tr {
                @include border-color(table-row-border-color-dark, 'colors.gray.600');
                &:nth-of-type(odd) {
                    @include bg-color(table-row-odd-bg-color-dark, 'colors.gray.750');
                    @include text-color(table-row-odd-text-color-dark, 'colors.gray.300');

                    &:hover {
                        @include bg-color(table-row-odd-bg-color-hover-dark, 'colors.gray.700');
                        @include text-color(table-row-odd-text-color-hover-dark, 'colors.gray.300');
                    }
                }
                &:nth-of-type(even) {
                    @include bg-color(table-row-even-bg-color-dark, 'colors.transparent');
                    @include text-color(table-row-even-text-color-dark, 'colors.gray.300');

                    &:hover {
                        @include bg-color(table-row-even-bg-color-hover-dark, 'colors.gray.700');
                        @include text-color(table-row-even-text-color-hover-dark, 'colors.gray.300');
                    }
                }
            }
        }
    }
}

.voyager-table {
    @include border-color(table-border-color, 'colors.gray.300');
    @include bg-color(table-bg-color, 'colors.gray.100');
    @apply shadow rounded-lg border my-5 overflow-x-auto;

    &.loading {
        @apply opacity-25;
    }

    table {
        @apply table-auto min-w-full;

        thead {
            @include bg-color(table-head-bg-color, 'colors.gray.100');
            @include text-color(table-head-text-color, 'colors.gray.900');
            tr {
                @apply border-b;
                @include border-color(table-head-border-color, 'colors.gray.300');
                th {
                    @apply p-3 text-left text-sm leading-4 font-medium tracking-wider;
                }
            }
        }
    
        tbody {
            tr {
                @apply border-b;
                @include border-color(table-row-border-color, 'colors.gray.300');
                &:nth-of-type(odd) {
                    @include bg-color(table-row-odd-bg-color, 'colors.gray.50');
                    @include text-color(table-row-odd-text-color, 'colors.gray.800');

                    &:hover {
                        @include bg-color(table-row-odd-bg-color-hover, 'colors.gray.150');
                        @include text-color(table-row-odd-text-color-hover, 'colors.gray.800');
                    }
                }
                &:nth-of-type(even) {
                    @include bg-color(table-row-even-bg-color, 'colors.transparent');
                    @include text-color(table-row-even-text-color, 'colors.gray.700');

                    &:hover {
                        @include bg-color(table-row-even-bg-color-hover, 'colors.gray.100');
                        @include text-color(table-row-even-text-color-hover, 'colors.gray.800');
                    }
                }

                &:last-child {
                    @apply border-b-0 border-transparent;
                }

                td {
                    @apply p-3;
                }
            }
        }
    }
}