openfoodnetwork/app/webpacker/css/admin/shared/tables.scss

@import 'admin/globals/variables';
@import 'admin/plugins/font-awesome';

table {
  width: 100%;
  margin-bottom: 15px;
  border-collapse: separate;

  th, td {
    padding: 7px 5px;
    border-right: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    vertical-align: middle;
    text-overflow: ellipsis;

    img {
      border: 1px solid transparent;
    }

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

    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($color-3);
        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: $color-3;
          color: $color-1;
        }
      }
      .icon-trash:hover, .icon-void:hover {
        background-color: $color-error;
        color: $color-1;
      }
      .icon-cancel:hover {
        background-color: $color-notice;
        color: $color-1;
      }
      .icon-edit:hover, .icon-capture:hover, .icon-ok:hover, .icon-plus:hover {
        background-color: $color-success;
        color: $color-1;
      }
      .icon-copy:hover {
        background-color: $color-notice;
        color: $color-1;
      }
    }

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

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

    .handle {
      @extend [class^="icon-"]:before;
      @extend .icon-reorder;
      cursor: move;
    }

  }

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

  }

  thead {
    th {
      padding: 10px;
      border-top: 1px solid $color-border;
      border-bottom: none;
      background-color: $color-tbl-thead;
      text-transform: uppercase;
      font-size: 85%;
      font-weight: $font-weight-bold;
    }
  }

  tbody {
    tr {
      &:first-child th,
      &:first-child td {
        border-top: 1px solid $color-border;
      }
      &.even td {
        background-color: $color-tbl-even;

        img {
          border: 1px solid very-light($color-3, 6);
        }
      }

      &:hover td {
        background-color: very-light($color-3, 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 $color-2 !important;
        visibility: visible !important;

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

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

        td {
          background-color: lighten($color-3, 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: $color-2 !important;
        text-transform: uppercase;
        font-size: 110%;
        font-weight: 600;
        background-color: lighten($color-2, 50);
      }
      .total {
        background-color: $color-2;
        color: $color-1;
      }
    }
  }
}