bansho/app/assets/sass/modules-interface/_main.scss

//----------------------------------*\
// MAIN BLOCK INTERFACE
//----------------------------------*/

.main[role="main"] {}

.main__overview {
    padding:$_space 0 $_space_narrow;
    position:relative;

    @include large-xlarge-screen {
        padding:$_space;
    }

    .color-scheme--dark & {
        background:$_color_dark_beta;
    }

    .color-scheme--light & {
        background:$_color_light_beta;
    }

    table {width:100%;}

    td,
    th {
        text-align:right;

        .color-scheme--dark & {
            color:$_color_omega;
        }

        .color-scheme--light & {
            color:$_color_alpha;
        }

        &:first-child {text-align:left;}

        &.state--error {color:$_color_error;}
        &.state--warning {color:$_color_warning;}
        &.state--ok {color:$_color_ok;}
    }

    thead th {
        @extend %typo-subtitle;

        &:first-child {
            .color-scheme--dark & {
                color:$_color_dark_alpha;
            }

            .color-scheme--light & {
                color:$_color_light_alpha;
            }
        }
    }

    tbody {
        td,
        th {
            border-top-style:solid;
            border-top-width:1px;

            .color-scheme--dark & {
                border-top-color:$_color_dark_beta;
            }

            .color-scheme--light & {
                border-top-color:$_color_light_beta;
            }
        }

        tr:first-child {
            td,
            th {border-top:0;}
        }

        th {@extend %typo-header-table;}
    }
}

.main__overview__title {
    margin-bottom:$_space_narrow;
    padding:0 $_space_narrow;

    @include large-xlarge-screen {
        margin-bottom:$_space;
        padding:0;
    }

    .color-scheme--dark & {
        color:$_color_omega;
    }

    .color-scheme--light & {
        color:$_color_alpha;
    }
}

.main__content {
    padding:$_space $_space_narrow;

    @include large-xlarge-screen {
        padding:$_space;
    }

    // Togglable tabs variations
    .tablist {margin-bottom:$_space;}

    .tabpanel__tab {
        font-size:1em;

        @include large-xlarge-screen {
            font-size:em(24, $_base_font_size);
        }
    }
}

.main__content__header {

    .main__content__title,
    .main__content__alert {

        @include large-xlarge-screen {
            float:left;
            margin-top:0;
        }
    }
}

.main__content__title {
    margin-right:$_space_narrow;

    @include large-xlarge-screen {
        display:inline-block;
    }

    .color-scheme--dark & {
        color:$_color_omega;
    }

    .color-scheme--light & {
        color:$_color_alpha;
    }
}

.main__content__alert {
    @extend %typo-more-info;
    background:$_color_ok;
    color:$_color_omega;
    display:inline-block;
    padding:8px 11px;

    &.state--error {background:$_color_error;}
    &.state--warning {background:$_color_warning;}
    &.state--ok {background:$_color_ok;}
}