Basic WooCommerce Integration.

This commit is contained in:
Tiago Noronha 2017-08-01 14:21:13 +01:00
parent f9d4a471e5
commit 27e68252f6
16 changed files with 1683 additions and 517 deletions

21
sass/shop/_checkout.scss Normal file
View file

@ -0,0 +1,21 @@
/**
* Checkout
*/
@media screen and (min-width: 768px) {
.col2-set {
.form-row-first {
float: left;
margin-right: $columns__margin;
}
.form-row-last {
float: right;
margin-right: 0;
}
.form-row-first,
.form-row-last {
@include column-width(2);
}
}
}

275
sass/shop/_components.scss Normal file
View file

@ -0,0 +1,275 @@
/**
* Header cart
*/
.site-header-cart {
position: relative;
margin: 0;
padding: 0;
@include clearfix;
.cart-contents {
text-decoration: none;
.icon {
display: none;
}
}
.widget_shopping_cart {
display: none;
}
.product_list_widget {
margin: 0;
padding: 0;
}
}
/**
* Star rating
*/
.star-rating {
overflow: hidden;
position: relative;
height: 1.618em;
line-height: 1.618;
font-size: 1em;
width: 5.3em;
font-family: 'star';
font-weight: 400;
&:before {
content: "\53\53\53\53\53";
opacity: .25;
float: left;
top: 0;
left: 0;
position: absolute;
}
span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}
span:before {
content: "\53\53\53\53\53";
top: 0;
position: absolute;
left: 0;
color: $color__link;
}
}
p.stars {
a {
position: relative;
height: 1em;
width: 1em;
text-indent: -999em;
display: inline-block;
text-decoration: none;
margin-right: 1px;
font-weight: 400;
&:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
line-height: 1;
font-family: "star";
content: "\53";
color: $color__text-main;
text-indent: 0;
opacity: .25;
}
&:hover {
~ a:before {
content: "\53";
color: $color__text-main;
opacity: .25;
}
}
}
&:hover {
a {
&:before {
content: "\53";
color: $color__link;
opacity: 1;
}
}
}
&.selected {
a.active {
&:before {
content: "\53";
color: $color__link;
opacity: 1;
}
~ a:before {
content: "\53";
color: $color__text-main;
opacity: .25;
}
}
a:not(.active) {
&:before {
content: "\53";
color: $color__link;
opacity: 1;
}
}
}
}
/**
* Tabs
*/
.woocommerce-tabs {
ul.tabs {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
li {
display: block;
margin: 0;
position: relative;
a {
padding: 1em 0;
display: block;
}
}
}
.panel {
h2:first-of-type {
margin-bottom: 1em;
}
}
}
/**
* Password strength meter
*/
.woocommerce-password-strength {
text-align: right;
&.strong {
color: $woocommerce__color-success;
}
&.short {
color: $woocommerce__color-error;
}
&.bad {
color: $woocommerce__color-error;
}
&.good {
color: $woocommerce__color-info;
}
}
/**
* Forms
*/
.form-row {
&.woocommerce-validated {
input.input-text {
box-shadow: inset 2px 0 0 $woocommerce__color-success;
}
}
&.woocommerce-invalid {
input.input-text {
box-shadow: inset 2px 0 0 $woocommerce__color-error;
}
}
}
.required {
color: red;
}
/**
* Notices
*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
@include clearfix;
background-color: $woocommerce__color-success;
clear: both;
}
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
background-color: $woocommerce__color-info;
}
.woocommerce-error {
background-color: $woocommerce__color-error;
}
.demo_store {
position: fixed;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 1em;
background-color: $woocommerce__color-info;
z-index: 9999;
}
@media screen and (min-width: 48em) {
/**
* Header cart
*/
.site-header-cart {
.widget_shopping_cart {
position: absolute;
top: 100%;
width: 100%;
z-index: 999999;
font-size: ms(-1);
left: -999em;
display: block;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.cart-contents {
.icon {
display: inline;
}
}
&:hover,
&.focus {
.widget_shopping_cart {
left: 0;
display: block;
}
}
}
}

63
sass/shop/_products.scss Normal file
View file

@ -0,0 +1,63 @@
/**
* Products
*/
ul.products {
@include clearfix;
margin: 0;
padding: 0;
li.product {
list-style: none;
position: relative;
margin-bottom: 2em;
.woocommerce-loop-product__title {
font-size: 1rem;
}
img {
display: block;
}
.button {
display: block;
}
}
}
@media screen and (min-width: 48em) {
ul.products {
li.product {
@include column-width(3);
float: left;
margin-right: $columns__margin;
&.first {
clear: both;
}
&.last {
margin-right: 0;
}
}
}
.columns-1 {
ul.products {
li.product {
float: none;
width: 100%;
}
}
}
@for $i from 2 through 6 {
.columns-#{$i} {
ul.products {
li.product {
@include column-width( $i );
}
}
}
}
}

View file

@ -0,0 +1,83 @@
/**
* Single Product
*/
.single-product {
div.product {
@include clearfix;
position: relative;
.woocommerce-product-gallery {
position: relative;
.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
display: block;
z-index: 99;
}
.flex-viewport {
margin-bottom: 1em;
}
.flex-control-thumbs {
@include clearfix;
margin: 0;
padding: 0;
li {
list-style: none;
cursor: pointer;
float: left;
img {
opacity: .5;
&.flex-active {
opacity: 1;
}
}
&:hover {
img {
opacity: 1;
}
}
}
}
@for $i from 2 through 5 {
&.woocommerce-product-gallery--columns-#{$i} {
.flex-control-thumbs {
li {
@include column-width($i);
&:nth-child(#{$i}n) {
margin-right: 0;
}
&:nth-child(#{$i}n+1) {
clear: both;
}
}
}
}
}
}
}
}
.stock {
&:empty:before {
display: none;
}
&.in-stock {
color: $woocommerce__color-success;
}
&.out-of-stock {
color: $woocommerce__color-error;
}
}

79
sass/shop/_tables.scss Normal file
View file

@ -0,0 +1,79 @@
/**
* Shop tables
*/
table.shop_table_responsive {
thead {
display: none;
}
tbody {
th {
display: none;
}
}
tr {
td {
display: block;
text-align: right;
clear: both;
&:before {
content: attr(data-title) ': ';
float: left;
}
&.product-remove {
a {
text-align: left;
}
&:before {
display: none;
}
}
&.actions,
&.download-actions {
&:before {
display: none;
}
}
&.download-actions {
.button {
display: block;
text-align: center;
}
}
}
}
}
@media screen and (min-width: 48em) {
table.shop_table_responsive {
thead {
display: table-header-group;
}
tbody {
th {
display: table-cell;
}
}
tr {
th, td {
text-align: left;
}
td {
display: table-cell;
&:before {
display: none;
}
}
}
}
}

64
sass/shop/_widgets.scss Normal file
View file

@ -0,0 +1,64 @@
/**
* WooCommerce Price Filter
*/
.widget_price_filter {
.price_slider {
margin-bottom: 1.5em;
}
.price_slider_amount {
text-align: right;
line-height: 2.4em;
.button {
float: left;
}
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1em;
height: 1em;
cursor: ew-resize;
outline: none;
background: $color__link;
box-sizing: border-box;
margin-top: -.25em;
opacity: 1;
&:last-child {
margin-left: -1em;
}
&:hover,
&.ui-state-active {
box-shadow: 0 0 0 .25em rgba(#000, 0.1);
}
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
display: block;
border: 0;
background: $color__link;
}
.price_slider_wrapper .ui-widget-content {
background: rgba(0,0,0,0.1);
}
.ui-slider-horizontal {
height: .5em;
}
.ui-slider-horizontal .ui-slider-range {
height: 100%;
}
}