745 lines
9.8 KiB
SCSS
745 lines
9.8 KiB
SCSS
/**
|
|
* woocommerce-layout.scss
|
|
* Applies layout to the default WooCommerce frontend design
|
|
*/
|
|
|
|
/**
|
|
* Imports
|
|
*/
|
|
@import "mixins";
|
|
@import "variables";
|
|
|
|
/**
|
|
* Styling begins
|
|
*/
|
|
.woocommerce,
|
|
.woocommerce-page {
|
|
|
|
.woocommerce-message,
|
|
.woocommerce-error,
|
|
.woocommerce-info {
|
|
|
|
.button {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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%;
|
|
clear: none;
|
|
}
|
|
|
|
.woocommerce-tabs {
|
|
clear: both;
|
|
|
|
ul.tabs {
|
|
|
|
@include menu();
|
|
}
|
|
}
|
|
|
|
#reviews {
|
|
|
|
.comment {
|
|
|
|
@include mediaright();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product loops
|
|
*/
|
|
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;
|
|
}
|
|
}
|
|
|
|
ul.products {
|
|
|
|
&.columns-1 {
|
|
|
|
li.product {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&.columns-2 {
|
|
|
|
li.product {
|
|
width: 48%;
|
|
}
|
|
}
|
|
|
|
&.columns-3 {
|
|
|
|
li.product {
|
|
width: 30.75%;
|
|
}
|
|
}
|
|
|
|
&.columns-5 {
|
|
|
|
li.product {
|
|
width: 16.95%;
|
|
}
|
|
}
|
|
|
|
&.columns-6 {
|
|
|
|
li.product {
|
|
width: 13.5%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.form-row-first,
|
|
.form-row-last {
|
|
width: 47%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.form-row-first {
|
|
float: left;
|
|
|
|
/*rtl:raw:
|
|
float: right;
|
|
*/
|
|
}
|
|
|
|
.form-row-last {
|
|
float: right;
|
|
}
|
|
|
|
.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 {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
border: 0;
|
|
color: var(--wc-form-color-text, #000);
|
|
cursor: pointer;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
right: 0.7em;
|
|
text-decoration: none;
|
|
top: 50%;
|
|
transform: translateY( -50% );
|
|
-moz-osx-font-smoothing: inherit;
|
|
-webkit-appearance: none;
|
|
-webkit-font-smoothing: inherit;
|
|
}
|
|
|
|
.show-password-input::before {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');
|
|
content: '';
|
|
display: block;
|
|
height: 22px;
|
|
width: 22px;
|
|
}
|
|
|
|
.show-password-input.display-password::before {
|
|
background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
|
|
}
|
|
}
|
|
|
|
#payment {
|
|
|
|
.form-row {
|
|
|
|
select {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.wc-terms-and-conditions,
|
|
.terms {
|
|
text-align: left;
|
|
padding: 0 1em 0 0;
|
|
float: left;
|
|
}
|
|
|
|
#place_order {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.woocommerce-billing-fields,
|
|
.woocommerce-shipping-fields {
|
|
|
|
@include clearfix();
|
|
}
|
|
|
|
.woocommerce-terms-and-conditions {
|
|
margin-bottom: 1.618em;
|
|
padding: 1.618em;
|
|
}
|
|
|
|
/**
|
|
* oEmbeds
|
|
*/
|
|
.woocommerce-oembed {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.woocommerce-account {
|
|
|
|
.woocommerce-MyAccount-navigation {
|
|
float: left;
|
|
width: 30%;
|
|
}
|
|
|
|
.woocommerce-MyAccount-content {
|
|
float: right;
|
|
width: 68%;
|
|
|
|
mark {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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);
|
|
|
|
.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%;
|
|
}
|
|
|
|
.entry-summary {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#content {
|
|
|
|
.twentysixteen {
|
|
|
|
div.product {
|
|
|
|
div.images,
|
|
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%;
|
|
}
|
|
|
|
.entry-summary {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* RTL styles.
|
|
*/
|
|
.rtl {
|
|
|
|
.woocommerce,
|
|
.woocommerce-page {
|
|
|
|
.col2-set {
|
|
|
|
.col-1 {
|
|
float: right;
|
|
}
|
|
|
|
.col-2 {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
}
|