acklen-keystone/admin/public/styles/isomorphic/ecommerce/cart/cart-table.less

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

.isoCartTable {
  width: 100%;
  background-color: #ffffff;
  margin: 0 15px;

  @media only screen and (max-width: 767px) {
    overflow-x: auto;
    margin: 0;
  }

  &.bordered {
    table {
      tbody {
        tr {
          border-bottom: 1px solid @isoColor--Border;

          &:last-child {
            border-bottom: 0;
          }

          &.isoTotalBill {
            border-top: 0;
          }
        }
      }
    }
  }

  table {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid @isoColor--Border;

    @media only screen and (max-width: 767px) {
      width: 767px;
      overflow: hidden;
    }

    // TABLE HEAD
    thead {
      width: 100%;
      min-height: 50px;
      border-bottom: 1px solid @isoColor--Border;

      tr {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        th {
          font-size: @isoFontSize;
          font-weight: 500;
          color: @isoColor--Heading;
          line-height: 1.2;
          white-space: nowrap;
          padding: 15px 0;
          margin: 0 20px;
          width: 15%;
          text-align: center;

          &:last-child {
            margin-right: 0;
          }

          @media only screen and (max-width: 991px) {
            margin: 0 10px;
            flex-shrink: 0;
          }

          &.isoItemRemove {
            width: 50px;
            margin: 0;
            flex-shrink: 0;
            margin-left: 15px;

            @media only screen and (max-width: 991px) {
              width: 30px;
              margin-left: 10px;
            }
          }

          &.isoItemImage {
            width: 80px;
            flex-shrink: 0;

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

          &.isoItemName {
            max-width: none;
            text-align: left;
            width: 45%;

            @media only screen and (max-width: 991px) {
              margin: 0 10px;
              flex-shrink: 1;
            }
          }
        }
      }
    }

    // TABLE BODY
    tbody {
      width: 100%;

      tr {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 140px;
        .isoTransition;

        &.isoNoItemMsg {
          min-height: 300px;
          justify-content: center;
          font-size: @isoFontSize * 2 + 2;
          font-weight: 300;
          color: @isoColor--GreyDark;
          line-height: 1.2;
        }

        td {
          font-size: @isoFontSize;
          font-weight: 500;
          color: @isoColor--Heading;
          line-height: 1.2;
          overflow: hidden;
          padding: 15px 0;
          margin: 0 20px;
          width: 15%;
          text-align: center;

          &:last-child {
            margin-right: 0;
          }

          @media only screen and (max-width: 991px) {
            margin: 0 10px;
            flex-shrink: 0;
          }

          h3 {
            font-size: @isoFontSize;
            font-weight: 500;
            color: @isoColor--Heading;
            line-height: 1.2;
            margin-bottom: 10px;
          }

          p {
            font-size: @isoFontSize - 2;
            font-weight: 400;
            color: @isoColor--Text;
            line-height: 1.5;
          }

          span {
            font-size: @isoFontSize;
            font-weight: 500;
            color: @isoColor--Heading;
          }

          &.isoItemRemove {
            text-align: center;
            width: 50px;
            margin: 0;
            flex-shrink: 0;
            margin-left: 15px;

            a {
              color: @isoColor--Heading;
              .isoTransition;

              &:hover {
                color: @primary-color;
              }
            }

            @media only screen and (max-width: 991px) {
              width: 30px;
              margin-left: 10px;
            }
          }

          &.isoItemImage {
            width: 80px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

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

          &.isoItemName {
            text-align: left;
            max-width: none;
            width: 45%;

            @media only screen and (max-width: 991px) {
              margin: 0 10px;
              flex-shrink: 1;
            }
          }

          .ant-input-number {
            background-color: transparent;

            &.ant-input-number-focused {
              .isoBoxShadow(none);
            }

            .ant-input-number-handler-wrap {
              background-color: transparent;
            }

            .ant-input-number-input {
              background-color: transparent;
            }
          }
        }

        &.isoTotalBill {
          border-top: 1px solid @isoColor--Border;
          padding-top: 10px;
          min-height: 100px;

          &:hover {
            background-color: #fff;
          }
        }
      }
    }

    // TABLE FOOTER
    tfoot {
      width: 100%;
      padding: 25px;
      padding-top: 10px;

      tr {
        width: 100%;
        display: flex;
        align-items: center;

        &.isoTotalBill {
          justify-content: flex-end;

          td {
            width: 15%;
          }
        }

        td {
          .ant-input {
            .isoBorderRadius(2px);
          }

          .ant-btn {
            height: 42px;
            min-width: 125px;
            .isoBorderRadius(2px);
          }
        }
      }
    }
  }
}