acklen-keystone/admin/client/App/isomorphic/style/ecommerce/algolia/single-list.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

.isoAlgoliaGrid {
  &.ListView {
    width: 100%;
    display: flex;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 15px;
    border: 1px solid @isoColor--Border;

    @media only screen and (max-width: 991px) {
      flex-direction: column;
    }

    .isoAlGridImage {
      width: 240px;
      height: auto;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;

      &:after {
        content: '';
        width: 100%;
        height: 100%;
        display: flex;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        .isoTransition;
      }

      .isoAlAddToCart {
        background-color: #ffffff;
        border-color: #ffffff !important;
        color: @isoColor--Heading;
        z-index: 1;
        position: absolute;
        height: 42px;
        opacity: 0;
        padding: 0 20px;
        transform: scale(0.8);
        .isoTransition;

        i {
          margin-right: 10px;
          font-size: @isoFontSize;
        }

        &:hover {
          background-color: darken(#ffffff, 5%);
        }
      }

      &:hover {
        &:after {
          opacity: 1;
        }

        .isoAlAddToCart {
          opacity: 1;
          transform: scale(1);
        }
      }

      img {
        max-width: 100%;
      }

      @media only screen and (max-width: 991px) {
        width: 100%;
        height: auto;
        overflow: hidden;
      }
    }

    .isoAlGridContents {
      width: 100%;
      padding: 30px 15px;
      padding-left: 30px;
      display: flex;
      flex-direction: column;

      @media only screen and (max-width: 991px) {
        margin-top: 15px;
      }

      .isoAlGridName {
        .ais-Highlight__nonHighlighted {
          font-size: @isoFontSize + 2;
          font-weight: 700;
          color: @isoColor--Heading;
          line-height: 1.3;
          margin-bottom: 10px;
          display: flex;
        }
      }

      .isoAlGridPriceRating {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .isoAlGridPrice {
          font-size: @isoFontSize;
          font-weight: 400;
          color: @isoColor--Heading;
          line-height: 1;
        }

        .isoAlGridRating {
          .ant-rate {
            display: flex;
            .ant-rate-star {
              font-size: 9px;
              margin-right: 2px;
            }
          }
        }
      }

      .isoAlGridDescription {
        .ais-Highlight__nonHighlighted {
          font-size: @isoFontSize - 1;
          font-weight: 400;
          color: @isoColor--Text;
          line-height: 1.5;
        }
      }
    }
  }
}