woocommerce/assets/css/woocommerce-layout.scss

463 lines
5.2 KiB
SCSS

/**
* woocommerce-layout.scss
* Applies layout to the default WooCommerce frontend design
*/
/**
* Imports
*/
@import "bourbon";
@import "mixins";
@import "variables";
/**
* Styling begins
*/
.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%;
margin-bottom: 1em;
}
a.last {
margin-right: 0;
}
a.first {
clear: both;
}
&.columns-1 {
a {
width: 100%;
margin-right: 0;
float: none;
}
}
&.columns-2 {
a {
width: 48%;
}
}
&.columns-4 {
a {
width: 22.05%;
}
}
&.columns-5 {
a {
width: 16.9%;
}
}
}
div.summary {
float: right;
width: 48%;
}
.woocommerce-tabs {
clear: both;
ul.tabs {
@include menu();
}
}
#reviews {
.comment {
@include mediaright();
}
}
}
/**
* 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;
}
}
}
}
/**
* Twenty Fifteen specific styles
*/
.twentyfifteen {
.t15wc {
padding-left: 7.6923%;
padding-right: 7.6923%;
padding-top: 7.6923%;
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
.page-title {
margin-left: 0;
}
}
}
@media screen and (min-width: 59.6875em) {
.twentyfifteen {
.t15wc {
margin-left: 8.3333%;
margin-right: 8.3333%;
}
}
.single-product {
.twentyfifteen {
.entry-summary {
padding: 0 !important;
}
}
}
}
@media screen and (min-width: 38.75em) {
.twentyfifteen {
.t15wc {
margin-right: 7.6923%;
margin-left: 7.6923%;
margin-top: 8.3333%;
}
}
}