woocommerce/assets/css/twenty-seventeen.css

715 lines
20 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@charset "UTF-8";
/**
* Twenty Seventeen integration styles
*/
/**
* Fonts
*/
@font-face {
font-family: 'star';
src: url("../fonts/star.eot");
src: url("../fonts/star.eot?#iefix") format("embedded-opentype"), url("../fonts/star.woff") format("woff"), url("../fonts/star.ttf") format("truetype"), url("../fonts/star.svg#star") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'WooCommerce';
src: url("../fonts/WooCommerce.eot");
src: url("../fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("../fonts/WooCommerce.woff") format("woff"), url("../fonts/WooCommerce.ttf") format("truetype"), url("../fonts/WooCommerce.svg#WooCommerce") format("svg");
font-weight: normal;
font-style: normal; }
/**
* Mixins
*/
/**
* Global elements
*/
.woocommerce-breadcrumb {
padding-bottom: 2em;
margin-bottom: 4em;
border-bottom: 1px solid #eee;
font-size: 13px;
font-size: 0.8125rem; }
.woocommerce-breadcrumb a {
box-shadow: 0 1px 0 #0f0f0f;
-webkit-transition: box-shadow ease-in-out 130ms;
-moz-transition: box-shadow ease-in-out 130ms;
transition: box-shadow ease-in-out 130ms; }
.woocommerce-breadcrumb a:hover {
box-shadow: 0 3px 0 #0f0f0f; }
.woocommerce-pagination {
padding-top: 2em;
margin-top: 4em;
border-top: 1px solid #eee;
font-size: 13px;
font-size: 0.8125rem; }
.woocommerce-pagination ul.page-numbers {
padding: 0;
display: block; }
.woocommerce-pagination span.page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination .next.page-numbers,
.woocommerce-pagination .prev.page-numbers {
padding: 0.5em 1em;
background: #ddd;
display: inline-block;
font-size: 1em;
float: none;
line-height: 1.5;
border-radius: 2px;
-webkit-transition: background-color ease-in-out 0.3s;
-moz-transition: background-color ease-in-out 0.3s;
transition: background-color ease-in-out 0.3s; }
.woocommerce-pagination span.page-numbers {
background-color: #fff; }
.woocommerce-pagination a.page-numbers:hover {
background-color: #767676;
color: #fff; }
.onsale {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: .5em 1em;
font-size: 13px;
font-size: 0.8125rem;
text-transform: uppercase;
font-weight: 800; }
.price del {
opacity: .5; }
.required {
color: firebrick; }
.required[title] {
border-bottom: none; }
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
margin-bottom: 1.5em;
padding: 2em;
background: #eee; }
.woocommerce-message {
background: teal;
color: #fff; }
.woocommerce-error {
background: firebrick;
color: #fff; }
.woocommerce-info {
background: royalblue;
color: #fff; }
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
color: #fff;
box-shadow: 0 1px 0 white !important;
-webkit-transition: box-shadow ease-in-out 130ms;
-moz-transition: box-shadow ease-in-out 130ms;
transition: box-shadow ease-in-out 130ms; }
.woocommerce-message a:hover,
.woocommerce-error a:hover,
.woocommerce-info a:hover {
color: #fff !important;
box-shadow: 0 3px 0 white !important; }
.woocommerce-store-notice {
background: royalblue;
color: #fff;
padding: 1em;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 999; }
.admin-bar .woocommerce-store-notice {
top: 32px; }
.woocommerce-store-notice__dismiss-link {
float: right;
color: #fff; }
.woocommerce-store-notice__dismiss-link:hover {
text-decoration: underline;
color: #fff; }
/**
* Shop page
*/
.woocommerce-result-count {
padding: .75em 0; }
/**
* Products
*/
ul.products li.product {
list-style: none; }
ul.products li.product .price,
ul.products li.product .star-rating {
display: block;
margin-bottom: .75em; }
ul.products li.product .button {
box-shadow: 0 1px 0 #0f0f0f;
-webkit-transition: box-shadow ease-in-out 130ms;
-moz-transition: box-shadow ease-in-out 130ms;
transition: box-shadow ease-in-out 130ms; }
ul.products li.product .button:hover {
box-shadow: 0 3px 0 #0f0f0f; }
ul.products li.product .button.loading {
opacity: .5; }
ul.products li.product .added_to_cart {
box-shadow: 0 1px 0 #0f0f0f;
-webkit-transition: box-shadow ease-in-out 130ms;
-moz-transition: box-shadow ease-in-out 130ms;
transition: box-shadow ease-in-out 130ms;
margin-left: .5em; }
ul.products li.product .added_to_cart:hover {
box-shadow: 0 3px 0 #0f0f0f; }
.star-rating {
overflow: hidden;
position: relative;
height: 1em;
line-height: 1;
font-size: 1em;
width: 5.4em;
font-family: 'star'; }
.star-rating::before {
content: '\73\73\73\73\73';
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; }
.woocommerce-loop-product__title {
font-size: 13px;
font-size: 0.8125rem;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.15em; }
a.remove {
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
text-align: center;
border-radius: 100%;
box-shadow: none !important;
-webkit-box-shadow: none !important;
border: 1px solid #000; }
a.remove:hover {
background: #000;
color: #fff !important; }
dl.variation, .wc-item-meta {
list-style: none outside; }
dl.variation dt, dl.variation .wc-item-meta-label, .wc-item-meta dt, .wc-item-meta .wc-item-meta-label {
float: left;
clear: both;
margin-right: .25em;
display: inline-block;
list-style: none outside; }
dl.variation dd, .wc-item-meta dd {
margin: 0; }
dl.variation p, dl.variation:last-child, .wc-item-meta p, .wc-item-meta:last-child {
margin-bottom: 0; }
/**
* Single product
*/
.single-product div.product {
position: relative; }
.single-product .single-featured-image-header {
display: none; }
.single-product .summary {
margin-bottom: 3em; }
.single-product .summary p.price {
margin-bottom: 2em; }
.single-product .woocommerce-product-rating {
margin-bottom: 2em;
line-height: 1; }
.single-product .woocommerce-product-rating .star-rating {
float: left;
margin-right: .25em; }
.single-product form.cart .quantity {
float: left;
margin-right: .5em; }
.single-product form.cart input {
width: 5em; }
.single-product .woocommerce-variation-add-to-cart .button {
padding-top: .72em;
padding-bottom: .72em; }
.single-product .woocommerce-variation-add-to-cart .button.disabled {
opacity: 0.2; }
table.variations label {
margin: 0; }
table.variations select {
margin-right: .5em; }
.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em; }
.woocommerce-product-gallery figure {
margin: 0; }
.woocommerce-product-gallery .zoomImg {
background-color: #fff; }
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block; }
.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer; }
.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5; }
.woocommerce-product-gallery .flex-control-thumbs img:hover, .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
opacity: 1; }
.woocommerce-product-gallery img {
display: block; }
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%; }
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
clear: left; }
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%; }
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
clear: left; }
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%; }
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
clear: left; }
.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99; }
.woocommerce-tabs {
margin-bottom: 2em; }
.woocommerce-tabs li {
margin-right: 1em; }
.woocommerce-tabs li.active a {
box-shadow: 0 3px 0 #0f0f0f; }
.woocommerce-tabs a {
box-shadow: 0 1px 0 #0f0f0f;
-webkit-transition: box-shadow ease-in-out 130ms;
-moz-transition: box-shadow ease-in-out 130ms;
transition: box-shadow ease-in-out 130ms; }
.woocommerce-tabs a:hover {
box-shadow: 0 3px 0 #0f0f0f; }
.woocommerce-tabs #comments {
padding-top: 0; }
.woocommerce-tabs .comment-reply-title {
font-size: 22px;
font-size: 1.375rem;
font-weight: 300;
line-height: 1.4;
margin: 0 0 0.75em;
display: block; }
.woocommerce-tabs #reviews li.review,
.woocommerce-tabs #reviews li.comment {
list-style: none;
margin-right: 0;
margin-bottom: 2.5em; }
.woocommerce-tabs #reviews li.review .avatar,
.woocommerce-tabs #reviews li.comment .avatar {
max-height: 36px;
width: auto;
float: right; }
.woocommerce-tabs #reviews li.review p.meta,
.woocommerce-tabs #reviews li.comment p.meta {
margin-bottom: .5em; }
.woocommerce-tabs #reviews p.stars a {
position: relative;
height: 1em;
width: 1em;
text-indent: -999em;
display: inline-block;
text-decoration: none;
box-shadow: none; }
.woocommerce-tabs #reviews p.stars a::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
line-height: 1;
font-family: 'WooCommerce';
content: '\e021';
text-indent: 0; }
.woocommerce-tabs #reviews p.stars a:hover ~ a::before {
content: '\e021'; }
.woocommerce-tabs #reviews p.stars:hover a::before {
content: '\e020'; }
.woocommerce-tabs #reviews p.stars.selected a.active::before {
content: '\e020'; }
.woocommerce-tabs #reviews p.stars.selected a.active ~ a::before {
content: '\e021'; }
.woocommerce-tabs #reviews p.stars.selected a:not(.active)::before {
content: '\e020'; }
/**
* Photoswipe
* 1. These styles are required to overwrite default theme button styles (Twenty Twelve adds gradients via background-image).
*/
button.pswp__button,
button.pswp__button:hover,
button.pswp__button--arrow--left::before,
button.pswp__button--arrow--right::before {
background-color: transparent !important;
/* 1 */ }
button.pswp__button--close:hover {
background-position: 0 -44px; }
button.pswp__button--zoom:hover {
background-position: -88px 0; }
/**
* Widgets
*/
.widget .product_list_widget,
.site-footer .widget .product_list_widget {
margin-bottom: 1.5em; }
.widget .product_list_widget a,
.site-footer .widget .product_list_widget a {
display: block;
box-shadow: none; }
.widget .product_list_widget a:hover,
.site-footer .widget .product_list_widget a:hover {
box-shadow: none; }
.widget .product_list_widget li,
.site-footer .widget .product_list_widget li {
padding: 1.5em 0; }
.widget .product_list_widget li a.remove,
.site-footer .widget .product_list_widget li a.remove {
float: right;
margin-top: 2px; }
.widget .product_list_widget img,
.site-footer .widget .product_list_widget img {
display: none; }
.widget_shopping_cart .buttons a {
display: inline-block;
margin: 0 .5em 0 0; }
.widget_layered_nav .chosen:before {
content: "×";
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
text-align: center;
border-radius: 100%;
border: 1px solid black;
margin-right: .25em; }
.widget_price_filter .price_slider {
margin-bottom: 1em; }
.widget_price_filter .price_slider_amount {
text-align: right;
line-height: 2.4;
font-size: 0.8751em; }
.widget_price_filter .price_slider_amount .button {
float: left;
padding: .4em 1em; }
.widget_price_filter .ui-slider {
position: relative;
text-align: left;
margin-left: 0.5em;
margin-right: 0.5em; }
.widget_price_filter .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1em;
height: 1em;
background-color: #000;
border-radius: 1em;
cursor: ew-resize;
outline: none;
top: -0.3em;
margin-left: -0.5em; }
.widget_price_filter .ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: 0.7em;
display: block;
border: 0;
border-radius: 1em;
background-color: #000; }
.widget_price_filter .price_slider_wrapper .ui-widget-content {
border-radius: 1em;
background-color: #666;
border: 0; }
.widget_price_filter .ui-slider-horizontal {
height: 0.5em; }
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%; }
.widget_price_filter .ui-slider-horizontal .ui-slider-range-min {
left: -1px; }
.widget_price_filter .ui-slider-horizontal .ui-slider-range-max {
right: -1px; }
.widget_rating_filter li {
text-align: right; }
.widget_rating_filter li .star-rating {
float: left;
margin-top: .3em; }
.widget_product_search form {
position: relative; }
.widget_product_search .search-field {
padding-right: 100px; }
.widget_product_search input[type=submit] {
position: absolute;
top: .5em;
right: .5em;
padding-left: 1em;
padding-right: 1em; }
/**
* Account section
*/
.woocommerce-account .woocommerce-MyAccount-navigation {
float: right;
width: 25%;
border-top: 1px solid #ddd; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
list-style: none;
padding: .5em 0;
border-bottom: 1px solid #ddd; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
box-shadow: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
box-shadow: 0 3px 0 #0f0f0f; }
.woocommerce-account .woocommerce-MyAccount-navigation li:before {
content: "→";
display: inline-block;
margin-right: .25em;
color: #ddd; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
box-shadow: 0 3px 0 #0f0f0f; }
.woocommerce-account .woocommerce-MyAccount-content {
float: left; }
/**
* Cart
*/
.woocommerce-cart-form td {
padding: 1em .5em; }
.woocommerce-cart-form img {
max-width: 42px;
height: auto;
display: block; }
.woocommerce-cart-form dl.variation {
margin-top: 0; }
.woocommerce-cart-form dl.variation p, .woocommerce-cart-form dl.variation:last-child {
margin-bottom: 0; }
.woocommerce-cart-form .button {
padding: 1.2em 2em; }
.woocommerce-cart-form .actions .input-text {
width: 130px !important;
float: left;
margin-right: .25em; }
.woocommerce-cart-form .quantity input {
width: 4em; }
#shipping_method {
list-style: none;
margin-top: 1em; }
#shipping_method li {
margin-bottom: .5em; }
#shipping_method li input {
float: left; }
#shipping_method li label {
line-height: 1.15; }
.checkout-button {
display: block;
padding: 1em 2em;
border: 2px solid #000;
text-align: center;
font-weight: 800;
box-shadow: none !important;
-webkit-box-shadow: none !important; }
.checkout-button:hover {
box-shadow: none !important;
-webkit-box-shadow: none !important;
border-color: #999; }
.checkout-button:after {
content: "→"; }
/**
* Checkout
*/
#ship-to-different-address label {
font-weight: 300;
cursor: pointer; }
#ship-to-different-address label span {
position: relative;
display: block; }
#ship-to-different-address label span:before {
content: "";
display: block;
height: 16px;
width: 30px;
border: 2px solid #bbb;
background: #bbb;
border-radius: 13em;
box-sizing: content-box;
-webkit-transition: all, ease-in-out, 0.3s;
-moz-transition: all, ease-in-out, 0.3s;
transition: all, ease-in-out, 0.3s;
position: absolute;
top: 4px;
right: 0; }
#ship-to-different-address label span:after {
content: "";
display: block;
width: 14px;
height: 14px;
background: white;
position: absolute;
top: 7px;
right: 17px;
border-radius: 13em;
-webkit-transition: all, ease-in-out, 0.3s;
-moz-transition: all, ease-in-out, 0.3s;
transition: all, ease-in-out, 0.3s; }
#ship-to-different-address label input[type=checkbox] {
display: none; }
#ship-to-different-address label input[type=checkbox]:checked + span:after {
right: 3px; }
#ship-to-different-address label input[type=checkbox]:checked + span:before {
border-color: #000;
background: #000; }
.woocommerce-terms-and-conditions {
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.05); }
.woocommerce-checkout .select2-choice,
.woocommerce-checkout .select2-choice:hover {
box-shadow: none !important;
-webkit-box-shadow: none !important; }
.woocommerce-checkout .select2-choice {
padding: .7em 0 .7em .7em; }
.woocommerce-checkout-review-order-table td {
padding: 1em .5em; }
.woocommerce-checkout-review-order-table dl.variation {
margin: 0; }
.woocommerce-checkout-review-order-table dl.variation p {
margin: 0; }
.wc_payment_method {
list-style: none;
border-bottom: 1px solid #ddd; }
.wc_payment_method .payment_box {
padding: 2em;
background: #eee; }
.wc_payment_method .payment_box ul:last-of-type,
.wc_payment_method .payment_box ol:last-of-type {
margin-bottom: 0; }
.wc_payment_method .payment_box fieldset {
padding: 1.5em;
padding-bottom: 0;
border: 0;
background: #f6f6f6; }
.wc_payment_method .payment_box li {
list-style: none; }
.wc_payment_method .payment_box p:last-child {
margin-bottom: 0; }
.wc_payment_method > label:first-of-type {
margin: 1em 0; }
.wc_payment_method > label:first-of-type img {
max-height: 24px;
max-width: 200px;
float: right; }
.wc_payment_method label {
cursor: pointer; }
.wc_payment_method input[type=radio] {
display: none; }
.wc_payment_method input[type=radio] + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid white;
box-shadow: 0 0 0 2px black;
background: white;
margin-left: 4px;
margin-right: .5em;
border-radius: 100%;
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px); }
.wc_payment_method input[type=radio]:checked + label:before {
background: black; }
.colors-dark .checkout-button {
border: 2px solid #555; }
.colors-dark .checkout-button:hover {
border-color: #fff; }
.colors-dark .wc_payment_method .payment_box {
background: #333; }
.colors-dark .select2-container--default .select2-results .select2-results__options {
background: #333; }
.colors-dark .select2-container--default .select2-results .select2-results__option[aria-selected="true"] {
color: #333; }
.colors-dark .select2-container--default .select2-selection--single {
background-color: #333;
border: 1px solid #555; }
.colors-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #ccc; }
/**
* Layout stuff
*/
@media screen and (min-width: 48em) {
.has-sidebar.woocommerce-page:not(.error404) #primary {
width: 74%; }
.has-sidebar.woocommerce-page:not(.error404) #secondary {
width: 20%; }
body.page-two-column.woocommerce-cart:not(.archive) #primary .entry-header,
body.page-two-column.woocommerce-checkout:not(.archive) #primary .entry-header,
body.page-two-column.woocommerce-account:not(.archive) #primary .entry-header {
width: 16%; }
body.page-two-column.woocommerce-cart:not(.archive) #primary .entry-content,
body.page-two-column.woocommerce-checkout:not(.archive) #primary .entry-content,
body.page-two-column.woocommerce-account:not(.archive) #primary .entry-content {
width: 78%; } }