/* =Imports -------------------------------------------------------------- */ @import "bourbon"; @import "mixins"; @import "woocommerce-base"; // Contains base colours like $primary .woocommerce, .woocommerce-page { /* =General Layout Styles -------------------------------------------------------------- */ .col2-set { @include clearfix(); width: 100%; .col-1 { float: left; width: 48%; } .col-2 { float: right; width: 48%; } } img { height: auto; max-width: 100%; } /* =Product Page -------------------------------------------------------------- */ div.product, #content div.product { div.images { float: left; width: 48%; } div.thumbnails { @include clearfix(); a { float: left; width: 30.75%; margin-right: 3.8%; } a.last { margin-right: 0; } a.first { clear: both; } } div.summary { float: right; width: 48%; } /* 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 { @include clearfix(); clear: both; ul.products, ul { float: none; li.product { width: 48%; img { width: 100%; height: auto; } } } } ul.products { clear: both; @include clearfix(); li.product { float: left; margin: 0 3.8% 2.992em 0; padding: 0; position: relative; width: 22.05%; margin-left: 0; } li.first { clear: both; } li.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%; } } } .woocommerce-result-count { float: left; } .woocommerce-ordering { float: right; } .woocommerce-pagination { ul.page-numbers { @include menu(); } } /* =Cart Page -------------------------------------------------------------- */ table.cart, #content table.cart { img { height: auto; } td.actions { text-align: right; .input-text { width: 80px; } .coupon { float: left; label { display: none; } } } } .cart-collaterals { @include clearfix(); width: 100%; .related { width: 30.75%; float: left; } .cross-sells { width: 48%; float: left; ul.products { float: none; li { width: 48%; } } } .shipping_calculator { width: 48%; @include clearfix(); clear: right; float: right; .col2-set { .col-1, .col-2 { width: 47%; } } } .cart_totals { float: right; width: 48%; } } /* =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 box-sizing(border-box); width: 100%; } } .form-row-first, .form-row-last { float: left; width: 47%; overflow: visible; } .form-row-last { float: right; } .form-row-wide { clear: both; } } #payment { .form-row { select { width: auto; } } .terms { text-align: right; padding: 0 1em 0; } #place_order { float: right; } } } /* =Twenty Fourteen Specific styles -------------------------------------------------------------- */ .twentyfourteen { .tfwc { padding: 12px 10px 0; max-width: 474px; margin: 0 auto; .product .entry-summary { padding: 0 !important; margin: 0 0 1.618em !important; } div.product.hentry.has-post-thumbnail { margin-top: 0; } .product { .images { img { margin-bottom: 1em; } } } } } @media screen and (min-width: 673px) { .twentyfourteen { .tfwc { padding-right: 30px; padding-left: 30px; } } } @media screen and (min-width: 1040px) { .twentyfourteen { .tfwc { padding-right: 15px; padding-left: 15px; } } } @media screen and (min-width: 1110px) { .twentyfourteen { .tfwc { padding-right: 30px; padding-left: 30px; } } } @media screen and (min-width: 1218px) { .twentyfourteen { .tfwc { margin-right: 54px; } } .full-width { .twentyfourteen { .tfwc { margin-right: auto; } } } }