openfoodnetwork/app/webpacker/css/admin/v2/components/tables.scss

/* Overide tables.scss app/webpacker/css/admin/components/tables.scss */

table {
  background-color: white;
}

table thead tr:first-child th:first-child {
  border-top-left-radius: 3px;
}

table thead tr:first-child th:last-child,
table thead th.force-rounded-right {
  border-top-right-radius: 3px;
}
table thead th {
  background-color: $v2-medium-light-grey;
  border: none;
  color: $v2-blue;
  text-transform: capitalize;
  font-size: 13px;

  a {
    border: none;
    color: $v2-blue;
  }
}

table tr:not([class*="state"]) {
  th:first-child,
  td:first-child {
    border-left: none;
  }
}

table tbody tr {
  &:first-child th,
  &:first-child td {
    border-top: none; // Don't show the top border of the first row
  }

  td {
    border: none;
    border-bottom: 2px solid $v2-medium-light-grey;

    > .flex {
      display: flex;
      column-gap: 10px;
    }

    &.actions > .flex {
      justify-content: flex-end;
    }
  }
  &.even,
  &.odd {
    td {
      background-color: transparent; // Do not use odd and even colors for background
    }
  }
}

table thead tr th.actions,
table tbody tr td.actions {
  // Special for icons in the actions column
  [class*="icon-"],
  button[class*="icon-"]:not(.disabled):not([disabled]):not(.secondary):not(.cancel) {
    color: $v2-blue;
    display: flex;
    justify-content: center;
    align-items: center;

    &:before {
      width: auto;
      padding: 0;
    }

    &.no-text {
      border: 2px solid $v2-blue-light;
      display: flex; // Be sure that display: flex; is applied
      padding-top: 0;

      &:hover {
        border-color: $v2-blue;
        box-shadow: $v2-box-shadow;

        &:before {
          color: white;
        }
      }
    }
  }
  .icon-edit:hover,
  .icon-capture:hover,
  .icon-ok:hover,
  .icon-plus:hover,
  .icon-road:hover {
    background-color: $v2-blue;
    color: $color-1;
  }
}

table {
  thead th.actions,
  thead td.actions {
    background-color: $v2-medium-light-grey !important;
  }
  tbody tr td.actions {
    background-color: white !important;
  }
  td {
    &.actions {
      padding-left: 20px;
      border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
    }
  }
}

table tbody tr:hover > td {
  background-color: #e9f3fc !important; // needs to be important because of already defined with important
}

table#listing_orders {
  td {
    // When the table is the listing of orders, we need to increase the height of the cells
    padding: 20px 0;

    &:not(:first-child) {
      border-left: none; // Only show left border on the first cells, as it indicates the order state by its color
    }
  }
}

table#listing_order_cycles tr.open td {
  background-color: #d9fccb !important; // needs to be important because of already defined with important
}
table#listing_order_cycles tr.closed td {
  background-color: #eee !important; // needs to be important because of already defined with important
}
table#listing_order_cycles tr.upcoming td {
  background-color: #fbfccb !important; // needs to be important because of already defined with important
}

tbody.panel-ctrl.expanded > tr:not(.panel-row) > td {
  border-bottom: 1px solid #6788a2 !important; // needs to be important because of already defined with important
}

tbody.panel-ctrl.expanded > tr:not(.panel-row) > td.selected {
  border-bottom: none !important; // it's a bit annoying to always put that important, but it's the only way to override the default style
}