/** * woocommerce-layout.scss * Applies layout to the default WooCommerce frontend design */ /** * Imports */ /** * Deprecated * Fallback for bourbon equivalent */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Vendor prefix no longer required. */ /** * Deprecated * Use bourbon mixin instead `@include transform(scale(1.5));` */ /** * Deprecated * Use bourbon mixin instead `@include box-sizing(border-box);` */ /** * Objects */ /** * WooCommerce CSS Variables */ /** * Styling begins */ .woocommerce, .woocommerce-page { /** * General layout styles */ /** * Product page */ /** * Product loops */ /** * Cart page */ /** * Cart sidebar */ /** * Forms */ /** * oEmbeds */ } .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce-page .woocommerce-message .button, .woocommerce-page .woocommerce-error .button, .woocommerce-page .woocommerce-info .button { float: right; } .woocommerce .col2-set, .woocommerce-page .col2-set { *zoom: 1; width: 100%; } .woocommerce .col2-set::before, .woocommerce .col2-set::after, .woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after { content: ' '; display: table; } .woocommerce .col2-set::after, .woocommerce-page .col2-set::after { clear: both; } .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { float: left; width: 48%; } .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { float: right; width: 48%; } .woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; } .woocommerce div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce-page #content div.product div.images { float: left; width: 48%; } .woocommerce div.product div.thumbnails, .woocommerce #content div.product div.thumbnails, .woocommerce-page div.product div.thumbnails, .woocommerce-page #content div.product div.thumbnails { *zoom: 1; } .woocommerce div.product div.thumbnails::before, .woocommerce div.product div.thumbnails::after, .woocommerce #content div.product div.thumbnails::before, .woocommerce #content div.product div.thumbnails::after, .woocommerce-page div.product div.thumbnails::before, .woocommerce-page div.product div.thumbnails::after, .woocommerce-page #content div.product div.thumbnails::before, .woocommerce-page #content div.product div.thumbnails::after { content: ' '; display: table; } .woocommerce div.product div.thumbnails::after, .woocommerce #content div.product div.thumbnails::after, .woocommerce-page div.product div.thumbnails::after, .woocommerce-page #content div.product div.thumbnails::after { clear: both; } .woocommerce div.product div.thumbnails a, .woocommerce #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a { float: left; width: 30.75%; margin-right: 3.8%; margin-bottom: 1em; } .woocommerce div.product div.thumbnails a.last, .woocommerce #content div.product div.thumbnails a.last, .woocommerce-page div.product div.thumbnails a.last, .woocommerce-page #content div.product div.thumbnails a.last { margin-right: 0; } .woocommerce div.product div.thumbnails a.first, .woocommerce #content div.product div.thumbnails a.first, .woocommerce-page div.product div.thumbnails a.first, .woocommerce-page #content div.product div.thumbnails a.first { clear: both; } .woocommerce div.product div.thumbnails.columns-1 a, .woocommerce #content div.product div.thumbnails.columns-1 a, .woocommerce-page div.product div.thumbnails.columns-1 a, .woocommerce-page #content div.product div.thumbnails.columns-1 a { width: 100%; margin-right: 0; float: none; } .woocommerce div.product div.thumbnails.columns-2 a, .woocommerce #content div.product div.thumbnails.columns-2 a, .woocommerce-page div.product div.thumbnails.columns-2 a, .woocommerce-page #content div.product div.thumbnails.columns-2 a { width: 48%; } .woocommerce div.product div.thumbnails.columns-4 a, .woocommerce #content div.product div.thumbnails.columns-4 a, .woocommerce-page div.product div.thumbnails.columns-4 a, .woocommerce-page #content div.product div.thumbnails.columns-4 a { width: 22.05%; } .woocommerce div.product div.thumbnails.columns-5 a, .woocommerce #content div.product div.thumbnails.columns-5 a, .woocommerce-page div.product div.thumbnails.columns-5 a, .woocommerce-page #content div.product div.thumbnails.columns-5 a { width: 16.9%; } .woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary { float: right; width: 48%; } .woocommerce div.product .woocommerce-tabs, .woocommerce #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs { clear: both; } .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce #content div.product .woocommerce-tabs ul.tabs, .woocommerce-page div.product .woocommerce-tabs ul.tabs, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs { *zoom: 1; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after, .woocommerce #content div.product .woocommerce-tabs ul.tabs::before, .woocommerce #content div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page div.product .woocommerce-tabs ul.tabs::before, .woocommerce-page div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs::before, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after { content: ' '; display: table; } .woocommerce div.product .woocommerce-tabs ul.tabs::after, .woocommerce #content div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page div.product .woocommerce-tabs ul.tabs::after, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after { clear: both; } .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li { display: inline-block; } .woocommerce div.product #reviews .comment, .woocommerce #content div.product #reviews .comment, .woocommerce-page div.product #reviews .comment, .woocommerce-page #content div.product #reviews .comment { *zoom: 1; } .woocommerce div.product #reviews .comment::before, .woocommerce div.product #reviews .comment::after, .woocommerce #content div.product #reviews .comment::before, .woocommerce #content div.product #reviews .comment::after, .woocommerce-page div.product #reviews .comment::before, .woocommerce-page div.product #reviews .comment::after, .woocommerce-page #content div.product #reviews .comment::before, .woocommerce-page #content div.product #reviews .comment::after { content: ' '; display: table; } .woocommerce div.product #reviews .comment::after, .woocommerce #content div.product #reviews .comment::after, .woocommerce-page div.product #reviews .comment::after, .woocommerce-page #content div.product #reviews .comment::after { clear: both; } .woocommerce div.product #reviews .comment img, .woocommerce #content div.product #reviews .comment img, .woocommerce-page div.product #reviews .comment img, .woocommerce-page #content div.product #reviews .comment img { float: right; height: auto; } .woocommerce ul.products, .woocommerce-page ul.products { clear: both; *zoom: 1; } .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: ' '; display: table; } .woocommerce ul.products::after, .woocommerce-page ul.products::after { clear: both; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: left; margin: 0 3.8% 2.992em 0; padding: 0; position: relative; width: 22.05%; margin-left: 0; } .woocommerce ul.products li.first, .woocommerce-page ul.products li.first { clear: both; } .woocommerce ul.products li.last, .woocommerce-page ul.products li.last { margin-right: 0; } .woocommerce.columns-1 ul.products li.product, .woocommerce-page.columns-1 ul.products li.product { width: 100%; margin-right: 0; } .woocommerce.columns-2 ul.products li.product, .woocommerce-page.columns-2 ul.products li.product { width: 48%; } .woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product { width: 30.75%; } .woocommerce.columns-5 ul.products li.product, .woocommerce-page.columns-5 ul.products li.product { width: 16.95%; } .woocommerce.columns-6 ul.products li.product, .woocommerce-page.columns-6 ul.products li.product { width: 13.5%; } .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { float: left; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { float: right; } .woocommerce .woocommerce-pagination ul.page-numbers, .woocommerce-page .woocommerce-pagination ul.page-numbers { *zoom: 1; } .woocommerce .woocommerce-pagination ul.page-numbers::before, .woocommerce .woocommerce-pagination ul.page-numbers::after, .woocommerce-page .woocommerce-pagination ul.page-numbers::before, .woocommerce-page .woocommerce-pagination ul.page-numbers::after { content: ' '; display: table; } .woocommerce .woocommerce-pagination ul.page-numbers::after, .woocommerce-page .woocommerce-pagination ul.page-numbers::after { clear: both; } .woocommerce .woocommerce-pagination ul.page-numbers li, .woocommerce-page .woocommerce-pagination ul.page-numbers li { display: inline-block; } .woocommerce table.cart img, .woocommerce #content table.cart img, .woocommerce-page table.cart img, .woocommerce-page #content table.cart img { height: auto; } .woocommerce table.cart td.actions, .woocommerce #content table.cart td.actions, .woocommerce-page table.cart td.actions, .woocommerce-page #content table.cart td.actions { text-align: right; } .woocommerce table.cart td.actions .input-text, .woocommerce #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text { width: 80px; } .woocommerce table.cart td.actions .coupon, .woocommerce #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon { float: left; } .woocommerce table.cart td.actions .coupon label, .woocommerce #content table.cart td.actions .coupon label, .woocommerce-page table.cart td.actions .coupon label, .woocommerce-page #content table.cart td.actions .coupon label { display: none; } .woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals { *zoom: 1; width: 100%; } .woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after, .woocommerce-page .cart-collaterals::before, .woocommerce-page .cart-collaterals::after { content: ' '; display: table; } .woocommerce .cart-collaterals::after, .woocommerce-page .cart-collaterals::after { clear: both; } .woocommerce .cart-collaterals .related, .woocommerce-page .cart-collaterals .related { width: 30.75%; float: left; } .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells { width: 48%; float: left; } .woocommerce .cart-collaterals .cross-sells ul.products, .woocommerce-page .cart-collaterals .cross-sells ul.products { float: none; } .woocommerce .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li { width: 48%; } .woocommerce .cart-collaterals .shipping_calculator, .woocommerce-page .cart-collaterals .shipping_calculator { width: 48%; *zoom: 1; clear: right; float: right; } .woocommerce .cart-collaterals .shipping_calculator::before, .woocommerce .cart-collaterals .shipping_calculator::after, .woocommerce-page .cart-collaterals .shipping_calculator::before, .woocommerce-page .cart-collaterals .shipping_calculator::after { content: ' '; display: table; } .woocommerce .cart-collaterals .shipping_calculator::after, .woocommerce-page .cart-collaterals .shipping_calculator::after { clear: both; } .woocommerce .cart-collaterals .shipping_calculator .col2-set .col-1, .woocommerce .cart-collaterals .shipping_calculator .col2-set .col-2, .woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-1, .woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-2 { width: 47%; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: right; width: 48%; } .woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li, .woocommerce-page ul.cart_list li, .woocommerce-page ul.product_list_widget li { *zoom: 1; } .woocommerce ul.cart_list li::before, .woocommerce ul.cart_list li::after, .woocommerce ul.product_list_widget li::before, .woocommerce ul.product_list_widget li::after, .woocommerce-page ul.cart_list li::before, .woocommerce-page ul.cart_list li::after, .woocommerce-page ul.product_list_widget li::before, .woocommerce-page ul.product_list_widget li::after { content: ' '; display: table; } .woocommerce ul.cart_list li::after, .woocommerce ul.product_list_widget li::after, .woocommerce-page ul.cart_list li::after, .woocommerce-page ul.product_list_widget li::after { clear: both; } .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img, .woocommerce-page ul.cart_list li img, .woocommerce-page ul.product_list_widget li img { float: right; height: auto; } .woocommerce form .form-row, .woocommerce-page form .form-row { *zoom: 1; } .woocommerce form .form-row::before, .woocommerce form .form-row::after, .woocommerce-page form .form-row::before, .woocommerce-page form .form-row::after { content: ' '; display: table; } .woocommerce form .form-row::after, .woocommerce-page form .form-row::after { clear: both; } .woocommerce form .form-row label, .woocommerce-page form .form-row label { display: block; } .woocommerce form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox { display: inline; } .woocommerce form .form-row select, .woocommerce-page form .form-row select { width: 100%; } .woocommerce form .form-row .input-text, .woocommerce-page form .form-row .input-text { box-sizing: border-box; width: 100%; } .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { width: 47%; overflow: visible; } .woocommerce form .form-row-first, .woocommerce-page form .form-row-first { float: left; /*rtl:raw: float: right; */ } .woocommerce form .form-row-last, .woocommerce-page form .form-row-last { float: right; } .woocommerce form .form-row-wide, .woocommerce-page form .form-row-wide { clear: both; } .woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select { width: auto; } .woocommerce #payment .wc-terms-and-conditions, .woocommerce #payment .terms, .woocommerce-page #payment .wc-terms-and-conditions, .woocommerce-page #payment .terms { text-align: left; padding: 0 1em 0 0; float: left; } .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: right; } .woocommerce .woocommerce-billing-fields, .woocommerce .woocommerce-shipping-fields, .woocommerce-page .woocommerce-billing-fields, .woocommerce-page .woocommerce-shipping-fields { *zoom: 1; } .woocommerce .woocommerce-billing-fields::before, .woocommerce .woocommerce-billing-fields::after, .woocommerce .woocommerce-shipping-fields::before, .woocommerce .woocommerce-shipping-fields::after, .woocommerce-page .woocommerce-billing-fields::before, .woocommerce-page .woocommerce-billing-fields::after, .woocommerce-page .woocommerce-shipping-fields::before, .woocommerce-page .woocommerce-shipping-fields::after { content: ' '; display: table; } .woocommerce .woocommerce-billing-fields::after, .woocommerce .woocommerce-shipping-fields::after, .woocommerce-page .woocommerce-billing-fields::after, .woocommerce-page .woocommerce-shipping-fields::after { clear: both; } .woocommerce .woocommerce-terms-and-conditions, .woocommerce-page .woocommerce-terms-and-conditions { margin-bottom: 1.618em; padding: 1.618em; } .woocommerce .woocommerce-oembed, .woocommerce-page .woocommerce-oembed { position: relative; } .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30%; } .woocommerce-account .woocommerce-MyAccount-content { float: right; width: 68%; } /** * Twenty Eleven specific styles */ .woocommerce-page.left-sidebar #content.twentyeleven { width: 58.4%; margin: 0 7.6%; float: right; } .woocommerce-page.right-sidebar #content.twentyeleven { margin: 0 7.6%; width: 58.4%; float: left; } /** * Twenty Fourteen specific styles */ .twentyfourteen .tfwc { padding: 12px 10px 0; max-width: 474px; margin: 0 auto; } .twentyfourteen .tfwc .product .entry-summary { padding: 0 !important; margin: 0 0 1.618em !important; } .twentyfourteen .tfwc div.product.hentry.has-post-thumbnail { margin-top: 0; } @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; } } /** * Twenty Fifteen specific styles */ .twentyfifteen .t15wc { padding-left: 7.6923%; padding-right: 7.6923%; padding-top: 7.6923%; margin-bottom: 7.6923%; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); } .twentyfifteen .t15wc .page-title { margin-left: 0; } @media screen and (min-width: 38.75em) { .twentyfifteen .t15wc { margin-right: 7.6923%; margin-left: 7.6923%; margin-top: 8.3333%; } } @media screen and (min-width: 59.6875em) { .twentyfifteen .t15wc { margin-left: 8.3333%; margin-right: 8.3333%; padding: 10%; } .single-product .twentyfifteen .entry-summary { padding: 0 !important; } } /** * Twenty Sixteen specific styles */ .twentysixteen .site-main { margin-right: 7.6923%; margin-left: 7.6923%; } .twentysixteen .entry-summary { margin-right: 0; margin-left: 0; } #content .twentysixteen div.product div.images, #content .twentysixteen div.product div.summary { width: 46.42857%; } @media screen and (min-width: 44.375em) { .twentysixteen .site-main { margin-right: 23.0769%; } } @media screen and (min-width: 56.875em) { .twentysixteen .site-main { margin-right: 0; margin-left: 0; } .no-sidebar .twentysixteen .site-main { margin-right: 15%; margin-left: 15%; } .no-sidebar .twentysixteen .entry-summary { margin-right: 0; margin-left: 0; } } /** * RTL styles. */ .rtl .woocommerce .col2-set .col-1, .rtl .woocommerce-page .col2-set .col-1 { float: right; } .rtl .woocommerce .col2-set .col-2, .rtl .woocommerce-page .col2-set .col-2 { float: left; }