bansho/app/assets/sass/modules-objects/_data-table.scss

//----------------------------------*\
// DATA TABLE
//----------------------------------*/

.data-table {
    margin-bottom:$_space;
    width:100%;

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

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

    a {
        display:inline-block;
        text-decoration:none;

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

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

    tbody {
        border-style:solid;
        border-width:0 0 1px;
        display:block;
        padding-bottom:$_space_narrow;
        padding-left:$_space;

        @include medium-and-up-screen {
            border:0;
            display:table-row-group;
            padding-bottom:0;
            padding-left:0;
        }

        &.state--hasChild {
            border:0;
            padding-bottom:0;
        }

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

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

    tr {
        display:block;
        position:relative;

        @include medium-and-up-screen {
            display:table-row;
            position:static;
        }
    }

    td, th {
        border-style:solid;
        border-width:0;
        display:block;
        padding:$_space_narrow 0 0;
        .size-scheme--small & {
            vertical-align: middle;
        }
        .size-scheme--normal & {
            vertical-align: middle;
        }
        .size-scheme--big & {
            vertical-align: middle;
        }

        @include medium-and-up-screen {
            border-width:0 0 1px;
            display:table-cell;
            padding:$_space_narrow;
        }

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

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

        /* &:before { */
        /*     content:attr(data-colname); */
        /*     display:inline-block; */
        /* } */
    }

    thead {
        display:none;

        @include medium-and-up-screen {
            display:table-header-group;
        }

        th {
            border-style:solid;
            border-width:0 0 0 1px;
            padding-top:$_space_narrow;
            vertical-align:middle;

            &.state--asc:before,
            &.state--desc:before {
                @extend %ico;
                float:right;
            }

            &.state--asc {
                @extend .ico-up-dir;
            }

            &.state--desc {
                @extend .ico-down-dir;
            }

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

                &.state--asc,
                &.state--desc {background:$_color_dark_alpha;}
            }

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

                &.state--asc,
                &.state--desc {background:$_color_light_alpha;}
            }

            &.data-table__host,
            &.data-table__hosts_host,
            &.data-table__checkbox {border:0;}

            [class*="ico-"] {float:right;}

            &:first-child + th {padding-left:0;}
        }
    }

    @include medium-and-up-screen {
        td {
            &:first-child {
                + td {
                    padding-left:35px;
                }
            }
        }
    }

    .state--hasChild,
    .state--isChild {

        td, th {
            @include medium-and-up-screen {
                .color-scheme--dark & {
                    background:$_color_dark_beta;
                }

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

    .state--hasChild {

        td:first-child + td {
            position:relative;

            .data-table__collapse {
                /* @extend %button-reset; */
                @extend %ico;
                display:none;

                @include medium-and-up-screen {
                    display:inline-block;
                    left:0;
                    position:absolute;
                }

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

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

    .state--isChild {
        .data-table__checkbox {
            display:none;

            @include medium-and-up-screen {
                display:table-cell;
            }
        }

        .data-table__host {
            display:none;

            .data-table__data {display:none}

            @include medium-and-up-screen {
                display:table-cell;
            }
        }
    }

    .data-table__duration,
    .data-table__lastcheck {
        display:none;

        @include medium-and-up-screen {
            display:table-cell;
        }
    }
}

.data-table__data {
    margin:0;

    .state--error &,
    .state--warning &,
    .state--ok & {
        position:relative;

        &:before {
            top:0;
            font-family:"adagios-fontawesome";
            left:0;
            position:relative;
            z-index:988888;
            .size-scheme--small & {
                line-height: 30px;
            }
            .size-scheme--normal & {
                line-height: 35px;
            }
            .size-scheme--big & {
                line-height: 40px;
            }

            float: left;
            padding-right: 10px;
        }
    }

    .state--error & {
        @extend .ico-error;
        padding-left:(-10 + $_space_narrow);

        &:before {
            color:$_color_error;
            font-size:em(16, $_base_font_size);
        }
    }

    .state--warning & {
        @extend .ico-warning;
        padding-left:(-10 + $_space_narrow);

        &:before {
            color:$_color_warning;
            font-size:em(16, $_base_font_size);
        }
    }

    .state--ok & {
        @extend .ico-ok;
        padding-left:(-10 + $_space_narrow);

        &:before {
            color:$_color_ok;
            font-size:em(20, $_base_font_size);
        }
    }
}

time.data-table__data {
    @extend %typo-more-info--little;

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

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

.data-table__checkbox {
    left:-30px;
    position:absolute;
    top:0;
    width:14px;

    @include medium-and-up-screen {
        left:auto;
        position:static;
        top:auto;
    }
}

.data-table__host {
    width:auto;
    .size-scheme--small & {
        line-height: 30px;
    }
    .size-scheme--normal & {
        line-height: 35px;
    }
    .size-scheme--big & {
        line-height: 40px;
    }

    @include medium-and-up-screen {
        width:percentage(368 / 1200);
    }
}

.data-table__service {
    width:auto;

    .size-scheme--small & {
        line-height: 16px;
    }
    .size-scheme--normal & {
        line-height: 20px;
    }
    .size-scheme--big & {
        line-height: 24px;
    }

    .data-table__service__summary {
        font-style:italic;
        margin-left:0;
    }
}

.data-table__service__summary {
    @extend %typo-more-info--little;

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

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

.data-table__ {
  @include medium-and-up-screen {
    width:auto;
  }
}

.data-table__xsmall {
  @include medium-and-up-screen {
    width:percentage(100 / 1200);
  }
}

.data-table__small {
  @include medium-and-up-screen {
    width:percentage(200 / 1200);
  }
}

.data-table__medium {
  @include medium-and-up-screen {
    width:percentage(368 / 1200);
  }
}

.data-table__large {
  @include medium-and-up-screen {
    width:percentage(500 / 1200);
  }
}