Table core block: Styles

_table-mixins.scss

/* ------------------------------------------------------------ *\
    Mixins: Table core block

    Included in frontend and admin styles.
\* ------------------------------------------------------------ */ 

@mixin wp-block-table {
    @include blocks-core__margin-vertical__large;

    // font-weight: 400;
    line-height: 1.6;

    // Reset WP core admin styles
    thead,
    th,
    td {
        border: none;
    }

    th,
    td {
        padding: 0;
    }

    td {
        vertical-align: top;
    }

    // Include caption styles
    figcaption {
        @include figcaption;
    }

    margin-top: 35px;
    margin-bottom: 35px;
    // color: $c-purple-darker;

    @include breakpoint-down(mobile){
        margin-right: -20px;
        overflow: auto;
        padding-right: 20px;
    }

    table,
    figcaption {
        @include breakpoint-down(mobile){
            width: 690px;
        }
    }

    th,
    td {
        padding: 15px 30px;
        border-right: 2px solid $c-white;

        @include breakpoint-down(tablet){
            padding: 10px 20px;
        }

        &:last-child {
            border-right: 0;
        }

        &.has-text-align-center {
            text-align: center;
        }
    }

    th {
        background: #7b20d6; // update
        font-size: 18px;
        letter-spacing: 0.03em;
        font-weight: 700;
        text-align: left;
        color: $c-white;

        @include breakpoint-down(tablet){
            font-size: 16px;
        }

        @include breakpoint-down(mobile){
            font-size: 15px;
            letter-spacing: 0.02em;
        }

        &:last-child {
            border-right: 0;
        }
    }

    tbody {
        tr {
            &:nth-child(odd) {
                background: $c-white;
            }

            &:nth-child(even) {
                // background: $c-lt-purple;
            }
        }
    }

}

/**
 * Frontend styles.
 *
 * Don't edit here, edit mixins used instead as they are used in the editor too.
 */
@mixin wp-block-table__frontend {
    & > .wp-block-table {
        @include wp-block-table;
        @include link-inline;
    }
}

_table.scss

/* ------------------------------------------------------------ *\
    Core block: Table

    Editor styles only
\* ------------------------------------------------------------ */

.wp-block-table {
    @include wp-block-table;
    @include link-inline;
}