plain-ui/src/scss/components/_table.scss

/**
 *
 *
 *
 */

@mixin plain-ui__component__table()
{
    .table {
        width: 100%;
        border: 1px solid lighten($plain-ui__primary, 55%);
        background: var(--white);

        &--striped {
            tr {
                &:nth-child(even) {
                    background-color: lighten($plain-ui__primary, 75%);
                }
            }
        }

        &--scroll {
            overflow-x: auto;
        }

        td {
            color: var(--text);
        }

        td,
        th {
            text-align: left;
            border-bottom: 1px solid lighten($plain-ui__primary, 55%);

            padding: 0.5em 1.25em;
            //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
        }

        th {
            color: white;
            background-color: $plain-ui__primary;
        }

        tr:hover {
            background-color: lighten($plain-ui__primary, 10%);

            td {
                color: white;
            }
        }
    }
}