django-jet/jet/static/jet/css/_table.scss

@import "globals";

.table {
  background: $content-background-color;
  border-collapse: collapse;
  border-radius: 4px;
  margin-bottom: 2px;
  overflow-x: auto;
  width: 100%;

  &.helper {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    right: 20px;
    width: auto;
    border-radius: 0;
    box-shadow: none;

    thead {
      th {
        border-radius: 0 !important;
      }
    }
  }

  caption {
    border-radius: 4px;
    padding: 6px;
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;

    a {
      color: $text-color;
      font-size: 11px;
      font-weight: bold;
    }
  }

  thead {
    th {
      background: $content-contrast2-background-color;
      padding: 8px;
      font-size: 12px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;

      &, & a, & a:visited, & a:hover {
        color: $content-contrast2-text-color;
        text-decoration: none;
        text-transform: uppercase;
      }

      &:first-child {
        border-radius: 4px 0 0 0;
      }

      &:last-child {
        border-radius: 0 4px 0 0;
      }

      &:first-child:last-child {
        border-radius: 4px 4px 0 0;
      }

      &.action-checkbox-column {
        width: 20px;
        text-align: center;
      }

      &.sorted {
        .sortoptions {
          display: inline-block;

          .sortpriority {
            background: $content-background-color;
            color: $text-color;
            padding: 2px 8px;
            margin-right: 2px;
            border-radius: 12px;
          }
        }

        .text {
          display: inline-block;

          &:after {
            @include font-icon;
            color: $content-contrast2-text-color;
            font-size: 13px;
            font-weight: bold;
            margin-left: 4px;
          }
        }

        &.ascending .text:after {
          content: $icon-arrow-down;
        }

        &.descending .text:after {
          content: $icon-arrow-up;
        }
      }
    }
  }

  tbody {
    tr {
      border-bottom: 1px solid $content-border-color;

      &:last-child {
        border-bottom: 0;
      }

      & th {
        text-align: left;
      }

      & th, & td {
        padding: 8px;
        font-size: 13px;

        &.action-checkbox {
          text-align: center;
        }
      }
    }

    tr.selected {
      border-color: $content-selected-border-color;

      &:last-child {
        & th:first-child, & td:first-child {
          border-radius: 0 0 0 4px;
        }

        & th:last-child, & td:last-child {
          border-radius: 0 0 4px 0;
        }
      }

      & th, & td {
        background-color: $content-selected-background-color;
      }
    }

    tr.contrast {
      background: $content-contrast-background-color;
    }

    tr.contrast2 {
      background: $content-contrast2-background-color;
      color: $content-contrast2-text-color;
      border: 0;

      a, a:visited, a:hover {
        color: $content-contrast2-text-color;
      }
    }

    tr.contrast3 {
      background: $content-contrast3-background-color;
    }
  }
}