assets/css/woocommerce/woocommerce-extensions/_woocommerce-blocks.scss
@mixin small-button() {
&,
&:active,
&:visited {
height: 40px;
line-height: 20px;
padding: 10px 18px;
}
}
#primary {
[class^="wc-block-featured"] {
.wp-block-button__link {
@include small-button();
}
}
//Grid Block
.wc-block-grid {
.wc-block-grid__no-products {
background-color: white;
border: 1px solid #e4e4e4;
max-width: 90rem;
margin-left: auto;
margin-right: auto;
button {
@include lsx-button-scaffolding();
@include lsx-button-colour();
@include small-button();
}
}
.wc-block-sort-select {
@media (min-width: 900px) {
max-width: 90rem;
margin-left: auto;
margin-right: auto;
}
}
.wc-block-grid__products {
//justify-content: space-between;
@media (max-width: 480px) {
display: block;
}
.wc-block-grid__product {
text-align: left;
margin-bottom: $lsx-medium-gap;
display: flex;
flex-direction: column;
align-items: end;
@media (max-width: 480px) {
margin-left: auto;
margin-right: auto;
flex: 1 0 100%;
max-width: 100%;
padding: 0;
}
.wc-block-grid__product-link {
order: -1;
width: 100%;
.wc-block-grid__product-image {
margin-bottom: 0;
img {
margin: 0 0 1em;
box-shadow: none;
width: 100%;
}
}
}
.wc-block-grid__product-title {
font-family: $font-family-serif;
font-size: 22px;
line-height: 27px;
color: $text-color;
font-weight: 400;
padding: 0.5em 0;
margin: 0;
a {
color: $text-color;
}
}
.wc-block-grid__product-rating {
margin: 0 0 1em;
float: none;
width: 100%;
display: flex;
align-items: end;
order: -1;
.star-rating,
> .wc-block-grid__product-rating__stars {
margin-left: 0;
margin-right: 0;
span {
&:before {
color: $link-color;
}
}
}
}
> .wc-block-grid__product-image,
> .wc-block-grid__product-title {
order: -1;
+ .wc-block-grid__product-price {
order: -1;
}
}
.wc-block-grid__product-onsale {
min-height: 55px;
min-width: 55px;
font-weight: 700;
position: absolute;
text-align: center;
top: -1.5rem;
right: -1.5rem;
border-radius: 100%;
background-color: #77a464;
color: #fff;
z-index: 9;
border: none;
display: flex;
align-items: center;
font-size: 15px;
left: initial;
}
.wc-block-grid__product-price {
display: flex;
align-items: baseline;
margin-bottom: 6px;
margin-left: 0;
color: #77a464;
.amount {
font-size: 20px;
}
del {
opacity: 0.4;
.woocommerce-Price-amount,
span {
opacity: 0.5;
margin-right: 5px;
}
}
ins {
color: #77a464;
.woocommerce-Price-amount {
font-weight: 700;
}
}
.woocommerce-Price-amount,
.wc-block-grid__product-price__value {
color: #77a464;
display: block;
font-weight: 400;
margin-bottom: 0.5em;
font-size: 20px;
}
.woocommerce-Price-amount {
margin-right: 5px;
+ .woocommerce-Price-amount {
margin-left: 5px;
}
}
}
.wp-block-button {
@include media(">=desktop-wide") {
margin-left: 0;
margin-right: 0;
}
}
.wp-block-button,
.wp-block-button__link {
@media (max-width: 600px) {
width: 100%;
button {
align-items: center;
text-align: center;
}
}
}
.wp-block-button__link {
@include small-button();
word-break: break-all;
}
}
}
@include media(">=desktop") {
&.has-2-columns {
.wc-block-grid__products {
.wc-block-grid__product {
max-width: 570px;
}
}
}
&.has-3-columns {
.wc-block-grid__products {
.wc-block-grid__product {
max-width: 385px;
}
}
}
&.has-4-columns {
.wc-block-grid__products {
.wc-block-grid__product {
max-width: 266px;
}
}
}
&.has-5-columns {
.wc-block-grid__products {
.wc-block-grid__product {
max-width: 190px;
}
}
}
}
}
[class^="wc-block"] {
.wp-block-button__link,
.button {
@include lsx-button-scaffolding();
@include lsx-button-colour();
text-align: center;
}
}
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
&.alignwide {
max-width: 90rem;
width: 90rem;
margin-left: auto;
margin-right: auto;
}
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
@include lsx-button-scaffolding();
@include lsx-button-colour();
}
.wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url], .wc-block-components-select .components-custom-select-control__button, .wc-block-components-select .components-custom-select-control__button:active, .wc-block-components-select .components-custom-select-control__button:focus, .wc-block-components-select .components-custom-select-control__button:hover {
@extend %bootstrap-form-control;
@extend %lsx-form-field;
@extend %small-form-select;
}
}
// Search Block
.wp-block-woocommerce-product-search {
margin-bottom: $lsx-gap;
form {
.wc-block-product-search__label {
display: none;
}
}
input[type="search"] {
@extend %lsx-form-field;
width: 100%;
min-height: 50px;
border: 1px solid $input-border;
font-size: 15px;
color: $small;
&:focus {
border-color: nth($blue, 1);
outline: 0;
}
}
button[type="submit"] {
//@include lsx-button-scaffolding();
//@include small-button();
//@include lsx-button-colour();
background-color: nth($blue, 1);
box-shadow: 1px 1px 0 0 nth($blue, 3);
color: white;
height: 48px;
padding: 10px 20px;
margin-left: 0px;
border-radius: 0 2px 2px 0;
&:hover {
background-color: nth($blue, 3);
}
svg {
display: none;
}
&:before {
content: $fa-var-search;
font-family: "FontAwesome";
font-size: 20px;
}
}
}
.wp-block-woocommerce-active-filters:not(:empty) {
background-color: white;
padding: 15px 12px;
margin-bottom: 3px;
.wc-block-active-filters__list {
padding: 0;
}
}
//All Filters Filter
div[class^="wp-block-woocommerce-"][class$="-filter"] {
background-color: white;
padding: 15px 12px;
margin-bottom: 3px;
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.5em;
cursor: pointer;
font-weight: 300;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: $fa-var-square-o;
color: inherit;
display: inline-block;
font-family: "FontAwesome";
font-size: 18px;
line-height: 1;
position: absolute;
left: 0;
text-rendering: auto;
top: 4px;
font-weight: 300;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: $fa-var-check-square;
position: absolute;
top: 0.15em;
left: 0.22em;
color: inherit;
display: inline-block;
font-family: "FontAwesome";
font-size: 18px;
line-height: 1;
left: 0;
text-rendering: auto;
top: 4px;
font-weight: 300;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 23px;
width: 23px;
border: 1px solid #d9d9d9;
border-radius: 2px;
background: white;
cursor: pointer;
}
}
//Price Filter
.wp-block-woocommerce-price-filter {
.wc-block-price-filter__range-input-progress {
background: nth($blue, 1);
}
.wc-block-price-filter__controls {
.wc-block-price-filter__amount {
border: none;
font-size: 18px;
}
}
}
// Sort Select
.wc-block-sort-select {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: $lsx-gap;
@media (max-width: 600px) {
margin-top: $lsx-medium-gap;
margin-bottom: $lsx-medium-gap;
}
&:after {
content: $fa-var-chevron-down;
color: #999999;
position: relative;
right: 30px;
font-family: FontAwesome;
font-size: 10px;
top: 0px;
}
.wc-block-sort-select__label {
color: $small;
}
.wc-block-sort-select__select {
-webkit-appearance: none;
appearance: none;
background: white;
box-shadow: none;
display: inline-block;
font-size: 14px;
line-height: 1.25;
min-width: 180px;
height: 50px;
padding: 0 15px;
transition: all 150ms ease;
width: auto;
border-radius: 0;
text-align: center;
border: 1px solid $breaker;
color: $small;
text-align-last: center;
}
}
//Pagination
.wc-block-pagination {
display: flex;
justify-content: flex-end;
padding-left: 8px;
padding-right: 8px;
.wc-block-pagination-page {
border-color: nth($blue, 1);
color: nth($blue, 1);
border-radius: 3px;
border-style: solid;
border-width: 2px;
display: inline-block;
height: 40px;
text-align: center;
vertical-align: top;
width: 40px;
margin-left: 5px;
cursor: pointer;
&.wc-block-pagination-page--active,
&:hover,
&:active:hover,
&:focus {
background-color: nth($blue, 1);
color: white;
}
}
}
//Review Block
.wc-block-review-list {
padding-left: 0;
.wc-block-review-list-item__item {
.wc-block-review-list-item__info {
.wc-block-review-list-item__meta {
.wc-block-review-list-item__product {
color: nth($blue, 1);
}
.wc-block-review-list-item__author,
.wc-block-review-list-item__published-date {
color: $small;
}
.wc-block-review-list-item__rating {
+ .wc-block-review-list-item__author {
color: nth($blue, 1);
}
}
}
}
.wc-block-review-list-item__text {
* {
color: $text-color;
}
}
}
}
.wc-block-load-more {
margin-bottom: $lsx-medium-gap;
}
}
//LSX Custom class for filters inside columns (goes on a container block)
#primary {
.lsx-wc-filter-block {
.wp-block-columns {
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
.wp-block-column {
> h2 {
background: #ffffff;
border-radius: 0;
padding: 15px 12px;
margin-bottom: 3px;
font-size: 22px;
}
.wp-block-woocommerce-all-products {
.wc-block-grid {
.wc-block-grid__products {
.wc-block-grid__product {
@media (min-width: 601px) {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
}
}
}
}
@include media(">=desktop") {
&:first-child {
max-width: 280px;
width: 100%;
flex-basis: auto !important;
margin-right: 20px;
}
&:last-child {
max-width: 848px;
width: 100%;
flex-basis: auto !important;
}
}
@media (min-width: 600px) and (max-width: 1023px) {
&:first-child {
padding-right: 20px;
}
.wp-block-woocommerce-all-products {
.wc-block-grid {
.wc-block-grid__products {
.wc-block-grid__product {
flex: 1 0 50%;
max-width: 50%;
}
}
}
}
}
}
}
.lsx-wc-filter-toggle {
display: none;
}
@media (max-width: 599px) {
.lsx-wc-filter-toggle {
display: inline-block;
width: 100%;
&.lsx-wc-filter-toggle {
transition: none;
a {
transition: none;
}
}
&.lsx-wc-filter-toggle-open {
transition: none;
a {
transition: none;
font-size: 0;
&::before {
font-size: 15px;
content: "Close Filters";
transition: none;
}
}
}
}
div[class^="wp-block-woocommerce-"][class$="-filter"],
.wp-block-woocommerce-product-search {
overflow: hidden;
padding: 0;
margin-bottom: 0;
opacity: 0;
max-height: 0;
&#lsx-wc-filter-child-close {
transform: translateX(-100%);
transition-timing-function: ease-in;
transition: all 0.25s;
max-height: 0;
}
&#lsx-wc-filter-child-open {
opacity: 1;
max-height: 1000px;
height: auto;
overflow: visible;
padding: 15px 12px;
margin-bottom: 3px;
transition: all 0.25s;
transition-timing-function: ease-out;
transform: translateX(0);
}
}
.wp-block-woocommerce-product-search {
&#lsx-wc-filter-child-open {
padding: 0;
margin-top: 2rem;
margin-bottom: 2rem;
}
}
.wp-block-columns {
.wp-block-column {
> h2 {
display: none;
}
}
}
}
}
}