woocommerce/assets/css/woocommerce-layout.css

507 lines
21 KiB
CSS

/**
* 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; }