wagtail/client/scss/components/_listing.scss

// General listings, like for pages, images or snippets
ul.listing {
    @include unlist();
}

.listing {
    margin-bottom: 2em;
    color: $color-text-base;
    font-size: 0.95em;

    ul {
        list-style-type: none;
        padding-left: 0;
        // @include unlist();
    }

    > li {
        padding: 1em 0;
        border-bottom: 1px dashed $color-input-border;
    }

    h3 {
        margin: 0;
        font-size: 1em;
    }

    td,
    th {
        padding: 1.2em 1em;

        &.no-padding {
            padding: 0;
        }
    }

    &.small td,
    th {
        padding: 0.6em 1em;
    }

    thead {
        font-size: 1.1em;
        color: $color-text-base;
        border-bottom: 1px solid $color-grey-4;

        th {
            font-size: 0.9em;
            text-align: left;
            font-weight: normal;
            white-space: nowrap;
            text-transform: uppercase;
        }

        th.children {
            border: 0;
        }

        th a {
            text-decoration: none;
            color: inherit;
            position: relative;

            &.icon:after {
                opacity: 0.5;
                right: 0;
            }
        }
    }

    &.full-width td:first-child,
    &.full-width th:first-child {
        padding-left: 20px;
    }

    &.full-width {
        margin-bottom: -3em; // this negates the padding added to the bottom of .content
    }

    &.full-width th {
        background-color: $color-thead-bg;
    }

    .table-headers {
        border-bottom: 1px solid  $color-grey-4;
    }

    tbody {
        border-bottom: 1px dashed $color-input-border;


        tr {
            border-top: 1px dashed $color-input-border;

            &:first-child {
                border-top: 1px dashed $color-input-border;
            }

            &:hover {
                background-color: #fcfcfc;
            }
        }

        tr.selected {
            background-color: #c8eae9;

            &:hover {
                background-color: #b5e3e2;
            }
        }
    }

    &.full-width tbody {
        border: 0;
    }

    &.chooser {
        tbody .title a {
            @include transition(none);
            display: block;
        }

        tbody tr:hover {
            background-color: $color-teal;
            color: $color-white;

            .title a,
            .title a:hover {
                color: $color-white;
            }

            .parent a {
                color: $color-white;
            }

            .status-tag {
                border-color: $color-white;
            }
        }

        tbody tr.disabled td {
            opacity: 0.25;
        }

        tbody tr.disabled td.children {
            opacity: 1;
        }

        tbody tr.disabled:hover {
            background-color: inherit;
            color: inherit;

            .title {
                cursor: not-allowed;
            }

            .status-tag {
                border-color: inherit;
            }
        }
    }

    &.small tbody tr {
        font-size: 1em;
    }

    &.full-width .divider td {
        padding-left: 20px;
    }

    // specific columns
    .bulk {
        padding-right: 0;

        label {
            font-size: 1em;
            display: block;
            width: 100%;
            position: relative;
        }

        label span {
            @include visuallyhidden();
        }

        input {
            margin-top: 3px;
        }
    }

    .title {
        word-break: break-word;

        .title-wrapper,
        h2 {
            text-transform: none;
            margin: 0;
            font-size: 1.15em;
            font-weight: 600;
            color: $color-text-base;
            line-height: 1.5em;

            a {
                color: inherit;
                text-decoration: none;

                // stylelint-disable max-nesting-depth
                &:hover {
                    color: $color-link;
                }
            }
        }
    }

    .actions {
        @include clearfix();
        margin-top: 0.8em;
        text-transform: uppercase;
        margin-bottom: -0.5em;
        font-size: 0.8rem;

        a {
            text-decoration: none;
        }

        > li {
            float: left;
            padding: 0 0.5em 0 0;
            margin: 0 0 0.5em;

            // line-height: 1em;
        }
    }

    &--inline-actions .actions {
        display: inline-block;
        margin-top: 0;
        vertical-align: inherit;
    }

    .button-secondary {
        border-color: $color-grey-3;
        background: $color-white;

        &.no:hover {
            border-color: $color-button-no-hover;
            background-color: $color-button-no-hover;
            color: $color-white;
        }

        &:hover {
            border-color: $color-teal;
            background-color: $color-teal;
        }
    }

    .button-secondary {
        background-color: $color-white;
    }

    .moderate-actions form {
        float: left;
        margin: 0 1em 1em 0;
    }

    .children,
    .no-children {
        padding: 0;

        &:hover {
            background-color: $color-grey-5;
        }

        a {
            display: block;
            padding: 2em 0;
        }
    }

    .children a {
        color: $color-teal;
        display: block;

        &:before {
            font-size: 3rem;
        }
    }

    .no-children a {
        color: $color-grey-3;
        display: block;

        &:before {
            font-size: 1.5rem;
        }

        &:hover,
        &:focus {
            color: $color-teal;
        }

        &:focus {
            opacity: 1; //opacity is already changed on hover on the parent tr
        }
    }

    &.small .children a:before {
        font-size: 30px;
    }

    th.ord {
        text-align: center;

        .icon {
            width: 15px;
            height: 18px;
            vertical-align: middle;

            &::before {
                margin-right: 2px;
            }
        }

        &--active a,
        a:hover {
            color: $color-teal;
        }

        &--active .icon {
            opacity: 1;
        }
    }

    .handle {
        cursor: move;
        width: 20px;

        &:before {
            font-size: 20px;
            color: $color-grey-3;
            width: 1em;
        }

        &:hover:before {
            color: $color-text-base;
        }
    }

    .ui-sortable-helper {
        border: 1px dashed $color-input-border;
        border-width: 1px 0;

        td {
            display: none;

        }

        .ord,
        .title {
            display: table-cell;
        }
    }

    .dropzone {
        height: 80px;
        background-color: $color-grey-1;

        &:hover {
            background-color: $color-grey-1;
        }

        td {
            padding: 0;
        }
    }

    table .no-results-message {
        padding-left: 20px;
    }

    .unpublished .title-wrapper {
        opacity: 0.7;
    }

    .index {
        background-color: $color-grey-4;

        .title .title-wrapper {
            font-size: 1.2em;
            opacity: 1;

            a {
                @include transition(opacity 0.2s ease);
            }

            a:hover {
                opacity: 0.7;
            }
        }

        .actions {
            margin-top: 1em;
        }

        .button {
            background-color: $color-white;
            color: $color-teal;
            border-color: rgba(0, 0, 0, 0.35);

            &:hover {
                color: $color-white;
                background: $color-teal-darker;
                border-color: $color-teal-darker;
            }

            &:active {
                color: $color-white;
                background: #333;
                border-color: #333;
            }

            &.bicolor {
                background: $color-teal-darker;

                &:active {
                    color: $color-white;
                    background: #484848;
                    border-color: #333;
                }
            }
        }
    }

    .indicator {
        margin-right: 0;
        font-size: 1em;
        opacity: 0.7;
    }

    &.images img {
        @include transition(border-color 0.2s ease);
        border: 3px solid $color-white;
    }
}

.image-choice {
    // Force the link to be displayed as a block, so its focus outline has the right shape.
    display: block;
    color: inherit;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

ul.listing {
    border-top: 1px dashed $color-input-border;
    margin-bottom: 2em;
}

table.listing {
    width: 100%;
}

// explorer specific tweaks
.page-explorer .listing {
    position: relative;

    .index {
        color: $color-white;
        background-color: $color-header-bg;

        td {
            padding-top: 1.5em;
            padding-bottom: 1.5em;
        }

        .privacy-indicator {
            font-size: 1em;
            opacity: 1;
            position: absolute;
            right: 10%;
            top: 2em;
        }

        .locked-indicator {
            font-size: 0.8em;
        }

        .title {
            h2 {
                color: $color-white;
                font-size: 1.8em;
                font-weight: 500;

                a:hover {
                    color: $color-white;
                }
            }
        }

        .button {
            background-color: transparent;
            color: $color-white;
            border-color: rgba(0, 0, 0, 0.35);

            &:hover {
                color: $color-white;
                background: $color-teal-darker;
            }

            &.bicolor {
                background: $color-teal-darker;
            }
        }
    }

    .table-headers {
        height: 35px;

        .title {
            padding-left: 0;
        }
    }

    tbody .title {
        padding-left: 0;
    }
}

.pagination {
    text-align: center;

    p {
        margin: 0;
    }

    ul {
        @include unlist();
    }

    ul {
        margin-top: -1.7em;
    }

    li {
        line-height: 1em;
    }

    .prev {
        float: left;
    }

    .next {
        float: right;
    }
}

.listing.full-width + .pagination {
    margin-top: 3em;
    border-top: 1px dashed #d9d9d9;
    padding: 2em 50px 0;
}


// listing filters
.listing-filter {
    @include clearfix();
    background-color: $color-grey-5;
    border-width: 1px 0;
    margin: 3em 0;
}

.filter-title {
    float: left;
    text-transform: uppercase;
    font-size: 0.95em;
    padding: 1em;
    margin: 0 1em 0 0;
    background-color: $color-grey-4;
}

.filter-options {
    @include unlist();
    @include clearfix();
    overflow: hidden;

    li {
        padding: 0.8em;
        float: left;
    }

    &__icon {
        width: 1em;
        height: 1em;
        margin-right: 0.2em;
        vertical-align: middle;
        position: relative;
        top: -1px;
    }
}


@include media-breakpoint-up(sm) {
    .listing {
        &.horiz > li {
            float: left;
        }

        &.images {
            @include clearfix();
            border: 1px solid $color-grey-4;
            border-width: 0 0 0 1px;

            > li {
                padding: 1.5em;
                width: 200px;
                height: 220px;
                text-align: center;
                margin-top: -1px;
                border: 1px solid $color-grey-4;
                border-width: 1px 1px 1px 0;

                .bulk-action-checkbox {
                    float: left;
                    margin: -0.5em 0.5em 0.5em -0.75em;
                }

                .bulk-action-checkbox + .image-choice {
                    clear: both;
                    margin-top: 1em;
                }

                .image {
                    text-align: center;
                    height: 180px;

                    &:before {
                        content: '';
                        display: inline-block;
                        height: 100%;
                        vertical-align: middle;
                        margin-right: -0.25em;
                    }

                    img {
                        display: inline-block;
                        vertical-align: middle;
                    }
                }

                &:hover {
                    background-color: #fdfdfd;

                    img {
                        border-color: $color-teal;
                    }
                }
            }
        }

        .actions {
            visibility: hidden;
        }

        .index .actions {
            visibility: visible;
        }



        td:hover .actions,
        td:focus-within .actions {
            visibility: visible;
        }

        .bulk-action-checkbox {
            opacity: 0;

            &.show,
            &:checked {
                opacity: 1;
            }
        }

        .no-children {
            border-color: transparent;

            a {
                opacity: 0;
            }
        }

        tr:hover,
        tr:focus-within {
            .no-children a,
            .bulk-action-checkbox {
                opacity: 1;
            }
        }

        // used on the image listing
        li:hover,
        li:focus-within {
            .bulk-action-checkbox {
                opacity: 1;
            }
        }

        tr:hover .children {
            background-color: $color-teal;

            a:before {
                color: $color-white;
            }
        }

        td.children:hover {
            background-color: $color-teal-darker;
        }

        table .no-results-message {
            padding-left: 50px;
        }

        &.full-width td:first-child,
        &.full-width th:first-child {
            padding-left: 25px;
        }

        &.full-width .divider td {
            padding-left: 50px;
        }
    }
}


// State
.listing__item--active {
    > .actions {
        visibility: visible;
    }
}


// Transitions
.listing {
    thead .dropdown ul {
        @include transition(none);
    }

    .children,
    .no-children {
        @include transition(background-color 0.2s ease);
    }

    .children a,
    .no-children a {
        @include transition(all 0.2s ease);
    }
}

// Ordering
td.ord {
    .handle {
        // Align with the row's title text, and the column's label.
        margin-top: -28px;
        margin-left: 13px;
    }
}

table.listing {
    th.ordered {
        color: $color-teal;

        &.ascending {
            &:before {
                content: '\25B2'; // up arrow
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
        }

        &.descending {
            &:before {
                content: '\25BC'; // down arrow
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
        }

    }
}