Created
November 23, 2015 19:19
-
-
Save jlavoie13/81d102842f38f5cc2f65 to your computer and use it in GitHub Desktop.
WooCommerce 2.4.10 SCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************************************************** | |
Site Name: | |
Author: | |
Stylesheet: Responsive WooCommerce Styles | |
******************************************************************/ | |
// Imports | |
@import "variables"; | |
@import "mixins"; | |
@import "widgets"; | |
@import "reviews"; | |
//@import "unused"; | |
/** | |
* Globals | |
*/ | |
p.demo_store { | |
display: none; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
margin: 0; | |
width: 100%; | |
font-size: 1em; | |
padding: 1em 0; | |
text-align: center; | |
background-color: $primary; | |
color: $primarytext; | |
z-index: 99998; | |
box-shadow: 0 1px 1em rgba(0,0,0,0.2); | |
} | |
.admin-bar { | |
p.demo_store { | |
top: 32px; | |
} | |
} | |
/** | |
* General Styles | |
*/ | |
.woocommerce { | |
.blockUI.blockOverlay { | |
position: relative; | |
@include loader(); | |
} | |
.loader { | |
@include loader(); | |
} | |
mark { | |
background: none; | |
color: inherit; | |
font-weight: 400; | |
} | |
/** | |
* Messaging | |
*/ | |
.woocommerce-message, | |
.woocommerce-error, | |
.woocommerce-info { | |
position: relative; | |
padding: 1em 2em 1em 3.5em; | |
margin: 0 0 2em; | |
position: relative; | |
background-color: #f5f6f0; | |
color: $secondarytext; | |
border-top: 3px solid $primary; | |
list-style: none outside; | |
@include clearfix(); | |
width: auto; | |
&:before { | |
display: inline-block; | |
position: absolute; | |
top: 1em; | |
left: 1.5em; | |
} | |
.button { | |
float: right; | |
margin-bottom: 0.25em; | |
margin-left: 0.45em; | |
font-weight: 400; | |
} | |
li { | |
list-style: none outside; | |
padding-left: 0; | |
margin-left: 0; | |
margin-bottom: 0; | |
} | |
} | |
.woocommerce-message, | |
.woocommerce-error { | |
&:before { | |
font-family: "WooCommerce"; | |
} | |
} | |
.woocommerce-message { | |
border-top-color: $color__light-green; | |
&:before { | |
content: "\e015"; | |
color: $color__light-green; | |
} | |
} | |
.woocommerce-info { | |
border-top-color: $color__link; | |
&:before { | |
color: $color__link; | |
font-family: "FontAwesome"; | |
content: "\f18c"; | |
} | |
} | |
.woocommerce-error { | |
border-top-color: #b81c23; | |
&:before { | |
content: "\e016"; | |
color: #b81c23; | |
} | |
} | |
small.note { | |
display: block; | |
color: $subtext; | |
font-size: .857em; | |
margin-top: 10px; | |
} | |
.quantity { | |
.qty { | |
width: 50px; | |
text-align: center; | |
} | |
} | |
span.onsale { | |
min-height: 3.236em; | |
min-width: 3.6em; | |
padding: 0.202em; | |
font-size: 1em; | |
font-weight: 700; | |
position: absolute; | |
text-align: center; | |
line-height: 3.236; | |
top: -0.5em; | |
left: -0.5em; | |
margin: 0; | |
border-radius: 100%; | |
background-color: $highlight; | |
color: $highlightext; | |
font-size: 0.857em; | |
z-index: 1; | |
-webkit-font-smoothing: antialiased; | |
} | |
p.stock { | |
&.in-stock { | |
font-size: 0.875em; | |
font-weight: 700; | |
} | |
&.out-of-stock { | |
display: inline-block; | |
text-align: center; | |
text-transform: uppercase; | |
margin: 0; | |
padding: 0 1em; | |
font-weight: 600; | |
line-height: 42px; | |
height: 42px; | |
color: #999; | |
background-color: #DDD; | |
cursor: not-allowed; | |
} | |
} | |
.woocommerce-result-count { | |
margin: 3em 0 0.5em; | |
font-weight: 300; | |
font-size: 0.875em; | |
} | |
.woocommerce-ordering { | |
margin: 0 0 2em; | |
select { | |
vertical-align: top; | |
} | |
} | |
/** | |
* Buttons | |
*/ | |
a.button, | |
button.button, | |
input.button, | |
#respond input#submit { | |
font-size: 100%; | |
margin: 0; | |
line-height: 42px; | |
height: 42px; | |
cursor: pointer; | |
position: relative; | |
font-family: inherit; | |
text-decoration: none; | |
overflow: visible; | |
padding: 0 1em; | |
font-weight: 600; | |
border-radius: 0; | |
left: auto; | |
text-align: center; | |
text-transform: uppercase; | |
color: $secondarytext; | |
background-color: $secondary; | |
border: 0; | |
white-space: nowrap; | |
display: inline-block; | |
background-image: none; | |
box-shadow: none; | |
-webkit-box-shadow: none; | |
text-shadow: none; | |
@include transition(all 0.25s ease-in-out); | |
&:focus { | |
outline: none; | |
} | |
&.loading { | |
opacity: 0.25; | |
padding-right: 2.618em; | |
&:after { | |
font-family: "WooCommerce"; | |
content: "\e01c"; | |
vertical-align: top; | |
-webkit-font-smoothing: antialiased; | |
font-weight: 400; | |
position: absolute; | |
top: .618em; | |
right: 1em; | |
-webkit-animation: spin 2s linear infinite; | |
-moz-animation: spin 2s linear infinite; | |
animation: spin 2s linear infinite; | |
} | |
} | |
&.added { | |
&:after { | |
font-family: 'WooCommerce'; | |
content: "\e017"; | |
margin-left: .53em; | |
vertical-align: bottom; | |
} | |
} | |
&:hover, | |
&:focus { | |
background-color: $secondary - #111; | |
text-decoration: none; | |
background-image: none; | |
color: $secondarytext; | |
} | |
&.alt, | |
&.wc-forward { | |
background-color: $primary; | |
color: $primarytext; | |
-webkit-font-smoothing: antialiased; | |
&:hover, | |
&:focus { | |
background-color: darken($primary, 10%); | |
color: $primarytext; | |
} | |
&.disabled, | |
&:disabled, | |
&:disabled[disabled], | |
&.disabled:hover, | |
&:disabled:hover, | |
&:disabled[disabled]:hover { | |
background-color: $primary; | |
color: $primarytext; | |
} | |
} | |
&:disabled, | |
&.disabled, | |
&:disabled[disabled] { | |
color: inherit; | |
cursor: not-allowed; | |
opacity: 0.5; | |
&:hover { | |
color: inherit; | |
background-color: $secondary; | |
} | |
} | |
} | |
.cart .button, | |
.cart input.button { | |
float: none; | |
} | |
.single_add_to_cart_button, | |
p.stock.out-of-stock { | |
width: 70%; | |
max-width: 200px; | |
} | |
a.added_to_cart { | |
padding-top: .5em; | |
white-space: nowrap; | |
display: inline-block; | |
} | |
a.remove { | |
display: block; | |
font-size: 1.5em; | |
height: 1em; | |
width: 1em; | |
text-align: center; | |
line-height: 1; | |
border-radius: 100%; | |
color: red !important; | |
text-decoration: none; | |
font-weight: 700; | |
border: 0; | |
&:hover { | |
color: #fff !important; | |
background: red; | |
} | |
} | |
a.checkout-button, | |
#place_order { | |
height: 60px; | |
line-height: 60px; | |
font-size: 1.25em; | |
} | |
#place_order { | |
padding: 0 2em; | |
} | |
} | |
/** | |
* Elements | |
*/ | |
.woocommerce, | |
.woocommerce-page { | |
/** | |
* Tables | |
*/ | |
table {} | |
.shop_table { | |
th { | |
font-weight: 700; | |
padding: 9px 12px; | |
} | |
td { | |
padding: 6px 12px; | |
vertical-align: middle; | |
small { | |
font-weight: normal; | |
} | |
} | |
tfoot td, | |
tfoot th, | |
tbody th { | |
font-weight: 700; | |
} | |
} | |
table.cart { | |
td.actions { | |
.coupon { | |
label { | |
display: none; | |
} | |
} | |
} | |
td.product-thumbnail { | |
img { | |
max-height: 80px; | |
} | |
} | |
} | |
table.order_details { | |
tr.order_item { | |
.product-name, | |
.product-total { | |
border-top: 0; | |
border-bottom: 0; | |
} | |
.product-name { | |
border-right: 0; | |
} | |
} | |
} | |
div.product table.cart { | |
.product-thumbnail { | |
min-width: 32px; | |
} | |
img { | |
width: 32px; | |
box-shadow: none; | |
} | |
th, | |
td { | |
vertical-align: middle; | |
} | |
td.actions { | |
.coupon { | |
.input-text { | |
float: left; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
border: 1px solid darken( $secondary, 10% ); | |
padding: 6px 6px 5px; | |
margin: 0 4px 0 0; | |
outline: 0; | |
line-height: 1; | |
} | |
} | |
} | |
input { | |
margin: 0; | |
vertical-align: middle; | |
line-height: 1; | |
} | |
} | |
.shop_table_responsive {} | |
.group_table { | |
td.label { | |
padding-right: 1em; | |
padding-left: 1em; | |
} | |
td { | |
vertical-align: top; | |
padding-bottom: .5em; | |
border: 0; | |
} | |
} | |
.shop_attributes { | |
border: 0; | |
border-top: 1px dotted rgba(0,0,0,0.1); | |
margin-bottom: 1.618em; | |
width: 100%; | |
th { | |
width: 150px; | |
font-weight: 700; | |
padding: 8px; | |
border-top: 0; | |
border-bottom: 1px dotted rgba(0,0,0,0.1); | |
margin: 0; | |
line-height: 1.5; | |
} | |
td { | |
font-style: italic; | |
padding: 0; | |
border-top: 0; | |
border-bottom: 1px dotted rgba(0,0,0,0.1); | |
margin: 0; | |
line-height: 1.5; | |
p { | |
margin: 0; | |
padding: 8px 0; | |
} | |
} | |
.alt td, | |
.alt th { | |
background: rgba(0,0,0,0.025); | |
} | |
} | |
.cart_totals table { | |
th { | |
border-right: 0; | |
} | |
td { | |
border-left: 0; | |
} | |
} | |
.woocommerce-checkout-review-order-table {} | |
table.my_account_orders { | |
margin-bottom: 2em; | |
.order-actions { | |
.button { | |
margin: .125em 0 .125em .25em; | |
height: 35px; | |
line-height: 35px; | |
} | |
} | |
} | |
table.order_details { | |
margin-bottom: 2em; | |
} | |
.customer_details {} | |
td.product-name { | |
dl.variation { | |
margin: 0; | |
} | |
.variation_description { | |
color: #787878; | |
font-size: 0.875em; | |
&:before { | |
content: " - "; | |
} | |
} | |
dl.variation { | |
@include clearfix(); | |
dt, | |
dd { | |
display: inline-block; | |
float: left; | |
margin-bottom: 1em; | |
} | |
dt { | |
font-weight: 700; | |
padding: 0 0 0.25em 0; | |
margin: 0 5px 0 0; | |
clear: left; | |
} | |
dd { | |
font-size: 1em; | |
padding: 0 0 0.25em 0; | |
margin-bottom: 0; | |
p:last-child { | |
margin-bottom: 0; | |
} | |
} | |
&:only-of-type { | |
dd { | |
p { | |
margin-top: 0; | |
} | |
} | |
} | |
} | |
p.backorder_notification { | |
font-size: 0.83em; | |
} | |
} | |
td.product-quantity { | |
min-width: 80px; | |
} | |
/** | |
* Forms | |
*/ | |
form { | |
.form-row { | |
margin: 0 0 15px; | |
label.hidden { | |
visibility: hidden; | |
} | |
label.inline { | |
display: inline; | |
} | |
.required { | |
color: red; | |
font-weight: 700; | |
border: 0; | |
} | |
.input-checkbox { | |
display: inline; | |
margin: -2px 8px 0 0; | |
text-align: center; | |
vertical-align: middle; | |
} | |
textarea { | |
height: 4em; | |
line-height: 1.5; | |
display: block; | |
} | |
&.woocommerce-invalid { | |
.select2-container .select2-choice, | |
input.input-text { | |
border-color: $red; | |
} | |
select { | |
outline: 1px ridge $red; | |
} | |
} | |
&.woocommerce-validated { | |
.select2-container .select2-choice, | |
input.input-text { | |
border-color: $green - #111; | |
} | |
select { | |
outline: 1px ridge $green - #111; | |
} | |
} | |
} | |
} | |
form.login, | |
form.checkout_coupon, | |
form.register { | |
border: 1px solid #E6E6E6; | |
margin: 2em 0; | |
text-align: left; | |
} | |
form.login, | |
form.register { | |
padding: 0 1em; | |
} | |
form.login { | |
p:not(.form-row) { | |
font-size: 0.9em; | |
font-weight: 300; | |
} | |
.button { | |
margin-bottom: 0.5em; | |
} | |
.lost_password { | |
margin-top: 0; | |
} | |
input[type="checkbox"] { | |
margin-right: 8px; | |
} | |
} | |
form.checkout_coupon { | |
padding: 1em; | |
.form-row { | |
margin-bottom: 0; | |
} | |
.button { | |
width: 100%; | |
} | |
} | |
/** | |
* Lists | |
*/ | |
ul#shipping_method { | |
list-style: none outside; | |
margin: 0; | |
padding: 0; | |
li { | |
margin: 0; | |
padding: 0.25em 0; | |
list-style: none outside; | |
} | |
.amount { | |
font-weight: 700; | |
} | |
input[type="radio"], | |
input[type="checkbox"] { | |
margin-right: 6px; | |
} | |
} | |
/** | |
* Product loops | |
*/ | |
.products ul, | |
ul.products { | |
margin: 0; | |
padding: 0; | |
list-style: none outside; | |
clear: both; | |
@include clearfix(); | |
li { | |
list-style: none outside; | |
margin-bottom: 2em; | |
} | |
} | |
ul.products { | |
li.product { | |
max-width: 320px; | |
margin-left: auto; | |
margin-right: auto; | |
position: relative; | |
text-align: center; | |
.onsale { | |
top: 0; | |
right: 0; | |
left: auto; | |
margin: -0.5em -0.5em 0 0; | |
} | |
h3 { | |
padding: 0; | |
margin: 0; | |
color: $color__body-text; | |
font-size: 1em; | |
font-weight: 600; | |
line-height: 1.2; | |
} | |
a { | |
text-decoration: none; | |
img { | |
display: block; | |
margin: 0 0 0.675em; | |
border: 1px solid $color__gray-border; | |
width: 100%; | |
@include transition(all 0.25s ease-in-out); | |
} | |
&:hover, | |
&:focus { | |
img { | |
border-color: #E6E6E6; | |
} | |
h3 { | |
color: $color__teal; | |
} | |
} | |
} | |
strong { | |
display: block; | |
} | |
.button { | |
margin-top: 1em; | |
} | |
.price { | |
color: $color__body-text; | |
display: block; | |
font-weight: 300; | |
font-size: 1em; | |
del { | |
color: inherit; | |
opacity: 0.5; | |
display: block; | |
} | |
ins { | |
background: none; | |
font-weight: 700; | |
text-decoration: none; | |
} | |
.from { | |
font-size: 0.67em; | |
margin: -2px 0 0 0; | |
text-transform: uppercase; | |
color: rgba(desaturate($highlight, 75%), 0.5); | |
} | |
} | |
} | |
} | |
} | |
/** | |
* Single Product | |
*/ | |
.single-product { | |
&.woocommerce { | |
.woocommerce-message { | |
padding-bottom: 4.25em; | |
.button { | |
position: absolute; | |
float: none; | |
margin-left: 0; | |
margin-bottom: 1em; | |
bottom: 0; | |
} | |
} | |
} | |
div.product { | |
margin-bottom: 0; | |
position: relative; | |
.product_title { | |
clear: none; | |
margin-top: 0; | |
margin-bottom: 0.5em; | |
padding: 0; | |
text-transform: uppercase; | |
font-weight: 600; | |
font-size: 1.5em; | |
} | |
div[itemprop="offers"] { | |
clear: both; | |
span.price, | |
p.price { | |
color: $highlight; | |
font-size: 1.25em; | |
margin: 0; | |
ins { | |
background: inherit; | |
font-weight: 600; | |
text-decoration: none; | |
} | |
del { | |
opacity: 0.5; | |
margin-right: 10px; | |
} | |
} | |
} | |
.sku_wrapper { | |
display: block; | |
margin: 0.875em 0 1.5em; | |
font-size: 0.875em; | |
color: #878787; | |
} | |
div.images { | |
margin-bottom: 2em; | |
.woocommerce-main-image { | |
display: block; | |
cursor: zoom-in; | |
} | |
img { | |
display: block; | |
margin: 0 auto; | |
} | |
.caption { | |
color: #868686; | |
display: block; | |
font-size: 0.875em; | |
text-align: center; | |
margin-top: 1em; | |
} | |
} | |
div.thumbnails { | |
padding-top: 2em; | |
@include clearfix(); | |
a { | |
float: left; | |
width: 30.75%; | |
margin-right: 3.8%; | |
margin-bottom: 3.8%; | |
} | |
img { | |
border: 1px solid $color__gray-border; | |
} | |
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 {} | |
p.cart { | |
margin-bottom: 2em; | |
@include clearfix(); | |
} | |
form.cart { | |
margin-bottom: 2em; | |
@include clearfix(); | |
div.quantity { | |
display: inline-block; | |
margin: 0 12px 0 0; | |
} | |
table { | |
border-width: 0 0 1px 0; | |
td { | |
padding-left: 0; | |
} | |
div.quantity { | |
float: none; | |
margin: 0; | |
} | |
small.stock { | |
display: block; | |
float: none; | |
} | |
} | |
.single_variation { | |
margin-bottom: 1em; | |
.price { | |
font-size: 1em; | |
font-weight: 600; | |
} | |
} | |
.variations_button { | |
@include clearfix; | |
} | |
.single_variation_wrap { | |
width: 265px; | |
} | |
.woocommerce-variation-description { | |
p { | |
margin: 0; | |
} | |
} | |
.variations { | |
margin-bottom: 1em; | |
width: 265px; | |
label { | |
display: block; | |
font-weight: 700; | |
margin-bottom: 4px; | |
} | |
select { | |
width: 100%; | |
float: left; | |
} | |
.variation { | |
margin-bottom: 0.5em; | |
} | |
} | |
.button { | |
display: inline-block; | |
vertical-align: top; | |
} | |
} | |
.upsells { | |
padding-top: 2em; | |
@include clearfix; | |
} | |
} | |
} | |
.woocommerce-tabs { | |
ul.tabs { | |
list-style: none; | |
padding: 0; | |
margin: 1.618em 0; | |
overflow: hidden; | |
position: relative; | |
li { | |
border: 1px solid $color__gray-border; | |
display: block; | |
position: relative; | |
z-index: 0; | |
margin: 0; | |
padding: 0; | |
a { | |
display: block; | |
padding: 0.5em 1em; | |
font-weight: 300; | |
color: $color__body-text; | |
text-decoration: none; | |
&:hover { | |
text-decoration: none; | |
color: #777; | |
} | |
} | |
&.active { | |
background: #FFF; | |
z-index: 2; | |
a { | |
color: inherit; | |
font-weight: 400; | |
} | |
} | |
&:not(:first-child) { | |
margin-top: -1px; | |
} | |
} | |
&:before { | |
position: absolute; | |
content: " "; | |
width: 100%; | |
bottom: 0; | |
left: 0; | |
border-bottom: 1px solid $color__gray-border; | |
z-index: 1; | |
} | |
} | |
.panel { | |
margin: 0 0 2em; | |
padding: 0; | |
} | |
} | |
/** | |
* Archives | |
*/ | |
.post-type-archive-product, | |
.tax-product_cat { | |
.page-title, | |
.term-description, | |
.page-description { | |
text-align: center; | |
} | |
} | |
.post-type-archive-product { | |
ul.products { | |
margin-top: 3em; | |
} | |
} | |
/** | |
* Orders | |
*/ | |
.woocommerce-order-received { | |
.woocommerce { | |
h2 { | |
font-size: 1.25em; | |
} | |
} | |
} | |
/** | |
* My Account | |
*/ | |
.woocommerce-account { | |
&.woocommerce-edit-account { | |
form { | |
margin-top: 1em; | |
} | |
} | |
.woocommerce { | |
h2 { | |
font-size: 1.25em; | |
} | |
.myaccount_user, | |
.order-info { | |
margin-bottom: 1.5em; | |
} | |
input.button[name=login], | |
input.button[name=register] { | |
background-color: $primary; | |
color: $primarytext; | |
&:hover, | |
&:focus { | |
background-color: darken($primary, 10%); | |
color: $primarytext; | |
} | |
} | |
} | |
form.login { | |
padding: 0 0 1em; | |
margin: 0 0 1em; | |
border: 0; | |
border-bottom: 1px solid #E6E6E6; | |
} | |
form.register { | |
padding: 0; | |
margin: 0; | |
border: 0; | |
} | |
.addresses { | |
.title { | |
@include clearfix(); | |
h3 { | |
float: left; | |
} | |
.edit { | |
float: right; | |
line-height: 1.5; | |
margin: 1.35em 0; | |
} | |
} | |
} | |
ol.commentlist.notes { | |
li.note { | |
p.meta { | |
font-weight: 700; | |
margin-bottom: 0; | |
} | |
.description { | |
p:last-child { | |
margin-bottom: 0; | |
} | |
} | |
} | |
} | |
fieldset { | |
border: 0; | |
margin: 1.35em 0 0; | |
padding: 3.675em 0 0 0; | |
position: relative; | |
legend { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
font-weight: 700; | |
padding: 10px 1em; | |
text-align: center; | |
background: $color__light-gray; | |
} | |
} | |
} | |
/** | |
* Cart | |
*/ | |
.woocommerce-cart { | |
.woocommerce { | |
h2 { | |
font-size: 1.25em; | |
} | |
} | |
.wc-proceed-to-checkout { | |
@include clearfix; | |
padding: 1em 0; | |
a.checkout-button { | |
display: block; | |
text-align: center; | |
margin-bottom: 0.25em; | |
} | |
} | |
.cart-collaterals { | |
margin-top: 2em; | |
p:not(.form-row) { | |
margin: 0; | |
line-height: 1.5; | |
} | |
.woocommerce-shipping-calculator { | |
margin-top: 0.5em; | |
.button { | |
width: 100%; | |
float: none; | |
display: block; | |
} | |
.shipping-calculator-button { | |
display: inline-block; | |
margin-bottom: 5px; | |
&:after { | |
margin-left: 5px; | |
font-family: "FontAwesome"; | |
content: "\f103"; | |
} | |
} | |
.shipping-calculator-form { | |
margin-bottom: 10px; | |
} | |
} | |
.cart_totals { | |
p { | |
small { | |
color: $subtext; | |
font-size: 0.83em; | |
} | |
} | |
table { | |
margin: 0 0 6px; | |
th { | |
text-align: left; | |
width: 25%; | |
} | |
td, | |
th { | |
vertical-align: middle; | |
padding: 1em; | |
} | |
small { | |
color: $subtext; | |
} | |
select { | |
width: 100%; | |
} | |
} | |
.discount td { | |
color: $highlight; | |
} | |
} | |
.cross-sells { | |
ul.products { | |
li.product { | |
margin-top: 0; | |
} | |
} | |
} | |
} | |
p.woocommerce-shipping-contents { | |
margin: 0; | |
} | |
} | |
/** | |
* Checkout | |
*/ | |
.woocommerce-checkout { | |
#billing_country_field, | |
#shipping_country_field { | |
strong { | |
font-weight: 300 !important; | |
} | |
} | |
.checkout { | |
.col-2 { | |
h3#ship-to-different-address { | |
float: left; | |
clear: none; | |
font-size: 1.125em; | |
label { | |
margin-right: 8px; | |
margin-bottom: 0; | |
font-weight: 600; | |
} | |
} | |
.notes { | |
clear: left; | |
} | |
.form-row-first { | |
clear: left; | |
} | |
} | |
div.create-account { | |
padding: 1em 1em 0.5em; | |
border: 1px solid #E6E6E6; | |
p { | |
margin-top: 0; | |
&:not(.form-row) { | |
font-size: 0.9em; | |
font-weight: 300; | |
} | |
} | |
small { | |
font-size: 11px; | |
color: $subtext; | |
font-weight: normal; | |
} | |
} | |
div.shipping-address { | |
padding: 0; | |
clear: left; | |
width: 100%; | |
} | |
.shipping_address { | |
clear: both; | |
} | |
} | |
#payment { | |
border: 1px solid #E6E6E6; | |
margin: 2em 0 1em; | |
ul.payment_methods { | |
@include clearfix; | |
text-align: left; | |
padding: 0; | |
margin: 0; | |
list-style: none outside; | |
li { | |
line-height: 2; | |
text-align: left; | |
margin: 0; | |
font-weight: normal; | |
border-bottom: 1px solid #E6E6E6; | |
padding: 1em; | |
label { | |
display: inline; | |
} | |
input { | |
margin: 0 8px 0 0; | |
} | |
img { | |
vertical-align: middle; | |
margin: 0; | |
padding: 0; | |
position: relative; | |
box-shadow: none; | |
} | |
img[alt="visa"] { | |
margin-left: 5px; | |
} | |
img + img { | |
margin-left: 2px; | |
} | |
} | |
} | |
div.form-row { | |
padding: 2em 1em; | |
margin: 0; | |
text-align: center; | |
} | |
div.payment_box { | |
position: relative; | |
padding: 0; | |
margin: 0.5em 0 0 27px; | |
font-size: 0.92em; | |
fieldset { | |
margin: 0.5em 0 0; | |
padding: 0; | |
border: 0; | |
} | |
.wc-authorize-net-aim-new-payment-method-form { | |
font-style: normal; | |
label { | |
display: block; | |
line-height: 1.4; | |
} | |
select, | |
.select2-container { | |
width: 5.5em !important; | |
margin-right: 10px; | |
} | |
} | |
.wc-credit-card-form-card-number, | |
.wc-credit-card-form-card-expiry, | |
.wc-credit-card-form-card-cvc { | |
font-size: 1.5em; | |
padding: 8px; | |
background-repeat: no-repeat; | |
background-position: right; | |
&.visa { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/visa.png'); | |
} | |
&.mastercard { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/mastercard.png'); | |
} | |
&.laser { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/laser.png'); | |
} | |
&.dinersclub { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/diners.png'); | |
} | |
&.maestro { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/maestro.png'); | |
} | |
&.jcb { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/jcb.png'); | |
} | |
&.amex { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/amex.png'); | |
} | |
&.discover { | |
background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/discover.png'); | |
} | |
} | |
span.help { | |
font-size: .857em; | |
color: $subtext; | |
font-weight: normal; | |
} | |
.form-row { | |
margin: 0 0 1em; | |
} | |
p { | |
margin: 0; | |
} | |
} | |
.payment_method_paypal { | |
.about_paypal { | |
float: right; | |
line-height: 52px; | |
font-size: 0.83em; | |
} | |
img { | |
max-height: 52px; | |
vertical-align: middle; | |
} | |
} | |
.terms { | |
@include clearfix; | |
margin-top: 1em; | |
margin-bottom: 0; | |
text-align: center; | |
max-width: 375px; | |
margin-left: auto; | |
margin-right: auto; | |
label { | |
width: 87%; | |
float: right; | |
} | |
.input-checkbox { | |
margin-right: 0; | |
margin-left: 8px; | |
} | |
} | |
} | |
} | |
/** | |
* Order Page | |
*/ | |
.woocommerce-order-received { | |
ul.order_details { | |
@include clearfix(); | |
margin: 0 0 1.5em; | |
list-style: none; | |
li { | |
float: left; | |
margin-right: 2em; | |
text-transform: uppercase; | |
font-size: 0.715em; | |
line-height: 1; | |
border-right: 1px dashed darken( $secondary, 10% ); | |
padding-right: 2em; | |
margin-left: 0; | |
padding-left: 0; | |
strong { | |
display: block; | |
font-size: 1.4em; | |
text-transform: none; | |
line-height: 1.5; | |
} | |
&:last-of-type { | |
border: none; | |
} | |
} | |
} | |
} | |
/** | |
* Media Queries | |
*/ | |
/** | |
* Specifically to make tables work on mobile | |
*/ | |
@media only screen and (max-width: 767px) { | |
.woocommerce, | |
.woocommerce-page { | |
/** | |
* Tables | |
*/ | |
table.shop_table_responsive { | |
border: 1px solid #E3E3DD; | |
border-bottom: 0; | |
thead { | |
display: none; | |
} | |
tbody { | |
tr:first-child { | |
td:first-child { | |
border-top: 0; | |
} | |
} | |
th { | |
display: none; | |
} | |
} | |
tr { | |
border-bottom: 1px solid #E3E3DD; | |
display: block; | |
td { | |
display: block; | |
border: 0; | |
&:before { | |
content: attr(data-title) ': '; | |
font-weight: 700; | |
} | |
} | |
} | |
} | |
table.my_account_orders { | |
tr { | |
td { | |
&.order-actions { | |
text-align: left; | |
&:before { | |
display: none; | |
} | |
.button { | |
float: none; | |
margin: 0.125em 0.25em 0.125em 0; | |
} | |
} | |
} | |
} | |
} | |
table.cart { | |
border: 0; | |
thead, | |
th { | |
display: none; | |
} | |
tr { | |
display: block; | |
position: relative; | |
@include clearfix(); | |
&.cart_item { | |
border: 1px solid #E3E3DD; | |
margin-bottom: 2em; | |
} | |
&.cart-actions { | |
border: 0; | |
margin-top: 1em; | |
margin-bottom: 1em; | |
} | |
} | |
td { | |
display: block; | |
border: 0; | |
padding: 0; | |
label { | |
font-weight: 700; | |
} | |
&.product-remove { | |
position: absolute; | |
right: 0; | |
bottom: 0; | |
padding: 1em; | |
} | |
&.product-price, | |
&.product-quantity, | |
&.product-date { | |
padding: 0.5em 1em; | |
} | |
&.product-thumbnail { | |
padding: 1em 1em 0.5em; | |
float: left; | |
} | |
&.product-name { | |
padding: 1em 0.5em 0.5em; | |
} | |
&.product-price { | |
&:before { | |
content: "Price: "; | |
font-weight: 700; | |
margin-right: 5px; | |
} | |
} | |
&.product-quantity { | |
.quantity:before { | |
content: "Qty: "; | |
font-weight: 700; | |
margin-right: 5px; | |
} | |
} | |
&.product-subtotal { | |
padding: 0.5em 1em 1em; | |
.amount:before { | |
content: "Total: "; | |
font-weight: 700; | |
margin-right: 5px; | |
} | |
} | |
&.actions { | |
.button[name="update_cart"] { | |
width: 100%; | |
clear: both; | |
margin-top: 1.675em; | |
} | |
} | |
input, | |
.button, | |
.input-text { | |
box-sizing: border-box; | |
} | |
} | |
} | |
} | |
.woocommerce-cart .cart-collaterals .cart_totals { | |
table { | |
border-top: 0; | |
border-left: 0; | |
border-right: 0; | |
tr, | |
td, | |
th { | |
display: block; | |
width: 100%; | |
} | |
td { | |
border-top: 0; | |
border-bottom: 0; | |
border-left: 1px solid #E3E3DD; | |
border-right: 1px solid #E3E3DD; | |
} | |
th { | |
border-right: 1px solid #E3E3DD; | |
} | |
} | |
} | |
} | |
/** | |
* Large Mobile Devices | |
*/ | |
@media only screen and (min-width: 481px) { | |
/** | |
* Elements | |
*/ | |
.woocommerce, | |
.woocommerce-page { | |
/** | |
* Product loops | |
*/ | |
.related, | |
.upsells.products { | |
@include clearfix(); | |
clear: both; | |
} | |
ul.products { | |
@include flexbox(flex); | |
@include flex-wrap(wrap); | |
@include justify-content(flex-start); | |
li.product { | |
display: inline-block; | |
margin-left: 0; | |
margin-right: 4%; | |
width: 47.89%; // safari is being a bitch | |
max-width: none; | |
} | |
li.last, | |
li:nth-child(even) { | |
margin-right: 0 !important; | |
} | |
} | |
} | |
/** | |
* Flexbox Fallback | |
*/ | |
.no-flexbox { | |
.woocommerce, | |
.woocommerce-page { | |
ul.products { | |
li.product { | |
float: left; | |
} | |
} | |
} | |
} | |
} | |
/** | |
* Tablet | |
*/ | |
@media only screen and (min-width: $screen-sm-min) { | |
/** | |
* General Styles | |
*/ | |
.woocommerce { | |
/** | |
* Messaging | |
*/ | |
.woocommerce-message, | |
.woocommerce-error, | |
.woocommerce-info { | |
padding: 1em 9em 1em 3.5em !important; | |
.button { | |
position: absolute; | |
bottom: 0; | |
left: auto; | |
right: 1.5em; | |
top: 0; | |
margin: auto !important; | |
width: 120px; | |
text-align: center; | |
} | |
} | |
/** | |
* Buttons | |
*/ | |
.single_add_to_cart_button { | |
width: 249px; | |
} | |
#place_order { | |
padding: 0 3em; | |
} | |
} | |
/** | |
* Elements | |
*/ | |
.woocommerce, | |
.woocommerce-page { | |
/** | |
* Tables | |
*/ | |
table.cart { | |
label { | |
font-size: 0.875em; | |
} | |
.form-row { | |
margin: 0; | |
} | |
tr { | |
border: 1px solid #E9E9E9; | |
} | |
tr.cart_item { | |
background: none !important; | |
} | |
th.product-name { | |
text-align: left; | |
} | |
td, | |
th { | |
border-left: 0; | |
border-right: 0; | |
padding: 1em; | |
} | |
td.product-remove { | |
padding-left: 0.5em; | |
padding-right: 0.5em; | |
width: 30px; | |
border-right: 0; | |
vertical-align: top; | |
} | |
td.product-thumbnail { | |
padding-left: 0; | |
padding-right: 0; | |
width: 80px; | |
vertical-align: top; | |
img { | |
display: block; | |
max-height: 80px; | |
} | |
} | |
td.product-name { | |
padding-left: 1em; | |
padding-right: 2em; | |
} | |
td.product-price, | |
td.product-quantity, | |
td.product-subtotal { | |
text-align: center; | |
} | |
td.actions { | |
background-color: $color__light-gray; | |
text-align: right; | |
padding-top: 1em; | |
padding-bottom: 1em; | |
.coupon { | |
float: left; | |
width: 70%; | |
} | |
.input-text { | |
width: 60%; | |
float: left; | |
} | |
.button[name="apply_coupon"] { | |
max-width: 200px; | |
float: left; | |
margin-left: 1%; | |
width: 39%; | |
} | |
.button[name="update_cart"] { | |
max-width: 200px; | |
float: right; | |
width: 30%; | |
} | |
} | |
} | |
.cart_totals table { | |
th, | |
td { | |
padding: 1em; | |
} | |
} | |
table.my_account_orders { | |
th, | |
td { | |
padding: 0.5em 1em; | |
vertical-align: middle; | |
} | |
} | |
/** | |
* Forms | |
*/ | |
form { | |
.form-row { | |
@include clearfix(); | |
label { | |
display: block; | |
&.checkbox { | |
display: inline; | |
} | |
} | |
} | |
.form-row-first, | |
.form-row-last { | |
float: left; | |
width: 48%; | |
overflow: visible; | |
} | |
.form-row-last { | |
float: right; | |
} | |
.form-row-wide { | |
clear: both; | |
} | |
} | |
form.login { | |
.button { | |
margin-bottom: 0; | |
margin-right: 0.5em; | |
} | |
} | |
/** | |
* General layout styles | |
*/ | |
.col2-set { | |
@include clearfix(); | |
width: 100%; | |
.col-1 { | |
float: left; | |
width: 48%; | |
} | |
.col-2 { | |
float: right; | |
width: 48%; | |
} | |
} | |
/** | |
* Product loops | |
*/ | |
ul.products { | |
li.product { | |
width: 22.95%; // safari is being a bitch | |
margin-right: 2.66666666667%; | |
} | |
li:nth-child(even) { | |
margin-right: 2.66666666667% !important; | |
} | |
li.last { | |
margin-right: 0 !important; | |
} | |
} | |
.upsells, | |
.cross-sells { | |
ul.products { | |
li.product { | |
margin-bottom: 1em; | |
} | |
} | |
} | |
.woocommerce-result-count { | |
position: relative; | |
min-height: 1px; | |
float: left; | |
margin-top: 50px; | |
margin-bottom: 30px; | |
width: 65%; | |
height: 44px; | |
line-height: 44px; | |
} | |
.woocommerce-ordering { | |
position: relative; | |
min-height: 1px; | |
float: right; | |
margin-top: 50px; | |
margin-bottom: 30px; | |
width: 35%; | |
max-width: 270px; | |
} | |
} | |
/** | |
* Single Product | |
*/ | |
.single-product { | |
div.product { | |
div.images { | |
float: left; | |
width: 45%; | |
} | |
div.thumbnails {} | |
div.summary { | |
float: right; | |
width: 48%; | |
} | |
form.cart { | |
.single_variation_wrap, | |
.variations { | |
width: 315px; | |
} | |
} | |
} | |
} | |
.woocommerce-tabs { | |
clear: both; | |
ul.tabs { | |
@include menu(); | |
height: 44px; | |
li { | |
margin: 0 -2px 0; | |
width: 33.3333%; | |
height: 44px; | |
text-align: center; | |
&.active { | |
border-bottom-color: #FFF; | |
} | |
&:only-of-type, | |
&:first-child { | |
margin-left: 0; | |
} | |
a { | |
height: 44px; | |
@include truncateText(ellipsis); | |
width: 100%; | |
} | |
} | |
} | |
} | |
/** | |
* Cart | |
*/ | |
.woocommerce-cart { | |
.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%; | |
} | |
} | |
} | |
/** | |
* Checkout | |
*/ | |
.woocommerce-checkout { | |
.checkout { | |
.col-2 { | |
h3#ship-to-different-address { | |
font-size: 1.25em; | |
} | |
} | |
} | |
#payment { | |
.form-row { | |
select { | |
width: auto; | |
} | |
} | |
} | |
} | |
/** | |
* My Account | |
*/ | |
.woocommerce-account { | |
.form-row-first, | |
.form-row-last { | |
width: 49% !important; | |
} | |
form.login { | |
border: 0; | |
margin: 0; | |
padding: 0; | |
} | |
} | |
} | |
/** | |
* Desktop | |
*/ | |
@media only screen and (min-width: $screen-md-min) { | |
/** | |
* Single Product | |
*/ | |
.single-product { | |
div.product { | |
div.images { | |
.woocommerce-main-image { | |
position: relative; | |
} | |
.caption { | |
position: absolute; | |
width: 200px; | |
right: 0; | |
bottom: 0; | |
text-align: right; | |
margin-top: 0; | |
} | |
} | |
} | |
} | |
} | |
/** | |
* Large Screens | |
*/ | |
@media only screen and (min-width: $screen-lg-min) {} | |
/** | |
* Print Styles | |
*/ | |
@media print { | |
@import "reports-print"; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************************************************** | |
Site Name: | |
Author: | |
Stylesheet: Responsive WooCommerce Styles | |
******************************************************************/ | |
/** | |
* Animation | |
*/ | |
@-moz-keyframes spin { | |
100% { | |
-moz-transform: rotate(360deg); | |
} | |
} | |
@-webkit-keyframes spin { | |
100% { | |
-webkit-transform: rotate(360deg); | |
} | |
} | |
@keyframes spin { | |
100% { | |
-webkit-transform: rotate(360deg); | |
transform:rotate(360deg); | |
} | |
} | |
/** | |
* Objects | |
*/ | |
@mixin menu() { | |
@include clearfix; | |
li { | |
display: inline-block; | |
} | |
} | |
@mixin mediaright() { | |
@include clearfix; | |
img { | |
float: right; | |
height: auto; | |
} | |
} | |
@mixin medialeft() { | |
@include clearfix; | |
img { | |
float: right; | |
height: auto; | |
} | |
} | |
@mixin ir() { | |
display: block; | |
text-indent: -9999px; | |
position: relative; | |
height: 1em; | |
width: 1em; | |
} | |
@mixin icon( $glyph: "\e001" ) { | |
font-family: 'WooCommerce'; | |
speak: none; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
margin: 0; | |
text-indent: 0; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
content: $glyph; | |
} | |
@mixin iconbefore( $glyph: "\e001" ) { | |
font-family: 'WooCommerce'; | |
speak: none; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
margin-right: .618em; | |
content: $glyph; | |
text-decoration: none; | |
} | |
@mixin iconafter( $glyph: "\e001" ) { | |
font-family: 'WooCommerce'; | |
speak: none; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
margin-left: .618em; | |
content: $glyph; | |
text-decoration: none; | |
} | |
@mixin loader() { | |
&:before { | |
height: 1em; | |
width: 1em; | |
display: block; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-left: -.5em; | |
margin-top: -.5em; | |
display: block; | |
-webkit-animation: spin 1s ease-in-out infinite; | |
-moz-animation: spin 1s ease-in-out infinite; | |
animation: spin 1s ease-in-out infinite; | |
content: ""; | |
background: url('#{$plugins-path}woocommerce/assets/images/icons/loader.svg') center center; | |
background-size: cover; | |
line-height: 1; | |
text-align: center; | |
font-size: 2em; | |
color: rgba(#000,0.75); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************************************************** | |
Site Name: | |
Author: | |
Stylesheet: A print stylesheet for reports. Ensures reports look good when printed. | |
******************************************************************/ | |
* { | |
background: transparent !important; | |
color: black !important; | |
text-shadow: none !important; | |
filter:none !important; | |
-ms-filter: none !important; | |
font-size: 9pt !important; | |
opacity: 1; | |
-webkit-transition: none !important; | |
} | |
@page { | |
margin: .5cm; | |
} | |
#adminmenuwrap, | |
#adminmenuback, | |
#wpadminbar, | |
#screen-meta-links, | |
.updated, | |
.update-nag, | |
.woocommerce-reports-wide .postbox h3.stats_range .export_csv, | |
.woocommerce-reports-wrap .postbox h3.stats_range .export_csv, | |
.woocommerce-reports-wide .button, | |
#wpfooter, | |
.woo-nav-tab-wrapper { | |
display: none; | |
} | |
h2 .nav-tab { | |
line-height: 14px; | |
} | |
.woocommerce-reports-wide .postbox h3.stats_range ul li.custom, | |
.woocommerce-reports-wrap .postbox h3.stats_range ul li.custom, | |
.woocommerce-reports-wide .postbox h3.stats_range ul li a, | |
.woocommerce-reports-wrap .postbox h3.stats_range ul li a { | |
padding: 5px; | |
line-height: 14px; | |
} | |
#wpcontent { | |
margin-left: 0; | |
} | |
.woocommerce-reports-wide .postbox .chart-with-sidebar .chart-sidebar, | |
.woocommerce-reports-wrap .postbox .chart-with-sidebar .chart-sidebar { | |
margin-left: -130px; | |
width: 130px; | |
display: block; | |
} | |
.woocommerce-reports-wide .postbox .chart-with-sidebar, | |
.woocommerce-reports-wrap .postbox .chart-with-sidebar { | |
padding-left: 130px; | |
} | |
.chart-legend { | |
overflow: hidden; | |
zoom: 1; | |
} | |
.chart-legend li, | |
.chart-legend li { | |
padding: .25em .5em !important; | |
box-shadow: none !important; | |
border-bottom: 1px solid gray !important; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************************************************** | |
Site Name: | |
Author: | |
Stylesheet: Responsive WooCommerce Styles | |
******************************************************************/ | |
/** | |
* Star font for ratings | |
*/ | |
@font-face { | |
font-family: 'star'; | |
src: url('#{$plugins-path}woocommerce/assets/fonts/star.eot'); | |
src: url('#{$plugins-path}woocommerce/assets/fonts/star.eot?#iefix') format('embedded-opentype'), | |
url('#{$plugins-path}woocommerce/assets/fonts/star.woff') format('woff'), | |
url('#{$plugins-path}woocommerce/assets/fonts/star.ttf') format('truetype'), | |
url('#{$plugins-path}woocommerce/assets/fonts/star.svg#star') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
.woocommerce, | |
.woocommerce-page { | |
/** | |
* Reviews | |
*/ | |
#reviews { | |
clear: both; | |
h2 { | |
font-size: 1.875em; | |
} | |
h2 small { | |
float: right; | |
font-size: 15px; | |
line-height: 21px; | |
margin: 10px 0 0 0; | |
a { | |
text-decoration:none; | |
color: #444; | |
} | |
} | |
h3 { | |
margin: 0; | |
font-size: 1.25em; | |
} | |
#respond { | |
margin: 0; | |
border: 0; | |
padding: 0; | |
} | |
#comment { | |
height: 75px; | |
} | |
#comments { | |
.add_review { | |
@include clearfix; | |
} | |
h2 { | |
font-size: 1em; | |
font-style: italic; | |
font-weight: 300; | |
padding: 0; | |
margin: 1em 0 0; | |
display: none; | |
} | |
ol.commentlist { | |
@include clearfix; | |
margin: 1.875em 0 1.5em; | |
width: 100%; | |
background: none; | |
list-style: none; | |
border: 1px solid $color__gray-border; | |
border-bottom: 0; | |
li { | |
padding: 15px 15px 0; | |
margin: 0; | |
border: 0; | |
position: relative; | |
background: 0; | |
border-bottom: 1px solid $color__gray-border; | |
img.avatar { | |
float: left; | |
position: absolute; | |
top: 0; | |
left: 20px; | |
padding: 3px; | |
width: 32px; | |
height: auto; | |
margin: 0; | |
line-height: 1; | |
@include border-radius(100px); | |
} | |
.comment-text { | |
@include clearfix; | |
p { | |
margin: 0 0 1em; | |
} | |
p.meta { | |
font-size: 0.875em; | |
margin: 0 0 0.5em; | |
[itemprop="datePublished"] { | |
font-weight: 300; | |
} | |
} | |
} | |
} | |
ul.children { | |
list-style: none outside; | |
margin: 20px 0 0 50px; | |
.star-rating { | |
display: none; | |
} | |
} | |
#respond { | |
border: 1px solid #DFDFDF; | |
padding: 1em 1em 0; | |
margin: 20px 0 0 50px; | |
} | |
} | |
.commentlist > li:before { | |
content: ""; | |
} | |
} | |
} | |
/** | |
* Star ratings | |
*/ | |
.star-rating { | |
float: right; | |
overflow: hidden; | |
position: relative; | |
height: 1em; | |
line-height: 1em; | |
font-size: 0.875em; | |
width: 5.6em; | |
margin-top: 3px; | |
font-family: 'star'; | |
&:before { | |
content: "\73\73\73\73\73"; | |
color: $star; | |
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: $star; | |
} | |
} | |
.woocommerce-product-rating { | |
@include clearfix; | |
line-height: 2em; | |
margin-bottom: 0.25em; | |
display: block; | |
.star-rating { | |
margin: 0.5em 4px 0 0; | |
float: left; | |
font-size: 1em; | |
} | |
} | |
.products { | |
.star-rating { | |
display: block; | |
margin: 0 auto 1em; | |
float: none; | |
} | |
} | |
.hreview-aggregate { | |
.star-rating { | |
margin: 10px 0 0 0; | |
} | |
} | |
p.stars { | |
position: relative; | |
font-size: 0.875em; | |
a { | |
display: inline-block; | |
font-weight: 700; | |
margin-right: 1em; | |
text-indent: -9999px; | |
position: relative; | |
&:last-child { | |
border-right: 0; | |
} | |
&.star-1, | |
&.star-2, | |
&.star-3, | |
&.star-4, | |
&.star-5 { | |
border-right: 1px solid $input__border-color; | |
&:after { | |
font-family: "WooCommerce"; | |
text-indent: 0; | |
position: absolute; | |
top: 0; | |
left: 0; | |
color: $star; | |
} | |
} | |
&.star-1 { | |
width: 2em; | |
&:after { | |
content: "\e021"; | |
} | |
&:hover:after, | |
&.active:after { | |
content: "\e020" | |
} | |
} | |
&.star-2 { | |
width: 3em; | |
&:after { | |
content: "\e021\e021"; | |
} | |
&:hover:after, | |
&.active:after { | |
content: "\e020\e020" | |
} | |
} | |
&.star-3 { | |
width: 4em; | |
&:after { | |
content: "\e021\e021\e021"; | |
} | |
&:hover:after, | |
&.active:after { | |
content: "\e020\e020\e020" | |
} | |
} | |
&.star-4 { | |
width: 5em; | |
&:after { | |
content: "\e021\e021\e021\e021"; | |
} | |
&:hover:after, | |
&.active:after { | |
content: "\e020\e020\e020\e020" | |
} | |
} | |
&.star-5 { | |
width: 6em; | |
border: 0; | |
&:after { | |
content: "\e021\e021\e021\e021\e021"; | |
} | |
&:hover:after, | |
&.active:after { | |
content: "\e020\e020\e020\e020\e020" | |
} | |
} | |
} | |
} | |
#review_form { | |
#respond { | |
position: static; | |
margin: 0; | |
width: auto; | |
padding: 15px; | |
background: transparent none; | |
border: 1px solid $color__gray-border; | |
p { | |
margin: 0 0 10px; | |
} | |
.form-submit { | |
margin: 18px 0 -5px; | |
input { | |
left: auto; | |
} | |
} | |
textarea { | |
@include box-sizing(border-box); | |
width: 100%; | |
} | |
} | |
} | |
} | |
/** | |
* Tablet | |
*/ | |
@media only screen and (min-width: $screen-sm-min) {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************************************************** | |
Site Name: | |
Author: | |
Stylesheet: Responsive WooCommerce Styles | |
******************************************************************/ | |
// Fonts | |
@font-face { | |
font-family: 'WooCommerce'; | |
src: url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.eot'); | |
src: url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.eot?#iefix') format('embedded-opentype'), | |
url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.woff') format('woff'), | |
url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.ttf') format('truetype'), | |
url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.svg#WooCommerce') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
$green: #7ad03a; | |
$red: #a00; | |
$orange: #ffba00; | |
$blue: #2ea2cc; | |
$primary: $color__teal; // Primary colour for buttons (alt) | |
$primarytext: #FFF; // Text on primary colour bg | |
$secondary: #CCC; // Secondary buttons | |
$secondarytext: #444; // Text on secondary colour bg | |
$highlight: $color__light-green; // Prices, In stock labels, sales flash | |
$highlightext: desaturate(lighten($highlight, 50%), 18%); // Text on highlight colour bg | |
$contentbg: #fff; // Content BG - Tabs (active state) | |
$subtext: #777; // small, breadcrumbs etc | |
$star: #E8C142; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/****************************************************************** | |
Site Name: | |
Author: | |
Stylesheet: Responsive WooCommerce Styles | |
******************************************************************/ | |
.woocommerce, | |
.woocommerce-page { | |
/** | |
* Layered nav widget | |
*/ | |
.widget_layered_nav { | |
ul { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
list-style: none outside; | |
li { | |
@include clearfix(); | |
padding: 0 0 1px; | |
list-style: none; | |
a, | |
span { | |
padding: 1px 0; | |
} | |
} | |
li.chosen { | |
a { | |
&:before { | |
@include iconbefore( "\e013" ); | |
color: $red; | |
} | |
} | |
} | |
} | |
} | |
.widget_layered_nav_filters { | |
ul { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
list-style: none outside; | |
overflow: hidden; | |
zoom: 1; | |
li { | |
float: left; | |
padding: 0 1px 1px 0; | |
list-style: none; | |
a { | |
text-decoration: none; | |
&:before { | |
@include iconbefore( "\e013" ); | |
color: $red; | |
} | |
} | |
} | |
} | |
} | |
/** | |
* Price filter widget | |
*/ | |
.widget_price_filter { | |
.price_slider { | |
margin-bottom: 1em; | |
} | |
.price_slider_amount { | |
text-align: right; | |
line-height: 2.4; | |
font-size: 0.8751em; | |
.button { | |
font-size: 1.15em; | |
} | |
.button { | |
float: left; | |
} | |
} | |
.ui-slider { | |
position: relative; | |
text-align: left; | |
margin-left: .5em; | |
margin-right: .5em; | |
} | |
.ui-slider .ui-slider-handle { | |
position: absolute; | |
z-index: 2; | |
width: 1em; | |
height: 1em; | |
background-color: $primary; | |
border-radius: 1em; | |
cursor: ew-resize; | |
outline: none; | |
top: -.3em; | |
//&:last-child { | |
margin-left: -.5em; | |
//} | |
} | |
.ui-slider .ui-slider-range { | |
position: absolute; | |
z-index: 1; | |
font-size: .7em; | |
display: block; | |
border: 0; | |
border-radius: 1em; | |
background-color: $primary; | |
} | |
.price_slider_wrapper .ui-widget-content { | |
border-radius: 1em; | |
background-color: $primary - #444; | |
border: 0; | |
} | |
.ui-slider-horizontal { | |
height: .5em; | |
} | |
.ui-slider-horizontal .ui-slider-range { | |
top: 0; | |
height: 100%; | |
} | |
.ui-slider-horizontal .ui-slider-range-min { | |
left: -1px; | |
} | |
.ui-slider-horizontal .ui-slider-range-max { | |
right: -1px; | |
} | |
} | |
/** | |
* Cart sidebar | |
*/ | |
ul.cart_list, | |
ul.product_list_widget { | |
list-style: none outside; | |
padding: 0; | |
margin: 0; | |
li { | |
padding: 4px 0; | |
margin: 0; | |
@include clearfix(); | |
list-style: none; | |
a { | |
display: block; | |
font-weight: 700; | |
} | |
img { | |
float: right; | |
margin-left: 4px; | |
width: 32px; | |
height: auto; | |
box-shadow: none; | |
} | |
dl { | |
margin: 0; | |
padding-left: 1em; | |
border-left: 2px solid rgba(0,0,0,0.1); | |
@include clearfix(); | |
dt, | |
dd { | |
display: inline-block; | |
float: left; | |
margin-bottom: 1em; | |
} | |
dt { | |
font-weight: 700; | |
padding: 0 0 .25em 0; | |
margin: 0 4px 0 0; | |
clear: left; | |
} | |
dd { | |
padding: 0 0 .25em 0; | |
p:last-child { | |
margin-bottom: 0; | |
} | |
} | |
} | |
.star-rating { | |
float: none; | |
} | |
} | |
} | |
&.widget_shopping_cart, | |
.widget_shopping_cart { | |
.total { | |
border-top: 3px double $secondary; | |
padding: 4px 0 0; | |
strong { | |
min-width: 40px; | |
display: inline-block; | |
} | |
} | |
.cart_list { | |
li { | |
padding-left: 2em; | |
position: relative; | |
padding-top: 0; | |
a.remove { | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
} | |
} | |
.buttons { | |
@include clearfix(); | |
} | |
} | |
} | |
/** | |
* Tablet | |
*/ | |
@media only screen and (min-width: $screen-sm-min) { | |
.woocommerce, | |
.woocommerce-page { | |
/** | |
* Cart sidebar | |
*/ | |
ul.cart_list, | |
ul.product_list_widget { | |
li { | |
@include mediaright(); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment