Skip to content

Instantly share code, notes, and snippets.

@jlavoie13
Created November 23, 2015 19:19
Show Gist options
  • Save jlavoie13/81d102842f38f5cc2f65 to your computer and use it in GitHub Desktop.
Save jlavoie13/81d102842f38f5cc2f65 to your computer and use it in GitHub Desktop.
WooCommerce 2.4.10 SCSS
/******************************************************************
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";
}
/******************************************************************
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);
}
}
/******************************************************************
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;
}
/******************************************************************
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) {}
/******************************************************************
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;
/******************************************************************
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