woocommerce/assets/css/woocommerce-layout.css

544 lines
17 KiB
CSS
Raw Normal View History

2013-07-26 14:36:28 +00:00
.clear {
clear: both;
}
.nobr {
white-space: nowrap;
}
/**
* Objects
*/
/* Primary colour for buttons (alt) */
/* Text on primary colour bg */
/* Secondary buttons */
/* Text on secondary colour bg */
/* Prices, In stock labels, sales flash */
/* Text on highlight colour bg */
/* Content BG - Tabs (active state) */
/* small, breadcrumbs etc *//* Contains base colours like @primary */
.woocommerce,
.woocommerce-page {
/* =General Layout Styles
-------------------------------------------------------------- */
/* =Product Page
-------------------------------------------------------------- */
/* =Product Loops
-------------------------------------------------------------- */
/* =Cart Page
-------------------------------------------------------------- */
/* =Cart Sidebar
-------------------------------------------------------------- */
/* =Forms
-------------------------------------------------------------- */
}
.woocommerce .col2-set,
.woocommerce-page .col2-set {
2013-08-19 12:48:50 +00:00
*zoom: 1;
2013-07-26 14:36:28 +00:00
width: 100%;
}
2013-08-19 14:12:17 +00:00
.woocommerce .col2-set:before,
.woocommerce-page .col2-set:before,
.woocommerce .col2-set:after,
.woocommerce-page .col2-set:after {
content: " ";
display: table;
}
.woocommerce .col2-set:after,
.woocommerce-page .col2-set:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.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,
.woocommerce-page div.product,
.woocommerce #content div.product,
.woocommerce-page #content div.product {
/* Tabs on the product page */
}
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce-page #content div.product div.images {
float: left;
width: 48%;
}
2013-08-19 12:48:50 +00:00
.woocommerce div.product div.thumbnails,
.woocommerce-page div.product div.thumbnails,
.woocommerce #content div.product div.thumbnails,
.woocommerce-page #content div.product div.thumbnails {
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce div.product div.thumbnails:before,
.woocommerce-page div.product div.thumbnails:before,
.woocommerce #content div.product div.thumbnails:before,
.woocommerce-page #content div.product div.thumbnails:before,
.woocommerce div.product div.thumbnails:after,
.woocommerce-page div.product div.thumbnails:after,
.woocommerce #content div.product div.thumbnails:after,
.woocommerce-page #content div.product div.thumbnails:after {
content: " ";
display: table;
}
.woocommerce div.product div.thumbnails:after,
.woocommerce-page div.product div.thumbnails:after,
.woocommerce #content div.product div.thumbnails:after,
.woocommerce-page #content div.product div.thumbnails:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.woocommerce div.product div.thumbnails a,
.woocommerce-page div.product div.thumbnails a,
.woocommerce #content div.product div.thumbnails a,
.woocommerce-page #content div.product div.thumbnails a {
float: left;
width: 30.75%;
margin-right: 3.8%;
}
.woocommerce div.product div.thumbnails a.last,
.woocommerce-page div.product div.thumbnails a.last,
.woocommerce #content 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-page div.product div.thumbnails a.first,
.woocommerce #content div.product div.thumbnails a.first,
.woocommerce-page #content div.product div.thumbnails a.first {
clear: both;
}
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce #content div.product div.summary,
.woocommerce-page #content div.product div.summary {
float: right;
width: 48%;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs,
.woocommerce #content div.product .woocommerce-tabs,
.woocommerce-page #content div.product .woocommerce-tabs {
clear: both;
}
2013-08-19 12:48:50 +00:00
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-page div.product .woocommerce-tabs ul.tabs,
.woocommerce #content div.product .woocommerce-tabs ul.tabs,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs {
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce div.product .woocommerce-tabs ul.tabs:before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs:before,
.woocommerce #content div.product .woocommerce-tabs ul.tabs:before,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs:before,
.woocommerce div.product .woocommerce-tabs ul.tabs:after,
.woocommerce-page div.product .woocommerce-tabs ul.tabs:after,
.woocommerce #content div.product .woocommerce-tabs ul.tabs:after,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs:after {
content: " ";
display: table;
}
.woocommerce div.product .woocommerce-tabs ul.tabs:after,
.woocommerce-page div.product .woocommerce-tabs ul.tabs:after,
.woocommerce #content div.product .woocommerce-tabs ul.tabs:after,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li,
.woocommerce #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li {
display: inline;
}
2013-08-19 12:48:50 +00:00
.woocommerce div.product #reviews .comment,
.woocommerce-page div.product #reviews .comment,
.woocommerce #content div.product #reviews .comment,
.woocommerce-page #content div.product #reviews .comment {
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce div.product #reviews .comment:before,
.woocommerce-page div.product #reviews .comment:before,
.woocommerce #content div.product #reviews .comment:before,
.woocommerce-page #content div.product #reviews .comment:before,
.woocommerce div.product #reviews .comment:after,
.woocommerce-page div.product #reviews .comment:after,
.woocommerce #content div.product #reviews .comment:after,
.woocommerce-page #content div.product #reviews .comment:after {
content: " ";
display: table;
}
.woocommerce div.product #reviews .comment:after,
.woocommerce-page div.product #reviews .comment:after,
.woocommerce #content div.product #reviews .comment:after,
.woocommerce-page #content div.product #reviews .comment:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.woocommerce div.product #reviews .comment img,
.woocommerce-page div.product #reviews .comment img,
.woocommerce #content div.product #reviews .comment img,
.woocommerce-page #content div.product #reviews .comment img {
float: right;
height: auto;
}
.woocommerce #quantity,
.woocommerce-page #quantity,
.woocommerce #content .quantity,
.woocommerce-page #content .quantity {
/* Disable input[type=number] buttons until the world is ready */
}
.woocommerce #quantity input::-webkit-outer-spin-button,
.woocommerce-page #quantity input::-webkit-outer-spin-button,
.woocommerce #content .quantity input::-webkit-outer-spin-button,
.woocommerce-page #content .quantity input::-webkit-outer-spin-button,
.woocommerce #quantity input::-webkit-inner-spin-button,
.woocommerce-page #quantity input::-webkit-inner-spin-button,
.woocommerce #content .quantity input::-webkit-inner-spin-button,
.woocommerce-page #content .quantity input::-webkit-inner-spin-button {
display: none;
}
2013-08-19 12:48:50 +00:00
.woocommerce .related,
.woocommerce-page .related,
.woocommerce .upsells.products,
.woocommerce-page .upsells.products {
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce .related:before,
.woocommerce-page .related:before,
.woocommerce .upsells.products:before,
.woocommerce-page .upsells.products:before,
.woocommerce .related:after,
.woocommerce-page .related:after,
.woocommerce .upsells.products:after,
.woocommerce-page .upsells.products:after {
content: " ";
display: table;
}
.woocommerce .related:after,
.woocommerce-page .related:after,
.woocommerce .upsells.products:after,
.woocommerce-page .upsells.products:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.woocommerce .related ul.products,
.woocommerce-page .related ul.products,
.woocommerce .upsells.products ul.products,
.woocommerce-page .upsells.products ul.products,
.woocommerce .related ul,
.woocommerce-page .related ul,
.woocommerce .upsells.products ul,
.woocommerce-page .upsells.products ul {
float: none;
}
.woocommerce .related ul.products li.product,
.woocommerce-page .related ul.products li.product,
.woocommerce .upsells.products ul.products li.product,
.woocommerce-page .upsells.products ul.products li.product,
.woocommerce .related ul li.product,
.woocommerce-page .related ul li.product,
.woocommerce .upsells.products ul li.product,
.woocommerce-page .upsells.products ul li.product {
width: 48%;
}
.woocommerce .related ul.products li.product img,
.woocommerce-page .related ul.products li.product img,
.woocommerce .upsells.products ul.products li.product img,
.woocommerce-page .upsells.products ul.products li.product img,
.woocommerce .related ul li.product img,
.woocommerce-page .related ul li.product img,
.woocommerce .upsells.products ul li.product img,
.woocommerce-page .upsells.products ul li.product img {
width: 100%;
height: auto;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
clear: both;
2013-08-19 12:48:50 +00:00
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce ul.products:before,
.woocommerce-page ul.products:before,
.woocommerce ul.products:after,
.woocommerce-page ul.products:after {
content: " ";
display: table;
}
.woocommerce ul.products:after,
.woocommerce-page ul.products:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.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;
}
2013-08-19 14:12:17 +00:00
.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%;
}
2013-07-26 14:36:28 +00:00
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
float: left;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
float: right;
}
2013-08-19 12:48:50 +00:00
.woocommerce .woocommerce-pagination ul.page-numbers,
.woocommerce-page .woocommerce-pagination ul.page-numbers {
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce .woocommerce-pagination ul.page-numbers:before,
.woocommerce-page .woocommerce-pagination ul.page-numbers:before,
.woocommerce .woocommerce-pagination ul.page-numbers:after,
.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;
}
2013-07-26 14:36:28 +00:00
.woocommerce .woocommerce-pagination ul.page-numbers li,
.woocommerce-page .woocommerce-pagination ul.page-numbers li {
display: inline;
}
.woocommerce table.cart img,
.woocommerce-page table.cart img,
.woocommerce #content table.cart img,
.woocommerce-page #content table.cart img {
height: auto;
}
.woocommerce table.cart td.actions,
.woocommerce-page table.cart td.actions,
.woocommerce #content table.cart td.actions,
.woocommerce-page #content table.cart td.actions {
text-align: right;
}
.woocommerce table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions .input-text,
.woocommerce #content table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions .input-text {
width: 80px;
}
.woocommerce table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon,
.woocommerce #content table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon {
float: left;
}
.woocommerce table.cart td.actions .coupon label,
.woocommerce-page table.cart td.actions .coupon label,
.woocommerce #content table.cart td.actions .coupon label,
.woocommerce-page #content table.cart td.actions .coupon label {
display: none;
}
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
2013-08-19 12:48:50 +00:00
*zoom: 1;
2013-07-26 14:36:28 +00:00
width: 100%;
}
2013-08-19 14:12:17 +00:00
.woocommerce .cart-collaterals:before,
.woocommerce-page .cart-collaterals:before,
.woocommerce .cart-collaterals:after,
.woocommerce-page .cart-collaterals:after {
content: " ";
display: table;
}
.woocommerce .cart-collaterals:after,
.woocommerce-page .cart-collaterals:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.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%;
2013-08-19 12:48:50 +00:00
*zoom: 1;
2013-07-26 14:36:28 +00:00
clear: right;
float: right;
}
2013-08-19 14:12:17 +00:00
.woocommerce .cart-collaterals .shipping_calculator:before,
.woocommerce-page .cart-collaterals .shipping_calculator:before,
.woocommerce .cart-collaterals .shipping_calculator:after,
.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;
}
2013-07-26 14:36:28 +00:00
.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-1,
.woocommerce-page .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-2 {
width: 47%;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
float: right;
width: 48%;
text-align: right;
}
2013-08-19 12:48:50 +00:00
.woocommerce ul.cart_list li,
.woocommerce-page ul.cart_list li,
.woocommerce ul.product_list_widget li,
.woocommerce-page ul.product_list_widget li {
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce ul.cart_list li:before,
.woocommerce-page ul.cart_list li:before,
.woocommerce ul.product_list_widget li:before,
.woocommerce-page ul.product_list_widget li:before,
.woocommerce ul.cart_list li:after,
.woocommerce-page ul.cart_list li:after,
.woocommerce ul.product_list_widget li:after,
.woocommerce-page ul.product_list_widget li:after {
content: " ";
display: table;
}
.woocommerce ul.cart_list li:after,
.woocommerce-page ul.cart_list li:after,
.woocommerce ul.product_list_widget li:after,
.woocommerce-page ul.product_list_widget li:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.woocommerce ul.cart_list li img,
.woocommerce-page ul.cart_list li img,
.woocommerce ul.product_list_widget li img,
.woocommerce-page ul.product_list_widget li img {
float: right;
height: auto;
}
2013-08-19 12:48:50 +00:00
.woocommerce form .form-row,
.woocommerce-page form .form-row {
*zoom: 1;
2013-07-26 14:36:28 +00:00
}
2013-08-19 14:12:17 +00:00
.woocommerce form .form-row:before,
.woocommerce-page form .form-row:before,
.woocommerce form .form-row:after,
.woocommerce-page form .form-row:after {
content: " ";
display: table;
}
.woocommerce form .form-row:after,
.woocommerce-page form .form-row:after {
clear: both;
}
2013-07-26 14:36:28 +00:00
.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 {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
width: 100%;
}
.woocommerce form .form-row-first,
.woocommerce-page form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-last {
float: left;
width: 47%;
overflow: visible;
}
.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 .terms,
.woocommerce-page #payment .terms {
text-align: right;
padding: 0 1em 0;
}
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
float: right;
}