woocommerce/assets/css/woocommerce-layout.scss

725 lines
7.7 KiB
SCSS
Raw Normal View History

2014-11-18 12:52:00 +00:00
/**
* woocommerce-layout.scss
* Applies layout to the default WooCommerce frontend design
*/
/**
* Imports
*/
@import "mixins";
@import "variables";
2013-05-10 12:02:15 +00:00
2014-11-18 12:52:00 +00:00
/**
* Styling begins
*/
.woocommerce,
.woocommerce-page {
2013-05-10 12:02:15 +00:00
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
.button {
float: right;
}
}
/**
* General layout styles
*/
2013-05-10 12:02:15 +00:00
.col2-set {
2014-09-22 17:35:48 +00:00
@include clearfix();
2013-05-10 12:02:15 +00:00
width: 100%;
2013-05-10 12:02:15 +00:00
.col-1 {
float: left;
2013-05-10 12:02:15 +00:00
width: 48%;
}
2013-05-10 12:02:15 +00:00
.col-2 {
float: right;
width: 48%;
}
}
img {
height: auto;
max-width: 100%;
2013-05-10 12:02:15 +00:00
}
/**
* Product page
*/
div.product,
#content div.product {
2013-05-10 12:02:15 +00:00
div.images {
float: left;
2013-05-10 12:02:15 +00:00
width: 48%;
}
2013-05-10 12:02:15 +00:00
div.thumbnails {
2014-09-22 17:35:48 +00:00
@include clearfix();
2013-05-10 12:02:15 +00:00
a {
float: left;
2013-05-10 12:02:15 +00:00
width: 30.75%;
margin-right: 3.8%;
2014-11-17 15:41:21 +00:00
margin-bottom: 1em;
2013-05-10 12:02:15 +00:00
}
2013-05-10 12:02:15 +00:00
a.last {
margin-right: 0;
}
2013-05-10 12:02:15 +00:00
a.first {
clear: both;
2013-05-10 12:02:15 +00:00
}
2014-11-17 15:41:21 +00:00
&.columns-1 {
2014-11-17 15:41:21 +00:00
a {
width: 100%;
margin-right: 0;
float: none;
}
}
&.columns-2 {
2014-11-17 15:41:21 +00:00
a {
width: 48%;
}
}
&.columns-4 {
2014-11-17 15:41:21 +00:00
a {
width: 22.05%;
}
}
&.columns-5 {
2014-11-17 15:41:21 +00:00
a {
width: 16.9%;
}
}
2013-05-10 12:02:15 +00:00
}
2013-05-10 12:02:15 +00:00
div.summary {
float: right;
width: 48%;
2017-11-07 12:11:22 +00:00
clear: none;
2013-05-10 12:02:15 +00:00
}
2013-05-10 15:29:01 +00:00
.woocommerce-tabs {
clear: both;
2014-03-05 09:37:26 +00:00
ul.tabs {
2014-09-22 17:35:48 +00:00
@include menu();
2014-03-05 09:37:26 +00:00
}
2013-05-10 15:29:01 +00:00
}
2013-05-10 15:29:01 +00:00
#reviews {
2013-05-10 15:29:01 +00:00
.comment {
2014-09-22 17:35:48 +00:00
@include mediaright();
2013-05-10 15:29:01 +00:00
}
}
}
/**
* Product loops
*/
2013-05-10 12:02:15 +00:00
ul.products {
clear: both;
2014-09-22 17:35:48 +00:00
@include clearfix();
2013-05-10 12:02:15 +00:00
li.product {
float: left;
2013-05-10 12:02:15 +00:00
margin: 0 3.8% 2.992em 0;
padding: 0;
position: relative;
width: 22.05%;
margin-left: 0;
}
2013-05-10 12:02:15 +00:00
li.first {
clear: both;
2013-05-10 12:02:15 +00:00
}
2013-05-10 12:02:15 +00:00
li.last {
margin-right: 0;
}
}
2017-11-10 17:50:56 +00:00
ul.products {
2017-11-10 17:50:56 +00:00
&.columns-1 {
2017-11-10 17:50:56 +00:00
li.product {
width: 100%;
margin-right: 0;
}
}
2017-11-10 17:50:56 +00:00
&.columns-2 {
2017-11-10 17:50:56 +00:00
li.product {
width: 48%;
}
}
2017-11-10 17:50:56 +00:00
&.columns-3 {
2017-11-10 17:50:56 +00:00
li.product {
width: 30.75%;
}
}
2017-11-10 17:50:56 +00:00
&.columns-5 {
2017-11-10 17:50:56 +00:00
li.product {
width: 16.95%;
}
}
2017-11-10 17:50:56 +00:00
&.columns-6 {
2017-11-10 17:50:56 +00:00
li.product {
width: 13.5%;
}
}
}
2013-08-19 14:12:17 +00:00
&.columns-1 {
2013-08-19 14:12:17 +00:00
ul.products {
2013-08-19 14:12:17 +00:00
li.product {
width: 100%;
margin-right: 0;
2013-08-19 14:12:17 +00:00
}
}
}
&.columns-2 {
2013-08-19 14:12:17 +00:00
ul.products {
2013-08-19 14:12:17 +00:00
li.product {
width: 48%;
2013-08-19 14:12:17 +00:00
}
}
}
&.columns-3 {
2013-08-19 14:12:17 +00:00
ul.products {
2013-08-19 14:12:17 +00:00
li.product {
width: 30.75%;
2013-08-19 14:12:17 +00:00
}
}
}
&.columns-5 {
2013-08-19 14:12:17 +00:00
ul.products {
2013-08-19 14:12:17 +00:00
li.product {
width: 16.95%;
2013-08-19 14:12:17 +00:00
}
}
}
&.columns-6 {
2013-08-19 14:12:17 +00:00
ul.products {
2013-08-19 14:12:17 +00:00
li.product {
width: 13.5%;
2013-08-19 14:12:17 +00:00
}
}
}
2013-05-10 12:02:15 +00:00
.woocommerce-result-count {
float: left;
}
2013-05-10 12:02:15 +00:00
.woocommerce-ordering {
float: right;
}
.woocommerce-pagination {
2013-05-10 12:02:15 +00:00
ul.page-numbers {
2014-09-22 17:35:48 +00:00
@include menu();
2013-05-10 12:02:15 +00:00
}
}
/**
* Cart page
*/
table.cart,
#content table.cart {
2013-05-10 12:02:15 +00:00
img {
height: auto;
2013-05-10 12:02:15 +00:00
}
2013-05-15 16:47:27 +00:00
td.actions {
text-align: right;
2013-05-15 16:47:27 +00:00
.input-text {
width: 80px;
2013-05-15 16:47:27 +00:00
}
2013-05-15 16:47:27 +00:00
.coupon {
float: left;
2013-05-15 16:47:27 +00:00
label {
display: none;
2013-05-15 16:47:27 +00:00
}
}
}
2013-05-10 12:02:15 +00:00
}
.cart-collaterals {
2014-09-22 17:35:48 +00:00
@include clearfix();
2013-05-10 12:02:15 +00:00
width: 100%;
2013-05-10 12:02:15 +00:00
.related {
width: 30.75%;
float: left;
2013-05-10 12:02:15 +00:00
}
.cross-sells {
width: 48%;
float: left;
2013-05-10 12:02:15 +00:00
ul.products {
float: none;
2013-05-10 12:02:15 +00:00
li {
width: 48%;
}
}
}
2013-05-10 12:02:15 +00:00
.shipping_calculator {
width: 48%;
2014-09-22 17:35:48 +00:00
@include clearfix();
2013-05-10 12:02:15 +00:00
clear: right;
float: right;
2013-05-10 12:02:15 +00:00
.col2-set {
.col-1,
.col-2 {
2013-05-10 12:02:15 +00:00
width: 47%;
}
}
}
2013-05-10 12:02:15 +00:00
.cart_totals {
float: right;
width: 48%;
}
}
/**
* Cart sidebar
*/
ul.cart_list,
ul.product_list_widget {
2013-05-10 15:29:01 +00:00
li {
2014-09-22 17:35:48 +00:00
@include mediaright();
2013-05-10 15:29:01 +00:00
}
}
/**
* Forms
*/
2013-05-10 12:02:15 +00:00
form {
2013-05-13 15:02:18 +00:00
.form-row {
2014-09-22 17:35:48 +00:00
@include clearfix();
2013-05-13 15:02:18 +00:00
label {
display: block;
2013-05-13 15:02:18 +00:00
&.checkbox {
display: inline;
}
}
2013-05-13 15:02:18 +00:00
select {
width: 100%;
}
2013-05-13 15:02:18 +00:00
.input-text {
box-sizing: border-box;
width: 100%;
2013-05-13 15:02:18 +00:00
}
}
.form-row-first,
.form-row-last {
2013-05-10 12:02:15 +00:00
width: 47%;
overflow: visible;
}
.form-row-first {
float: left;
/*rtl:raw:
float: right;
*/
}
2013-05-10 12:02:15 +00:00
.form-row-last {
float: right;
}
2013-05-10 12:02:15 +00:00
.form-row-wide {
clear: both;
}
.password-input {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
input[type="password"] {
padding-right: 2.5rem;
}
/* Hide the Edge "reveal password" native button */
input::-ms-reveal {
display: none;
}
}
.show-password-input {
position: absolute;
right: 0.7em;
top: 0.7em;
cursor: pointer;
}
.show-password-input::after {
@include iconafter( "\e010" ); // Icon styles and glyph
}
.show-password-input.display-password::after {
color: #e8e8e8;
}
2013-05-10 12:02:15 +00:00
}
2013-05-13 15:02:18 +00:00
#payment {
2013-05-13 15:02:18 +00:00
.form-row {
2013-05-13 15:02:18 +00:00
select {
width: auto;
2013-05-13 15:02:18 +00:00
}
}
.wc-terms-and-conditions,
.terms {
text-align: left;
padding: 0 1em 0 0;
float: left;
2013-05-15 16:47:27 +00:00
}
2013-05-15 16:47:27 +00:00
#place_order {
float: right;
}
2013-05-13 15:02:18 +00:00
}
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
@include clearfix();
}
.woocommerce-terms-and-conditions {
margin-bottom: 1.618em;
padding: 1.618em;
}
2017-03-17 18:39:17 +00:00
/**
* oEmbeds
*/
.woocommerce-oembed {
position: relative;
}
2013-05-10 12:02:15 +00:00
}
.woocommerce-account {
.woocommerce-MyAccount-navigation {
float: left;
width: 30%;
}
.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;
}
}
&.right-sidebar {
#content.twentyeleven {
margin: 0 7.6%;
width: 58.4%;
float: left;
}
}
}
/**
* Twenty Fourteen specific styles
*/
2013-12-03 16:53:22 +00:00
.twentyfourteen {
2013-12-03 16:53:22 +00:00
.tfwc {
padding: 12px 10px 0;
max-width: 474px;
margin: 0 auto;
2014-01-08 16:05:39 +00:00
.product .entry-summary {
padding: 0 !important;
2013-12-03 16:53:22 +00:00
margin: 0 0 1.618em !important;
}
div.product.hentry.has-post-thumbnail {
margin-top: 0;
}
2013-12-03 16:53:22 +00:00
}
}
@media screen and (min-width: 673px) {
2013-12-03 16:53:22 +00:00
.twentyfourteen {
2013-12-03 16:53:22 +00:00
.tfwc {
padding-right: 30px;
padding-left: 30px;
}
}
}
@media screen and (min-width: 1040px) {
2013-12-03 16:53:22 +00:00
.twentyfourteen {
2013-12-03 16:53:22 +00:00
.tfwc {
padding-right: 15px;
padding-left: 15px;
}
}
}
@media screen and (min-width: 1110px) {
2013-12-03 16:53:22 +00:00
.twentyfourteen {
2013-12-03 16:53:22 +00:00
.tfwc {
padding-right: 30px;
padding-left: 30px;
}
}
}
@media screen and (min-width: 1218px) {
2013-12-03 16:53:22 +00:00
.twentyfourteen {
2013-12-03 16:53:22 +00:00
.tfwc {
margin-right: 54px;
}
}
2013-12-09 09:55:11 +00:00
.full-width {
2013-12-09 09:55:11 +00:00
.twentyfourteen {
2013-12-09 09:55:11 +00:00
.tfwc {
margin-right: auto;
}
}
}
}
2014-11-21 10:29:47 +00:00
/**
* Twenty Fifteen specific styles
*/
2014-11-21 10:51:08 +00:00
.twentyfifteen {
2014-11-21 10:51:08 +00:00
.t15wc {
padding-left: 7.6923%;
padding-right: 7.6923%;
padding-top: 7.6923%;
2015-01-26 11:06:31 +00:00
margin-bottom: 7.6923%;
2014-11-21 10:51:08 +00:00
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
.page-title {
margin-left: 0;
}
}
}
2015-01-26 11:06:31 +00:00
@media screen and (min-width: 38.75em) {
2015-01-26 11:06:31 +00:00
.twentyfifteen {
2015-01-26 11:06:31 +00:00
.t15wc {
margin-right: 7.6923%;
margin-left: 7.6923%;
margin-top: 8.3333%;
}
}
}
2014-11-21 10:29:47 +00:00
@media screen and (min-width: 59.6875em) {
2014-11-21 10:29:47 +00:00
.twentyfifteen {
2014-11-21 10:29:47 +00:00
.t15wc {
2014-11-21 10:51:08 +00:00
margin-left: 8.3333%;
margin-right: 8.3333%;
2015-01-26 11:06:31 +00:00
padding: 10%;
2014-11-21 10:51:08 +00:00
}
}
2014-11-21 10:29:47 +00:00
2014-11-21 10:51:08 +00:00
.single-product {
2014-11-21 10:51:08 +00:00
.twentyfifteen {
2014-11-21 10:51:08 +00:00
.entry-summary {
padding: 0 !important;
2014-11-21 10:29:47 +00:00
}
}
}
}
2015-11-23 11:55:50 +00:00
/**
* Twenty Sixteen specific styles
*/
.twentysixteen {
2015-11-23 11:55:50 +00:00
.site-main {
margin-right: 7.6923%;
margin-left: 7.6923%;
}
.entry-summary {
margin-right: 0;
margin-left: 0;
}
}
#content {
2015-11-23 11:55:50 +00:00
.twentysixteen {
2015-11-23 11:55:50 +00:00
div.product {
2015-11-23 11:55:50 +00:00
div.images,
div.summary {
width: 46.42857%;
}
}
}
}
@media screen and (min-width: 44.375em) {
2015-11-23 11:55:50 +00:00
.twentysixteen {
2015-11-23 11:55:50 +00:00
.site-main {
margin-right: 23.0769%;
}
}
}
@media screen and (min-width: 56.875em) {
2015-11-23 11:55:50 +00:00
.twentysixteen {
2015-11-23 11:55:50 +00:00
.site-main {
margin-right: 0;
margin-left: 0;
}
}
.no-sidebar {
2015-11-23 11:55:50 +00:00
.twentysixteen {
2015-11-23 11:55:50 +00:00
.site-main {
margin-right: 15%;
margin-left: 15%;
}
.entry-summary {
margin-right: 0;
margin-left: 0;
}
}
}
}
2016-02-26 11:43:24 +00:00
/**
* RTL styles.
*/
.rtl {
.woocommerce,
.woocommerce-page {
2016-02-26 11:43:24 +00:00
.col2-set {
2016-02-26 11:43:24 +00:00
.col-1 {
float: right;
}
2016-02-26 11:43:24 +00:00
.col-2 {
float: left;
}
}
}
}