scss 响应WooCommerce Sass

Posted 2021-05-18

/* =Mixins
-------------------------------------------------------------- */
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin menu {
  @include clearfix;

  li {
    display: inline;
  }
}

@mixin mediaright {
  @include clearfix;

  img {
    float: right;
    height: auto;
  }
}

@mixin medialeft {
  @include clearfix;

  img {
    float: right;
    height: auto;
  }
}

@mixin borderbox {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

.woocommerce, .woocommerce-page {
  /* =General Layout Styles
  -------------------------------------------------------------- */

  img {
    height: auto;
    max-width: 100%;
  }

  /* =Product Page
  -------------------------------------------------------------- */

  div.product, #content div.product {
    div.thumbnails {
      @include clearfix;

      a {
        float: left;
        width: 30.75%;
        margin-right: 3.8%;
      }

      a.last {
        margin-right: 0;
      }

      a.first {
        clear: both;
      }
    }

    /* Tabs on the product page */
    .woocommerce-tabs {
      clear: both;

      ul.tabs {
        @include menu;
      }
    }

    #reviews {
      .comment {
        @include mediaright;
      }
    }
  }

  #quantity, #content .quantity {
    /* Disable input[type=number] buttons until the world is ready */
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
      display: none;
    }
  }

  /* =Product Loops
  -------------------------------------------------------------- */

  /*.related, .upsells.products {
    .clearfix();
    ul.products, ul {
      float:none;
      li.product {
        width: 48%;
        img {
          width: 100%;
          height:auto;
        }
      }
    }
  }*/

  ul.products {
    clear: both;

    @include clearfix;

    li.product {
      margin: 0 0 2.992em 0;
      padding: 0;
      position: relative;
      margin-left: 0;
    }
  }

  .woocommerce-result-count {
    float: left;
  }

  .woocommerce-ordering {
    float: right;
  }

  .woocommerce-pagination {
    ul.page-numbers {
      @include menu;
    }
  }

  /* =Cart Page
  -------------------------------------------------------------- */

  table.cart, #content table.cart {
    .product-thumbnail {
      display: none;
    }

    img {
      height: auto;
    }

    td.actions {
      .coupon {
        padding-bottom: .5em;
      }

      input, .button, .input-text {
        width: 48%;

        @include borderbox;
      }

      .input-text + .button, .button.alt {
        float: right;
      }
    }
  }

  .cart-collaterals {
    @include clearfix;

    width: 100%;

    .related {
      width: 30.75%;
      float: left;
    }

    .cross-sells {
      ul.products {
        float: none;

        li {
          width: 48%;
        }
      }
    }

    .shipping_calculator {
      .col2-set {
        .col-1, .col-2 {
          width: 47%;
        }
      }
    }
  }

  /* =Cart Sidebar
  -------------------------------------------------------------- */

  ul.cart_list, ul.product_list_widget {
    li {
      @include mediaright;
    }
  }

  /* =Forms
  -------------------------------------------------------------- */

  form {
    .form-row {
      @include clearfix;

      label {
        display: block;

        &.checkbox {
          display: inline;
        }
      }

      select {
        width: 100%;
      }

      .input-text {
        @include borderbox;

        width: 100%;
      }
    }

    .form-row-first, .form-row-last {
      float: left;
      width: 47%;
      overflow: visible;
    }

    .form-row-last {
      float: right;
    }

    .form-row-wide {
      clear: both;
    }
  }

  &.woocommerce-checkout {
    form.login {
      .form-row {
        width: 100%;
        float: none;
      }
    }
  }

  #payment {
    .form-row {
      select {
        width: auto;
      }
    }

    #place_order {
      width: 100%;

      @include borderbox;

      margin-bottom: 1em;
    }
  }
}

@media only screen and (min-width: 30em) { //480px
  .woocommerce, .woocommerce-page {
    /* =Product Loops
    -------------------------------------------------------------- */
    // 2 products/row
    ul.products {
      li.product {
        width: 48%;
        float: left;

        &:nth-child(2n) { // last element of the line
          float: right;
        }

        &:nth-child(2n+1) { // first element of the line
          clear: both;
        }
      }
    }
  }
}

@media only screen and (min-width: 37.5em) { //600px
  .woocommerce, .woocommerce-page {
    /* =General Layout Styles
    -------------------------------------------------------------- */
    .col2-set {
      @include clearfix;

      width: 100%;

      .col-1 {
        float: left;
        width: 48%;
      }

      .col-2 {
        float: right;
        width: 48%;
      }
    }

    /* =Product Page
    -------------------------------------------------------------- */
    div.product, #content div.product {
      div.images {
        float: left;
        width: 48%;
      }

      div.summary {
        float: right;
        width: 48%;
      }
    }

    /* =Product Loops
    -------------------------------------------------------------- */
    // 3 products/row
    ul.products {
      li.product {
        margin-right: 1.8%;
        width: 32.05%;

        &:nth-child(2n) { // reset float
          float: left;
        }

        &:nth-child(2n+1) { //reset clear
          clear: none;
        }

        &:nth-child(3n) { // last element of the line
          margin-right: 0;
        }

        &:nth-child(3n+1) { // first element of the line
          clear: both;
        }
      }
    }

    /* =Cart Page
    -------------------------------------------------------------- */
    table.cart, #content table.cart {
      .product-thumbnail {
        display: block; // TODO: or inline block?

      }

      td.actions {
        text-align: right;

        input, .button {
          width: auto;
        }

        .input-text {
          width: 80px;
        }

        .input-text + .button, .button.alt {
          float: none;
        }

        .coupon {
          padding-bottom: 0;
          float: left;

          label {
            display: none;
          }
        }
      }
    }

    .cart-collaterals {
      .cross-sells {
        width: 48%;
        float: left;

        @include clearfix;

        clear: right;
      }

      .shipping_calculator {
        width: 48%;
        float: right;

        @include clearfix;

        clear: right;
      }

      .cart_totals {
        width: 48%;
        float: right;
        text-align: right;
      }
    }

    /* =Forms
    -------------------------------------------------------------- */

    &.woocommerce-checkout {
      form.login {
        .form-row-first, .form-row-last {
          float: left;
          width: 47%;
          overflow: visible;
        }

        .form-row-last {
          float: right;
        }
      }
    }

    #payment {
      .terms {
        text-align: right;
        padding: 0 1em 0;
      }

      #place_order {
        float: right;
        width: auto;
        margin-bottom: 0;
      }
    }
  }
}

@media only screen and (min-width: 60em) { //960px
  .woocommerce, .woocommerce-page {
    /* =Product Loops
    -------------------------------------------------------------- */
    // 4 products/row
    ul.products {
      li.product {
        margin-right: 3.8%;
        width: 22.05%;

        &:nth-child(3n) { // reset margin
          margin-right: 3.8%;
        }

        &:nth-child(3n+1) { // reset clear
          clear: none;
        }

        &.first {
          clear: both;
        }

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

    /*&.columns-1 {
      ul.products {
        li.product {
          width:100%;
          margin-right:0;
        }
      }
    }

    &.columns-2 {
      ul.products {
        li.product {
          width:48%;
        }
      }
    }

    &.columns-3 {
      ul.products {
        li.product {
          width:30.75%;
        }
      }
    }

    &.columns-5 {
      ul.products {
        li.product {
          width:16.95%;
        }
      }
    }

    &.columns-6 {
      ul.products {
        li.product {
          width:13.5%;
        }
      }
    }*/
  }
}

/* http://css-tricks.com/responsive-data-tables/ */
@media screen and (max-width: 600px) {
  /* Force table to not be like tables anymore */
  .woocommerce-page table.shop_table {
    border: none;

    &,
    thead,
    tbody,
    th,
    td,
    tr {
      display: block;
    }

    tr.cart-subtotal td,
    tr.shipping td,
    tr.total td,
    &.order_details tfoot th,
    &.order_details tfoot td {
      padding-left: 6px !important;
      border: 0 !important;
    }

    tbody {
      padding-top: 10px;
    }

    /* Hide table headers (but not display: none;, for accessibility) */

    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    td {
      /* Behave like a "row" */
      border: 1px solid #d2d3d3;
      position: relative;
      padding-left: 30% !important;

      &.product-spacer {
        border-color: #FFF;
        height: 10px;
      }

      &:before {
        /* Now like a table header */
        position: absolute;

        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 25%;
        padding-right: 10px;
        white-space: nowrap;
      }

      /*
      Label the data
      */
      &.product-remove:before {
        content: "Delete";
      }

      &.product-thumbnail:before {
        content: "Image";
      }

      &.product-name:before {
        content: "Product";
      }

      &.product-price:before {
        content: "Price";
      }

      &.product-quantity:before {
        content: "Quantity";
      }

      &.product-subtotal:before {
        content: "Subtotal";
      }

      &.product-total:before {
        content: "Total";
      }
    }
  }

  .woocommerce,
  .woocommerce-page {
    &,
    #content {
      .quantity {
        margin: 0;
      }

      /* make buttons full width, text wide anyway, improves effectiveness */
      table.cart td.actions {
        .button,
        .input-text,
        input {
          width: 100%;

          .coupon & {
            width: 48%;
          }
        }

        /* clean up how coupon inputs display */
        .coupon {
          margin-top: 1.5em;

          .input-text {
            margin-bottom: 1em;
          }
        }
      }
    }

    .col2-set .col-1,
    .col2-set .col-2,
    form .form-row-first,
    form .form-row-last {
      float: none;
      width: 100%;
    }

    .order_details {
      &, ul {
        padding: 0;
      }

      li {
        clear: left;
        margin-bottom: 10px;
        border: 0;
      }
    }

    /* remove cross sells, they interfere with flow between cart and cart totals + shipping calculator */
    .cart-collaterals .cross-sells {
      display: none;
    }
  }

  .woocommerce-page {
    &, #content {
      table.cart td.actions {
        text-align: left;
        border: 0;
        padding-left: 6px !important;

        .button.alt {
          float: left;
          margin-top: 10px;
        }

        div,
        input {
          margin-bottom: 10px;
        }
      }
    }

    .cart-collaterals .cart_totals {
      float: left;
      width: 100%;
      text-align: left;

      th,
      td {
        border: 0 !important;
      }

      table tr.cart-subtotal td,
      table tr.shipping td,
      table tr.total td {
        padding-left: 6px !important;
      }
    }
  }
}