openfoodfoundation/openfoodnetwork

#product_distributors_field span {
  display: block;
}

tbody.odd {
  tr.product {
    td {
      background-color: white;
    }
  }
  tr.variant.odd {
    td {
      background-color: lighten($spree-light-blue, 3);
    }
  }
  tr.variant.even {
    td {
      background-color: white;
    }
  }
}
tbody.even {
  tr.product {
    td {
      background-color: darken($spree-light-blue, 1);
    }
  }
  tr.variant.odd {
    td {
      background-color: lighten($spree-light-blue, 2);
    }
  }
  tr.variant.even {
    td {
      background-color: darken($spree-light-blue, 1);
    }
  }
}

tbody tr.product td.actions {
  background-color: transparent;
}
tbody tr.variant td.actions {
  background-color: transparent;
}
tbody tr.variant td {
  padding: 5px 10px;
}

th.left-actions,
td.left-actions {
  background-color: transparent !important;
  border: none !important;
  border-right: 1px solid $pale-blue !important;
}

#status-message {
  margin: 4px 0px;
  font-weight: bold;
}

table#listing_products.bulk {
  clear: both;
  margin-bottom: 60px;

  colgroup col {
    &.image {
      width: 1%;
    }
    &.producer {
      width: 18%;
    }
    &.name {
      width: 18%;
    }
    &.unit {
      width: 14%;
    }
    &.display_as {
      width: 12%;
    }
    &.price {
      width: 10%;
    }
    &.on_hand {
      width: 10%;
    }
    &.category {
      width: 15%;
    }
    &.actions {
      width: 3%;
    }
  }

  td.image {
    padding: 10px;
    text-align: center;
    img {
      border: 1px solid transparent;
      border-radius: 0.4em;
    }
    img:hover {
      opacity: 0.8;
      cursor: pointer;
      background-color: #fbfbfb;
      border: 1px solid #e4e4e4;
    }
  }

  td.unit {
    input,
    select {
      width: 100%;
    }
  }

  td.left-actions {
    a.view-variants,
    a.add-variant {
      cursor: pointer;
    }
  }
}

form#image_upload {
  text-align: center;
  .spinner {
    width: 160px;
    height: 65%;
    position: absolute;
    //background-color: rgba(255, 255, 255, 0.75);
    padding: 32px;
    margin: 0px -80px;
    left: 50%;
    z-index: 100;
  }
  .preview {
    width: 240px;
  }
  .faded {
    opacity: 0.25;
  }
  .button:hover {
    cursor: pointer;
  }
}

form.edit_image {
  .field {
    img {
      max-width: 150px;
    }
  }
}