File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/woo/woocommerce.scss
/*--------------------------------------------------
[scss file: assets/scss/woo/woocommerce.scss]
This file scss from plugin WooCommerce
+ Governs the general look and feel of WooCommerce sections of stores using themes that do not
+ Integrate with WooCommerce specifically.
---------------------------------------------------*/
// Imports
@import "mixins";
@import "variables";
@import "animation";
@import "prices";
//Global styles
p.demo_store {
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;
}
}
// Utility classes
.clear {
clear: both;
}
a.remove {
display: block; @include square(20px); text-align: center;@include transition(all 0.25s ease); position: relative; color: $button-bg-color !important;
overflow: hidden; padding: 0 0; font-size: 0px; text-align: center; @include border-radius(0px);
&:hover{ color: #FFF !important; text-decoration: none; background: $color1; }
&:before{ @include font-awesome5('\f00d', 20px, 900); font-size: 14px; color: inherit; }
}
.blockUI.blockOverlay {
position: relative;
@include loader();
}
.loader {
@include loader();
}
// Main WooCommerce styles
.woocommerce {
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
padding: 10px 20px 10px 20px;
margin: 15px 0 !important;
position: relative;
list-style: none !important;
@include clearfix();
width: auto;
&:before {
font-family: "WooCommerce";
content: "\e028";
display: inline-block;
position: relative;
left: auto;
top: auto;
margin: 0 10px 0 0;
vertical-align: top;
}
.button {
float: right; background: none; padding: 0; color: $link-color; font-size: 100%; border: none; height: auto; line-height: inherit;
&:focus,
&:hover{
color: $color1 !important; box-shadow: none; background: none;
}
}
li {
list-style: none;
padding-left: 0;
margin-left: 0;
&:first-child{ display: inline-block; }
}
}
.woocommerce-message {
background: #d8e8f0; color: #1b85ae;
&:before {
content: "\e015";
color: #1b85ae;
}
}
.woocommerce-info {
background: #d9edf7;
color: #1e85be;
&:before {
color: #1e85be;
}
}
.woocommerce-error {
background:#f2dede;
color: #b94a48;
&:before {
content: "\e016";
color: #b94a48;
}
}
small.note {
display: block;
color: $subtext;
font-size: .857em;
margin-top: 10px;
}
.woocommerce-breadcrumb{
@include clearfix();
margin: 0 0 1em;
padding: 0;
font-size: 0.92em;
color: $subtext;
a {
color: $subtext;
}
}
.quantity { position: relative;
.screen-reader-text{ display: none; }
.btn-decrement,
.btn-increment{
position: absolute; @include square(30px); min-width: 30px !important; top: 13px; right: 5px;
padding: 0; z-index: 3; background: transparent; font-size: 0px; color: $color; overflow: hidden; @include border-radius(0px);
&:before{ color: inherit; @include transition(all 0.25s ease-out); }
&:hover{
&:before{ color: $color1; }
}
}
.btn-decrement{
left: 5px; right: auto;
}
.input-group{ margin: 0 auto;
@media(max-width: $screen-phone){ margin: 0; }
}
.input-group-prepend{
.btn-decrement{
&:before{ @include font-ionicons('\f208', 30px); font-size: 13px; position: absolute; top: 0px; left: 0px; }
}
}
.input-group-append{
.btn-increment{
&:before{ @include font-ionicons('\f217', 30px); font-size: 13px; position: absolute; top: 0px; left: 0px; }
}
}
.qty {
width: 100px; padding: 0 0 0; height: 56px; border: 1px solid $base-border-color; box-shadow: none; background: #f9f9f9;
text-align: center;
color: $color;
font-size: 1em;
appearance: textfield;
-moz-appearance: textfield;
}
.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
// Product Page
div.type-product,
div.product {
margin-bottom: 0;
position: relative;
.product_title {
clear: none; padding: 0;
}
p.stock {
font-size: 0.92em;
}
.stock { color: $low-color;
&:before{ color: #6bba05; }
}
.out-of-stock { color: $low-color;
&:before{ color: red; }
}
.woocommerce-product-rating{
position: relative;
.woocommerce-review-link{
}
}
div.social {
text-align: right;
margin: 0 0 1em;
span {
margin: 0 0 0 2px;
span {
margin: 0;
}
.stButton .chicklets {
padding-left: 16px;
width: 0;
}
}
iframe {
float: left;
margin-top: 3px;
}
}
.woocommerce-tabs {
ul.tabs {
list-style: none;
padding: 0 0 0 1em;
margin: 0 0 1.618em;
overflow: hidden;
position: relative;
li {
border: 1px solid darken( $secondary, 10% );
background-color: $secondary;
display: inline-block;
position: relative;
z-index: 0;
border-radius: 4px 4px 0 0;
margin: 0 -5px;
padding: 0 1em;
a {
display: inline-block;
padding: .5em 0;
font-weight: 700;
color: $secondarytext;
text-decoration: none;
&:hover {
text-decoration: none;
color: lighten( $secondarytext, 10% );
}
}
&.active {
background: $contentbg;
z-index: 2;
border-bottom-color: $contentbg;
a {
color: inherit;
text-shadow: inherit;
}
&:before {
box-shadow: 2px 2px 0 $contentbg;
}
&:after {
box-shadow: -2px 2px 0 $contentbg;
}
}
&:before,
&:after {
border: 1px solid darken( $secondary, 10% );
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
&:before {
left: -6px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 $secondary;
}
&:after {
right: -6px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 $secondary;
}
}
&:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid darken( $secondary, 10% );
z-index: 1;
}
}
.panel {
margin: 0 0 2em;
padding: 0;
}
}
p.cart {
@include clearfix();
}
form.cart {
@include clearfix();
table {
margin: 0 0 15px;
border-bottom: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
td{
border-right: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; vertical-align: middle;
display: table-cell; padding: 10px 15px;
label{margin: 0 5px 5px 0px !important; float: none; line-height: inherit !important;}
.quantity{
.qty{
width: 70px;
}
}
&.woocommerce-grouped-product-list-item__label{
}
&.price{
text-align: center; padding: 0 5px;
.amount{ font-size: 115%;
}
del{ margin-left: 10px;
&:before {
@media(min-width: $screen-md-max){margin-top: -2px;}
}
}
ins{
float: none; margin-right: 10px;
}
.stock{ margin-top: 5px;}
}
&.label{text-align: center; padding: 5px 10px;}
}
small.stock {
display: block;
float: none;
}
&.group_table{
td{
padding: 10px 15px; vertical-align: middle;
@media(max-width: $screen-md-min){ padding: 10px 10px;}
&.woocommerce-grouped-product-list-item__quantity{
padding: 15px 0; width: 100px;
}
label{margin: 0 !important; }
&.label{text-align: left; white-space: normal; line-height: inherit;}
&.woocommerce-grouped-product-list-item__label{
a{ font-weight: bold; }
}
&.woocommerce-grouped-product-list-item__price{
color: $link-color; font-weight: bold;
}
}
}
}
}
}
// Product loops
ul.products {
padding: 0;
list-style: none;
clear: both;
@include clearfix();
li {
list-style: none;
}
}
.woocommerce-result-count {
margin: 0 0 1em;
}
.woocommerce-ordering {
margin: 0 0 1em;
select {
vertical-align: top;
border: 1px solid $base-border-color;
}
}
// Buttons
a.button,
button.button,
input.button,
#respond input#submit {
&.alt {
-webkit-font-smoothing: antialiased;
}
&:disabled,
&.disabled,
&:disabled[disabled] {
cursor: not-allowed;
&:hover{ background: rgba($color1, 0.7); border-color: rgba($color1, 0.7); }
}
}
.cart .button,
.cart input.button {
float: none;
background: $link-color; border: none; color: #FFF;
&:hover{ background: $color1; }
}
// Reviews
#reviews {
margin: 0 0 5px;
padding: 0 200px;
@media (max-width: $screen-md-max) { padding-left: 0; padding-right: 0;}
h2 small {
float: right;
color: $subtext;
font-size: 15px;
margin: 10px 0 0 0;
a {
text-decoration: none;
color: $subtext;
}
}
h3 {
margin: 0;
}
p.woocommerce-noreviews{
margin: 0 0;
}
#respond {
margin: 0;border: 0;padding: 0;
#commentform{ @include clearfix();
padding: 40px 50px 50px; border: 1px solid $line-border-color; background: #f9f9f9; @include border-radius(4px);
@media (max-width: $screen-md-min) {
padding: 30px 40px 40px;
}
@media (max-width: $screen-phone) {
padding: 20px 30px 30px;
}
}
}
#review_form_wrapper{ margin-top: 5px; }
#comments { margin-top: 5px; @include clearfix();
.add_review {
@include clearfix();
}
h2.woocommerce-Reviews-title {
display: block;
}
ol.commentlist {
@include clearfix();
@include ulclear();
margin: 0; padding: 0 0;
width: 100%;
background: none;
list-style: none;
li.review {
padding: 30px 0 0;
margin: 30px 0 0;
border: none; border-top: 1px dashed $base-border-color;
position: relative;
background: 0;
&:first-child{ margin-top: 0px; padding-top: 0; border: none; }
.star-rating{ float: right; margin-top: -5px; }
p.meta {
font-weight: normal; margin: -5px 0 15px; color: $low-color;
.woocommerce-review__author{ font-weight: normal; }
.woocommerce-review__dash{ font-size: 0px; margin: 0 9px 0 10px; position: relative;
&:before{ position: absolute; content: ""; height: 12px; width: 1px; background: $low-color;
left: 0px; top: -10px;
}
}
.woocommerce-review__published-date{ font-weight: normal; }
}
img.avatar {
float: left;
padding: 0px;
max-width: 80px; width: auto;
height: auto;
background: $secondary;
border: none;
margin: 0;
box-shadow: none; @include border-radius(4px);
@media(max-width: $screen-xs-max){ max-width: 60px; }
}
.comment-text {
margin: 0 0 0 105px;
@include border-radius(0px); padding: 0;
@include clearfix();
@media(max-width: $screen-md-min){ margin-left: 100px; }
@media(max-width: $screen-xs-max){ margin-left: 75px; }
.description{ padding: 15px 20px; background: #f9f9f9; border: 1px solid $line-border-color; position: relative; @include border-radius(4px);
&:before{
position: absolute;content: "";display: block;width: 0;height: 0;
border-bottom: 6px solid;
border-bottom-color: currentcolor;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 0;
top: -6px;
left: 25px;
border-bottom-color: $line-border-color;
}
p:last-child{ margin-bottom: 0px; }
}
}
}
ol,
ul{
padding: 0 0 0 25px; margin: 0 0 25px;
ol,
ul{ margin: 0 0; padding: 0 0 0 30px; }
}
ul.children {
list-style: none outside;
margin: 20px 0 0 50px;
.star-rating {
display: none;
}
}
#respond {
border: 1px solid darken( $secondary, 3% );
border-radius: 4px;
padding: 1em 1em 0;
margin: 20px 0 0 50px;
}
}
.commentlist > li:before {
content: "";
}
}
}
#comment {
height: 160px;
}
//price
.price{
display: inline-block;
}
// Star ratings
.star-rating {
overflow: hidden;
position: relative;
height: 26px;
line-height: 26px;
font-size: 16px;
width: 65px;
font-family: 'Ionicons';
&:before {
content: "\f2fc\f2fc\f2fc\f2fc\f2fc";
color: $low-color;
float: left;
top: 0;
left: 0;
position: absolute;
}
span {
overflow: hidden;float: left;top: 0;left: 0;position: absolute; padding-top: 24px; height: 24px;
}
span:before {
content: "\f2fc\f2fc\f2fc\f2fc\f2fc";
color: $color1;
top: 0;
position: absolute;
left: 0;
}
}
.woocommerce-product-rating {
@include clearfix();
line-height: 26px; height: 26px;
display: block;
.star-rating {
margin: .5em 4px 0 0;
float: left;
}
}
.products {
.grid-view{
.star-rating {
}
}
.list-view{
.star-rating {
display: block;
margin: 5px 0;
float: none;
position: relative;
left: 0;
}
}
}
.hreview-aggregate {
.star-rating {
margin: 10px 0 0 0;
}
}
#review_form {
#respond {
@include clearfix();
position: static;
margin: 0;
width: auto;
padding: 0 0 0;
background: transparent none;
border: 0;
.comment-notes{ margin-bottom: 15px; font-style: italic; }
p {
margin: 0 0 10px;
&.stars{ margin-top: 5px; }
input[type=email],
input[type=text]{
width: 100%; height: 45px; @include placeholder($color);
&:focus{
border-color: $base-border-color;
}
}
label{ display: block; margin-bottom: 5px; font-weight: bold; color: $link-color; }
&.comment-form-email{
@media(min-width: $screen-xs-min){
width: 50%; float: left; padding-left: 10px;
}
}
&.comment-form-author{
@media(min-width: $screen-xs-min){
width: 50%; float: left; padding-right: 10px;
}
}
&.comment-form-cookies-consent{
@include clearfix();
width: 100%; float: left;
#wp-comment-cookies-consent{ margin-right: 5px; }
label{ margin: 0; position: relative; top: -1px; display: inline; text-transform: none; font-size: 1em; color: $link-color; }
}
}
.form-submit { width: 100%; float: left; margin: 10px 0 0;
}
textarea {
@include box-sizing(border-box); width: 100%; @include placeholder($color);
&:focus{
border-color: $base-border-color;
}
}
.comment-form-rating{
label{ margin-bottom: 0px; font-weight: bold; color: $link-color; }
}
}
}
p.stars {
position: relative; font-size: 12px;
a {
display: inline-block; margin-right: 1em; text-indent: -9999px; position: relative; border-bottom: 0 !important;
outline: 0; line-height:16px;
&:last-child {
border-right: 0;
}
&.star-1,
&.star-2,
&.star-3,
&.star-4,
&.star-5 {
font-family: 'Ionicons'; margin-right: 15px; display: inline-block;
letter-spacing: 1px;
position: relative; height: 16px; line-height: 16px;
&:after {
text-indent: 0; position: absolute;top: 0; left: 0; content: "\f2fc"; color: $low-color; font-size: 16px;
@include transition(all 0.25s ease-out);
}
&:before{
font-family: inherit; display: none;
}
&:hover, &.active{
&:after{
color: $color1;
}
}
}
&.star-1 {
width: 13px;
&:after {
content: "\f2fc";
}
}
&.star-2 {
width: 26px;
&:after {
content: "\f2fc\f2fc";
}
}
&.star-3 {
width: 39px;
&:after {
content: "\f2fc\f2fc\f2fc";
}
}
&.star-4 {
width: 52px;
&:after {
content: "\f2fc\f2fc\f2fc\f2fc";
}
}
&.star-5 {
width: 65px;
&:after {
content: "\f2fc\f2fc\f2fc\f2fc\f2fc";
}
&:before{
display: none;
}
}
}
}
// Tables
table.shop_attributes {
border: 1px solid $line-border-color; border-right: none;
margin-bottom: 1.618em;
width: 100%;
tr:nth-child(even) {
th,
td {
background-color: #f9f9f9;
}
}
th {
@media(min-width: $screen-xs-min){
width: 180px;
}
font-weight: bold;
padding: 12px 25px;
border-top: 1px solid $line-border-color;
border-right: 1px solid $line-border-color;
margin: 0;
line-height: 1.5;
color: $link-color;
}
td {
padding: 12px 25px;
border-top: 1px solid $line-border-color;
border-right: 1px solid $line-border-color;
margin: 0;
line-height: 1.5;
p {
margin: 0;
}
}
.alt td,
.alt th {
background: #f9f9f9;
}
}
table.shop_table {
border: 1px solid $line-border-color; border-right: none;
margin: 0px 0px 40px 0px;
text-align: left;
width: 100%;
border-collapse: separate;
overflow: hidden;
th {
padding: 20px; text-align: center; font-size: 1em; border-color: $line-border-color;
border-bottom: none;
@media(max-width: $screen-md-min){ padding: 15px; }
&.product-name{
}
}
td {
border-top: 1px solid $line-border-color; border-color: $line-border-color;
padding: 20px;
vertical-align: middle;
@media(max-width: $screen-md-min){ padding: 15px; }
small {
font-weight: normal;
}
&.product-remove{
border-right: 1px solid $line-border-color;
.remove{margin: auto;
&:before{ position: absolute; top: 0px; left: 0px; }
}
width: 60px;
}
&.product-thumbnail{
width: 120px; text-align: center;
}
&.product-price,
&.product-subtotal,
&.product-quantity{
text-align: center;
label{
float: left;
line-height: 40px;
}
}
&.product-name{
a{ font-weight: bold; }
}
.quantity {
.btn-decrement,
.btn-increment{
@include square(20px); min-width: 20px !important; right: 5px; top: 10px;
}
.btn-decrement{
left: 5px; right: auto;
}
.input-group-prepend{
.btn-decrement{
&:before{ @include font-ionicons('\f208', 20px); }
}
}
.input-group-append{
.btn-increment{
&:before{ @include font-ionicons('\f217', 20px); }
}
}
.qty {
width: 80px; height: 40px; border: 1px solid $base-border-color;
}
}
}
tbody:first-child {
tr:first-child {
th,
td {
border-top: 0;
}
}
}
tfoot td,
tfoot th,
tbody th {
font-weight: bold;
border-top: 1px solid $line-border-color;
}
}
table.my_account_orders {
th,
td {
padding: 10px 10px;
vertical-align: middle;
}
.button {
white-space: nowrap;
}
.order-actions {
text-align: right;
.button {
margin: .125em 0 .125em .25em;
}
}
}
td.product-name {
dl.variation {
margin: 10px 0 10px 0;
@include clearfix();
dt,
dd {
display: inline-block;
float: left;
}
dt {
font-weight: 700;
padding: 0 0 0 0;
margin: 0 5px 0 0;
clear: left;
}
dd {
padding: 0 0 0;
margin: 0 0;
p:last-child {
margin-bottom: 0;
}
}
}
p.backorder_notification {
font-size: 0.83em;
}
}
//
.woocommerce-customer-details{ margin-bottom: 60px;}
form.track_order{
@media(min-width: $screen-phone){
.form-row-first,
.form-row-last{
width: 50%; float: left; padding: 5px 15px 0 0;
}
.form-row-last{ padding: 5px 0 0 15px;}
}
}
//
.woocommerce-form-login{
@media(min-width: $screen-phone){
.form-row-wide{ width: 50%; float: left; padding: 0 15px;
&:first-child{ padding-left: 0px; }
&:nth-child(1){ padding-right: 0px; }
}
}
.button{ display: block; margin: 0 0 10px;}
}
form.lost_reset_password{ margin: 0 0 60px;
@media(min-width: $screen-phone){ .form-row-first{ width: 50%; padding-right: 15px; } }
}
&.widget_shopping_cart,
.widget_shopping_cart {
.total {
height: 50px; line-height: 50px; padding: 0 25px; margin: 0 0 20px; font-size: 1em;
position: relative; text-transform: uppercase; border:none;
span{ font-weight: bold; }
&:before{
content: "";position: absolute; top:0; height: 1px;width: calc(100% - 50px) !important; left: 25px;background: $line-border-color;
}
&:after{
content: "";position: absolute; bottom:0; height: 1px;width: calc(100% - 50px) !important; left: 25px;background: $line-border-color;
}
strong {
display: inline-block; float: left;
}
.amount{ float: right; }
}
.woo-buttons {
margin: 0 0 20px!important; padding: 0 25px;
@include clearfix(); text-align: center;
.button {
margin: 0 7.5px 10px 0; display: block; float: left; width: calc(50% - 7.5px); padding-left: 0px; padding-right: 0px;
&.checkout{
margin: 0 0 10px 7.5px;
}
}
}
// Cart sidebar
ul.cart_list,
ul.product_list_widget {
list-style: none outside; padding: 10px 25px; margin: 0; overflow: auto; font-size: 1em; max-height: 400px;
li {
padding: 10px 0; margin: 0 0; @include clearfix(); list-style: none; position: relative;
&:hover{
.product-image{
&:before{ @include opacity(1); visibility: visible; }
}
}
&.empty{ padding: 25px 0 30px; }
a {
&:hover{
color: $color1;
}
&.remove{
position: absolute; overflow: hidden; left: 5px; top: 15px; z-index: 1; padding: 0 0; margin: 0 0; background: rgba(#FFF, 0.7); @include transition(all 0.25s ease-out);
&:before{ font-size: 12px; }
&:hover{
background: $color1; color: #FFF;
&:before{ color: #FFF; }
}
}
}
.product-image{
position: relative; display: inline-block; float: left; float: left; padding: 0 0; margin-right: 15px; max-width: 80px;
&:before{
position: absolute; content: ""; height: 100%; width: 100%; left: 0px; top: 0px; background: rgba(#000, 0.08);
@include opacity(0); visibility: hidden; @include transition(all 0.25s ease-out);
}
}
.title{
font-size: 1em; padding: 0 0; margin: 5px 0 5px 0; display: block; color: $link-color; font-weight: bold; line-height: 1.42857;
&:hover{ color: $color1; }
}
.quantity{
display: block;
}
img {
box-shadow: none; border: none; margin: 0; float: none; width: auto;
}
dl {
margin: 0;padding-left: 1em;border: none;display: inline-block;vertical-align: top; @include clearfix();
dt,
dd {
display: inline-block;float: left;margin-bottom: 0;
}
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;
}
}
}
}
// Forms
form {
.form-row {
padding: 3px 0;
margin: 0 0 10px;
[placeholder]:focus::-webkit-input-placeholder {
-webkit-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
transition: opacity 0.5s 0.5s ease;
opacity: 0;
}
.select2-container .select2-choice{
padding: 4px 0 4px 8px; border-color: #e9e9e9;
@include border-radius(0);
}
label {
line-height: 2;
}
label.hidden {
visibility: hidden;
}
label.inline {
display: inline;
}
select {
cursor: pointer;
margin: 0;
}
.required {
color: red;
font-weight: 700;
border: 0;
}
label.checkbox{
padding-left: 20px; line-height: normal;
.input-checkbox {
display: inline;
margin: 3px 0 0 -20px;
text-align: center;
vertical-align: middle;
}
}
input.input-text,
textarea {
@include box-sizing(border-box);
width: 100%;
margin: 0;
outline: 0;
}
textarea {
height: 145px;
line-height: 1.5;
display: block;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.select2-container {
width: 100%;
line-height: 2em;
}
&.woocommerce-invalid {
.select2-container,
input.input-text,
select {
border-color: $red;
}
}
&.woocommerce-validated {
.select2-container,
input.input-text,
select {
border-color: $green - #111;
}
}
::-webkit-input-placeholder {
line-height: normal;
}
:-moz-placeholder {
line-height: normal;
}
:-ms-input-placeholder {
line-height: normal;
}
}
}
form.lost_reset_password,
form.login,
form.checkout_coupon,
form.register {
border: none;
padding: 0px;
margin: 0 0 30px;
text-align: left;
.woocommerce-form-row {
label{ display: block; margin: 0 0 5px; }
}
}
form.login{
h2{ font-size: 2em; }
label.woocommerce-form__label{ display: block; margin: 0 0 10px; }
}
ul#shipping_method {
list-style: none outside;
margin: 0 0 10px;
padding: 0;
li {
margin: 0; padding: 0 0;
list-style: none outside; display: block; @include clearfix();
input[type="checkbox"], input[type="radio"] {
float: left; margin: 3px 8px 0 0;
}
label{ float: left; margin: 0 0; }
}
}
p.woocommerce-shipping-contents {
margin: 0;
}
// Order page
.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;
}
}
}
// Layered nav widget
.widget_layered_nav {
// type list
ul {
@include ulclear(); margin: -6px 0 0; padding: 0; border: 0;
li {
padding: 6px 0; display: block; color: $link-color;
> *:first-child{
position: relative; padding: 0 0 0 26px; background: transparent; line-height: 1;
&:before{
width: 16px; height: 16px; border: 2px solid $color; @include border-radius(0px); content: ""; position: absolute; top: 1px; left: 0; @include transition(all 0.25s ease-out);
}
}
> a{
&:after{
position: absolute; @include font-ionicons('\f122', 16px); font-size: 10px; left: 0px; top: 1px; @include transition(all 0.25s ease-out); @include opacity(0); color: $color1;
}
}
.count{ position: relative; color: $low-color; font-size: 100%;
&:before{ content: "("; }
&:after{ content: ")"; }
}
&.chosen,
&:hover{
> a{
text-decoration: none;
&:after,
&:before{
border-color: $color1;
}
&:after{ @include opacity(1); }
}
}
&:last-child{
padding-bottom: 0px;
}
}
&.yith-wcan-color{
@include ulclear(); margin: -3px 0 6px;
li{
padding: 0px; margin: 8px 0 8px 0; width: 100%;
&:last-child{
margin-bottom: 0px;
}
> *:first-child {
width: 20px; height: 20px; line-height: 20px; display: block; overflow: visible; text-indent: 30px;
position: relative; margin: 0 0; border:none !important; @include transition(all 0.25s ease-out);
&:before{
position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border: 5px solid #FFF;
@include transition(all 0.25s ease-out); @include opacity(1);
}
&:after{
position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border: 1px solid $color;
@include transition(all 0.25s ease-out); @include opacity(1); @include transition(all 0.25s ease-out);
}
}
&.chosen,
&:hover{
> a{
&:before{ border-color: #fff; }
&:after{ border-color: $color1; border-width:2px; @include transition(all 0.25s ease-out); }
}
}
}
}
}
// type dropdown
.dropdown_layered_nav_color{
width: 100%;
border-radius: 0;
background: transparent;
}
.yith-wcan-select-wrapper ul.yith-wcan-select.yith-wcan{
margin-left: 15px;
li{
padding: 0;
}
}
// type label
.yith-wcan-label li{
margin-bottom: 0px;
&:before{
display: none;
}
&:hover:before{
display: none;
}
a{
padding: 4px 8px !important;
}
a:hover,&.chosen a{
background: $color1 !important;
border-color: $color1 !important;
}
}
}
.widget_rating_filter{
.wc-layered-nav-rating{ padding: 0;
a{ display: block; text-align: right; color: $low-color;
.star-rating{ float: left; }
&:hover{ color: $link-color; }
}
}
}
.widget_layered_nav_filters {
ul {
margin: 0;
padding: 0;
border: 0;
list-style: none outside;
overflow: hidden;
zoom: 1;
li {
float: left;
padding: 0 10px 1px 0;
list-style: none;
a {
text-decoration: none;
color: inherit;
&:hover{
color: $color1;
}
&:before {
@include iconbefore( "\e013" ); top: 1px; position: relative;
}
}
}
}
}
// Price filter widget
.widget_price_filter {
form, .widget-title + form{
padding: 7px 0px 0px 0px;
}
.price_slider_wrapper{
position: relative; padding-top: 5px;
}
.price_slider_amount { margin: 25px 0 0; text-align: left;
.button {
display: block; padding: 0; border: none; background: none; @include border-radius(0px); height: auto; line-height: inherit; position: relative;
color: $link-color; font-weight: bold;
&:after{ @include font-ionicons('\f30f', 12px); font-size: 16px; margin-left: 10px; width: 12px; position: relative; top: 1px; }
&:hover{
color: $color1; background: none; border: none;
}
}
.price_label{
text-transform: none; margin: 0 0 5px;
.from{
left: 0;
}
.to{
right: 0;
}
}
}
.ui-slider {
position: relative; text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute; z-index: 2; width: 14px; height: 14px; border: none; @include border-radius(100%);
background: $button-bg-color; cursor: ew-resize; outline: none; top: -6px; margin: 0 0 0 -1px;
&:last-child{
margin-left: -13px;
}
}
.ui-slider .ui-slider-range {
position: absolute; z-index: 1; display: block; border: 0; background-color: $color1;
}
.price_slider_wrapper {
.ui-widget-content {
border: 0;
}
.ui-slider-horizontal {
height: 2px; background-color: $base-border-color; margin: 0 0;
}
.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;
}
}
}
p.cart-empty{ margin: 0 0 30px 0;
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
padding: 15px 30px;
}
p.return-to-shop{ margin: 0 0;}
.woocommerce-MyAccount-navigation{
margin-bottom: 50px; padding-bottom: 20px; border-bottom: 1px solid $line-border-color;
> ul{
li{
padding: 3px 0px;
&.is-active{
a{ color: $color1; }
}
}
}
}
}
// Account page
.woocommerce-account {
.addresses {
.title {
@include clearfix();
h3 {
float: left;
}
.edit {
float: right;
}
}
}
ol.commentlist.notes {
li.note {
p.meta {
font-weight: 700;
margin-bottom: 0;
}
.description {
p:last-child {
margin-bottom: 0;
}
}
}
}
ul.digital-downloads {
margin-left: 0;
padding-left: 0;
li {
list-style: none;
margin-left: 0;
padding-left: 0;
&:before {
@include iconbefore( "\e00a" );
}
.count {
float: right;
}
}
}
}
body.single-product {
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
margin: 0 0 30px;
}
}
// Cart page
.woocommerce-cart {
table.cart {
overflow: hidden;
.product-name{
}
.product-thumbnail {
img {
max-width: 100%; box-shadow: none; width: auto;
}
}
th{
text-transform: uppercase;background: #fff;font-weight: bold; color: #333;
}
th,
td {
vertical-align: middle;
}
td.actions {
padding: 25px 25px;
@media(max-width: $screen-phone){ padding: 15px; }
.coupon {
float: left; padding: 0 0;
label{ display: none; float: left;}
.input-text {
float: left;
margin: 0 10px 0 0; padding: 0 15px; height: 50px; line-height: 50px;
@media(max-width: $screen-phone){ margin: 0; width: 50%;
+ .button{
float: left; width: calc(50% - 10px); margin-left: 10px; padding: 0;
}
}
}
}
> .button{
float: right;
@media(max-width: $screen-xs-max){
float: left; margin-top: 15px; clear: left;
}
}
}
input {
margin: 0;vertical-align: middle;
&.button{
margin: 0;
}
}
@media(max-width: $screen-xs-max){
td.product-quantity{ width: auto; padding: 10px;
.quantity{
label.screen-reader-text{ display: none; }
}
}
}
@media(max-width: $screen-phone){
border-collapse: collapse;
thead{
display:none;
}
tr.cart_item{
border-right: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative;
td{
border: medium none;float: right;text-align: left; width: 62%; padding: 4px 8px 4px 0;
&.product-thumbnail{
padding: 12px;
}
&.product-name{
padding-top: 12px;
}
&.product-subtotal{
padding-bottom: 12px;
}
}
.product-remove{
padding: 0; position: absolute; width: 20px; height: 20px; left: 17px; top: 17px;
@media(max-width: $screen-phone){
a.remove{ background: rgba(#FFF, 0.6);
&:before{ font-size: 12px; }
&:hover{
background: #FFF;
}
}
}
}
.product-thumbnail{
float: left; width: 38%;
}
.product-subtotal{
display: none;
}
}
}
}
.wc-proceed-to-checkout {
@include clearfix; padding: 0 0;
a.checkout-button {
text-align: center; width: 100%; padding: 0 0; font-size: 1em; background: $color1; color: #fff;
}
.wcppec-checkout-buttons{
margin: 15px 0 0;
.wcppec-checkout-buttons__separator{ margin: 8px 0; }
.wcppec-checkout-buttons__button{ padding: 0; }
}
}
.cart-collaterals {
margin: 0 0 0; @include clearfix();
.woocommerce-shipping-calculator,
.shipping_calculator {
.button {
width: 100%;float: none;display: block;
}
.shipping-calculator-button { font-weight: bold;
&:after {
@include font-awesome5( "f5e4", 14px, 900 ); margin-left: 8px; text-align: right; font-size: 14px;
}
}
}
.cross-sells{
width: 72%; float: left; padding: 0 60px 0 0; margin: 50px 0 0;
h2{
position: relative; line-height: 1.1; margin: 0 0 13px; font-size: 1.7142em; text-transform: uppercase;
}
@media(max-width: $screen-md-max){ width: 65%; padding-right: 30px; }
@media(max-width: $screen-md-min){ width: 60%; padding-right: 20px; }
@media(max-width: $screen-phone){ width: 100%; padding: 0 0; }
}
.cart_totals {
width: 28%; float: right; padding: 0 0 0 60px; margin: 50px 0 0;
@media(max-width: $screen-md-max){ width: 35%; padding-left: 30px; }
@media(max-width: $screen-md-min){ width: 40%; padding-left: 20px; }
@media(max-width: $screen-phone){ width: 100%; padding: 0 0; clear: left; float: left; padding-left: 0px; margin-top: 60px; }
.sns_products_heading{
margin-bottom: 60px;
}
ul.products {
li.product {
margin-top: 0;
.block-product-inner{
.item-info{
.info-inner{
padding-bottom:0;
}
.item-content{
@include clearfix();
}
}
}
}
}
h2{
position: relative; line-height: 1.1; margin: 0 0 13px; font-size: 1.7142em; text-transform: uppercase;
}
.wc-proceed-to-checkout{
a{
&.checkout-button{
}
}
}
p {
small {
color: $subtext; font-size: 0.83em;
}
}
table {
border-collapse: separate; margin: 0 0 15px;padding: 0;border: none;
tr:first-child {
th,
td {
border-top: 0;
}
}
td,
th {
vertical-align: top; border-left: 0; border-right: 0; padding: 15px 0;
}
th {
text-align: left; color: $link-color; padding: 15px 10px 15px 0; text-transform: uppercase;
}
td{ padding: 15px 0 15px 10px; }
small {
color: $subtext;
}
select {
width: 100%;
}
}
.woocommerce-shipping-calculator{
margin: 5px 0 0;
.shipping-calculator-form{ margin-top: 10px; }
}
.discount td {
color: $highlight;
}
tr td,
tr th {
border-top: 1px solid $secondary;
}
}
}
}
// Checkout
.woocommerce-checkout {
.checkout {
.col-1,
.col-2{ margin-bottom: 30px; }
#customer_details {
@include clearfix();
h3#ship-to-different-address {
@include clearfix();
label{
float: left; margin: 0 0; font-weight: inherit; color: inherit;
}
input[type="checkbox"]{ position: relative; margin: 0 5px 0 0; top: -3px; }
}
.notes {
clear: left;
}
.form-row-first {
clear: left;
}
&.col2-set{
.col-1{
width: 50%; padding-right: 15px; float: left;
@media(max-width: $screen-phone){ width: 100%; padding: 0; float: left; }
}
.col-2{
width: 50%; padding-left: 15px; float: left;
@media(max-width: $screen-phone){ width: 100%; padding: 0; float: left; }
}
}
}
.create-account small {
font-size: 11px;
color: $subtext;
font-weight: normal;
}
div.shipping-address {
padding: 0;
clear: left;
width: 100%;
}
.shipping_address {
clear: both;
}
h3#order_review_heading{
margin-top: 20px;
}
#order_review{
.shop_table{
th{text-align: left;}
}
}
}
#payment {
background: #FFF; border: 1px solid $line-border-color;
border-radius: 5px;
ul.payment_methods {
@include clearfix();
text-align: left;
padding: 25px;
border-bottom: 1px solid $line-border-color;
margin: 0;
list-style: none outside;
li {
line-height: 2;
text-align: left;
margin: 0;
font-weight: normal;
input {
margin: 0 1em 0 0;
}
img {
vertical-align: middle;
margin: -2px 8px 0 8px;
padding: 0;
position: relative;
box-shadow: none;
}
img + img {
margin-left: 2px;
}
}
}
div.form-row {
padding: 25px;
}
div.payment_box {
position: relative;
width: 96%;
padding: 1em 2%;
margin: 1em 0 1em 0;
font-size: 0.92em;
border-radius: 2px;
line-height: 1.5;
background-color: darken( $secondary, 5% );
color: $secondarytext;
input.input-text, textarea {
border-color: darken( $secondary, 15% );
border-top-color: darken( $secondary, 20% );
}
::-webkit-input-placeholder {
color: darken( $secondary, 20% );
}
:-moz-placeholder {
color: darken( $secondary, 20% );
}
:-ms-input-placeholder {
color: darken( $secondary, 20% );
}
.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(../img/woo/icons/credit-cards/visa.png);
}
&.mastercard {
background-image: url(../img/woo/icons/credit-cards/mastercard.png);
}
&.laser {
background-image: url(../img/woo/icons/credit-cards/laser.png);
}
&.dinersclub {
background-image: url(../img/woo/icons/credit-cards/diners.png);
}
&.maestro {
background-image: url(../img/woo/icons/credit-cards/maestro.png);
}
&.jcb {
background-image: url(../img/woo/icons/credit-cards/jcb.png);
}
&.amex {
background-image: url(../img/woo/icons/credit-cards/amex.png);
}
&.discover {
background-image: url(../img/woo/icons/credit-cards/discover.png);
}
}
span.help {
font-size: .857em;
color: $subtext;
font-weight: normal;
}
.form-row {
margin: 0 0 1em;
}
p:last-child {
margin-bottom: 0;
}
&:after {
content: "";
display: block;
border: 8px solid darken( $secondary, 5% ); // arrow size / color
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
position: absolute;
top: -3px;
left: 0;
margin: -1em 0 0 2em;
}
}
.payment_method_paypal {
> input {
margin-top: 27px !important; float: left;
}
.about_paypal {
float: right;
line-height: 70px;
font-size: 0.83em;
}
img {
max-height: 70px;
vertical-align: middle;
}
}
#place_order{
}
}
}
#sns-ajaxcart-popup-message,
#yith-wcwl-popup-message{
line-height: normal; @include border-radius(3px); box-shadow: 0 0 10px rgba(#1b85ae, 0.4) !important; margin: 0 !important;
position: fixed; left: auto; right: 50px; top: 120px; padding: 15px 20px 15px 45px; z-index: 99;
background: #d8e8f0; color: #1b85ae; border: 1px solid rgba(#1b85ae, 0.2); display: none; font-weight: normal;
&:before{
font-family: "WooCommerce";
content: "\e015";
color: #1b85ae;
display: inline-block;
position: absolute;
left: 20px;
top: calc(50% - 8px); text-align: left;
vertical-align: top;
}
}
.yith-woocompare-widget{
ul.products-list{
padding: 0 0 15px; @include clearfix();
li{
padding: 2px 0; float: left; width: 100%;
.title{float: left; font-size: 108.3%; max-width: 90%;}
.remove{
background: none;
font-size: 0px;
width: 20px; height: 20px;
@include border-radius(0);
display: inline-block;
line-height: normal;
float: right;
&:hover{
background:none;
}
}
}
}
.compare.button{ margin: 0 0 0 8px; }
}
.widget_product_search{
label{
display: block; font-weight:bold;
}
input[type="search"]{
float: left; margin: 0 5px 0 0;
}
}
.widget_product_tag_cloud{
.tagcloud{
padding: 0px !important;
a{
background: #FFF; border: 1px solid #eaeaea; padding: 4px 15px; @include border-radius(5px);
display: inline-block; font-size: 100% !important;
color: inherit; @include transition(all 0.2s ease-out 0s);
margin: 0 10px 10px 0; float: left;
&:hover{
color: #FFF; border-color: $color1; background-color: $color1;
}
}
}
}
.widget.widget_product_categories{
.widget-title + .product-categories{
padding: 0; margin: -1px 0 0;
}
> ul{
counter-reset: li-counter; padding-right: 0; list-style: none; padding-left: 0px;
.children{
margin-bottom: -8px; padding-left: 22px; position: relative;
}
li{
position: relative; padding: 0; margin: 8px 0; @include clearfix();
&:last-child{
padding-bottom: 0px;
}
.accr_header{ padding: 0 0; display: inline-block; }
.accr_header > a,
> a{
padding: 0 0; font-weight: bold;
&:before{ @include font-ionicons('\f30f', 12px); font-size: 16px; margin-right: 10px; color: $link-color; vertical-align: middle; margin-top: -2px; }
}
.count{ color: $low-color; }
}
> li{
.accr_header > a,
> a{
padding: 0 0;
}
.accr_header {
.btn_accor{ top: 0; color: $link-color;
i{ display: none; }
&:before{
@include font-ionicons('\f104', 12px); font-size: 12px; text-align: right;
}
}
&:hover{
.accr_header > a,
> a{ color: $color1;
&:before{ color: $color1; }
}
.btn_accor{ color: $color1; }
}
&.open{
.accr_header > a,
> a{ color: $color1;
&:before{ color: $color1; }
}
.btn_accor{ color: $color1;
&:before{ @include font-ionicons('\f10d', 12px); text-align: right; }
}
}
}
&:first-child{ padding-top: 0px; }
&:last-child{ padding-bottom: 0px; margin-bottom: 0px; }
}
}
.accr_content{width: 100%;}
}
.widget_products{
ins{margin: 0 0 0 5px;}
}
.products-list{
a.title{
font-size: 108.3%;
}
}
.woocommerce{
table.wishlist_table{
font-size: 100%; opacity:1 !important; margin-bottom: 0px;
.add_to_cart,
.yith-wcqv-button {
@include square(35px); line-height: 35px; background: $button-bg-color; border: none; color: #fff; margin: 0 0; @include border-radius(3px);
font-size: 0px; padding: 0 !important; display: block; vertical-align: top; overflow: hidden; @include transition(all 0.25s ease-out);
position: relative;
&:before{
position: absolute; left: 0px; top: 0px; font-size: 16px; background-color: transparent; @include transition(all 0.25s ease-out);
color: inherit; @include square(35px); line-height: 35px;
}
&:focus,
&:active{ background: transparent; box-shadow: none; }
&:hover{ background: transparent;
&:before{
color: $color1;
}
}
&:hover{
background-color: $color1; border-color: $color1;
&:before{ color: #FFF; }
}
&.product_type_variable,
&.product_type_simple,
&.product_type_grouped,
&.product_type_external,
&.add_to_cart_button{ display: block !important;
&:before{ @include font-ionicons('\f110', 35px); }
&.loading{
&:before{
position: absolute; background: transparent;
@include font-ionicons('\f29c', 35px); font-size: 16px; z-index:1; cursor: wait;
-webkit-animation: spin 0.6s ease-in-out infinite;
-moz-animation: spin 0.6s ease-in-out infinite;
-o-animation: spin 0.6s ease-in-out infinite;
animation: spin 0.6s ease-in-out infinite;
}
}
&.added{
display: none;
}
}
&.product_type_variable,
&.product_type_grouped,
&.product_type_external{
&:before{@include font-ionicons('\f30f', 35px);}
}
&.added_to_cart{ color: $color;
i{
display: none;
}
&:before{ @include font-ionicons('\f110', 35px); font-size: 16px; }
&:hover{
background: $color1;
&:before{
color: inherit;
}
}
}
&.yith-wcqv-button{ position: relative;
&:before{ @include font-ionicons('\f346', 35px); }
.blockUI.blockOverlay{
position: absolute; top: 0px !important; left: 0px !important; @include border-radius(3px); border: none !important;
overflow: hidden; opacity: 1 !important; background: #fff !important; color: $button-bg-color !important;
width: 35px !important; height: 35px !important; line-height: 35px !important; cursor: wait;
&:before, &:after{
color: inherit !important; font-size: 16px; cursor: wait; width: 35px !important; height: 35px !important; line-height: 35px !important; display: block;
}
}
&:hover{
.blockUI.blockOverlay{ background: $color1 !important; color: #FFF !important;
}
}
}
}
.yith-wcqv-button.button{ margin-top: 15px; display: none;
@media (max-width: $screen-xs-max) { display: none; }
}
.add_to_cart.button{ margin: 0 auto; }
> thead > tr > th{
background: #fff; text-transform: uppercase; color: $button-bg-color;
}
a.remove{margin-left: auto; margin-right: auto;}
tr {
td{ padding: 15px 15px;
&.product-thumbnail a{ max-width: 100%; }
&.product-name{
a{
&:not(.yith-wcqv-button){ font-weight: bold; }
}
}
&.product-remove{ padding: 10px 0;}
&.product-add-to-cart{
a{ margin: 0; }
}
&.wishlist-empty{
padding: 70px 15px;
}
}
}
tfoot{
tr td{
padding: 15px 20px;
}
}
@media(max-width: $screen-phone){
border-collapse: collapse;
thead{
display:none;
}
tbody{
tr{
border-right: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: relative;
td{
border: medium none; float: right; width: 65%; padding: 4px 8px 4px 0;
text-align: left !important;
&.product-remove{
padding: 0; position: absolute; width: 20px; left: 15px; top: 15px; border: none;
}
&.product-add-to-cart{
> * { margin: 0 0 10px !important; }
}
&.product-thumbnail{
padding: 12px;
}
&.product-name{
padding-top: 15px;
}
&.product-subtotal{
padding-bottom: 15px;
}
&.wishlist-empty{ width: 100%; text-align: center !important; margin: 0 0;}
}
.product-thumbnail{
float: left; width: 35%;
}
.product-subtotal{
&:before{
content: 'Subtotal: ';
}
}
}
}
}
}
.wishlist-title{ margin-bottom: 25px !important;
h2{
padding: 0; vertical-align: middle; text-transform: none; font-weight: bold; font-size: 1.2857em; margin: 0px;
&:hover{
background: none;
}
}
a.show-title-form{
padding: 0; border: none; background: none; height: auto; line-height: inherit; margin: 0 0 0 15px; text-transform: none;
i{ margin-right: 3px; }
&:hover{ background: no-repeat; color: $color1; }
}
}
.yith_wcwl_wishlist_footer{ display: block; width: 100%;
.yith-wcwl-share { margin: 20px 0;
h4.yith-wcwl-share-title{
margin: 0 0; font-size: 1em; text-transform: uppercase;
}
ul{
li{ padding: 0; margin: 0 2.5px; display: inline-block;
&:first-child { margin-left: 0px; }
}
}
}
}
}
body .select2-drop-active{
border-color: #e9e9e9;
}
@media (min-width: 768px){
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first{
clear: none;
}
}