rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #1191 from Automattic/woocommerce-support 

Add basic WooCommerce Integration
This commit is contained in:
David A. Kennedy 2017-08-31 12:49:18 -04:00 committed by GitHub
parent 9bf12e5851 196ee77755
commit 67cdccbb67
15 changed files with 1552 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
functions.php
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';
}

264
inc/woocommerce.php Normal file
View File

@ -0,0 +1,264 @@
<?php
/**
* WooCommerce Compatibility File
*
* @link https://woocommerce.com/
*
* @package _s
*/
/**
* WooCommerce setup function.
*
* @link https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
* @link https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)-in-3.0.0
*
* @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' );
$font_path = WC()->plugin_url() . '/assets/fonts/';
$inline_font = '@font-face {
font-family: "star";
src: url("' . $font_path . 'star.eot");
src: url("' . $font_path . 'star.eot?#iefix") format("embedded-opentype"),
url("' . $font_path . 'star.woff") format("woff"),
url("' . $font_path . 'star.ttf") format("truetype"),
url("' . $font_path . 'star.svg#star") format("svg");
font-weight: normal;
font-style: normal;
}';
wp_add_inline_style( '_s-woocommerce-style', $inline_font );
}
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.
*
* @link 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 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 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 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 ) {
$defaults = array(
'posts_per_page' => 3,
'columns' => 3,
);
$args = wp_parse_args( $defaults, $args );
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-' . absint( $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' );
/**
* Sample implementation of the WooCommerce Mini Cart.
*
* You can add the WooCommerce Mini Cart to header.php like so ...
*
<?php
if ( function_exists( '_s_woocommerce_header_cart' ) ) {
_s_woocommerce_header_cart();
}
?>
*/
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 ) {
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' ); ?>">
<?php /* translators: number of items in the mini cart. */ ?>
<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>
</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
$instance = array(
'title' => '',
);
the_widget( 'WC_Widget_Cart', $instance );
?>
</li>
</ul>
<?php
}
}

2
sass/media/_galleries.scss
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 );
} }
} }
} }

5
sass/mixins/_mixins-master.scss
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 ) ) / $numberColumns );
}

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

264
sass/shop/_components.scss Normal file
View File

@ -0,0 +1,264 @@
/**
* Header cart
*/
.site-header-cart {
position: relative;
margin: 0;
padding: 0;
@include clearfix;
.cart-contents {
text-decoration: 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;
left: -999em;
display: block;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
&: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 );
}
}
}
}
}

83
sass/shop/_single-product.scss Normal file
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%;
}
}

13
sass/variables-site/_columns.scss Normal file
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%;

1
sass/variables-site/_variables-site.scss
View File

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

48
sass/woocommerce.scss Normal file
View File

@ -0,0 +1,48 @@
/*
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";
/**
* 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";

158
style.css
View File

@ -1,4 +1,4 @@
/* /*!
Theme Name: _s Theme Name: _s
Theme URI: http://underscores.me/ Theme URI: http://underscores.me/
Author: Automattic Author: Automattic
@ -19,7 +19,6 @@ Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/ Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/ */
/*-------------------------------------------------------------- /*--------------------------------------------------------------
>>> TABLE OF CONTENTS: >>> TABLE OF CONTENTS:
---------------------------------------------------------------- ----------------------------------------------------------------
@ -42,7 +41,6 @@ Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
## Captions ## Captions
## Galleries ## Galleries
--------------------------------------------------------------*/ --------------------------------------------------------------*/
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Normalize # Normalize
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@ -273,12 +271,7 @@ textarea {
line-height: 1.5; line-height: 1.5;
} }
h1, h1, h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
clear: both; clear: both;
} }
@ -286,10 +279,7 @@ p {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
dfn, dfn, cite, em, i {
cite,
em,
i {
font-style: italic; font-style: italic;
} }
@ -313,23 +303,18 @@ pre {
padding: 1.6em; padding: 1.6em;
} }
code, code, kbd, tt, var {
kbd,
tt,
var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px; font-size: 15px;
font-size: 0.9375rem; font-size: 0.9375rem;
} }
abbr, abbr, acronym {
acronym {
border-bottom: 1px dotted #666; border-bottom: 1px dotted #666;
cursor: help; cursor: help;
} }
mark, mark, ins {
ins {
background: #fff9c0; background: #fff9c0;
text-decoration: none; text-decoration: none;
} }
@ -347,26 +332,24 @@ html {
*, *,
*:before, *:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ *:after {
/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit; box-sizing: inherit;
} }
body { body {
background: #fff; /* Fallback for when there is no custom background color defined. */ background: #fff;
/* Fallback for when there is no custom background color defined. */
} }
blockquote:before, blockquote, q {
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" ""; quotes: "" "";
} }
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
hr { hr {
background-color: #ccc; background-color: #ccc;
border: 0; border: 0;
@ -374,8 +357,7 @@ hr {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
ul, ul, ol {
ol {
margin: 0 0 1.5em 3em; margin: 0 0 1.5em 3em;
} }
@ -402,12 +384,15 @@ dd {
} }
img { img {
height: auto; /* Make sure images are scaled correctly. */ height: auto;
max-width: 100%; /* Adhere to container width. */ /* Make sure images are scaled correctly. */
max-width: 100%;
/* Adhere to container width. */
} }
figure { figure {
margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ margin: 1em 0;
/* Extra wide images within figure tags don't overflow the content area. */
} }
table { table {
@ -426,7 +411,7 @@ input[type="submit"] {
border-color: #ccc #ccc #bbb; border-color: #ccc #ccc #bbb;
border-radius: 3px; border-radius: 3px;
background: #e6e6e6; background: #e6e6e6;
color: rgba(0, 0, 0, .8); color: rgba(0, 0, 0, 0.8);
font-size: 12px; font-size: 12px;
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1; line-height: 1;
@ -440,14 +425,13 @@ input[type="submit"]:hover {
border-color: #ccc #bbb #aaa; border-color: #ccc #bbb #aaa;
} }
button:focus, button:active, button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active, input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active, input[type="reset"]:active,
input[type="submit"]:active { input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb; border-color: #aaa #bbb #bbb;
} }
@ -473,10 +457,6 @@ textarea {
padding: 3px; padding: 3px;
} }
select {
border: 1px solid #ccc;
}
input[type="text"]:focus, input[type="text"]:focus,
input[type="email"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="url"]:focus,
@ -496,6 +476,10 @@ textarea:focus {
color: #111; color: #111;
} }
select {
border: 1px solid #ccc;
}
textarea { textarea {
width: 100%; width: 100%;
} }
@ -514,9 +498,7 @@ a:visited {
color: purple; color: purple;
} }
a:hover, a:hover, a:focus, a:active {
a:focus,
a:active {
color: midnightblue; color: midnightblue;
} }
@ -524,8 +506,7 @@ a:focus {
outline: thin dotted; outline: thin dotted;
} }
a:hover, a:hover, a:active {
a:active {
outline: 0; outline: 0;
} }
@ -546,16 +527,6 @@ a:active {
padding-left: 0; padding-left: 0;
} }
.main-navigation li {
float: left;
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.main-navigation ul ul { .main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left; float: left;
@ -570,40 +541,28 @@ a:active {
top: 0; top: 0;
} }
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation ul ul a { .main-navigation ul ul a {
width: 200px; width: 200px;
} }
.main-navigation ul ul li {
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul, .main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul { .main-navigation ul li.focus > ul {
left: auto; left: auto;
} }
.main-navigation ul ul li:hover > ul, .main-navigation li {
.main-navigation ul ul li.focus > ul { float: left;
left: 100%; position: relative;
} }
.main-navigation .current_page_item > a, .main-navigation a {
.main-navigation .current-menu-item > a, display: block;
.main-navigation .current_page_ancestor > a, text-decoration: none;
.main-navigation .current-menu-ancestor > a {
} }
/* Small menu. */ /* Small menu. */
@ -621,9 +580,9 @@ a:active {
} }
} }
.site-main .comment-navigation, .site-main .comment-navigation, .site-main
.site-main .posts-navigation, .posts-navigation, .site-main
.site-main .post-navigation { .post-navigation {
margin: 0 0 1.5em; margin: 0 0 1.5em;
overflow: hidden; overflow: hidden;
} }
@ -653,7 +612,8 @@ a:active {
height: 1px; height: 1px;
width: 1px; width: 1px;
overflow: hidden; overflow: hidden;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ word-wrap: normal !important;
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
} }
.screen-reader-text:focus { .screen-reader-text:focus {
@ -673,7 +633,8 @@ a:active {
text-decoration: none; text-decoration: none;
top: 5px; top: 5px;
width: auto; width: auto;
z-index: 100000; /* Above WP toolbar. */ z-index: 100000;
/* Above WP toolbar. */
} }
/* Do not show the outline on the skip link target. */ /* Do not show the outline on the skip link target. */
@ -737,9 +698,9 @@ a:active {
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.widget { .widget {
margin: 0 0 1.5em; margin: 0 0 1.5em;
/* Make sure select elements fit in widgets. */
} }
/* Make sure select elements fit in widgets. */
.widget select { .widget select {
max-width: 100%; max-width: 100%;
} }
@ -788,8 +749,9 @@ a:active {
# Infinite scroll # Infinite scroll
--------------------------------------------------------------*/ --------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */ /* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ .infinite-scroll.neverending .site-footer {
/* Theme Footer (when set to scrolling) */
display: none; display: none;
} }
@ -863,7 +825,7 @@ object {
} }
.gallery-columns-3 .gallery-item { .gallery-columns-3 .gallery-item {
max-width: 33.33333%; max-width: 33.33%;
} }
.gallery-columns-4 .gallery-item { .gallery-columns-4 .gallery-item {
@ -875,11 +837,11 @@ object {
} }
.gallery-columns-6 .gallery-item { .gallery-columns-6 .gallery-item {
max-width: 16.66667%; max-width: 16.66%;
} }
.gallery-columns-7 .gallery-item { .gallery-columns-7 .gallery-item {
max-width: 14.28571%; max-width: 14.28%;
} }
.gallery-columns-8 .gallery-item { .gallery-columns-8 .gallery-item {
@ -887,7 +849,7 @@ object {
} }
.gallery-columns-9 .gallery-item { .gallery-columns-9 .gallery-item {
max-width: 11.11111%; max-width: 11.11%;
} }
.gallery-caption { .gallery-caption {

578
woocommerce.css Normal file
View File

@ -0,0 +1,578 @@
/*
Theme Name: _s
WooCommerce styles override
*/
/**
* WooCommerce color variables
*/
/**
* Imports
*/
/**
* 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.1%;
}
.columns-3 ul.products li.product {
width: 30.7966666667%;
}
.columns-4 ul.products li.product {
width: 22.15%;
}
.columns-5 ul.products li.product {
width: 16.96%;
}
.columns-6 ul.products li.product {
width: 13.4933333333%;
}
}
/**
* 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.1%;
}
.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: 22.15%;
}
.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: 16.96%;
}
.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.1%;
}
}
/**
* 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 .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;
left: -999em;
display: block;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.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%;
}