_all-submissions.scss

// also in _table.scss
$table-breakpoint: 'tablet-landscape';

.all-submissions {
    $root: &;
    font-size: 14px;

    thead {
        display: none;

        @include media-query($table-breakpoint) {
            display: table-header-group;
        }

        th {
            // ordering
            &.desc,
            &.asc {
                position: relative;
                color: $color--dark-grey;

                &::after {
                    position: absolute;
                    top: 32px;
                    margin-left: 3px;
                }

                a {
                    color: inherit;
                }
            }

            &.desc {
                &::after {
                    @include triangle(top, $color--default, 5px);
                }
            }

            &.asc {
                &::after {
                    @include triangle(bottom, $color--default, 5px);
                }
            }

            &.reviews_stats { // sass-lint:disable-line class-name-format
                color: $color--mid-dark-grey;

                span {
                    font-size: 13px;
                }
            }

            // set column widths
            &.title {
                @include media-query($table-breakpoint) {
                    width: 130px;
                    padding-left: 20px;
                }

                @include media-query(desktop) {
                    width: 260px;
                }
            }

            &.phase {
                @include media-query($table-breakpoint) {
                    width: 150px;
                }
            }
        }

        tr {
            &:hover {
                box-shadow: none;
            }
        }
    }

    tbody {
        td {
            // project title
            &.title {
                position: relative;
                padding-top: 15px;
                font-weight: $weight--bold;

                @include media-query($table-breakpoint) {
                    display: flex;
                    align-items: center;
                    padding-top: 20px;
                    padding-left: 10px;
                }

                @include media-query(desktop) {
                    display: table-cell;
                    padding-left: 20px;
                }

                &.has-tooltip {
                    @include media-query($table-breakpoint) {
                        &::before {
                            position: absolute;
                            top: 75px;
                            left: 45px;
                            z-index: -1;
                            width: 200px;
                            padding: 5px;
                            font-size: 12px;
                            font-weight: $weight--normal;
                            white-space: normal;
                            background: $color--sky-blue;
                            border: 1px solid $color--marine;
                            content: attr(data-tooltip);
                            opacity: 0;
                            transition: opacity $transition;
                        }

                        &:hover {
                            &::before {
                                z-index: 10;
                                opacity: 1;
                            }
                        }
                    }
                }

                a {
                    color: $color--primary;

                    @include media-query($table-breakpoint) {
                        color: $color--dark-grey;
                    }
                }
            }

            // project status label
            &.phase {
                span {
                    display: inline-block;
                    padding: 5px;
                    font-size: 13px;
                    font-weight: $weight--bold;
                    color: $color--marine;
                    text-align: center;
                    background-color: $color--sky-blue;

                    @include media-query($table-breakpoint) {
                        width: 100%;
                    }
                }
            }

            // comments
            &.comments {
                display: none;

                @include media-query($table-breakpoint) {
                    display: table-cell;
                    font-size: 13px;
                    text-align: center;
                    vertical-align: middle;
                    background: url('./../../images/quote-outline.svg') transparent no-repeat center center;
                    background-size: 24px;
                }
            }

            &.reviews_stats { // sass-lint:disable-line class-name-format
                display: none;

                @include media-query($table-breakpoint) {
                    display: table-cell;
                }
            }

            // arrow to toggle project info - added via js
            @include media-query($table-breakpoint) {
                .arrow {
                    @include triangle(right, $color--primary, 6px);
                    position: relative;
                    display: inline-block;
                    margin-right: 15px;
                    transform: rotate(0);
                    transition: transform $transition;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            > span.mobile-label { // sass-lint:disable-line force-element-nesting
                display: inline-block;
                width: 90px;

                &.phase,
                &.title {
                    display: none;
                }

                @include media-query($table-breakpoint) {
                    display: none;
                }
            }
        }
    }

    &__parent {
        &.is-expanded {
            background-color: $color--mist;
            border-bottom: 1px solid $color--light-mid-grey;

            + #{$root}__child {
                border-bottom: 1px solid $color--light-mid-grey;
            }

            + #{$root}__child,
            + #{$root}__child + #{$root}__child {
                display: table-row;
            }

            .arrow {
                border-right-color: darken($color--dark-blue, 10%);
                transform: rotate(90deg);
            }
        }
    }

    &__child {
        display: none;
        color: $color--mid-dark-grey;
        vertical-align: top;
        background-color: $color--mist;
        border: 0;
        border-bottom: 2px solid $color--light-grey;

        &:hover {
            box-shadow: none;
        }

        td {
            padding: 10px;
        }

        p {
            margin: 0;
            font-weight: $weight--bold;
            color: $color--default;
        }

        .title {
            a {
                visibility: hidden;
            }
        }
    }

    &__toggle {
        padding: 5px 0 5px 5px;
    }
}