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-inline-start: 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: start;
      font-weight: normal;
      white-space: nowrap;
    }

    th.children {
      border: 0;
    }

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

      &.icon:after {
        opacity: 0.5;
        inset-inline-end: 0;
      }
    }
  }

  &.full-width td:first-child,
  &.full-width th:first-child {
    padding-inline-start: 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-inline-start: 20px;
  }

  // specific columns
  .bulk {
    padding-inline-end: 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 {
      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;
    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;
    }
  }

  // stylelint-disable-next-line no-duplicate-selectors
  .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-inline-end: 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-inline-start: 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-inline-end: 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;
}

// stylelint-disable-next-line no-duplicate-selectors
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;
      inset-inline-end: 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-inline-start: 0;
    }
  }

  tbody .title {
    padding-inline-start: 0;
  }
}

.pagination {
  text-align: center;

  p {
    margin: 0;
  }

  ul {
    @include unlist();
    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;
  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-inline-end: 0.2em;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}

@include media-breakpoint-up(sm) {
  .listing {
    &.horiz {
      display: flex;
      flex-wrap: wrap;
    }

    &.images {
      border: 1px solid $color-grey-4;
      border-width: 0 0 0 1px;

      > li {
        padding: 1.5em;
        width: 200px;
        height: auto;
        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-inline-end: -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-inline-start: 50px;
    }

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

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

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

// stylelint-disable no-duplicate-selectors

// 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-inline-start: 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;
      }
    }
  }
}