From 99c4d548cbd3ec6f1706d08f31d0dc770165c76c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C4=83d=C4=83lin=20Gorb=C4=83nescu?= <46342490+madalingorbanescu@users.noreply.github.com> Date: Tue, 21 Jan 2020 08:08:46 -0800 Subject: [PATCH] Improve WooCommerce blocks styling (#70) * Improve WooCommerce blocks styling * Remove forms mixin --- assets/scss/blocks/_helpers.scss | 26 +- assets/scss/components/site-header/_menu.scss | 3 +- assets/scss/editor-woocommerce.scss | 9 + assets/scss/elements/_forms.scss | 149 --- assets/scss/setup/_functions.scss | 17 + assets/scss/setup/_mixins.scss | 1 + assets/scss/setup/mixins/_forms.scss | 148 +++ assets/scss/woocommerce/_product.scss | 2 +- .../blocks/_category-featured.scss | 26 +- .../blocks/_product-categories.scss | 23 + .../woocommerce/blocks/_product-featured.scss | 26 +- .../{_review-list-item.scss => _reviews.scss} | 30 + assets/scss/woocommerce/blocks/style.scss | 3 +- editor-woocommerce.css | 1004 +++++++++++++++++ editor.css | 117 ++ inc/integrations/woocommerce.php | 7 + style-rtl.css | 120 +- style.css | 120 +- woocommerce-rtl.css | 345 +++++- woocommerce.css | 345 +++++- 20 files changed, 2340 insertions(+), 181 deletions(-) create mode 100644 assets/scss/editor-woocommerce.scss create mode 100644 assets/scss/setup/mixins/_forms.scss create mode 100644 assets/scss/woocommerce/blocks/_product-categories.scss rename assets/scss/woocommerce/blocks/{_review-list-item.scss => _reviews.scss} (89%) create mode 100644 editor-woocommerce.css diff --git a/assets/scss/blocks/_helpers.scss b/assets/scss/blocks/_helpers.scss index ff39d4f1..4b2f0944 100644 --- a/assets/scss/blocks/_helpers.scss +++ b/assets/scss/blocks/_helpers.scss @@ -1,13 +1,13 @@ $wp-colors: ( - sm-color-primary: var(--current-color-primary), - sm-color-secondary: var(--current-color-secondary), - sm-color-tertiary: var(--current-color-tertiary), - sm-dark-primary: var(--current-dark-primary), - sm-dark-secondary: var(--current-dark-secondary), - sm-dark-tertiary: var(--current-dark-tertiary), - sm-light-primary: var(--current-light-primary), - sm-light-secondary: var(--current-light-secondary), - sm-light-tertiary: var(--current-light-tertiary), + sm_color_primary: var(--current-color-primary), + sm_color_secondary: var(--current-color-secondary), + sm_color_tertiary: var(--current-color-tertiary), + sm_dark_primary: var(--current-dark-primary), + sm_dark_secondary: var(--current-dark-secondary), + sm_dark_tertiary: var(--current-dark-tertiary), + sm_light_primary: var(--current-light-primary), + sm_light_secondary: var(--current-light-secondary), + sm_light_tertiary: var(--current-light-tertiary), ); /* Color Helper Classes */ @@ -17,7 +17,10 @@ $wp-colors: ( @each $name, $color in $wp-colors { - .has-#{$name}-background-color { + $kebabName: str-replace($name, '_', '-'); + + .has-#{$name}-background-color, + .has-#{$kebabName}-background-color { background-color: $color; @include specific(3) { @@ -39,7 +42,8 @@ $wp-colors: ( } } - .has-#{$name}-color { + .has-#{$name}-color, + .has-#{$kebabName}-color { color: $color; @include specific(3) { diff --git a/assets/scss/components/site-header/_menu.scss b/assets/scss/components/site-header/_menu.scss index c94cc7b2..4d56c161 100644 --- a/assets/scss/components/site-header/_menu.scss +++ b/assets/scss/components/site-header/_menu.scss @@ -236,6 +236,7 @@ ul.menu, } } -.menu-item { +.menu-item, +.page_item { position: relative; } diff --git a/assets/scss/editor-woocommerce.scss b/assets/scss/editor-woocommerce.scss new file mode 100644 index 00000000..fa9f5195 --- /dev/null +++ b/assets/scss/editor-woocommerce.scss @@ -0,0 +1,9 @@ +@import "setup"; +@import "woocommerce/product"; +@import "woocommerce/blocks/style"; + +// Force add-to-cart button to be displayed without hover +.wp-block-button.wc-block-grid__product-add-to-cart { + opacity: 1; + transform: translateY(0); +} diff --git a/assets/scss/elements/_forms.scss b/assets/scss/elements/_forms.scss index 3e703ae5..161d16a0 100644 --- a/assets/scss/elements/_forms.scss +++ b/assets/scss/elements/_forms.scss @@ -1,152 +1,3 @@ -// Forms General Options - -// @todo more semantic for these variables -$color-dark: var(--current-dark-secondary) !default; -$color-white: var(--current-light-primary) !default; - -$input-color: var(--current-dark-secondary) !default; -$input-border-color: var(--current-light-tertiary) !default; -$input-border-width: .0625em !default; -$input-background-color: var(--current-light-tertiary) !default; -$input-padding: .8em 1.18em .93em !default; -$input-focus-border-color: var(--current-dark-primary) !default; -$input-focus-background-color: var(--current-light-primary) !default; -$input-border-radius: 0 !default; -$input-disabled-color: var(--current-dark-secondary) !default; -$input-disabled-background-color: var(--current-dark-secondary) !default; -$input-disabled-border-color: var(--current-dark-secondary) !default; - -$placeholder-color: var(--current-dark-secondary) !default; - -$label-color: var(--current-dark-secondary) !default; - -$legend-color: var(--current-dark-secondary) !default; - -$button-color: var(--current-light-primary) !default; -$button-background-color: var(--current-dark-secondary) !default; - -$checkbox-color: var(--current-dark-secondary) !default; -$checkbox-background-color: var(--current-light-primary) !default; -$checkbox-width: 1.5rem !default; -$checkbox-height: 1.5rem !default; - -// Spacing -$input-vertical-spacing: var(--theme-spacing-tiny) !default; -$input-horizontal-spacing: var(--theme-spacing-tiny) !default; // Checkboxes and Radios - -@mixin field { - width: 100%; - height: auto; - max-width: 100%; - padding: $input-padding; - border: $input-border-width solid $input-border-color; - - color: $input-color; - border-radius: $input-border-radius; - background-color: $input-background-color; - - font: inherit; - line-height: 1.5; - -webkit-font-smoothing: initial; - -webkit-appearance: none; - - &:focus, - &:active { - outline: 0; - box-shadow: none; - border-color: $input-focus-border-color; - } - - &[disabled] { - border-color: $input-disabled-border-color; - background-color: $input-disabled-background-color; - } -} - - -@mixin input { - @include field; -} - -@mixin textarea { - @include field; - - min-height: 7.5em; - resize: vertical; -} - -@mixin select { - @include field; - - padding-right: 3.125em; - - background-color: var(--current-light-tertiary); - background-image: url("assets/images/arrow-caret.svg"); - background-position: calc(100% - 17px) center; - background-repeat: no-repeat; - background-size: .56em .312em; - - -webkit-appearance: none; -} - -@mixin label { - color: $label-color; - font: inherit; - margin: 0; - - &:not(:first-child) { - margin-top: $input-vertical-spacing; - } - - &:not(:last-child) { - margin-bottom: $input-vertical-spacing; - } - - cursor: pointer; -} - -@mixin checkbox-base { - position: relative; - left: 0; - - float: left; - clear: left; - - border: $input-border-width solid $input-border-color; - border-radius: $input-border-radius; - - width: $checkbox-width !important; - height: $checkbox-height !important; - margin-right: $input-horizontal-spacing; - margin-bottom: $input-vertical-spacing; - - background-color: $color-white; - cursor: pointer; - - -webkit-appearance: none; -} - -@mixin checkbox { - @include checkbox-base; - - &:checked { - border-color: $checkbox-color; - background: $checkbox-background-color url('assets/images/checkbox.svg') center center no-repeat; - background-size: 100% 100%; - outline: 0; - } -} - -@mixin radio { - @include checkbox-base; - border-radius: 50%; - - &:checked { - border: .43em solid $checkbox-color; - outline: 0; - } -} - @include placeholder() { color: $placeholder-color; opacity: .6; diff --git a/assets/scss/setup/_functions.scss b/assets/scss/setup/_functions.scss index ca358ae2..9aea2523 100644 --- a/assets/scss/setup/_functions.scss +++ b/assets/scss/setup/_functions.scss @@ -33,3 +33,20 @@ @return $number; } + +/// Replace `$search` with `$replace` in `$string` +/// @author Hugo Giraudel +/// @param {String} $string - Initial string +/// @param {String} $search - Substring to replace +/// @param {String} $replace ('') - New value +/// @return {String} - Updated string +/// Source: https://css-tricks.com/snippets/sass/str-replace-function/ +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} diff --git a/assets/scss/setup/_mixins.scss b/assets/scss/setup/_mixins.scss index 83ceca9c..06c20b30 100644 --- a/assets/scss/setup/_mixins.scss +++ b/assets/scss/setup/_mixins.scss @@ -11,6 +11,7 @@ @import "mixins/fluid"; @import "mixins/font"; @import "mixins/grid"; +@import "mixins/forms"; @import "mixins/image-cover"; @import "mixins/media-queries"; @import "mixins/nav-links"; diff --git a/assets/scss/setup/mixins/_forms.scss b/assets/scss/setup/mixins/_forms.scss new file mode 100644 index 00000000..426b7fb2 --- /dev/null +++ b/assets/scss/setup/mixins/_forms.scss @@ -0,0 +1,148 @@ +// Forms General Options + +// @todo more semantic for these variables +$color-dark: var(--current-dark-secondary) !default; +$color-white: var(--current-light-primary) !default; + +$input-color: var(--current-dark-secondary) !default; +$input-border-color: var(--current-light-tertiary) !default; +$input-border-width: .0625em !default; +$input-background-color: var(--current-light-tertiary) !default; +$input-padding: .8em 1.18em .93em !default; +$input-focus-border-color: var(--current-dark-primary) !default; +$input-focus-background-color: var(--current-light-primary) !default; +$input-border-radius: 0 !default; +$input-disabled-color: var(--current-dark-secondary) !default; +$input-disabled-background-color: var(--current-dark-secondary) !default; +$input-disabled-border-color: var(--current-dark-secondary) !default; + +$placeholder-color: var(--current-dark-secondary) !default; + +$label-color: var(--current-dark-secondary) !default; + +$legend-color: var(--current-dark-secondary) !default; + +$button-color: var(--current-light-primary) !default; +$button-background-color: var(--current-dark-secondary) !default; + +$checkbox-color: var(--current-dark-secondary) !default; +$checkbox-background-color: var(--current-light-primary) !default; +$checkbox-width: 1.5rem !default; +$checkbox-height: 1.5rem !default; + +// Spacing +$input-vertical-spacing: var(--theme-spacing-tiny) !default; +$input-horizontal-spacing: var(--theme-spacing-tiny) !default; // Checkboxes and Radios + +@mixin field { + width: 100%; + height: auto; + max-width: 100%; + padding: $input-padding; + border: $input-border-width solid $input-border-color; + + color: $input-color; + border-radius: $input-border-radius; + background-color: $input-background-color; + + font: inherit; + line-height: 1.5; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + + &:focus, + &:active { + outline: 0; + box-shadow: none; + border-color: $input-focus-border-color; + } + + &[disabled] { + border-color: $input-disabled-border-color; + background-color: $input-disabled-background-color; + } +} + + +@mixin input { + @include field; +} + +@mixin textarea { + @include field; + + min-height: 7.5em; + resize: vertical; +} + +@mixin select { + @include field; + + padding-right: 3.125em; + + background-color: var(--current-light-tertiary); + background-image: url("assets/images/arrow-caret.svg"); + background-position: calc(100% - 17px) center; + background-repeat: no-repeat; + background-size: .56em .312em; + + -webkit-appearance: none; +} + +@mixin label { + color: $label-color; + font: inherit; + margin: 0; + + &:not(:first-child) { + margin-top: $input-vertical-spacing; + } + + &:not(:last-child) { + margin-bottom: $input-vertical-spacing; + } + + cursor: pointer; +} + +@mixin checkbox-base { + position: relative; + left: 0; + + float: left; + clear: left; + + border: $input-border-width solid $input-border-color; + border-radius: $input-border-radius; + + width: $checkbox-width !important; + height: $checkbox-height !important; + margin-right: $input-horizontal-spacing; + margin-bottom: $input-vertical-spacing; + + background-color: $color-white; + cursor: pointer; + + -webkit-appearance: none; +} + +@mixin checkbox { + @include checkbox-base; + + &:checked { + border-color: $checkbox-color; + background: $checkbox-background-color url('assets/images/checkbox.svg') center center no-repeat; + background-size: 100% 100%; + outline: 0; + } +} + +@mixin radio { + @include checkbox-base; + border-radius: 50%; + + &:checked { + border: .43em solid $checkbox-color; + outline: 0; + } +} diff --git a/assets/scss/woocommerce/_product.scss b/assets/scss/woocommerce/_product.scss index 5f7f7149..7f2112f1 100644 --- a/assets/scss/woocommerce/_product.scss +++ b/assets/scss/woocommerce/_product.scss @@ -24,7 +24,7 @@ } } - .wc-block-grid__product { + .wc-block-grid__product[class] { flex: 1; max-width: 100%; } diff --git a/assets/scss/woocommerce/blocks/_category-featured.scss b/assets/scss/woocommerce/blocks/_category-featured.scss index e9e0f281..0b2b57c5 100644 --- a/assets/scss/woocommerce/blocks/_category-featured.scss +++ b/assets/scss/woocommerce/blocks/_category-featured.scss @@ -1,6 +1,5 @@ .wc-block-featured-category { position: relative; - background-color: var(--current-dark-primary); background-size: cover; background-position: center center; width: 100%; @@ -10,6 +9,29 @@ flex-wrap: wrap; align-content: center; + .wp-block-button { + &.is-style-secondary { + .wp-block-button__link { + @include specific(3) { + @include button-fill-reverse; + } + } + } + &.is-style-text { + .wp-block-button__link { + @include specific(3) { + @include button-reset; + @include button-text; + overflow: visible; + + &:before { + top: unset; + } + } + } + } + } + .wc-block-featured-category__wrapper { overflow: hidden; height: 100%; @@ -45,7 +67,7 @@ .wc-block-featured-category__title, .wc-block-featured-category__description, .wc-block-featured-category__price { - color: var(--current-light-primary); + color: var(--current-dark-primary); line-height: 1.25; margin-bottom: 0; text-align: center; diff --git a/assets/scss/woocommerce/blocks/_product-categories.scss b/assets/scss/woocommerce/blocks/_product-categories.scss new file mode 100644 index 00000000..351a4b45 --- /dev/null +++ b/assets/scss/woocommerce/blocks/_product-categories.scss @@ -0,0 +1,23 @@ +.wc-block-product-categories { + &.is-dropdown { + display: flex; + + select { + @include select; + } + } +} + +.wc-block-product-categories__button { + @include button-base; + @include button(); + @include button-fill(); + + path { + fill: var(--theme-button-text-color); + } + + &:hover path { + fill: var(--theme-button-hover-text-color); + } +} diff --git a/assets/scss/woocommerce/blocks/_product-featured.scss b/assets/scss/woocommerce/blocks/_product-featured.scss index 41934ce2..746f0eb9 100644 --- a/assets/scss/woocommerce/blocks/_product-featured.scss +++ b/assets/scss/woocommerce/blocks/_product-featured.scss @@ -1,6 +1,5 @@ .wc-block-featured-product { position: relative; - background-color: var(--current-dark-primary); background-size: cover; background-position: center center; width: 100%; @@ -10,6 +9,29 @@ flex-wrap: wrap; align-content: center; + .wp-block-button { + &.is-style-secondary { + .wp-block-button__link { + @include specific(3) { + @include button-fill-reverse; + } + } + } + &.is-style-text { + .wp-block-button__link { + @include specific(3) { + @include button-reset; + @include button-text; + overflow: visible; + + &:before { + top: unset; + } + } + } + } + } + .wc-block-featured-product__wrapper { overflow: hidden; height: 100%; @@ -48,7 +70,7 @@ .wc-block-featured-product__variation, .wc-block-featured-product__description, .wc-block-featured-product__price { - color: var(--current-light-primary); + color: var(--current-dark-primary); line-height: 1.25; margin-bottom: 0; text-align: center; diff --git a/assets/scss/woocommerce/blocks/_review-list-item.scss b/assets/scss/woocommerce/blocks/_reviews.scss similarity index 89% rename from assets/scss/woocommerce/blocks/_review-list-item.scss rename to assets/scss/woocommerce/blocks/_reviews.scss index ab10f229..55651e07 100644 --- a/assets/scss/woocommerce/blocks/_review-list-item.scss +++ b/assets/scss/woocommerce/blocks/_reviews.scss @@ -1,3 +1,22 @@ +.wc-block-review-order-select { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +.wc-block-order-select__select { + @include specific(2) { + @include select; + width: auto; + + &[disabled] { + border-color: var(--current-light-tertiary); + background-color: var(--current-light-tertiary); + } + } +} + .is-loading { .wc-block-review-list-item__text { @include placeholder(); @@ -192,3 +211,14 @@ color: var(--current-color-primary); } } + +.wc-block-review-list { + @include specific(3) { + margin-left: 0; + padding-left: 0; + } +} + +.wc-block-review-order-select { + margin-bottom: var(--theme-spacing-small); +} diff --git a/assets/scss/woocommerce/blocks/style.scss b/assets/scss/woocommerce/blocks/style.scss index 25b2da30..306a5d32 100644 --- a/assets/scss/woocommerce/blocks/style.scss +++ b/assets/scss/woocommerce/blocks/style.scss @@ -1,6 +1,7 @@ @import "product-featured"; @import "category-featured"; -@import "review-list-item"; +@import "reviews"; +@import "product-categories"; [class*="wc-block-"] { .wp-block-button__link { diff --git a/editor-woocommerce.css b/editor-woocommerce.css new file mode 100644 index 00000000..cae6a36c --- /dev/null +++ b/editor-woocommerce.css @@ -0,0 +1,1004 @@ +.wc-block-grid__product-title, +.woocommerce-loop-product__title, +.woocommerce-loop-category__title, .wc-block-product-categories__button, [class*="wc-block-"] .wp-block-button__link[class] { + font-family: var(--current-font-family); + font-size: var(--current-font-size); + line-height: var(--current-line-height); + font-weight: var(--current-font-weight); + letter-spacing: var(--current-letter-spacing); + text-transform: var(--current-text-transform); + text-decoration: var(--current-text-decoration); } + +.wc-block-grid { + --column-gap: var(--theme-spacing-small); + --row-gap: var(--theme-spacing-small); } + .woocommerce .wc-block-grid { + margin-right: calc(var(--column-gap) * -1); } + .wc-block-grid.has-aligned-buttons .wc-block-grid__product { + display: flex; + flex-direction: column; } + .wc-block-grid.has-1-columns .wc-block-grid__products { + display: block; } + .wc-block-grid.has-1-columns .wc-block-grid__product { + margin-left: auto; + margin-right: auto; } + .wc-block-grid .wc-block-grid__product[class] { + flex: 1; + max-width: 100%; } + @media only screen and (min-width: 1000px) { + .wc-block-grid.has-2-columns .wc-block-grid__product { + flex: 1 0 calc(50%); + max-width: 50%; } + .wc-block-grid.has-3-columns .wc-block-grid__product { + flex: 1 0 calc(33.33333%); + max-width: 33.33333%; } + .wc-block-grid.has-4-columns .wc-block-grid__product { + flex: 1 0 calc(25%); + max-width: 25%; } + .wc-block-grid.has-5-columns .wc-block-grid__product { + flex: 1 0 calc(20%); + max-width: 20%; } + .wc-block-grid.has-6-columns .wc-block-grid__product { + flex: 1 0 calc(16.66667%); + max-width: 16.66667%; } + .wc-block-grid.has-7-columns .wc-block-grid__product { + flex: 1 0 calc(14.28571%); + max-width: 14.28571%; } + .wc-block-grid.has-8-columns .wc-block-grid__product { + flex: 1 0 calc(12.5%); + max-width: 12.5%; } } + @media only screen and (min-width: 768px) { + .wc-block-grid .wc-block-grid__product { + flex: 1 0 50%; + max-width: 50%; } } + +.wc-block-grid__products { + list-style: none; + padding: 0; + margin: 0; + width: 100%; } + @media only screen and (min-width: 768px) { + .wc-block-grid__products { + display: flex; + flex-wrap: wrap; } } + .wc-block-grid__products li { + margin-top: 0; } + +.wc-block-grid__product { + padding: 0 var(--column-gap) 0 0; + margin: 0 0 var(--row-gap) 0; + float: none; + width: auto; + position: relative; + text-align: left; + clear: both; } + .wc-block-grid__product .add_to_cart_button:not(.loading):after { + content: "+"; + padding-left: .5em; + right: 0; } + +.wc-block-grid__product-link { + display: block; + text-decoration: none; } + @supports (--css: variables) { + .wc-block-grid__product-link { + --current-aspect-ratio: 1; + position: relative; } + .wc-block-grid__product-link, .wc-block-grid__product-link:before { + padding-top: calc(100% / var(--current-aspect-ratio)); } + .wc-block-grid__product-link:before, + .wc-block-grid__product-link .wc-block-grid__product-image { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; } + .wc-block-grid__product-link:before { + content: ""; + background-color: var(--theme-light-tertiary); } } + +.wc-block-grid__product-image img { + display: block; } + +.woocommerce-loop-product__link { + display: block; + text-decoration: none; } + .woocommerce-loop-product__link .wc-block-grid__product-onsale[class][class] { + transform: none; } + +.wc-block-grid__product-add-to-cart { + text-align: center; } + .wc-block-grid__product-add-to-cart .add_to_cart_button { + width: 100%; } + +.wc-block-grid__product-onsale { + position: absolute; + top: var(--theme-spacing-tiny); + left: var(--theme-spacing-tiny); + padding: .3em 1.1em; + background-color: var(--current-color-primary); + color: var(--theme-light-primary); + text-align: center; + z-index: 10; } + +.wc-block-grid__product > :not(:last-child) { + margin-bottom: var(--theme-spacing-tiny); } + +.wc-block-grid__product-price { + color: var(--theme-dark-primary); } + .wc-block-grid__product-price del { + opacity: .5; } + .wc-block-grid__product-price ins { + text-decoration: none; } + +.wc-block-grid__product-image img { + width: 100%; } + +.wc-block-grid__product-title, +.woocommerce-loop-product__title, +.woocommerce-loop-category__title { + --current-font-family: var(--theme-heading-4-font-family); + --current-font-size: var(--theme-heading-4-final-font-size); + --current-line-height: var(--theme-heading-4-line-height); + --current-font-weight: var(--theme-heading-4-font-weight); + --current-letter-spacing: var(--theme-heading-4-letter-spacing); + --current-text-transform: var(--theme-heading-4-text-transform); + --current-text-decoration: var(--theme-heading-4-text-decoration); + color: var(--current-dark-primary); + margin-top: var(--theme-spacing-tiny); } + +.wc-block-grid__product-rating .star-rating { + overflow: hidden; + position: relative; + width: 5.3em; + height: 1.618em; + line-height: 1.618; + font-size: 1em; + font-family: star; + /* stylelint-disable-line */ + font-weight: 400; + display: inline-block; + margin: 0 auto; + text-align: left; } + .wc-block-grid__product-rating .star-rating::before { + content: "\53\53\53\53\53"; + top: 0; + left: 0; + right: 0; + position: absolute; + opacity: .5; + color: currentColor; } + .wc-block-grid__product-rating .star-rating span { + overflow: hidden; + top: 0; + left: 0; + right: 0; + position: absolute; + padding-top: 1.5em; } + .wc-block-grid__product-rating .star-rating span::before { + content: "\53\53\53\53\53"; + top: 0; + left: 0; + right: 0; + position: absolute; + color: currentColor; } + +.wp-block-button.wc-block-grid__product-add-to-cart { + transform: translateY(-10px); + opacity: 0; } + +.wc-block-grid__product:hover .wc-block-grid__product-add-to-cart { + transform: translateY(0); + opacity: 1; } + +.wc-block-grid__product:hover .wc-block-grid__product-link, +.wc-block-grid__product:hover .wc-block-grid__product-price, +.wc-block-grid__product:hover .wc-block-grid__product-rating, +.wc-block-grid__product:hover .wc-block-grid__product-onsale { + transform: translateY(-10px); + transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +.wc-block-grid__product-link, +.wc-block-grid__product-price, +.wc-block-grid__product-rating, +.wc-block-grid__product-onsale { + transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +.wc-block-grid__product-add-to-cart { + transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } + .wc-block-grid__product-add-to-cart[class][class][class][class] .added_to_cart { + display: none; } + +.woocommerce img, +.woocommerce-page img { + width: 100%; } + +.product-category:hover img { + transform: translateY(-10px); } + +.product-category:hover .woocommerce-loop-category__title { + transform: translateY(10px); } + +.product-category img, +.product-category .woocommerce-loop-category__title { + transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +.wc-block-featured-product { + position: relative; + background-size: cover; + background-position: center center; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + align-content: center; } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class] { + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; + --current-button-text-color: var(--theme-button-hover-text-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + transform: scale3d(0, 1, 1); + transform-origin: left; + background-color: var(--theme-button-background-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover { + --current-button-text-color: var(--theme-button-text-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(1, 1, 1); } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class] { + padding: 0; + background: none; + border-width: 0; + position: relative; + padding-right: 1.15em; + padding-bottom: .3em; + margin-right: calc( -1 * 1.15em); + margin-bottom: -.3em; + text-decoration: none; + overflow: visible; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + bottom: 0; + right: 1.15em; + width: calc(100% - 1.15em); + height: .1em; + transform: scale3d(1, 1, 1); + will-change: transform; + -webkit-backface-visibility: hidden; + transform-origin: left; + background: currentColor; + transition: var(--theme-button-transition); + transition-property: transform; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + content: ''; + opacity: 0; + transform: translate(0, -50%) scale(-1, 1); } + @supports (mask-clip: initial) or (-webkit-mask-clip: initial) { + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + position: absolute; + top: 50%; + right: 0; + display: inline-block; + width: 1.15em; + height: 1.15em; + mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + mask-size: cover; + -webkit-mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + background-color: currentColor; + vertical-align: text-bottom; + transform: translate(0, -50%) scale(-1, 1); + transition: var(--theme-button-transition); + transition-property: opacity, transform; } } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(0, 1, 1); + transform-origin: right; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:after { + opacity: 1; + transform: translate(0.4em, -50%) scale(-1, 1); } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + top: unset; } + .wc-block-featured-product .wc-block-featured-product__wrapper { + overflow: hidden; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + align-content: center; } + .wc-block-featured-product.has-left-content { + justify-content: flex-start; } + .wc-block-featured-product.has-left-content .wc-block-featured-product__title, + .wc-block-featured-product.has-left-content .wc-block-featured-product__variation, + .wc-block-featured-product.has-left-content .wc-block-featured-product__description, + .wc-block-featured-product.has-left-content .wc-block-featured-product__price { + margin-left: 0; + text-align: left; } + .wc-block-featured-product.has-right-content { + justify-content: flex-end; } + .wc-block-featured-product.has-right-content .wc-block-featured-product__title, + .wc-block-featured-product.has-right-content .wc-block-featured-product__variation, + .wc-block-featured-product.has-right-content .wc-block-featured-product__description, + .wc-block-featured-product.has-right-content .wc-block-featured-product__price { + margin-right: 0; + text-align: right; } + .wc-block-featured-product .wc-block-featured-product__title, + .wc-block-featured-product .wc-block-featured-product__variation, + .wc-block-featured-product .wc-block-featured-product__description, + .wc-block-featured-product .wc-block-featured-product__price { + color: var(--current-dark-primary); + line-height: 1.25; + margin-bottom: 0; + text-align: center; } + .wc-block-featured-product .wc-block-featured-product__title a, + .wc-block-featured-product .wc-block-featured-product__title a:hover, + .wc-block-featured-product .wc-block-featured-product__title a:focus, + .wc-block-featured-product .wc-block-featured-product__title a:active, + .wc-block-featured-product .wc-block-featured-product__variation a, + .wc-block-featured-product .wc-block-featured-product__variation a:hover, + .wc-block-featured-product .wc-block-featured-product__variation a:focus, + .wc-block-featured-product .wc-block-featured-product__variation a:active, + .wc-block-featured-product .wc-block-featured-product__description a, + .wc-block-featured-product .wc-block-featured-product__description a:hover, + .wc-block-featured-product .wc-block-featured-product__description a:focus, + .wc-block-featured-product .wc-block-featured-product__description a:active, + .wc-block-featured-product .wc-block-featured-product__price a, + .wc-block-featured-product .wc-block-featured-product__price a:hover, + .wc-block-featured-product .wc-block-featured-product__price a:focus, + .wc-block-featured-product .wc-block-featured-product__price a:active { + color: var(--current-light-primary); } + .wc-block-featured-product .wc-block-featured-product__title, + .wc-block-featured-product .wc-block-featured-product__variation, + .wc-block-featured-product .wc-block-featured-product__description, + .wc-block-featured-product .wc-block-featured-product__price, + .wc-block-featured-product .wc-block-featured-product__link { + width: 100%; + padding: 16px 48px 0 48px; + z-index: 1; } + .wc-block-featured-product .wc-block-featured-product__title, + .wc-block-featured-product .wc-block-featured-product__variation { + margin-top: 0; + border: 0; } + .wc-block-featured-product .wc-block-featured-product__title::before, + .wc-block-featured-product .wc-block-featured-product__variation::before { + display: none; } + .wc-block-featured-product .wc-block-featured-product__variation { + font-style: italic; + padding-top: 0; } + .wc-block-featured-product .wc-block-featured-product__description p { + margin: 0; + line-height: 1.5em; } + .wc-block-featured-product.has-background-dim::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: inherit; + opacity: 0.5; + z-index: 1; } + .wc-block-featured-product.has-background-dim.has-background-dim-10::before { + opacity: 0.1; } + .wc-block-featured-product.has-background-dim.has-background-dim-20::before { + opacity: 0.2; } + .wc-block-featured-product.has-background-dim.has-background-dim-30::before { + opacity: 0.3; } + .wc-block-featured-product.has-background-dim.has-background-dim-40::before { + opacity: 0.4; } + .wc-block-featured-product.has-background-dim.has-background-dim-50::before { + opacity: 0.5; } + .wc-block-featured-product.has-background-dim.has-background-dim-60::before { + opacity: 0.6; } + .wc-block-featured-product.has-background-dim.has-background-dim-70::before { + opacity: 0.7; } + .wc-block-featured-product.has-background-dim.has-background-dim-80::before { + opacity: 0.8; } + .wc-block-featured-product.has-background-dim.has-background-dim-90::before { + opacity: 0.9; } + .wc-block-featured-product.has-background-dim.has-background-dim-100::before { + opacity: 1; } + .wc-block-featured-product.alignleft, .wc-block-featured-product.alignright { + max-width: var(--theme-content-width-normal); + width: 100%; } + .wc-block-featured-product::after { + display: block; + content: ""; + font-size: 0; + min-height: inherit; } + @supports (position: sticky) { + .wc-block-featured-product::after { + content: none; } } + .wc-block-featured-product.aligncenter, .wc-block-featured-product.alignleft, .wc-block-featured-product.alignright { + display: flex; } + +.wc-block-featured-category { + position: relative; + background-size: cover; + background-position: center center; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + align-content: center; } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class] { + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; + --current-button-text-color: var(--theme-button-hover-text-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + transform: scale3d(0, 1, 1); + transform-origin: left; + background-color: var(--theme-button-background-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover { + --current-button-text-color: var(--theme-button-text-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(1, 1, 1); } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class] { + padding: 0; + background: none; + border-width: 0; + position: relative; + padding-right: 1.15em; + padding-bottom: .3em; + margin-right: calc( -1 * 1.15em); + margin-bottom: -.3em; + text-decoration: none; + overflow: visible; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + bottom: 0; + right: 1.15em; + width: calc(100% - 1.15em); + height: .1em; + transform: scale3d(1, 1, 1); + will-change: transform; + -webkit-backface-visibility: hidden; + transform-origin: left; + background: currentColor; + transition: var(--theme-button-transition); + transition-property: transform; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + content: ''; + opacity: 0; + transform: translate(0, -50%) scale(-1, 1); } + @supports (mask-clip: initial) or (-webkit-mask-clip: initial) { + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + position: absolute; + top: 50%; + right: 0; + display: inline-block; + width: 1.15em; + height: 1.15em; + mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + mask-size: cover; + -webkit-mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + background-color: currentColor; + vertical-align: text-bottom; + transform: translate(0, -50%) scale(-1, 1); + transition: var(--theme-button-transition); + transition-property: opacity, transform; } } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(0, 1, 1); + transform-origin: right; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:after { + opacity: 1; + transform: translate(0.4em, -50%) scale(-1, 1); } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + top: unset; } + .wc-block-featured-category .wc-block-featured-category__wrapper { + overflow: hidden; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + align-content: center; } + .wc-block-featured-category.has-left-content { + justify-content: flex-start; } + .wc-block-featured-category.has-left-content .wc-block-featured-category__title, + .wc-block-featured-category.has-left-content .wc-block-featured-category__description, + .wc-block-featured-category.has-left-content .wc-block-featured-category__price { + margin-left: 0; + text-align: left; } + .wc-block-featured-category.has-right-content { + justify-content: flex-end; } + .wc-block-featured-category.has-right-content .wc-block-featured-category__title, + .wc-block-featured-category.has-right-content .wc-block-featured-category__description, + .wc-block-featured-category.has-right-content .wc-block-featured-category__price { + margin-right: 0; + text-align: right; } + .wc-block-featured-category .wc-block-featured-category__title, + .wc-block-featured-category .wc-block-featured-category__description, + .wc-block-featured-category .wc-block-featured-category__price { + color: var(--current-dark-primary); + line-height: 1.25; + margin-bottom: 0; + text-align: center; } + .wc-block-featured-category .wc-block-featured-category__title a, + .wc-block-featured-category .wc-block-featured-category__title a:hover, + .wc-block-featured-category .wc-block-featured-category__title a:focus, + .wc-block-featured-category .wc-block-featured-category__title a:active, + .wc-block-featured-category .wc-block-featured-category__description a, + .wc-block-featured-category .wc-block-featured-category__description a:hover, + .wc-block-featured-category .wc-block-featured-category__description a:focus, + .wc-block-featured-category .wc-block-featured-category__description a:active, + .wc-block-featured-category .wc-block-featured-category__price a, + .wc-block-featured-category .wc-block-featured-category__price a:hover, + .wc-block-featured-category .wc-block-featured-category__price a:focus, + .wc-block-featured-category .wc-block-featured-category__price a:active { + color: var(--current-light-primary); } + .wc-block-featured-category .wc-block-featured-category__title, + .wc-block-featured-category .wc-block-featured-category__description, + .wc-block-featured-category .wc-block-featured-category__price, + .wc-block-featured-category .wc-block-featured-category__link { + width: 100%; + padding: 0 48px 16px 48px; + z-index: 1; } + .wc-block-featured-category .wc-block-featured-category__title { + margin-top: 0; } + .wc-block-featured-category .wc-block-featured-category__title::before { + display: none; } + .wc-block-featured-category .wc-block-featured-category__description p { + margin: 0; } + .wc-block-featured-category.has-background-dim::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: inherit; + opacity: 0.5; + z-index: 1; } + .wc-block-featured-category.has-background-dim.has-background-dim-10::before { + opacity: 0.1; } + .wc-block-featured-category.has-background-dim.has-background-dim-20::before { + opacity: 0.2; } + .wc-block-featured-category.has-background-dim.has-background-dim-30::before { + opacity: 0.3; } + .wc-block-featured-category.has-background-dim.has-background-dim-40::before { + opacity: 0.4; } + .wc-block-featured-category.has-background-dim.has-background-dim-50::before { + opacity: 0.5; } + .wc-block-featured-category.has-background-dim.has-background-dim-60::before { + opacity: 0.6; } + .wc-block-featured-category.has-background-dim.has-background-dim-70::before { + opacity: 0.7; } + .wc-block-featured-category.has-background-dim.has-background-dim-80::before { + opacity: 0.8; } + .wc-block-featured-category.has-background-dim.has-background-dim-90::before { + opacity: 0.9; } + .wc-block-featured-category.has-background-dim.has-background-dim-100::before { + opacity: 1; } + .wc-block-featured-category.alignleft, .wc-block-featured-category.alignright { + max-width: var(--theme-content-width-normal); + width: 100%; } + .wc-block-featured-category::after { + display: block; + content: ""; + font-size: 0; + min-height: inherit; } + @supports (position: sticky) { + .wc-block-featured-category::after { + content: none; } } + .wc-block-featured-category.aligncenter, .wc-block-featured-category.alignleft, .wc-block-featured-category.alignright { + display: flex; } + +.wc-block-review-order-select { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; } + +.wc-block-order-select__select[class][class] { + width: 100%; + height: auto; + max-width: 100%; + padding: 0.8em 1.18em 0.93em; + border: 0.0625em solid var(--current-light-tertiary); + color: var(--current-dark-secondary); + border-radius: 0; + background-color: var(--current-light-tertiary); + font: inherit; + line-height: 1.5; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + padding-right: 3.125em; + background-color: var(--current-light-tertiary); + background-image: url("assets/images/arrow-caret.svg"); + background-position: calc(100% - 17px) center; + background-repeat: no-repeat; + background-size: .56em .312em; + -webkit-appearance: none; + width: auto; } + .wc-block-order-select__select[class][class]:focus, .wc-block-order-select__select[class][class]:active { + outline: 0; + box-shadow: none; + border-color: var(--current-dark-primary); } + .wc-block-order-select__select[class][class][disabled] { + border-color: var(--current-dark-secondary); + background-color: var(--current-dark-secondary); } + .wc-block-order-select__select[class][class][disabled] { + border-color: var(--current-light-tertiary); + background-color: var(--current-light-tertiary); } + +.is-loading .wc-block-review-list-item__text { + display: block; + width: 60%; } + +.is-loading .wc-block-review-list-item__info .wc-block-review-list-item__meta .wc-block-review-list-item__author { + width: 5em; } + +.is-loading .wc-block-review-list-item__info .wc-block-review-list-item__meta .wc-block-review-list-item__product { + display: none; } + +.is-loading .wc-block-review-list-item__info .wc-block-review-list-item__meta .wc-block-review-list-item__rating .wc-block-review-list-item__rating__stars > span { + display: none; } + +.is-loading .wc-block-review-list-item__info .wc-block-review-list-item__published-date { + height: 1em; + width: 7.5em; } + +.editor-styles-wrapper .wc-block-review-list-item__item, +.wc-block-review-list-item__item { + margin: 0 0 4.5em; + list-style: none; } + +.wc-block-review-list-item__info { + display: grid; + grid-template-columns: 1fr; + margin-bottom: 2em; } + +.wc-block-review-list-item__meta { + grid-column: 1; + grid-row: 1; } + +.has-image .wc-block-review-list-item__info { + grid-template-columns: 4em 1fr; } + +.has-image .wc-block-review-list-item__meta { + grid-column: 2; } + +.wc-block-review-list-item__image { + height: 3em; + grid-column: 1; + grid-row: 1 / 3; + width: 3em; + position: relative; } + .wc-block-review-list-item__image img { + width: 100%; + height: 100%; + display: block; } + +.wc-block-review-list-item__verified { + width: 1.3em; + height: 1.3em; + text-indent: 1.3em; + margin: 0; + line-height: 1.3em; + overflow: hidden; + position: absolute; + right: -.45em; + bottom: -.45em; } + .wc-block-review-list-item__verified::before { + width: 1.3em; + height: 1.3em; + background: transparent url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="none"%3E%3Ccircle cx="10.5" cy="10.5" r="10.5" fill="%23fff"/%3E%3Cpath fill="%23008A21" fill-rule="evenodd" d="M2.1667 10.5003c0-4.6 3.7333-8.3333 8.3333-8.3333s8.3334 3.7333 8.3334 8.3333S15.1 18.8337 10.5 18.8337s-8.3333-3.7334-8.3333-8.3334zm2.5 0l4.1666 4.1667 7.5001-7.5-1.175-1.1833-6.325 6.325-2.9917-2.9834-1.175 1.175z" clip-rule="evenodd"/%3E%3Cmask id="a" width="17" height="17" x="2" y="2" maskUnits="userSpaceOnUse"%3E%3Cpath fill="%23fff" fill-rule="evenodd" d="M2.1667 10.5003c0-4.6 3.7333-8.3333 8.3333-8.3333s8.3334 3.7333 8.3334 8.3333S15.1 18.8337 10.5 18.8337s-8.3333-3.7334-8.3333-8.3334zm2.5 0l4.1666 4.1667 7.5001-7.5-1.175-1.1833-6.325 6.325-2.9917-2.9834-1.175 1.175z" clip-rule="evenodd"/%3E%3C/mask%3E%3Cg mask="url(%23a)"%3E%3Cpath fill="%23008A21" d="M.5.5h20v20H.5z"/%3E%3C/g%3E%3C/svg%3E') center center no-repeat; + /* stylelint-disable-line */ + display: block; + content: ""; } + +.wc-block-review-list-item__meta { + display: flex; + align-items: center; + flex-flow: row wrap; } + .wc-block-review-list-item__meta::after { + order: 3; + content: ""; + flex-basis: 100%; } + +.wc-block-review-list-item__product { + display: block; + font-weight: bold; + order: 1; + margin-right: .5em; } + +.wc-block-review-list-item__author { + display: block; + font-weight: bold; + order: 1; + margin-right: .5em; } + +.wc-block-review-list-item__product + .wc-block-review-list-item__author { + font-weight: normal; + order: 4; } + +.wc-block-review-list-item__published-date { + order: 5; } + +.wc-block-review-list-item__author + .wc-block-review-list-item__published-date::before { + content: ""; + display: inline-block; + margin-right: .5em; + border-right: 0.1em solid var(--current-light-tertiary); + height: 1em; + vertical-align: middle; } + +.wc-block-review-list-item__author:first-child + .wc-block-review-list-item__published-date::before, +.wc-block-review-list-item__rating + .wc-block-review-list-item__author + .wc-block-review-list-item__published-date::before { + display: none; } + +.wc-block-review-list-item__rating { + order: 2; } + .wc-block-review-list-item__rating > .wc-block-review-list-item__rating__stars { + display: inline-block; + top: 0; + overflow: hidden; + position: relative; + height: 1.618em; + line-height: 1.618; + font-size: 1em; + width: 5.3em; + font-family: star; + /* stylelint-disable-line */ + font-weight: 400; + vertical-align: top; } + .wc-block-review-list-item__rating > .wc-block-review-list-item__rating__stars::before { + content: "\53\53\53\53\53"; + opacity: .25; + float: left; + top: 0; + left: 0; + position: absolute; } + .wc-block-review-list-item__rating > .wc-block-review-list-item__rating__stars span { + overflow: hidden; + float: left; + top: 0; + left: 0; + position: absolute; + padding-top: 1.5em; } + .wc-block-review-list-item__rating > .wc-block-review-list-item__rating__stars span::before { + content: "\53\53\53\53\53"; + top: 0; + position: absolute; + left: 0; + color: var(--current-color-primary); } + +.wc-block-review-list[class][class][class] { + margin-left: 0; + padding-left: 0; } + +.wc-block-review-order-select { + margin-bottom: var(--theme-spacing-small); } + +.wc-block-product-categories.is-dropdown { + display: flex; } + .wc-block-product-categories.is-dropdown select { + width: 100%; + height: auto; + max-width: 100%; + padding: 0.8em 1.18em 0.93em; + border: 0.0625em solid var(--current-light-tertiary); + color: var(--current-dark-secondary); + border-radius: 0; + background-color: var(--current-light-tertiary); + font: inherit; + line-height: 1.5; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + padding-right: 3.125em; + background-color: var(--current-light-tertiary); + background-image: url("assets/images/arrow-caret.svg"); + background-position: calc(100% - 17px) center; + background-repeat: no-repeat; + background-size: .56em .312em; + -webkit-appearance: none; } + .wc-block-product-categories.is-dropdown select:focus, .wc-block-product-categories.is-dropdown select:active { + outline: 0; + box-shadow: none; + border-color: var(--current-dark-primary); } + .wc-block-product-categories.is-dropdown select[disabled] { + border-color: var(--current-dark-secondary); + background-color: var(--current-dark-secondary); } + +.wc-block-product-categories__button { + display: inline-block; + text-decoration: none; + cursor: pointer; + --theme-button-text-color: var(--current-light-primary); + --theme-button-background-color: var(--current-dark-primary); + --theme-button-border-color: var(--current-dark-primary); + --theme-button-hover-text-color: var(--current-dark-primary); + --theme-button-hover-background-color: transparent; + --theme-button-hover-border-color: var(--current-dark-primary); + --theme-button-border-width: 2px; + --theme-button-border-style: solid; + --theme-button-border-radius: 0; + --theme-button-x-padding: 1.5em; + --theme-button-y-padding: 0.75em; + --theme-button-padding: var(--theme-button-y-padding) var(--theme-button-x-padding); + --theme-button-transition-duration: 0.4s; + --theme-button-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); + --theme-button-transition: all var(--theme-button-transition-duration) var(--theme-button-transition-easing); + --theme-button-hover-transition: var(--theme-button-transition); + --current-button-background-color: var(--theme-button-background-color); + --current-button-border-color: var(--theme-button-border-color); + --current-button-text-color: var(--theme-button-text-color); + --current-button-transition: var(--theme-button-transition); + display: inline-block; + text-decoration: none; + cursor: pointer; + --theme-button-text-color: var(--current-light-primary); + --theme-button-background-color: var(--current-dark-primary); + --theme-button-border-color: var(--current-dark-primary); + --theme-button-hover-text-color: var(--current-dark-primary); + --theme-button-hover-background-color: transparent; + --theme-button-hover-border-color: var(--current-dark-primary); + --theme-button-border-width: 2px; + --theme-button-border-style: solid; + --theme-button-border-radius: 0; + --theme-button-x-padding: 1.5em; + --theme-button-y-padding: 0.75em; + --theme-button-padding: var(--theme-button-y-padding) var(--theme-button-x-padding); + --theme-button-transition-duration: 0.4s; + --theme-button-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); + --theme-button-transition: all var(--theme-button-transition-duration) var(--theme-button-transition-easing); + --theme-button-hover-transition: var(--theme-button-transition); + --current-button-background-color: var(--theme-button-background-color); + --current-button-border-color: var(--theme-button-border-color); + --current-button-text-color: var(--theme-button-text-color); + --current-button-transition: var(--theme-button-transition); + padding: var(--theme-button-padding); + border: var(--theme-button-border-width) var(--theme-button-border-style) var(--current-button-border-color); + border-radius: var(--theme-button-border-radius); + background-color: var(--current-button-background-color); + color: var(--current-button-text-color); + transition: var(--current-button-transition); + --current-font-family: var(--theme-button-font-family); + --current-font-size: var(--theme-button-final-font-size); + --current-line-height: var(--theme-button-line-height); + --current-font-weight: var(--theme-button-font-weight); + --current-letter-spacing: var(--theme-button-letter-spacing); + --current-text-transform: var(--theme-button-text-transform); + --current-text-decoration: var(--theme-button-text-decoration); + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; } + .wc-block-product-categories__button:hover { + --current-button-background-color: var(--theme-button-hover-background-color); + --current-button-border-color: var(--theme-button-hover-border-color); + --current-button-text-color: var(--theme-button-hover-text-color); + --current-button-transition: var(--theme-button-hover-transition); } + .wc-block-product-categories__button:hover { + --current-button-background-color: var(--theme-button-hover-background-color); + --current-button-border-color: var(--theme-button-hover-border-color); + --current-button-text-color: var(--theme-button-hover-text-color); + --current-button-transition: var(--theme-button-hover-transition); } + .wc-block-product-categories__button:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-product-categories__button:before { + transform: scale3d(1, 1, 1); + transform-origin: right; + background-color: var(--theme-button-background-color); } + .wc-block-product-categories__button:hover:before { + transform: scale3d(0, 1, 1); } + .wc-block-product-categories__button path { + fill: var(--theme-button-text-color); } + .wc-block-product-categories__button:hover path { + fill: var(--theme-button-hover-text-color); } + +[class*="wc-block-"] .wp-block-button__link[class][class][class] { + display: inline-block; + text-decoration: none; + cursor: pointer; + --theme-button-text-color: var(--current-light-primary); + --theme-button-background-color: var(--current-dark-primary); + --theme-button-border-color: var(--current-dark-primary); + --theme-button-hover-text-color: var(--current-dark-primary); + --theme-button-hover-background-color: transparent; + --theme-button-hover-border-color: var(--current-dark-primary); + --theme-button-border-width: 2px; + --theme-button-border-style: solid; + --theme-button-border-radius: 0; + --theme-button-x-padding: 1.5em; + --theme-button-y-padding: 0.75em; + --theme-button-padding: var(--theme-button-y-padding) var(--theme-button-x-padding); + --theme-button-transition-duration: 0.4s; + --theme-button-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); + --theme-button-transition: all var(--theme-button-transition-duration) var(--theme-button-transition-easing); + --theme-button-hover-transition: var(--theme-button-transition); + --current-button-background-color: var(--theme-button-background-color); + --current-button-border-color: var(--theme-button-border-color); + --current-button-text-color: var(--theme-button-text-color); + --current-button-transition: var(--theme-button-transition); + padding: var(--theme-button-padding); + border: var(--theme-button-border-width) var(--theme-button-border-style) var(--current-button-border-color); + border-radius: var(--theme-button-border-radius); + background-color: var(--current-button-background-color); + color: var(--current-button-text-color); + transition: var(--current-button-transition); + --current-font-family: var(--theme-button-font-family); + --current-font-size: var(--theme-button-final-font-size); + --current-line-height: var(--theme-button-line-height); + --current-font-weight: var(--theme-button-font-weight); + --current-letter-spacing: var(--theme-button-letter-spacing); + --current-text-transform: var(--theme-button-text-transform); + --current-text-decoration: var(--theme-button-text-decoration); + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; } + [class*="wc-block-"] .wp-block-button__link[class][class][class]:hover { + --current-button-background-color: var(--theme-button-hover-background-color); + --current-button-border-color: var(--theme-button-hover-border-color); + --current-button-text-color: var(--theme-button-hover-text-color); + --current-button-transition: var(--theme-button-hover-transition); } + [class*="wc-block-"] .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + [class*="wc-block-"] .wp-block-button__link[class][class][class]:before { + transform: scale3d(1, 1, 1); + transform-origin: right; + background-color: var(--theme-button-background-color); } + [class*="wc-block-"] .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(0, 1, 1); } + +.wp-block-button.wc-block-grid__product-add-to-cart { + opacity: 1; + transform: translateY(0); } diff --git a/editor.css b/editor.css index 5cdaf8fc..8b15f0b7 100644 --- a/editor.css +++ b/editor.css @@ -2210,18 +2210,22 @@ /* Alignment Helper Classes */ } .editor-styles-wrapper .has-background { padding: 1em 1.25em; } + .editor-styles-wrapper .has-sm_color_primary-background-color, .editor-styles-wrapper .has-sm-color-primary-background-color { background-color: var(--current-color-primary); } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-primary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2234,12 +2238,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2247,6 +2254,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2259,34 +2267,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_color_primary-color, .editor-styles-wrapper .has-sm-color-primary-color { color: var(--current-color-primary); } + .editor-styles-wrapper .has-sm_color_primary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-color-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-primary); --theme-button-hover-text-color: var(--current-color-primary); --theme-button-border-color: var(--current-color-primary); --theme-button-hover-border-color: var(--current-color-primary); } + .editor-styles-wrapper .has-sm_color_secondary-background-color, .editor-styles-wrapper .has-sm-color-secondary-background-color { background-color: var(--current-color-secondary); } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-secondary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2299,12 +2316,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2312,6 +2332,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2324,34 +2345,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_color_secondary-color, .editor-styles-wrapper .has-sm-color-secondary-color { color: var(--current-color-secondary); } + .editor-styles-wrapper .has-sm_color_secondary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-color-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-secondary); --theme-button-hover-text-color: var(--current-color-secondary); --theme-button-border-color: var(--current-color-secondary); --theme-button-hover-border-color: var(--current-color-secondary); } + .editor-styles-wrapper .has-sm_color_tertiary-background-color, .editor-styles-wrapper .has-sm-color-tertiary-background-color { background-color: var(--current-color-tertiary); } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-tertiary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2364,12 +2394,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2377,6 +2410,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2389,34 +2423,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_color_tertiary-color, .editor-styles-wrapper .has-sm-color-tertiary-color { color: var(--current-color-tertiary); } + .editor-styles-wrapper .has-sm_color_tertiary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-color-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-tertiary); --theme-button-hover-text-color: var(--current-color-tertiary); --theme-button-border-color: var(--current-color-tertiary); --theme-button-hover-border-color: var(--current-color-tertiary); } + .editor-styles-wrapper .has-sm_dark_primary-background-color, .editor-styles-wrapper .has-sm-dark-primary-background-color { background-color: var(--current-dark-primary); } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-primary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2429,12 +2472,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2442,6 +2488,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2454,34 +2501,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_dark_primary-color, .editor-styles-wrapper .has-sm-dark-primary-color { color: var(--current-dark-primary); } + .editor-styles-wrapper .has-sm_dark_primary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-dark-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-primary); --theme-button-hover-text-color: var(--current-dark-primary); --theme-button-border-color: var(--current-dark-primary); --theme-button-hover-border-color: var(--current-dark-primary); } + .editor-styles-wrapper .has-sm_dark_secondary-background-color, .editor-styles-wrapper .has-sm-dark-secondary-background-color { background-color: var(--current-dark-secondary); } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-secondary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2494,12 +2550,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2507,6 +2566,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2519,34 +2579,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_dark_secondary-color, .editor-styles-wrapper .has-sm-dark-secondary-color { color: var(--current-dark-secondary); } + .editor-styles-wrapper .has-sm_dark_secondary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-dark-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-secondary); --theme-button-hover-text-color: var(--current-dark-secondary); --theme-button-border-color: var(--current-dark-secondary); --theme-button-hover-border-color: var(--current-dark-secondary); } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color, .editor-styles-wrapper .has-sm-dark-tertiary-background-color { background-color: var(--current-dark-tertiary); } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-tertiary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2559,12 +2628,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2572,6 +2644,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2584,34 +2657,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_dark_tertiary-color, .editor-styles-wrapper .has-sm-dark-tertiary-color { color: var(--current-dark-tertiary); } + .editor-styles-wrapper .has-sm_dark_tertiary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-dark-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-tertiary); --theme-button-hover-text-color: var(--current-dark-tertiary); --theme-button-border-color: var(--current-dark-tertiary); --theme-button-hover-border-color: var(--current-dark-tertiary); } + .editor-styles-wrapper .has-sm_light_primary-background-color, .editor-styles-wrapper .has-sm-light-primary-background-color { background-color: var(--current-light-primary); } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-primary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2624,12 +2706,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2637,6 +2722,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2649,34 +2735,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_light_primary-color, .editor-styles-wrapper .has-sm-light-primary-color { color: var(--current-light-primary); } + .editor-styles-wrapper .has-sm_light_primary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-light-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-primary); --theme-button-hover-text-color: var(--current-light-primary); --theme-button-border-color: var(--current-light-primary); --theme-button-hover-border-color: var(--current-light-primary); } + .editor-styles-wrapper .has-sm_light_secondary-background-color, .editor-styles-wrapper .has-sm-light-secondary-background-color { background-color: var(--current-light-secondary); } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-secondary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2689,12 +2784,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2702,6 +2800,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2714,34 +2813,43 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_light_secondary-color, .editor-styles-wrapper .has-sm-light-secondary-color { color: var(--current-light-secondary); } + .editor-styles-wrapper .has-sm_light_secondary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-light-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-secondary); --theme-button-hover-text-color: var(--current-light-secondary); --theme-button-border-color: var(--current-light-secondary); --theme-button-hover-border-color: var(--current-light-secondary); } + .editor-styles-wrapper .has-sm_light_tertiary-background-color, .editor-styles-wrapper .has-sm-light-tertiary-background-color { background-color: var(--current-light-tertiary); } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-tertiary); --theme-button-hover-background-color: transparent; } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -2754,12 +2862,15 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -2767,6 +2878,7 @@ backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -2779,16 +2891,21 @@ -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .editor-styles-wrapper .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .editor-styles-wrapper .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } + .editor-styles-wrapper .has-sm_light_tertiary-color, .editor-styles-wrapper .has-sm-light-tertiary-color { color: var(--current-light-tertiary); } + .editor-styles-wrapper .has-sm_light_tertiary-color[class][class][class].wp-block-button__link, .editor-styles-wrapper .has-sm-light-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-tertiary); diff --git a/inc/integrations/woocommerce.php b/inc/integrations/woocommerce.php index 318cd40e..d27ec958 100644 --- a/inc/integrations/woocommerce.php +++ b/inc/integrations/woocommerce.php @@ -28,6 +28,13 @@ function rosa2_woocommerce_scripts() { } add_action( 'wp_enqueue_scripts', 'rosa2_woocommerce_scripts', 10 ); +function rosa2_enqueue_woocommerce_block_editor_assets() { + $theme = wp_get_theme( get_template() ); + + wp_enqueue_style( 'rosa2-woocommerce-block-styles', get_template_directory_uri() . '/editor-woocommerce.css', array(), $theme->get( 'Version' ) ); +} +add_action( 'enqueue_block_editor_assets', 'rosa2_enqueue_woocommerce_block_editor_assets', 10 ); + function rosa2_woocommerce_setup_hooks() { // Remove Sidebar diff --git a/style-rtl.css b/style-rtl.css index c18da943..a9586ac0 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -1572,7 +1572,8 @@ ul.menu a, color: inherit; text-decoration: none; } -.menu-item { +.menu-item, +.page_item { position: relative; } .c-menu-toggle__wrap { @@ -2988,18 +2989,22 @@ span.page-numbers { .has-background { padding: 1em 1.25em; } +.has-sm_color_primary-background-color, .has-sm-color-primary-background-color { background-color: var(--current-color-primary); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-primary); --theme-button-hover-background-color: transparent; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3012,12 +3017,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3025,6 +3033,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3037,17 +3046,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_color_primary-color, .has-sm-color-primary-color { color: var(--current-color-primary); } + .has-sm_color_primary-color[class][class][class].wp-block-button__link, .has-sm-color-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-primary); @@ -3055,18 +3069,22 @@ span.page-numbers { --theme-button-border-color: var(--current-color-primary); --theme-button-hover-border-color: var(--current-color-primary); } +.has-sm_color_secondary-background-color, .has-sm-color-secondary-background-color { background-color: var(--current-color-secondary); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-secondary); --theme-button-hover-background-color: transparent; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3079,12 +3097,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3092,6 +3113,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3104,17 +3126,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_color_secondary-color, .has-sm-color-secondary-color { color: var(--current-color-secondary); } + .has-sm_color_secondary-color[class][class][class].wp-block-button__link, .has-sm-color-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-secondary); @@ -3122,18 +3149,22 @@ span.page-numbers { --theme-button-border-color: var(--current-color-secondary); --theme-button-hover-border-color: var(--current-color-secondary); } +.has-sm_color_tertiary-background-color, .has-sm-color-tertiary-background-color { background-color: var(--current-color-tertiary); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-tertiary); --theme-button-hover-background-color: transparent; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3146,12 +3177,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3159,6 +3193,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3171,17 +3206,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_color_tertiary-color, .has-sm-color-tertiary-color { color: var(--current-color-tertiary); } + .has-sm_color_tertiary-color[class][class][class].wp-block-button__link, .has-sm-color-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-tertiary); @@ -3189,18 +3229,22 @@ span.page-numbers { --theme-button-border-color: var(--current-color-tertiary); --theme-button-hover-border-color: var(--current-color-tertiary); } +.has-sm_dark_primary-background-color, .has-sm-dark-primary-background-color { background-color: var(--current-dark-primary); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-primary); --theme-button-hover-background-color: transparent; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3213,12 +3257,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3226,6 +3273,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3238,17 +3286,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_dark_primary-color, .has-sm-dark-primary-color { color: var(--current-dark-primary); } + .has-sm_dark_primary-color[class][class][class].wp-block-button__link, .has-sm-dark-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-primary); @@ -3256,18 +3309,22 @@ span.page-numbers { --theme-button-border-color: var(--current-dark-primary); --theme-button-hover-border-color: var(--current-dark-primary); } +.has-sm_dark_secondary-background-color, .has-sm-dark-secondary-background-color { background-color: var(--current-dark-secondary); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-secondary); --theme-button-hover-background-color: transparent; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3280,12 +3337,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3293,6 +3353,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3305,17 +3366,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_dark_secondary-color, .has-sm-dark-secondary-color { color: var(--current-dark-secondary); } + .has-sm_dark_secondary-color[class][class][class].wp-block-button__link, .has-sm-dark-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-secondary); @@ -3323,18 +3389,22 @@ span.page-numbers { --theme-button-border-color: var(--current-dark-secondary); --theme-button-hover-border-color: var(--current-dark-secondary); } +.has-sm_dark_tertiary-background-color, .has-sm-dark-tertiary-background-color { background-color: var(--current-dark-tertiary); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-tertiary); --theme-button-hover-background-color: transparent; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3347,12 +3417,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3360,6 +3433,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3372,17 +3446,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_dark_tertiary-color, .has-sm-dark-tertiary-color { color: var(--current-dark-tertiary); } + .has-sm_dark_tertiary-color[class][class][class].wp-block-button__link, .has-sm-dark-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-tertiary); @@ -3390,18 +3469,22 @@ span.page-numbers { --theme-button-border-color: var(--current-dark-tertiary); --theme-button-hover-border-color: var(--current-dark-tertiary); } +.has-sm_light_primary-background-color, .has-sm-light-primary-background-color { background-color: var(--current-light-primary); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-primary); --theme-button-hover-background-color: transparent; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3414,12 +3497,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3427,6 +3513,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3439,17 +3526,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_light_primary-color, .has-sm-light-primary-color { color: var(--current-light-primary); } + .has-sm_light_primary-color[class][class][class].wp-block-button__link, .has-sm-light-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-primary); @@ -3457,18 +3549,22 @@ span.page-numbers { --theme-button-border-color: var(--current-light-primary); --theme-button-hover-border-color: var(--current-light-primary); } +.has-sm_light_secondary-background-color, .has-sm-light-secondary-background-color { background-color: var(--current-light-secondary); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-secondary); --theme-button-hover-background-color: transparent; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3481,12 +3577,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3494,6 +3593,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3506,17 +3606,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_light_secondary-color, .has-sm-light-secondary-color { color: var(--current-light-secondary); } + .has-sm_light_secondary-color[class][class][class].wp-block-button__link, .has-sm-light-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-secondary); @@ -3524,18 +3629,22 @@ span.page-numbers { --theme-button-border-color: var(--current-light-secondary); --theme-button-hover-border-color: var(--current-light-secondary); } +.has-sm_light_tertiary-background-color, .has-sm-light-tertiary-background-color { background-color: var(--current-light-tertiary); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-tertiary); --theme-button-hover-background-color: transparent; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3548,12 +3657,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3561,6 +3673,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3573,17 +3686,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_light_tertiary-color, .has-sm-light-tertiary-color { color: var(--current-light-tertiary); } + .has-sm_light_tertiary-color[class][class][class].wp-block-button__link, .has-sm-light-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-tertiary); diff --git a/style.css b/style.css index a95fc9c9..1fda3e35 100644 --- a/style.css +++ b/style.css @@ -1572,7 +1572,8 @@ ul.menu a, color: inherit; text-decoration: none; } -.menu-item { +.menu-item, +.page_item { position: relative; } .c-menu-toggle__wrap { @@ -2988,18 +2989,22 @@ span.page-numbers { .has-background { padding: 1em 1.25em; } +.has-sm_color_primary-background-color, .has-sm-color-primary-background-color { background-color: var(--current-color-primary); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-primary); --theme-button-hover-background-color: transparent; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3012,12 +3017,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3025,6 +3033,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3037,17 +3046,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_color_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-color-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_color_primary-color, .has-sm-color-primary-color { color: var(--current-color-primary); } + .has-sm_color_primary-color[class][class][class].wp-block-button__link, .has-sm-color-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-primary); @@ -3055,18 +3069,22 @@ span.page-numbers { --theme-button-border-color: var(--current-color-primary); --theme-button-hover-border-color: var(--current-color-primary); } +.has-sm_color_secondary-background-color, .has-sm-color-secondary-background-color { background-color: var(--current-color-secondary); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-secondary); --theme-button-hover-background-color: transparent; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3079,12 +3097,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3092,6 +3113,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3104,17 +3126,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_color_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-color-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_color_secondary-color, .has-sm-color-secondary-color { color: var(--current-color-secondary); } + .has-sm_color_secondary-color[class][class][class].wp-block-button__link, .has-sm-color-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-secondary); @@ -3122,18 +3149,22 @@ span.page-numbers { --theme-button-border-color: var(--current-color-secondary); --theme-button-hover-border-color: var(--current-color-secondary); } +.has-sm_color_tertiary-background-color, .has-sm-color-tertiary-background-color { background-color: var(--current-color-tertiary); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-color-tertiary); --theme-button-hover-background-color: transparent; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3146,12 +3177,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3159,6 +3193,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3171,17 +3206,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_color_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-color-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_color_tertiary-color, .has-sm-color-tertiary-color { color: var(--current-color-tertiary); } + .has-sm_color_tertiary-color[class][class][class].wp-block-button__link, .has-sm-color-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-color-tertiary); @@ -3189,18 +3229,22 @@ span.page-numbers { --theme-button-border-color: var(--current-color-tertiary); --theme-button-hover-border-color: var(--current-color-tertiary); } +.has-sm_dark_primary-background-color, .has-sm-dark-primary-background-color { background-color: var(--current-dark-primary); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-primary); --theme-button-hover-background-color: transparent; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3213,12 +3257,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3226,6 +3273,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3238,17 +3286,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_dark_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-dark-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_dark_primary-color, .has-sm-dark-primary-color { color: var(--current-dark-primary); } + .has-sm_dark_primary-color[class][class][class].wp-block-button__link, .has-sm-dark-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-primary); @@ -3256,18 +3309,22 @@ span.page-numbers { --theme-button-border-color: var(--current-dark-primary); --theme-button-hover-border-color: var(--current-dark-primary); } +.has-sm_dark_secondary-background-color, .has-sm-dark-secondary-background-color { background-color: var(--current-dark-secondary); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-secondary); --theme-button-hover-background-color: transparent; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3280,12 +3337,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3293,6 +3353,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3305,17 +3366,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_dark_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-dark-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_dark_secondary-color, .has-sm-dark-secondary-color { color: var(--current-dark-secondary); } + .has-sm_dark_secondary-color[class][class][class].wp-block-button__link, .has-sm-dark-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-secondary); @@ -3323,18 +3389,22 @@ span.page-numbers { --theme-button-border-color: var(--current-dark-secondary); --theme-button-hover-border-color: var(--current-dark-secondary); } +.has-sm_dark_tertiary-background-color, .has-sm-dark-tertiary-background-color { background-color: var(--current-dark-tertiary); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-dark-tertiary); --theme-button-hover-background-color: transparent; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3347,12 +3417,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3360,6 +3433,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3372,17 +3446,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_dark_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-dark-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_dark_tertiary-color, .has-sm-dark-tertiary-color { color: var(--current-dark-tertiary); } + .has-sm_dark_tertiary-color[class][class][class].wp-block-button__link, .has-sm-dark-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-dark-tertiary); @@ -3390,18 +3469,22 @@ span.page-numbers { --theme-button-border-color: var(--current-dark-tertiary); --theme-button-hover-border-color: var(--current-dark-tertiary); } +.has-sm_light_primary-background-color, .has-sm-light-primary-background-color { background-color: var(--current-light-primary); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-primary); --theme-button-hover-background-color: transparent; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3414,12 +3497,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3427,6 +3513,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3439,17 +3526,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_light_primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-light-primary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_light_primary-color, .has-sm-light-primary-color { color: var(--current-light-primary); } + .has-sm_light_primary-color[class][class][class].wp-block-button__link, .has-sm-light-primary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-primary); @@ -3457,18 +3549,22 @@ span.page-numbers { --theme-button-border-color: var(--current-light-primary); --theme-button-hover-border-color: var(--current-light-primary); } +.has-sm_light_secondary-background-color, .has-sm-light-secondary-background-color { background-color: var(--current-light-secondary); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-secondary); --theme-button-hover-background-color: transparent; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3481,12 +3577,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3494,6 +3593,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3506,17 +3606,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_light_secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-light-secondary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_light_secondary-color, .has-sm-light-secondary-color { color: var(--current-light-secondary); } + .has-sm_light_secondary-color[class][class][class].wp-block-button__link, .has-sm-light-secondary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-secondary); @@ -3524,18 +3629,22 @@ span.page-numbers { --theme-button-border-color: var(--current-light-secondary); --theme-button-hover-border-color: var(--current-light-secondary); } +.has-sm_light_tertiary-background-color, .has-sm-light-tertiary-background-color { background-color: var(--current-light-tertiary); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link { background-color: transparent !important; --theme-button-background-color: var(--current-light-tertiary); --theme-button-hover-background-color: transparent; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary { background-color: transparent; transform: translateZ(0); will-change: transform; backface-visibility: hidden; overflow: hidden; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { content: ''; position: absolute; @@ -3548,12 +3657,15 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:before { transform: scale3d(1, 1, 1); transform-origin: right; background-color: var(--theme-button-background-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-primary:hover:before { transform: scale3d(0, 1, 1); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary { background-color: transparent; transform: translateZ(0); @@ -3561,6 +3673,7 @@ span.page-numbers { backface-visibility: hidden; overflow: hidden; --current-button-text-color: var(--theme-button-hover-text-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { content: ''; position: absolute; @@ -3573,17 +3686,22 @@ span.page-numbers { -webkit-backface-visibility: hidden; transition: var(--current-button-transition); transition-property: transform; } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:before { transform: scale3d(0, 1, 1); transform-origin: left; background-color: var(--theme-button-background-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover { --current-button-text-color: var(--theme-button-text-color); } + .has-sm_light_tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before, .has-sm-light-tertiary-background-color[class][class][class].wp-block-button__link.is-style-secondary:hover:before { transform: scale3d(1, 1, 1); } +.has-sm_light_tertiary-color, .has-sm-light-tertiary-color { color: var(--current-light-tertiary); } + .has-sm_light_tertiary-color[class][class][class].wp-block-button__link, .has-sm-light-tertiary-color[class][class][class].wp-block-button__link { color: var(--current-button-text-color) !important; --theme-button-text-color: var(--current-light-tertiary); diff --git a/woocommerce-rtl.css b/woocommerce-rtl.css index 1e941fcb..00e1971c 100644 --- a/woocommerce-rtl.css +++ b/woocommerce-rtl.css @@ -9,7 +9,7 @@ .woocommerce-loop-product__title, .woocommerce-loop-category__title, .c-product-main .product_title, .add_to_cart_button, .related.products > h2, .upsells > h2, -.wc-tabs .h3, .order-total .amount, .cart_totals h2, .cross-sells h2, .cross-sells .wc-block-grid__product-title, #ship-to-different-address, [class*="wc-block-"] .wp-block-button__link[class], .woocommerce-pagination { +.wc-tabs .h3, .order-total .amount, .cart_totals h2, .cross-sells h2, .cross-sells .wc-block-grid__product-title, #ship-to-different-address, .wc-block-product-categories__button, [class*="wc-block-"] .wp-block-button__link[class], .woocommerce-pagination { font-family: var(--current-font-family); font-size: var(--current-font-size); line-height: var(--current-line-height); @@ -340,7 +340,7 @@ .wc-block-grid.has-1-columns .wc-block-grid__product { margin-right: auto; margin-left: auto; } - .wc-block-grid .wc-block-grid__product { + .wc-block-grid .wc-block-grid__product[class] { flex: 1; max-width: 100%; } @media only screen and (min-width: 1000px) { @@ -1690,7 +1690,6 @@ ul.order_details[class] { */ .wc-block-featured-product { position: relative; - background-color: var(--current-dark-primary); background-size: cover; background-position: center center; width: 100%; @@ -1699,6 +1698,87 @@ ul.order_details[class] { align-items: center; flex-wrap: wrap; align-content: center; } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class] { + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; + --current-button-text-color: var(--theme-button-hover-text-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + transform: scale3d(0, 1, 1); + transform-origin: right; + background-color: var(--theme-button-background-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover { + --current-button-text-color: var(--theme-button-text-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(1, 1, 1); } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class] { + padding: 0; + background: none; + border-width: 0; + position: relative; + padding-left: 1.15em; + padding-bottom: .3em; + margin-left: calc( -1 * 1.15em); + margin-bottom: -.3em; + text-decoration: none; + overflow: visible; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + bottom: 0; + left: 1.15em; + width: calc(100% - 1.15em); + height: .1em; + transform: scale3d(1, 1, 1); + will-change: transform; + -webkit-backface-visibility: hidden; + transform-origin: right; + background: currentColor; + transition: var(--theme-button-transition); + transition-property: transform; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + content: ''; + opacity: 0; + transform: translate(0, -50%) scale(-1, 1); } + @supports (mask-clip: initial) or (-webkit-mask-clip: initial) { + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + position: absolute; + top: 50%; + left: 0; + display: inline-block; + width: 1.15em; + height: 1.15em; + mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + mask-size: cover; + -webkit-mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + background-color: currentColor; + vertical-align: text-bottom; + transform: translate(0, -50%) scale(-1, 1); + transition: var(--theme-button-transition); + transition-property: opacity, transform; } } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(0, 1, 1); + transform-origin: left; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:after { + opacity: 1; + transform: translate(-0.4em, -50%) scale(-1, 1); } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + top: unset; } .wc-block-featured-product .wc-block-featured-product__wrapper { overflow: hidden; height: 100%; @@ -1727,7 +1807,7 @@ ul.order_details[class] { .wc-block-featured-product .wc-block-featured-product__variation, .wc-block-featured-product .wc-block-featured-product__description, .wc-block-featured-product .wc-block-featured-product__price { - color: var(--current-light-primary); + color: var(--current-dark-primary); line-height: 1.25; margin-bottom: 0; text-align: center; } @@ -1815,7 +1895,6 @@ ul.order_details[class] { .wc-block-featured-category { position: relative; - background-color: var(--current-dark-primary); background-size: cover; background-position: center center; width: 100%; @@ -1824,6 +1903,87 @@ ul.order_details[class] { align-items: center; flex-wrap: wrap; align-content: center; } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class] { + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; + --current-button-text-color: var(--theme-button-hover-text-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + transform: scale3d(0, 1, 1); + transform-origin: right; + background-color: var(--theme-button-background-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover { + --current-button-text-color: var(--theme-button-text-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(1, 1, 1); } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class] { + padding: 0; + background: none; + border-width: 0; + position: relative; + padding-left: 1.15em; + padding-bottom: .3em; + margin-left: calc( -1 * 1.15em); + margin-bottom: -.3em; + text-decoration: none; + overflow: visible; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + bottom: 0; + left: 1.15em; + width: calc(100% - 1.15em); + height: .1em; + transform: scale3d(1, 1, 1); + will-change: transform; + -webkit-backface-visibility: hidden; + transform-origin: right; + background: currentColor; + transition: var(--theme-button-transition); + transition-property: transform; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + content: ''; + opacity: 0; + transform: translate(0, -50%) scale(-1, 1); } + @supports (mask-clip: initial) or (-webkit-mask-clip: initial) { + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + position: absolute; + top: 50%; + left: 0; + display: inline-block; + width: 1.15em; + height: 1.15em; + mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + mask-size: cover; + -webkit-mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + background-color: currentColor; + vertical-align: text-bottom; + transform: translate(0, -50%) scale(-1, 1); + transition: var(--theme-button-transition); + transition-property: opacity, transform; } } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(0, 1, 1); + transform-origin: left; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:after { + opacity: 1; + transform: translate(-0.4em, -50%) scale(-1, 1); } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + top: unset; } .wc-block-featured-category .wc-block-featured-category__wrapper { overflow: hidden; height: 100%; @@ -1849,7 +2009,7 @@ ul.order_details[class] { .wc-block-featured-category .wc-block-featured-category__title, .wc-block-featured-category .wc-block-featured-category__description, .wc-block-featured-category .wc-block-featured-category__price { - color: var(--current-light-primary); + color: var(--current-dark-primary); line-height: 1.25; margin-bottom: 0; text-align: center; } @@ -1923,6 +2083,44 @@ ul.order_details[class] { .wc-block-featured-category.aligncenter, .wc-block-featured-category.alignleft, .wc-block-featured-category.alignright { display: flex; } +.wc-block-review-order-select { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; } + +.wc-block-order-select__select[class][class] { + width: 100%; + height: auto; + max-width: 100%; + padding: 0.8em 1.18em 0.93em; + border: 0.0625em solid var(--current-light-tertiary); + color: var(--current-dark-secondary); + border-radius: 0; + background-color: var(--current-light-tertiary); + font: inherit; + line-height: 1.5; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + padding-left: 3.125em; + background-color: var(--current-light-tertiary); + background-image: url("assets/images/arrow-caret.svg"); + background-position: calc(100% - (100% - 17px)) center; + background-repeat: no-repeat; + background-size: .56em .312em; + -webkit-appearance: none; + width: auto; } + .wc-block-order-select__select[class][class]:focus, .wc-block-order-select__select[class][class]:active { + outline: 0; + box-shadow: none; + border-color: var(--current-dark-primary); } + .wc-block-order-select__select[class][class][disabled] { + border-color: var(--current-dark-secondary); + background-color: var(--current-dark-secondary); } + .wc-block-order-select__select[class][class][disabled] { + border-color: var(--current-light-tertiary); + background-color: var(--current-light-tertiary); } + .is-loading .wc-block-review-list-item__text { display: block; width: 60%; } @@ -2065,6 +2263,141 @@ ul.order_details[class] { right: 0; color: var(--current-color-primary); } +.wc-block-review-list[class][class][class] { + margin-right: 0; + padding-right: 0; } + +.wc-block-review-order-select { + margin-bottom: var(--theme-spacing-small); } + +.wc-block-product-categories.is-dropdown { + display: flex; } + .wc-block-product-categories.is-dropdown select { + width: 100%; + height: auto; + max-width: 100%; + padding: 0.8em 1.18em 0.93em; + border: 0.0625em solid var(--current-light-tertiary); + color: var(--current-dark-secondary); + border-radius: 0; + background-color: var(--current-light-tertiary); + font: inherit; + line-height: 1.5; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + padding-left: 3.125em; + background-color: var(--current-light-tertiary); + background-image: url("assets/images/arrow-caret.svg"); + background-position: calc(100% - (100% - 17px)) center; + background-repeat: no-repeat; + background-size: .56em .312em; + -webkit-appearance: none; } + .wc-block-product-categories.is-dropdown select:focus, .wc-block-product-categories.is-dropdown select:active { + outline: 0; + box-shadow: none; + border-color: var(--current-dark-primary); } + .wc-block-product-categories.is-dropdown select[disabled] { + border-color: var(--current-dark-secondary); + background-color: var(--current-dark-secondary); } + +.wc-block-product-categories__button { + display: inline-block; + text-decoration: none; + cursor: pointer; + --theme-button-text-color: var(--current-light-primary); + --theme-button-background-color: var(--current-dark-primary); + --theme-button-border-color: var(--current-dark-primary); + --theme-button-hover-text-color: var(--current-dark-primary); + --theme-button-hover-background-color: transparent; + --theme-button-hover-border-color: var(--current-dark-primary); + --theme-button-border-width: 2px; + --theme-button-border-style: solid; + --theme-button-border-radius: 0; + --theme-button-x-padding: 1.5em; + --theme-button-y-padding: 0.75em; + --theme-button-padding: var(--theme-button-y-padding) var(--theme-button-x-padding); + --theme-button-transition-duration: 0.4s; + --theme-button-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); + --theme-button-transition: all var(--theme-button-transition-duration) var(--theme-button-transition-easing); + --theme-button-hover-transition: var(--theme-button-transition); + --current-button-background-color: var(--theme-button-background-color); + --current-button-border-color: var(--theme-button-border-color); + --current-button-text-color: var(--theme-button-text-color); + --current-button-transition: var(--theme-button-transition); + display: inline-block; + text-decoration: none; + cursor: pointer; + --theme-button-text-color: var(--current-light-primary); + --theme-button-background-color: var(--current-dark-primary); + --theme-button-border-color: var(--current-dark-primary); + --theme-button-hover-text-color: var(--current-dark-primary); + --theme-button-hover-background-color: transparent; + --theme-button-hover-border-color: var(--current-dark-primary); + --theme-button-border-width: 2px; + --theme-button-border-style: solid; + --theme-button-border-radius: 0; + --theme-button-x-padding: 1.5em; + --theme-button-y-padding: 0.75em; + --theme-button-padding: var(--theme-button-y-padding) var(--theme-button-x-padding); + --theme-button-transition-duration: 0.4s; + --theme-button-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); + --theme-button-transition: all var(--theme-button-transition-duration) var(--theme-button-transition-easing); + --theme-button-hover-transition: var(--theme-button-transition); + --current-button-background-color: var(--theme-button-background-color); + --current-button-border-color: var(--theme-button-border-color); + --current-button-text-color: var(--theme-button-text-color); + --current-button-transition: var(--theme-button-transition); + padding: var(--theme-button-padding); + border: var(--theme-button-border-width) var(--theme-button-border-style) var(--current-button-border-color); + border-radius: var(--theme-button-border-radius); + background-color: var(--current-button-background-color); + color: var(--current-button-text-color); + transition: var(--current-button-transition); + --current-font-family: var(--theme-button-font-family); + --current-font-size: var(--theme-button-final-font-size); + --current-line-height: var(--theme-button-line-height); + --current-font-weight: var(--theme-button-font-weight); + --current-letter-spacing: var(--theme-button-letter-spacing); + --current-text-transform: var(--theme-button-text-transform); + --current-text-decoration: var(--theme-button-text-decoration); + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; } + .wc-block-product-categories__button:hover { + --current-button-background-color: var(--theme-button-hover-background-color); + --current-button-border-color: var(--theme-button-hover-border-color); + --current-button-text-color: var(--theme-button-hover-text-color); + --current-button-transition: var(--theme-button-hover-transition); } + .wc-block-product-categories__button:hover { + --current-button-background-color: var(--theme-button-hover-background-color); + --current-button-border-color: var(--theme-button-hover-border-color); + --current-button-text-color: var(--theme-button-hover-text-color); + --current-button-transition: var(--theme-button-hover-transition); } + .wc-block-product-categories__button:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-product-categories__button:before { + transform: scale3d(1, 1, 1); + transform-origin: left; + background-color: var(--theme-button-background-color); } + .wc-block-product-categories__button:hover:before { + transform: scale3d(0, 1, 1); } + .wc-block-product-categories__button path { + fill: var(--theme-button-text-color); } + .wc-block-product-categories__button:hover path { + fill: var(--theme-button-hover-text-color); } + [class*="wc-block-"] .wp-block-button__link[class][class][class] { display: inline-block; text-decoration: none; diff --git a/woocommerce.css b/woocommerce.css index 32579163..14b8b945 100644 --- a/woocommerce.css +++ b/woocommerce.css @@ -9,7 +9,7 @@ .woocommerce-loop-product__title, .woocommerce-loop-category__title, .c-product-main .product_title, .add_to_cart_button, .related.products > h2, .upsells > h2, -.wc-tabs .h3, .order-total .amount, .cart_totals h2, .cross-sells h2, .cross-sells .wc-block-grid__product-title, #ship-to-different-address, [class*="wc-block-"] .wp-block-button__link[class], .woocommerce-pagination { +.wc-tabs .h3, .order-total .amount, .cart_totals h2, .cross-sells h2, .cross-sells .wc-block-grid__product-title, #ship-to-different-address, .wc-block-product-categories__button, [class*="wc-block-"] .wp-block-button__link[class], .woocommerce-pagination { font-family: var(--current-font-family); font-size: var(--current-font-size); line-height: var(--current-line-height); @@ -340,7 +340,7 @@ .wc-block-grid.has-1-columns .wc-block-grid__product { margin-left: auto; margin-right: auto; } - .wc-block-grid .wc-block-grid__product { + .wc-block-grid .wc-block-grid__product[class] { flex: 1; max-width: 100%; } @media only screen and (min-width: 1000px) { @@ -1690,7 +1690,6 @@ ul.order_details[class] { */ .wc-block-featured-product { position: relative; - background-color: var(--current-dark-primary); background-size: cover; background-position: center center; width: 100%; @@ -1699,6 +1698,87 @@ ul.order_details[class] { align-items: center; flex-wrap: wrap; align-content: center; } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class] { + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; + --current-button-text-color: var(--theme-button-hover-text-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + transform: scale3d(0, 1, 1); + transform-origin: left; + background-color: var(--theme-button-background-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover { + --current-button-text-color: var(--theme-button-text-color); } + .wc-block-featured-product .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(1, 1, 1); } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class] { + padding: 0; + background: none; + border-width: 0; + position: relative; + padding-right: 1.15em; + padding-bottom: .3em; + margin-right: calc( -1 * 1.15em); + margin-bottom: -.3em; + text-decoration: none; + overflow: visible; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + bottom: 0; + right: 1.15em; + width: calc(100% - 1.15em); + height: .1em; + transform: scale3d(1, 1, 1); + will-change: transform; + -webkit-backface-visibility: hidden; + transform-origin: left; + background: currentColor; + transition: var(--theme-button-transition); + transition-property: transform; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + content: ''; + opacity: 0; + transform: translate(0, -50%) scale(-1, 1); } + @supports (mask-clip: initial) or (-webkit-mask-clip: initial) { + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + position: absolute; + top: 50%; + right: 0; + display: inline-block; + width: 1.15em; + height: 1.15em; + mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + mask-size: cover; + -webkit-mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + background-color: currentColor; + vertical-align: text-bottom; + transform: translate(0, -50%) scale(-1, 1); + transition: var(--theme-button-transition); + transition-property: opacity, transform; } } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(0, 1, 1); + transform-origin: right; } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:after { + opacity: 1; + transform: translate(0.4em, -50%) scale(-1, 1); } + .wc-block-featured-product .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + top: unset; } .wc-block-featured-product .wc-block-featured-product__wrapper { overflow: hidden; height: 100%; @@ -1727,7 +1807,7 @@ ul.order_details[class] { .wc-block-featured-product .wc-block-featured-product__variation, .wc-block-featured-product .wc-block-featured-product__description, .wc-block-featured-product .wc-block-featured-product__price { - color: var(--current-light-primary); + color: var(--current-dark-primary); line-height: 1.25; margin-bottom: 0; text-align: center; } @@ -1815,7 +1895,6 @@ ul.order_details[class] { .wc-block-featured-category { position: relative; - background-color: var(--current-dark-primary); background-size: cover; background-position: center center; width: 100%; @@ -1824,6 +1903,87 @@ ul.order_details[class] { align-items: center; flex-wrap: wrap; align-content: center; } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class] { + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; + --current-button-text-color: var(--theme-button-hover-text-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:before { + transform: scale3d(0, 1, 1); + transform-origin: left; + background-color: var(--theme-button-background-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover { + --current-button-text-color: var(--theme-button-text-color); } + .wc-block-featured-category .wp-block-button.is-style-secondary .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(1, 1, 1); } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class] { + padding: 0; + background: none; + border-width: 0; + position: relative; + padding-right: 1.15em; + padding-bottom: .3em; + margin-right: calc( -1 * 1.15em); + margin-bottom: -.3em; + text-decoration: none; + overflow: visible; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + content: ''; + position: absolute; + bottom: 0; + right: 1.15em; + width: calc(100% - 1.15em); + height: .1em; + transform: scale3d(1, 1, 1); + will-change: transform; + -webkit-backface-visibility: hidden; + transform-origin: left; + background: currentColor; + transition: var(--theme-button-transition); + transition-property: transform; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + content: ''; + opacity: 0; + transform: translate(0, -50%) scale(-1, 1); } + @supports (mask-clip: initial) or (-webkit-mask-clip: initial) { + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:after { + position: absolute; + top: 50%; + right: 0; + display: inline-block; + width: 1.15em; + height: 1.15em; + mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + mask-size: cover; + -webkit-mask: url("assets/images/icon-arrow.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + background-color: currentColor; + vertical-align: text-bottom; + transform: translate(0, -50%) scale(-1, 1); + transition: var(--theme-button-transition); + transition-property: opacity, transform; } } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:before { + transform: scale3d(0, 1, 1); + transform-origin: right; } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:hover:after { + opacity: 1; + transform: translate(0.4em, -50%) scale(-1, 1); } + .wc-block-featured-category .wp-block-button.is-style-text .wp-block-button__link[class][class][class]:before { + top: unset; } .wc-block-featured-category .wc-block-featured-category__wrapper { overflow: hidden; height: 100%; @@ -1849,7 +2009,7 @@ ul.order_details[class] { .wc-block-featured-category .wc-block-featured-category__title, .wc-block-featured-category .wc-block-featured-category__description, .wc-block-featured-category .wc-block-featured-category__price { - color: var(--current-light-primary); + color: var(--current-dark-primary); line-height: 1.25; margin-bottom: 0; text-align: center; } @@ -1923,6 +2083,44 @@ ul.order_details[class] { .wc-block-featured-category.aligncenter, .wc-block-featured-category.alignleft, .wc-block-featured-category.alignright { display: flex; } +.wc-block-review-order-select { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; } + +.wc-block-order-select__select[class][class] { + width: 100%; + height: auto; + max-width: 100%; + padding: 0.8em 1.18em 0.93em; + border: 0.0625em solid var(--current-light-tertiary); + color: var(--current-dark-secondary); + border-radius: 0; + background-color: var(--current-light-tertiary); + font: inherit; + line-height: 1.5; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + padding-right: 3.125em; + background-color: var(--current-light-tertiary); + background-image: url("assets/images/arrow-caret.svg"); + background-position: calc(100% - 17px) center; + background-repeat: no-repeat; + background-size: .56em .312em; + -webkit-appearance: none; + width: auto; } + .wc-block-order-select__select[class][class]:focus, .wc-block-order-select__select[class][class]:active { + outline: 0; + box-shadow: none; + border-color: var(--current-dark-primary); } + .wc-block-order-select__select[class][class][disabled] { + border-color: var(--current-dark-secondary); + background-color: var(--current-dark-secondary); } + .wc-block-order-select__select[class][class][disabled] { + border-color: var(--current-light-tertiary); + background-color: var(--current-light-tertiary); } + .is-loading .wc-block-review-list-item__text { display: block; width: 60%; } @@ -2065,6 +2263,141 @@ ul.order_details[class] { left: 0; color: var(--current-color-primary); } +.wc-block-review-list[class][class][class] { + margin-left: 0; + padding-left: 0; } + +.wc-block-review-order-select { + margin-bottom: var(--theme-spacing-small); } + +.wc-block-product-categories.is-dropdown { + display: flex; } + .wc-block-product-categories.is-dropdown select { + width: 100%; + height: auto; + max-width: 100%; + padding: 0.8em 1.18em 0.93em; + border: 0.0625em solid var(--current-light-tertiary); + color: var(--current-dark-secondary); + border-radius: 0; + background-color: var(--current-light-tertiary); + font: inherit; + line-height: 1.5; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + padding-right: 3.125em; + background-color: var(--current-light-tertiary); + background-image: url("assets/images/arrow-caret.svg"); + background-position: calc(100% - 17px) center; + background-repeat: no-repeat; + background-size: .56em .312em; + -webkit-appearance: none; } + .wc-block-product-categories.is-dropdown select:focus, .wc-block-product-categories.is-dropdown select:active { + outline: 0; + box-shadow: none; + border-color: var(--current-dark-primary); } + .wc-block-product-categories.is-dropdown select[disabled] { + border-color: var(--current-dark-secondary); + background-color: var(--current-dark-secondary); } + +.wc-block-product-categories__button { + display: inline-block; + text-decoration: none; + cursor: pointer; + --theme-button-text-color: var(--current-light-primary); + --theme-button-background-color: var(--current-dark-primary); + --theme-button-border-color: var(--current-dark-primary); + --theme-button-hover-text-color: var(--current-dark-primary); + --theme-button-hover-background-color: transparent; + --theme-button-hover-border-color: var(--current-dark-primary); + --theme-button-border-width: 2px; + --theme-button-border-style: solid; + --theme-button-border-radius: 0; + --theme-button-x-padding: 1.5em; + --theme-button-y-padding: 0.75em; + --theme-button-padding: var(--theme-button-y-padding) var(--theme-button-x-padding); + --theme-button-transition-duration: 0.4s; + --theme-button-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); + --theme-button-transition: all var(--theme-button-transition-duration) var(--theme-button-transition-easing); + --theme-button-hover-transition: var(--theme-button-transition); + --current-button-background-color: var(--theme-button-background-color); + --current-button-border-color: var(--theme-button-border-color); + --current-button-text-color: var(--theme-button-text-color); + --current-button-transition: var(--theme-button-transition); + display: inline-block; + text-decoration: none; + cursor: pointer; + --theme-button-text-color: var(--current-light-primary); + --theme-button-background-color: var(--current-dark-primary); + --theme-button-border-color: var(--current-dark-primary); + --theme-button-hover-text-color: var(--current-dark-primary); + --theme-button-hover-background-color: transparent; + --theme-button-hover-border-color: var(--current-dark-primary); + --theme-button-border-width: 2px; + --theme-button-border-style: solid; + --theme-button-border-radius: 0; + --theme-button-x-padding: 1.5em; + --theme-button-y-padding: 0.75em; + --theme-button-padding: var(--theme-button-y-padding) var(--theme-button-x-padding); + --theme-button-transition-duration: 0.4s; + --theme-button-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); + --theme-button-transition: all var(--theme-button-transition-duration) var(--theme-button-transition-easing); + --theme-button-hover-transition: var(--theme-button-transition); + --current-button-background-color: var(--theme-button-background-color); + --current-button-border-color: var(--theme-button-border-color); + --current-button-text-color: var(--theme-button-text-color); + --current-button-transition: var(--theme-button-transition); + padding: var(--theme-button-padding); + border: var(--theme-button-border-width) var(--theme-button-border-style) var(--current-button-border-color); + border-radius: var(--theme-button-border-radius); + background-color: var(--current-button-background-color); + color: var(--current-button-text-color); + transition: var(--current-button-transition); + --current-font-family: var(--theme-button-font-family); + --current-font-size: var(--theme-button-final-font-size); + --current-line-height: var(--theme-button-line-height); + --current-font-weight: var(--theme-button-font-weight); + --current-letter-spacing: var(--theme-button-letter-spacing); + --current-text-transform: var(--theme-button-text-transform); + --current-text-decoration: var(--theme-button-text-decoration); + background-color: transparent; + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + overflow: hidden; } + .wc-block-product-categories__button:hover { + --current-button-background-color: var(--theme-button-hover-background-color); + --current-button-border-color: var(--theme-button-hover-border-color); + --current-button-text-color: var(--theme-button-hover-text-color); + --current-button-transition: var(--theme-button-hover-transition); } + .wc-block-product-categories__button:hover { + --current-button-background-color: var(--theme-button-hover-background-color); + --current-button-border-color: var(--theme-button-hover-border-color); + --current-button-text-color: var(--theme-button-hover-text-color); + --current-button-transition: var(--theme-button-hover-transition); } + .wc-block-product-categories__button:before { + content: ''; + position: absolute; + top: calc( -1 * var(--theme-button-border-width)); + right: calc( -1 * var(--theme-button-border-width)); + bottom: calc( -1 * var(--theme-button-border-width)); + left: calc( -1 * var(--theme-button-border-width)); + z-index: -1; + will-change: transform; + -webkit-backface-visibility: hidden; + transition: var(--current-button-transition); + transition-property: transform; } + .wc-block-product-categories__button:before { + transform: scale3d(1, 1, 1); + transform-origin: right; + background-color: var(--theme-button-background-color); } + .wc-block-product-categories__button:hover:before { + transform: scale3d(0, 1, 1); } + .wc-block-product-categories__button path { + fill: var(--theme-button-text-color); } + .wc-block-product-categories__button:hover path { + fill: var(--theme-button-hover-text-color); } + [class*="wc-block-"] .wp-block-button__link[class][class][class] { display: inline-block; text-decoration: none;