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

View File

@ -155,3 +155,10 @@ require get_template_directory() . '/inc/customizer.php';
if ( defined( 'JETPACK__VERSION' ) ) { if ( defined( 'JETPACK__VERSION' ) ) {
require get_template_directory() . '/inc/jetpack.php'; require get_template_directory() . '/inc/jetpack.php';
} }
/**
* Load WooCommerce compatibility file.
*/
if ( class_exists( 'WooCommerce' ) ) {
require get_template_directory() . '/inc/woocommerce.php';
}

View File

@ -8,6 +8,12 @@
* *
* @link https://developer.wordpress.org/themes/functionality/custom-headers/ * @link https://developer.wordpress.org/themes/functionality/custom-headers/
* *
* You can add the WooCommerce Mini Cart to header.php like so ...
*
if ( function_exists( '_s_woocommerce_header_cart' ) ) {
_s_woocommerce_header_cart();
}
*
* @package _s * @package _s
*/ */

238
inc/woocommerce.php Normal file
View File

@ -0,0 +1,238 @@
<?php
/**
* WooCommerce Compatibility File
*
* @link https://woocommerce.com/
*
* @package _s
*/
/**
* WooCommerce setup function.
*
* See: https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
*
* @return void
*/
function _s_woocommerce_setup() {
add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', '_s_woocommerce_setup' );
/**
* WooCommerce specific scripts & stylesheets
*
* @return void
*/
function _s_woocommerce_scripts() {
wp_enqueue_style( '_s-woocommerce-style', get_template_directory_uri() . '/woocommerce.css' );
}
add_action( 'wp_enqueue_scripts', '_s_woocommerce_scripts' );
/**
* Disable the default WooCommerce stylesheet
*
* Removing the default WooCommerce stylesheet and enqueing your own will
* protect you during WooCommerce core updates.
*
* See: https://docs.woocommerce.com/document/disable-the-default-stylesheet/
*/
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
/**
* Add 'woocommerce-active' class to the body tag
*
* @param array $classes css classes applied to the body tag.
* @return array $classes modified to include 'woocommerce-active' class
*/
function _s_woocommerce_active_body_class( $classes ) {
$classes[] = 'woocommerce-active';
return $classes;
}
add_filter( 'body_class', '_s_woocommerce_active_body_class' );
/**
* Products per page
*
* @return integer number of products
*/
function _s_woocommerce_products_per_page() {
return intval( apply_filters( '_s_woocommerce_products_per_page', 12 ) );
}
add_filter( 'loop_shop_per_page', '_s_woocommerce_products_per_page' );
/**
* Product gallery thumnbail columns
*
* @return integer number of columns
*/
function _s_woocommerce_thumbnail_columns() {
return intval( apply_filters( '_s_woocommerce_product_thumbnail_columns', 4 ) );
}
add_filter( 'woocommerce_product_thumbnails_columns', '_s_woocommerce_thumbnail_columns' );
/**
* Default loop columns on product archives
*
* @return integer products per row
*/
function _s_woocommerce_loop_columns() {
return intval( apply_filters( '_s_woocommerce_loop_columns', 3 ) );
}
add_filter( 'loop_shop_columns', '_s_woocommerce_loop_columns' );
/**
* Related Products Args
*
* @param array $args related products args.
* @return array $args related products args
*/
function _s_woocommerce_related_products_args( $args ) {
$args = apply_filters( '_s_woocommerce_related_products_args', array(
'posts_per_page' => 3,
'columns' => 3,
) );
return $args;
}
add_filter( 'woocommerce_output_related_products_args', '_s_woocommerce_related_products_args' );
if ( ! function_exists( '_s_woocommerce_product_columns_wrapper' ) ) {
/**
* Product columns wrapper
*
* @return void
*/
function _s_woocommerce_product_columns_wrapper() {
$columns = _s_woocommerce_loop_columns();
echo '<div class="columns-' . $columns . '">';
}
}
add_action( 'woocommerce_before_shop_loop', '_s_woocommerce_product_columns_wrapper', 40 );
if ( ! function_exists( '_s_woocommerce_product_columns_wrapper_close' ) ) {
/**
* Product columns wrapper close
*
* @return void
*/
function _s_woocommerce_product_columns_wrapper_close() {
echo '</div>';
}
}
add_action( 'woocommerce_after_shop_loop', '_s_woocommerce_product_columns_wrapper_close', 40 );
/**
* Remove default WooCommerce wrapper
*/
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
if ( ! function_exists( '_s_woocommerce_wrapper_before' ) ) {
/**
* Before Content
* Wraps all WooCommerce content in wrappers which match the theme markup
*
* @return void
*/
function _s_woocommerce_wrapper_before() {
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
}
}
add_action( 'woocommerce_before_main_content', '_s_woocommerce_wrapper_before' );
if ( ! function_exists( '_s_woocommerce_wrapper_after' ) ) {
/**
* After Content
* Closes the wrapping divs
*
* @return void
*/
function _s_woocommerce_wrapper_after() {
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
}
}
add_action( 'woocommerce_after_main_content', '_s_woocommerce_wrapper_after' );
if ( ! function_exists( '_s_woocommerce_cart_link_fragment' ) ) {
/**
* Cart Fragments
* Ensure cart contents update when products are added to the cart via AJAX
*
* @param array $fragments Fragments to refresh via AJAX.
* @return array Fragments to refresh via AJAX
*/
function _s_woocommerce_cart_link_fragment( $fragments ) {
global $woocommerce;
ob_start();
_s_woocommerce_cart_link();
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
}
add_filter( 'woocommerce_add_to_cart_fragments', '_s_woocommerce_cart_link_fragment' );
if ( ! function_exists( '_s_woocommerce_cart_link' ) ) {
/**
* Cart Link
* Displayed a link to the cart including the number of items present and the cart total
*
* @return void
*/
function _s_woocommerce_cart_link() {
?>
<a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', '_s' ); ?>">
<span class="amount"><?php echo wp_kses_data( WC()->cart->get_cart_subtotal() ); ?></span> <span class="count"><?php echo wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), '_s' ), WC()->cart->get_cart_contents_count() ) );?></span><?php echo _s_get_svg( array( 'icon' => 'expand' ) ); ?>
</a>
<?php
}
}
if ( ! function_exists( '_s_woocommerce_header_cart' ) ) {
/**
* Display Header Cart
*
* @return void
*/
function _s_woocommerce_header_cart() {
if ( is_cart() ) {
$class = 'current-menu-item';
} else {
$class = '';
}
?>
<ul id="site-header-cart" class="site-header-cart">
<li class="<?php echo esc_attr( $class ); ?>">
<?php _s_woocommerce_cart_link(); ?>
</li>
<li>
<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
</li>
</ul>
<?php
}
}

View File

@ -11,7 +11,7 @@
// Loops to enumerate the classes for gallery columns. // Loops to enumerate the classes for gallery columns.
@for $i from 2 through 9 { @for $i from 2 through 9 {
.gallery-columns-#{$i} & { .gallery-columns-#{$i} & {
max-width: ( 100% / $i ); max-width: map-get( $columns, $i );
} }
} }
} }

View File

@ -22,3 +22,8 @@
@mixin clearfix-after() { @mixin clearfix-after() {
clear: both; clear: both;
} }
// Column width with margin
@mixin column-width($numberColumns: 3) {
width: map-get( $columns, $numberColumns ) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / 3 );
}

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%;
}
}

View File

@ -0,0 +1,13 @@
$columns: (
1: 100%,
2: 50%,
3: 33.33%,
4: 25%,
5: 20%,
6: 16.66%,
7: 14.28%,
8: 12.5%,
9: 11.11%
);
$columns__margin: 3.8%;

View File

@ -1,3 +1,4 @@
@import "colors"; @import "colors";
@import "typography"; @import "typography";
@import "structure"; @import "structure";
@import "columns";

62
sass/woocommerce.scss Normal file
View File

@ -0,0 +1,62 @@
/*
Theme Name: _s
WooCommerce styles override
*/
/**
* WooCommerce color variables
*/
$woocommerce__color-error: #e2401c;
$woocommerce__color-success: #0f834d;
$woocommerce__color-info: #3D9CD2;
/**
* Imports
*/
@import "variables-site/variables-site";
@import "mixins/mixins-master";
/**
* Fonts
*/
@font-face {
font-family: 'star';
src: url('../../plugins/woocommerce/assets/fonts/star.eot');
src: url('../../plugins/woocommerce/assets/fonts/star.eot?#iefix') format('embedded-opentype'),
url('../../plugins/woocommerce/assets/fonts/star.woff') format('woff'),
url('../../plugins/woocommerce/assets/fonts/star.ttf') format('truetype'),
url('../../plugins/woocommerce/assets/fonts/star.svg#star') format('svg');
font-weight: normal;
font-style: normal;
}
/**
* Shop tables
*/
@import "shop/tables";
/**
* Products
*/
@import "shop/products";
/**
* Single product
*/
@import "shop/single-product";
/**
* Checkout
*/
@import "shop/checkout";
/**
* General WooCommerce components
*/
@import "shop/components";
/**
* WooCommerce widgets
*/
@import "shop/widgets";

834
style.css

File diff suppressed because it is too large Load Diff

445
woocommerce.css Normal file
View File

@ -0,0 +1,445 @@
/*
Theme Name: _s
WooCommerce styles override
*/
/**
* WooCommerce color variables
*/
/**
* Imports
*/
/**
* Fonts
*/
@font-face {
font-family: 'star';
src: url("../../plugins/woocommerce/assets/fonts/star.eot");
src: url("../../plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("../../plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("../../plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("../../plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
font-weight: normal;
font-style: normal; }
/**
* Shop tables
*/
/**
* Shop tables
*/
table.shop_table_responsive thead {
display: none; }
table.shop_table_responsive tbody th {
display: none; }
table.shop_table_responsive tr td {
display: block;
text-align: right;
clear: both; }
table.shop_table_responsive tr td:before {
content: attr(data-title) ": ";
float: left; }
table.shop_table_responsive tr td.product-remove a {
text-align: left; }
table.shop_table_responsive tr td.product-remove:before {
display: none; }
table.shop_table_responsive tr td.actions:before, table.shop_table_responsive tr td.download-actions:before {
display: none; }
table.shop_table_responsive tr td.download-actions .button {
display: block;
text-align: center; }
@media screen and (min-width: 48em) {
table.shop_table_responsive thead {
display: table-header-group; }
table.shop_table_responsive tbody th {
display: table-cell; }
table.shop_table_responsive tr th, table.shop_table_responsive tr td {
text-align: left; }
table.shop_table_responsive tr td {
display: table-cell; }
table.shop_table_responsive tr td:before {
display: none; } }
/**
* Products
*/
/**
* Products
*/
ul.products {
content: "";
display: table;
table-layout: fixed;
margin: 0;
padding: 0; }
ul.products li.product {
list-style: none;
position: relative;
margin-bottom: 2em; }
ul.products li.product .woocommerce-loop-product__title {
font-size: 1rem; }
ul.products li.product img {
display: block; }
ul.products li.product .button {
display: block; }
@media screen and (min-width: 48em) {
ul.products li.product {
width: 30.7966666667%;
float: left;
margin-right: 3.8%; }
ul.products li.product.first {
clear: both; }
ul.products li.product.last {
margin-right: 0; }
.columns-1 ul.products li.product {
float: none;
width: 100%; }
.columns-2 ul.products li.product {
width: 48.7333333333%; }
.columns-3 ul.products li.product {
width: 30.7966666667%; }
.columns-4 ul.products li.product {
width: 21.2%; }
.columns-5 ul.products li.product {
width: 14.9333333333%; }
.columns-6 ul.products li.product {
width: 10.3266666667%; } }
/**
* Single product
*/
/**
* Single Product
*/
.single-product div.product {
content: "";
display: table;
table-layout: fixed;
position: relative; }
.single-product div.product .woocommerce-product-gallery {
position: relative; }
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
display: block;
z-index: 99; }
.single-product div.product .woocommerce-product-gallery .flex-viewport {
margin-bottom: 1em; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
content: "";
display: table;
table-layout: fixed;
margin: 0;
padding: 0; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
cursor: pointer;
float: left; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
opacity: .5; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
opacity: 1; }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
opacity: 1; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
width: 48.7333333333%; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
margin-right: 0; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
clear: both; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 30.7966666667%; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
margin-right: 0; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
clear: both; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 21.2%; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
margin-right: 0; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
clear: both; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 14.9333333333%; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
margin-right: 0; }
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
clear: both; }
.stock:empty:before {
display: none; }
.stock.in-stock {
color: #0f834d; }
.stock.out-of-stock {
color: #e2401c; }
/**
* Checkout
*/
/**
* Checkout
*/
@media screen and (min-width: 768px) {
.col2-set .form-row-first {
float: left;
margin-right: 3.8%; }
.col2-set .form-row-last {
float: right;
margin-right: 0; }
.col2-set .form-row-first,
.col2-set .form-row-last {
width: 48.7333333333%; } }
/**
* General WooCommerce components
*/
/**
* Header cart
*/
.site-header-cart {
position: relative;
margin: 0;
padding: 0;
content: "";
display: table;
table-layout: fixed; }
.site-header-cart .cart-contents {
text-decoration: none; }
.site-header-cart .cart-contents .icon {
display: none; }
.site-header-cart .widget_shopping_cart {
display: none; }
.site-header-cart .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; }
.star-rating:before {
content: "\53\53\53\53\53";
opacity: .25;
float: left;
top: 0;
left: 0;
position: absolute; }
.star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em; }
.star-rating span:before {
content: "\53\53\53\53\53";
top: 0;
position: absolute;
left: 0;
color: royalblue; }
p.stars a {
position: relative;
height: 1em;
width: 1em;
text-indent: -999em;
display: inline-block;
text-decoration: none;
margin-right: 1px;
font-weight: 400; }
p.stars a:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
line-height: 1;
font-family: "star";
content: "\53";
color: #404040;
text-indent: 0;
opacity: .25; }
p.stars a:hover ~ a:before {
content: "\53";
color: #404040;
opacity: .25; }
p.stars:hover a:before {
content: "\53";
color: royalblue;
opacity: 1; }
p.stars.selected a.active:before {
content: "\53";
color: royalblue;
opacity: 1; }
p.stars.selected a.active ~ a:before {
content: "\53";
color: #404040;
opacity: .25; }
p.stars.selected a:not(.active):before {
content: "\53";
color: royalblue;
opacity: 1; }
/**
* Tabs
*/
.woocommerce-tabs ul.tabs {
list-style: none;
margin: 0;
padding: 0;
text-align: left; }
.woocommerce-tabs ul.tabs li {
display: block;
margin: 0;
position: relative; }
.woocommerce-tabs ul.tabs li a {
padding: 1em 0;
display: block; }
.woocommerce-tabs .panel h2:first-of-type {
margin-bottom: 1em; }
/**
* Password strength meter
*/
.woocommerce-password-strength {
text-align: right; }
.woocommerce-password-strength.strong {
color: #0f834d; }
.woocommerce-password-strength.short {
color: #e2401c; }
.woocommerce-password-strength.bad {
color: #e2401c; }
.woocommerce-password-strength.good {
color: #3D9CD2; }
/**
* Forms
*/
.form-row.woocommerce-validated input.input-text {
box-shadow: inset 2px 0 0 #0f834d; }
.form-row.woocommerce-invalid input.input-text {
box-shadow: inset 2px 0 0 #e2401c; }
.required {
color: red; }
/**
* Notices
*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
content: "";
display: table;
table-layout: fixed;
background-color: #0f834d;
clear: both; }
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
background-color: #3D9CD2; }
.woocommerce-error {
background-color: #e2401c; }
.demo_store {
position: fixed;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 1em;
background-color: #3D9CD2;
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); }
.site-header-cart .cart-contents .icon {
display: inline; }
.site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart {
left: 0;
display: block; } }
/**
* WooCommerce widgets
*/
/**
* WooCommerce Price Filter
*/
.widget_price_filter .price_slider {
margin-bottom: 1.5em; }
.widget_price_filter .price_slider_amount {
text-align: right;
line-height: 2.4em; }
.widget_price_filter .price_slider_amount .button {
float: left; }
.widget_price_filter .ui-slider {
position: relative;
text-align: left; }
.widget_price_filter .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1em;
height: 1em;
cursor: ew-resize;
outline: none;
background: royalblue;
box-sizing: border-box;
margin-top: -.25em;
opacity: 1; }
.widget_price_filter .ui-slider .ui-slider-handle:last-child {
margin-left: -1em; }
.widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1); }
.widget_price_filter .ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
display: block;
border: 0;
background: royalblue; }
.widget_price_filter .price_slider_wrapper .ui-widget-content {
background: rgba(0, 0, 0, 0.1); }
.widget_price_filter .ui-slider-horizontal {
height: .5em; }
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
height: 100%; }