.woocommerce {
input,
textarea {
height: 50px;
margin: 0 1.25em 0 0;;
padding: 1em;
border: 1px solid @border;
}
::-webkit-input-placeholder {
color: @gray-color;
}
:-moz-placeholder {
color: @gray-color;
}
::-moz-placeholder {
color: @gray-color;
}
:-ms-input-placeholder {
color: @gray-color;
}
.select2-selection {
height: 50px;
border: 1px solid @border;
padding: .65em 0;
.select2-selection__arrow {
top: 12px;
}
}
button.button.alt {
background-color: @primary-color;
&:hover {
background: @primary-color;
color: @light;
}
}
.woocommerce-result-count {
color: @primary-color;
margin: 0 0 4.375em;
}
.woocommerce-ordering {
select {
border: none;
color: @gray-color;
-webkit-appearance: none;
padding: 0 0.7em;
border: 1px solid @border;
height: 3.125em;
}
&:before {
position: absolute;
right: 1.5em;
top: 0.7em;
font-family: FontAwesome;
content: '\f107';
font-size: 1.125em;
}
}
ul.products {
li.product {
margin-bottom: 1.875em;
.box-images {
position: relative;
display: block;
overflow: hidden;
text-align: center;
img {
border-bottom: 1px solid @border;
padding-bottom: 20px;
}
&:after {
content: '';
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: 0.5s;
z-index: 9;
}
.button {
display: block;
position: absolute;
left: 0;
right: 0;
z-index: 10;
top: 50%;
text-align: center;
background: none;
border: none;
color: @light;
opacity: 0;
transition: 0.5s;
width: 3.125em;
height: 3.125em;
margin: -2.5em auto 0;
background: @secondary-color;
border-radius: 50%;
padding: 0;
&:after {
display: none;
}
&:hover {
background: @primary-color;
}
}
.button {
&:before {
position: absolute;
left: 0;
right: 0;
font-family: FontAwesome;
content: '\f07a';
font-size: 1.25em;
line-height: 2.5;
}
&.loading {
&:before {
position: absolute;
left: 0;
right: 0;
font-family: FontAwesome;
content: '\f110';
font-size: 1.25em;
line-height: 2.5;
animation: spin 4s linear infinite;
}
}
}
.quick_view_button {
margin-top: -4.375em;
display: none;
&:before {
display: none;
}
i {
line-height: 2.4;
font-size: 1.25em;
}
}
.wc-forward {
display: none;
}
}
.box-content {
background: @light;
padding: 1em 0 0 0;
text-align: center;
}
img {
margin: 0;
}
.star-rating {
margin: 0 auto;
}
.price {
color: @primary-color;
font-size: @font-size-h4;
margin: 0;
}
h4 {
font-weight: 600;
font-size: 20px;
}
a {
color: @gray-dark;
&:hover {
color: @primary-color;
}
}
.box-shadow {
border: 1px solid @border;
padding: 1.875em;
&:hover {
-webkit-box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, 0.1);
transition: 0.5s;
border: none;
.box-images {
.button,
&:after {
opacity: 1;
}
}
}
}
}
}
.star-rating {
margin: 1.25em 0 1.25em 1.875em;
color: @primary-color;
letter-spacing: 3px;
width: 6.3em;
font-size: 0.75em;
&::before {
color: @primary-color;
}
}
.ribbons {
.ribbon {
color: @light;
font-size: 1em;
font-weight: 400;
text-align: center;
display: block;
margin: 0;
position: absolute;
background-color: #fdbf1d;
z-index: 10;
top: 1.250em;
right: 1.250em;
height: 27px;
line-height: 29px;
border-radius: 1em;
padding: 0 1.250em;
min-width: inherit;
min-height: inherit;
}
}
nav.woocommerce-pagination {
ul {
border: none;
li {
border: none;
margin: 0 5px;
a,
span {
font-size: 1.125em;
font-weight: 600;
color: @gray-dark;
width: 50px;
height: 50px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: none;
border: 1px solid @border;
line-height: 1.8;
}
span.current,
a:hover,
a:focus {
background: @primary-color;
color: @light;
border: 1px solid @primary-color;
}
.prev,
.next {
font-weight: 600;
color: @gray-color;
i {
font-size: 1.5em;
}
}
}
}
}
.widget_price_filter {
.ui-slider .ui-slider-handle {
background-color: @primary-color;
top: -.4em;
}
.ui-slider .ui-slider-range {
background-color: @primary-color;
}
.ui-slider-horizontal {
height: 0.125em;
}
.price_slider_wrapper .ui-widget-content {
background-color: @border;
}
.price_slider {
margin-bottom: 2.2em;
}
.price_slider_amount {
.button {
height: 35px;
padding: 8px 20px;
}
}
.price_label {
font-size: 16px;
}
}
/**
* Buttons
*/
a.button,
button.button,
input.button,
#respond input#submit {
color: @primary-color;
background: none;
font-weight: 600;
border: 2px solid @primary-color;
text-transform: uppercase;
border-radius: 35px;
font-size: 1em;
padding: 17px 32px;
outline: 0;
height: 50px;
&:hover {
background: @primary-color;
color: @light;
}
}
ul.cart_list,
ul.product_list_widget {
border: none;
padding: 0;
li {
margin-bottom: 25px;
a {
color: @gray-color;
font-weight: 500;
margin: 0 0 0.3em 0;
}
img {
float: left;
margin: 0 1.563em 0 0;
width: 70px;
}
.star-rating {
margin: 0.65em 0 0 1.875em;
}
}
}
.box-wra {
border: none;
border-right: 1px solid @border;
}
div.product,
#content {
div.product {
div.images {
width: 44%;
}
div.summary {
width: 52%;
}
}
}
div.product {
.product_title {
font-size: @font-size-h3;
margin: 0 0 0.75em 0;
}
span.price,
p.price {
color: @gray-color;
font-size: 1.375em;
}
.woocommerce-product-details__short-description {
p {
margin: 0 0 1.625em 0;
}
}
form.cart {
.button {
background: none;
color: @primary-color;
border-radius: 35px;
font-size: 1em;
padding: 17px 32px;
outline: 0;
border: 2px solid @primary-color;
&:hover {
background: @primary-color;
color: @light;
}
}
div.quantity {
margin: 0 1.25em 0 0;
}
}
.woocommerce-tabs {
display: inline-block;
margin: 3.750em 0 0 0;
width: 100%;
ul.tabs {
margin: 0;
padding: 0;
li {
border: 1px solid @border;
background-color: @border;
border-radius: 0;
margin: 0 5px 0 0;
&:before,
&:after {
bottom: -5px;
}
a {
font-weight: 600;
}
&.active {
a {
color: @primary-color;
}
}
}
&:before {
border-bottom: 1px solid @border;
}
}
.panel {
border: 1px solid @border;
border-top: none;
padding: 2.5em 1.875em;
border-radius: 0;
h2 {
font-weight: 500;
font-size: 1.25em;
margin: 0 0 1.25em 0;
}
}
}
div.grd-images {
margin-bottom: 0;
position: relative;
overflow: hidden;
.photoswipe {
cursor: crosshair;
display: block;
}
.slick-arrow {
opacity: 0;
font-size: 24px;
z-index: 99;
cursor: pointer;
font-weight: 700;
color: #999;
transition: 0.5s;
&:hover {
color: @dark;
}
&.slick-disabled {
color: #ccc;
cursor: auto;
}
}
&:hover {
.slick-arrow {
opacity: 1;
left: 20px;
color: @primary-color;
border: 1px solid;
}
.slick-next-arrow {
right: 20px;
left: auto;
}
}
.video {
position: relative;
display: block;
&:before {
font-family: FontAweSome;
content: "\f04b";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
color: @dark;
font-size: 15px;
padding-left: 5px;
}
&:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: @light;
}
}
.slick-arrow {
position: absolute;
top: 50%;
left: -20px;
transform: translateY(-50%);
z-index: 99;
}
.slick-next-arrow {
right: -20px;
left: auto;
}
}
.product_meta {
> span {
display: block;
}
}
.related {
.related-title {
font-weight: 500;
font-size: @font-size-h3;
color: @gray-dark;
margin-bottom: 1.250em;
}
}
.columns-4 {
li.product {
.box-images {
.quick_view_button {
margin-top: -3.375em;
}
.add_to_cart_button,
.product_type_variable,
.product_type_grouped {
margin-top: 0.375em;
}
}
}
}
div.images {
.flex-control-thumbs {
margin: 10px -5px 0;
li {
padding: 0 10px;
margin-bottom: 10px;
}
}
}
}
.quantity {
transition: 0.5s;
padding: 0 1.313em 0 1em;
border: 1px solid @border;
position: relative;
background-color: @border;
border-radius: 1.250em;
.increase,
.decrease {
color: @gray-color;
font-size: 14px;
cursor: pointer;
display: inline-block;
background: none;
position: absolute;
right: 0;
height: 50%;
width: 25px;
text-align: center;
border-left: 1px solid @border;
transition: 0.5s;
&:hover {
color: @primary-color;
}
}
.increase {
top: 3px;
line-height: 25px;
border-left: 1px solid #e5e5e5;
}
.decrease {
bottom: 3px;
line-height: 40px;
border-left: 1px solid #e5e5e5;
i {
position: relative;
bottom: 5px;
}
}
.qty {
-moz-appearance: textfield;
border-width: 0;
width: 30px;
height: 48px;
text-align: left;
background-color: transparent;
padding: 0;
font-size: 18px;
font-weight: 500;
color: @gray-dark;
margin-right: 0;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&:focus {
outline: none;
}
}
}
.woocommerce-product-rating {
.star-rating {
margin: 0;
}
.woocommerce-review-link {
display: none;
}
}
#reviews {
#comments {
ol.commentlist {
padding: 0;
li {
margin: 1.25em 0;
img.avatar {
width: 60px;
border: none;
padding: 0;
}
.comment-text {
margin: 0 0 0 80px;
border: 1px solid @border;
border-radius: 0;
p.meta {
font-size: 1em;
color: @gray-dark;
strong,
time {
font-weight: 500;
}
}
}
}
}
}
}
#review_form {
#respond {
.comment-reply-title {
font-weight: 500;
font-size: 20px;
margin: 1em 0;
display: block;
color: #2e2e2e;
}
p {
margin-bottom: 15px;
}
label,
input {
width: 100%;
}
.comment-form-comment,
.form-submit {
width: 100%;
float: left;
padding: 0;
}
.form-submit {
input {
width: auto;
&:hover {
background: @primary-color;
color: @light;
}
}
}
}
}
.comment-form-rating .stars {
a {
color: @primary-color;
&:hover {
color: @primary-color;
}
}
}
table.shop_table {
border: 0;
border-radius: 0;
tr {
padding: 0;
}
thead {
background-color: @primary-color;
tr th {
color: @light;
padding: 1em 1.875em;
}
}
tr th, tr td {
text-align: left;
padding: 30px;
border: none;
border-bottom: 1px solid @border;
font-weight: 600;
}
td {
img,
a img {
width: 70px;
margin-right: 20px;
max-width: inherit;
border: 1px solid @border;
}
&.product-name {
a {
font-size: 1em;
color: @gray-dark;
}
}
&.product-price,
&.product-subtotal {
font-size: 20px;
font-weight: 400;
}
&.product-subtotal {
color: @primary-color;
}
.coupon {
.input-text {
width: 230px !important;
height: 50px;
margin: 0 1.25em 0 0 !important;;
padding: 1em !important;
border-color: @border !important;
}
::-webkit-input-placeholder {
color: @gray-lighter;
}
:-moz-placeholder {
color: @gray-lighter;
}
::-moz-placeholder {
color: @gray-lighter;
}
:-ms-input-placeholder {
color: @gray-lighter;
}
.button {
background: none;
color: @primary-color;
border-radius: 35px;
font-size: 1em;
padding: 17px 32px;
border: 2px solid @primary-color;
outline: 0;
&:hover {
background: @primary-color;
color: @light;
}
}
}
.update-cart {
border-radius: 35px;
font-size: 1em;
padding: 17px 32px !important;
outline: 0;
height: 50px;
border: none;
background: #f4f4f4;
color: @gray-dark;
&:hover {
background: @primary-color;
color: @light;
}
}
}
tfoot td {
font-weight: 600;
}
.quantity {
width: max-content;
}
tr td.actions {
border-bottom: 0;
}
a.remove {
color: #cacaca !important;
font-size: 34px;
font-weight: 300;
i:before {
font-size: 34px;
}
&:hover {
color: @primary-color !important;
background: none;
}
}
}
.cart-collaterals {
.cart_totals {
float: left;
h2 {
font-size: 20px;
margin: 0 0 1em 0;
font-weight: 600;
}
table.shop_table {
tr th,
tr td {
padding: 12px 20px !important;
border: 1px solid @border !important;
}
tr th {
color: @gray-dark;
font-weight: 500;
}
tr td {
strong {
font-weight: 400 !important;
}
}
}
}
}
.wc-proceed-to-checkout {
display: inline-block;
a.checkout-button {
background: none;
color: @primary-color;
border: 2px solid @primary-color;
border-radius: 35px;
font-size: 1em;
padding: 17px 32px;
outline: 0;
&:hover {
background: @primary-color;
color: @light;
}
}
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
padding: 1.25em 2em;
background-color: @border;
color: @gray-dark;
border-top: 0;
border-left: 3px solid @primary-color;
font-weight: 600;
&::before {
display: none;
}
a {
color: @primary-color;
}
}
.checkout {
.col-2 {
h3#ship-to-different-address {
input {
right: -30px;
margin: 0;
padding: 0;
outline: 0;
}
label {
font-weight: 600;
margin: 0;
}
}
}
h3 {
font-weight: 600;
font-size: 20px;
}
label {
font-weight: 400;
color: @gray-dark;
}
}
.woocommerce-MyAccount-navigation {
float: left;
width: 16.6667%;
padding-right: 15px;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
position: relative;
text-transform: uppercase;
padding: 10px 0;
font-weight: 700;
a {
font-size: 14px;
color: @gray;
}
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
&:hover,
&.is-active {
a {
color: @primary-color;
}
}
}
}
}
form.login,
form.register {
border: none;
padding: 0;
.form-row-wide {
label {
display: none;
}
}
.form-row {
margin: 1.5em 0;
}
.woocommerce-form__label {
float: right;
margin: .5em 0 0 0;
input {
height: auto;
}
}
}
// Widget
.widget {
margin-bottom: 40px;
.widget-title {
margin-bottom: 30px;
font-weight: 600;
}
}
.widget_product_search {
.woocommerce-product-search {
font-size: 16px;
position: relative;
display: flex;
&:before {
content: '\f002';
position: absolute;
top: 50%;
right: 17px;
color: @gray-dark;
font-family: FontAwesome;
font-size: 14px;
z-index: 99;
transform: translateY(-50%);
}
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
z-index: 9;
}
.screen-reader-text {
display: none;
}
::-webkit-input-placeholder {
color: @gray-color;
}
:-moz-placeholder {
color: @gray-color;
}
::-moz-placeholder {
color: @gray-color;
}
:-ms-input-placeholder {
color: @gray-color;
}
}
.search-field {
flex-grow: 1;
background-color: transparent;
outline: 0;
height: 48px;
padding: 0 0 0 1em;
margin: 0;
border: 1px solid @border;
}
button[type="submit"] {
width: 50px;
height: 50px;
background: transparent;
position: absolute;
top: 50%;
right: 0;
padding: 0;
transform: translateY(-50%);
border: none;
text-indent: -9999px;
z-index: 10;
}
}
.widget_product_categories {
.product-categories {
margin: 0;
padding: 0;
li {
list-style-type: none;
border-bottom: 1px solid @border;
padding: 15px 0 15px 25px;
background: url("img/icon/list-normal.png") left center no-repeat;
:last-child {
padding: 0;
}
a {
color: @gray-color;
}
:hover {
color: @primary-color;
background: none;
}
}
:hover {
background: url("img/icon/list-active.png") left center no-repeat;
transition: 0.5s;
a {
color: @primary-color;
}
}
.current-cat {
background: url("img/icon/list-active.png") left center no-repeat;
a {
color: @primary-color;
}
}
}
}
.widget_product_tag_cloud {
a {
padding: 4px 14px;
margin: 0 0.750em 0.750em 0;
display: inline-block;
font-size: 16px !important;
font-weight: 400;
color: @gray-color;
background-color: none;
border: 1px solid @border;
&:hover {
background-color: @primary-color;
color: @light;
text-decoration: none;
border: 1px solid @primary-color;
}
}
}
.woocommerce-checkout {
.shop_table {
float: left;
width: 48%;
}
.woocommerce-checkout-payment {
float: right;
width: 48%;
input {
height: auto;
}
}
}
}
.sidebar-content {
.content-area {
float: right;
}
.box-wra {
border: none;
border-left: 1px solid @border;
}
}
.full-content {
.box-wra {
border: none;
}
}
.woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells {
width: 100%;
float: none;
clear: both;
}
.product-type-grouped {
.woocommerce-grouped-product-list {
margin-bottom: 26px;
border: none;
}
}
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {
font-weight: 400;
color: #848484;
text-decoration: none;
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del,
.woocommerce ul.products li.product .price del {
opacity: 1;
font-size: 14px;
}
.woocommerce table.shop_attributes td {
padding: 0.4375em;
}
.woocommerce ul.products li.product .price ins {
font-weight: 400;
}
.woocommerce div.product form.cart .variations label {
color: #000;
margin-top: 10px;
font-size: 14px;
}
.woocommerce div.product form.cart .variations select {
min-height: 35px;
border: 1px solid #f2f2f2;
}