/** * This stylesheet optimises the default WooCommerce layout when viewed on smaller screens. */ /* =Imports -------------------------------------------------------------- */ @import "bourbon"; @import "mixins"; @import "variables"; .woocommerce, .woocommerce-page { table.shop_table_responsive { thead { display: none; } tbody { tr:first-child { td:first-child { border-top: 0; } } th { display: none; } } tr { display: block; td { display: block; &:before { content: attr(data-title) ': '; font-weight: 700; } } &:nth-child(2n) { td { background-color: rgba(0,0,0,0.025); } } } } table.my_account_orders { tr { td { &.order-actions { text-align: left; &:before { display: none; } .button { float: none; margin: .125em .25em .125em 0; } } } } } /** * General layout */ .col2-set { .col-1, .col-2 { float: none; width: 100%; } } /** * Products */ ul.products { li.product { width: 48%; float: left; clear: both; margin: 0 0 2.992em; &:nth-child(2n) { float: right; clear: none !important; } } } /** * Product Details */ div.product, #content div.product { div.images, div.summary { float: none; width: 100%; } } /** * Cart */ table.cart, #content table.cart { .product-thumbnail { display: none; } td.actions { text-align: left; .coupon { float: none; @include clearfix(); padding-bottom: .5em; } input, .button, .input-text { width: 48%; @include box-sizing(border-box); } .input-text + .button, .button.alt { float: right; } } } .cart-collaterals { .cart_totals, .shipping_calculator, .cross-sells { width: 100%; float: none; text-align: left; } } /** * Checkout */ &.woocommerce-checkout { form.login { .form-row { width: 100%; float: none; } } } #payment { .terms { text-align: left; padding: 0; } #place_order { float: none; width: 100%; @include box-sizing(border-box); margin-bottom: 1em; } } /** * Account */ .lost_reset_password { .form-row-first, .form-row-last { width: 100%; float: none; margin-right: 0; } } } /* =Twenty Thirteen Specific styles -------------------------------------------------------------- */ .single-product { .twentythirteen { .panel { padding-left: 20px !important; padding-right: 20px !important; } } }