openfoodfoundation/openfoodnetwork

table {
  width: 100%;
  margin-bottom: 15px;
  border-collapse: separate;
  th,
  td {
    padding: 7px 5px;
    background: $color-tbl-cell-bg;
    vertical-align: middle;
    text-align: left;
    text-overflow: ellipsis;

    img {
      border: 1px solid transparent;
    }

    &:first-child {
      border-left: 4px solid $color-border;
    }

    &:last-child {
      border-right: 4px solid $color-border;
    }

    &.header {
      font-weight: $font-weight-bold;
    }

    a {
      border-bottom: 1px dotted lighten($color-link, 10);

      &:hover {
        border-color: lighten($color-link-hover, 10);
      }
    }

    .handle {
      display: block !important;
      text-align: center;
      padding-right: 0;
    }

    &.actions {
      background-color: transparent;
      border: none !important;
      text-align: center;

      span.text {
        font-size: $body-font-size;
      }

      [class*="icon-"].no-text {
        font-size: 120%;
        background-color: very-light($teal);
        border: 1px solid $color-border;
        border-radius: 15px;
        width: 29px;
        height: 29px;
        display: inline-block;
        padding-top: 2px;

        &:before {
          text-align: center !important;
          width: 27px;
          display: inline-block;
        }

        &:hover {
          border-color: transparent;
        }
      }

      button[class*="icon-"] {
        color: $color-link;
        padding: 0 !important;
      }

      .icon-envelope-alt,
      .icon-eye-open {
        color: $color-link;
        padding-left: 0px;

        &:hover {
          background-color: $teal;
          color: $white;
        }
      }
      .icon-trash:hover,
      .icon-void:hover {
        background-color: $color-error;
        color: $white;
      }
      .icon-cancel:hover {
        background-color: $color-notice;
        color: $white;
      }
      .icon-edit:hover,
      .icon-capture:hover,
      .icon-capture_and_complete_order:hover,
      .icon-ok:hover,
      .icon-plus:hover {
        background-color: $teal;
        color: $white;
      }
      .icon-copy:hover {
        background-color: $color-notice;
        color: $white;
      }
    }

    input[type="number"],
    input[type="text"] {
      width: 100%;
    }

    &.no-border {
      border-right: none;
    }

    .handle {
      @extend .icon-reorder;
      font-family: FontAwesome;
      text-decoration: inherit;
      display: inline-block;
      speak: none;
      cursor: move;
    }
  }

  &.no-borders {
    td,
    th {
      border: none !important;
    }
  }

  thead {
    th {
      padding: 5px;
      border-bottom: none;
      background-color: $color-tbl-thead-bg;
      color: $color-tbl-thead-txt;
      font-weight: $font-weight-bold;
    }
  }

  tbody {
    tr {
      td {
        border-bottom: 4px solid $color-border; // TODO: Let the table background colour come through, to enable drop shadows
      }

      &:hover td {
        background-color: very-light($teal, 5);

        img {
          border: 1px solid $color-border;
        }
      }

      &.deleted td {
        background-color: very-light($color-error, 6);
        border-color: very-light($color-error, 15);
      }

      &.ui-sortable-placeholder td {
        border: 1px solid $green !important;
        visibility: visible !important;

        &.actions {
          background-color: transparent;
          border-right: none !important;
          border-top: none !important;
          border-bottom: none !important;
          border-left: 1px solid $green !important;
        }
      }

      &.ui-sortable-helper {
        width: 100%;

        td {
          background-color: lighten($teal, 33);
          border-bottom: 1px solid $color-border;

          &.actions {
            display: none;
          }
        }
      }
    }

    &.no-border-top tr:first-child td {
      border-top: none;
    }

    &.grand-total {
      td {
        border-color: $green !important;
        text-transform: uppercase;
        font-size: 110%;
        font-weight: 600;
        background-color: lighten($green, 50);
      }
      .total {
        background-color: $green;
        color: $white;
      }
    }
  }
}

table + .pagination {
  margin-top: -18px;
}