bansho/app/assets/sass/modules-objects/_problems.scss

//----------------------------------*\
// PROBLEMS LIST AND TABLE
//----------------------------------*/
.problems__list {
    margin-bottom:$_space;

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

        &:before {
            top:0;
            font-family:"adagios-fontawesome";
            left:0;
            position:absolute;
            z-index:988888;
        }

    }

    .state--error {
        @extend .ico-error;

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

    .state--warning {
        @extend .ico-warning;

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

    .state--ok {
        @extend .ico-ok;

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

.problems__item {
    border-top:1px solid;
    padding-top:$_space_narrow;

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

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

    &:first-child {
        border-top:0;
        padding-top:0;
    }
}

.problems__host,
.problems__name,
.problems__description {padding-left:25px;}

.problems__host,
.problems__name {
    font-weight:normal;

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

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

.problems__name,
.problems__description {margin-left:25px;}

.problems__host,
.problems__description {margin-bottom:$_space_narrow;}

.problems__host {display:block;}

.problems__desclist {
    position:relative;

    &:before {
        background:$_color_dark_gamma;
        content:"";
        display:block;
        height:calc(100% - 2.143em);
        left:8px;
        position:absolute;
        top:0;
        width:1px;
    }
}

.problems__name {
    &:after {
        background:transparent;
        border:1px solid;        
        border-radius:0 0 0 5px;
        content:"";
        display:block;
        height:24px;
        left:-17px;
        position:absolute;
        top:-18px;
        width:20px;

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

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

    span {
        display:inline-block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .problems__duration {
        display:none;
        float:right;

        @include medium-and-up-screen {
            display:inline-block;
        }

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

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

.problems__description {
    @extend %typo-more-info--little;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.problems__viewall {
    @extend %button-reset;
    @extend %typo-more-info;
    display:block;
    padding:$_space_narrow;
    text-align:center;
    width:100%;

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

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