diff --git a/assets/dev/js/frontend/elements-handlers-manager.js b/assets/dev/js/frontend/elements-handlers-manager.js index fc87628dd363..194bbc21bfa2 100644 --- a/assets/dev/js/frontend/elements-handlers-manager.js +++ b/assets/dev/js/frontend/elements-handlers-manager.js @@ -35,7 +35,7 @@ module.exports = function( $ ) { } if ( elementorFrontendConfig.experimentalFeatures[ 'floating-buttons' ] ) { - this.elementsHandlers[ 'contact-buttons.default' ] = () => import( /* webpackChunkName: 'floating-buttons' */ 'elementor/modules/floating-buttons/assets/js/frontend/handlers/floating-buttons' ); + this.elementsHandlers[ 'floating-buttons.default' ] = () => import( /* webpackChunkName: 'floating-buttons' */ 'elementor/modules/floating-buttons/assets/js/frontend/handlers/floating-buttons' ); } const addGlobalHandlers = () => elementorFrontend.hooks.addAction( 'frontend/element_ready/global', globalHandler ); diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-1.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-1.scss index 06db19554e2c..8cb3bd4694b1 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-1.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-1.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-1 { +.e-floating-buttons-var-1 { --e-contact-buttons-button-bg: #324A6D; --e-contact-buttons-button-bg-hover: #1C2448; --e-contact-buttons-top-bar-bg: #324A6D; diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-10.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-10.scss index fc429ddf9d10..c594010f1bf4 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-10.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-10.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-10 { +.e-floating-buttons-var-10 { --e-contact-buttons-size-small: 40px; --e-contact-buttons-size-medium: 48px; --e-contact-buttons-size-large: 56px; @@ -89,37 +89,37 @@ &__contact-icon-link { --e-contact-buttons-margin-offset: 8px; - + justify-content: flex-end; // Hiding the button by calculating the size of the button and the offset margin transform: translateX(calc(-100% + calc(var(--e-contact-buttons-svg-size) * 2) - var(--e-contact-buttons-margin-offset))); transition: var(--e-contact-buttons-transition); - + &.has-size-small { --e-contact-buttons-margin-offset: 2px; } } - + &__contact-links { align-items: flex-start; flex-direction: column; } - + &__contact-icon-link { border-start-start-radius: 0; border-start-end-radius: var(--e-contact-buttons-border-radius); border-end-start-radius: 0; border-end-end-radius: var(--e-contact-buttons-border-radius); - + &:hover, &:focus { - + @media (min-width: $screen-tablet-min) { transform: none; transition: var(--e-contact-buttons-transition); } } - + &.active { transform: none; transition: var(--e-contact-buttons-transition); @@ -135,43 +135,43 @@ &__contact-icon-link { --e-contact-buttons-margin-offset: 8px; - + // Hiding the button by calculating the size of the button and the offset margin transform: translateX(calc(100% - calc(var(--e-contact-buttons-svg-size) * 2) + var(--e-contact-buttons-margin-offset))); transition: var(--e-contact-buttons-transition); - + &:hover, &:focus { - + @media (min-width: $screen-tablet-min) { transform: none; transition: var(--e-contact-buttons-transition); } } - + &.active { transform: none; transition: var(--e-contact-buttons-transition); } - + &.has-size-small { --e-contact-buttons-margin-offset: 2px; } } - + &__contact-links { align-items: flex-end; flex-direction: column; } - + &__contact-icon-container { order: 1; } - + &__contact-title { order: 2; } - + &__contact-icon-link { border-start-start-radius: var(--e-contact-buttons-border-radius); border-start-end-radius: 0; @@ -188,7 +188,7 @@ &__contact-icon-link { flex-direction: column; } - + &__contact-title { writing-mode: vertical-lr; } @@ -202,41 +202,41 @@ &__contact-links { align-items: flex-end; } - + &__contact-icon-container { order: 1; } - + &__contact-title { order: 2; } - + &__contact-icon-link { --e-contact-buttons-margin-offset: 14px; - + border-start-start-radius: var(--e-contact-buttons-border-radius); border-start-end-radius: var(--e-contact-buttons-border-radius); border-end-start-radius: 0; border-end-end-radius: 0; - + // Hiding the button by calculating the size of the button and the offset margin transform: translateY(calc(100% - var(--e-contact-buttons-svg-size) * 2 + var(--e-contact-buttons-margin-offset))); transition: var(--e-contact-buttons-transition); - + &:hover, &:focus { - + @media (min-width: $screen-tablet-min) { transform: none; transition: var(--e-contact-buttons-transition); } } - + &.active { transform: none; transition: var(--e-contact-buttons-transition); } - + &.has-size-small { --e-contact-buttons-margin-offset: 5px; } @@ -251,14 +251,14 @@ &__contact-links { align-items: flex-start; } - + &__contact-icon-container { align-items: flex-end; } - + &__contact-icon-link { --e-contact-buttons-margin-offset: 14px; - + border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--e-contact-buttons-border-radius); @@ -267,16 +267,16 @@ // Hiding the button by calculating the size of the button and the offset margin transform: translateY(calc(-100% + var(--e-contact-buttons-svg-size) + var(--e-contact-buttons-margin-offset))); transition: var(--e-contact-buttons-transition); - + &:hover, &:focus { - + @media (min-width: $screen-tablet-min) { transform: none; transition: var(--e-contact-buttons-transition); } } - + &.active { transform: none; transition: var(--e-contact-buttons-transition); diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-3.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-3.scss index d518ee9c0623..028df54afbcd 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-3.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-3.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-3 { +.e-floating-buttons-var-3 { --e-contact-buttons-size-small: 48px; --e-contact-buttons-size-medium: 56px; --e-contact-buttons-size-large: 64px; @@ -177,7 +177,7 @@ &__contact-icon-container { order: 1; } - + &__contact-tooltip { order: 2; } @@ -194,7 +194,7 @@ justify-content: flex-end; order: 2; } - + &__contact-tooltip { order: 1; } diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-4.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-4.scss index 150a52183de5..572952bfcbd8 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-4.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-4.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-4 { +.e-floating-buttons-var-4 { --e-contact-buttons-size-small: 45px; --e-contact-buttons-size-medium: 50px; --e-contact-buttons-size-large: 55px; @@ -19,7 +19,7 @@ &__chat-button-container { padding-inline-end: 0; } - + &__contact-links { align-items: flex-end; } @@ -51,19 +51,19 @@ &__chat-button-container { padding-inline-start: 0; } - + &__contact-links { align-items: flex-start; } - + &__contact-tooltip { order: 2; } - + &__contact-icon-container { order: 1; } - + &__contact-tooltip { &::after { border-inline-start-color: transparent; @@ -87,7 +87,7 @@ &__contact-links { align-items: center; } - + &__content-wrapper { inset-inline-end: 40px; } diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-6.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-6.scss index bdbe6b67b6c3..afcdcbf7ad82 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-6.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-6.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-6 { +.e-floating-buttons-var-6 { --e-contact-buttons-icon-size-small: 25px; --e-contact-buttons-icon-size-medium: 30px; --e-contact-buttons-icon-size-large: 35px; diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-7.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-7.scss index ea0ead8d33a9..e182b1f3e4dc 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-7.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-7.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-7 { +.e-floating-buttons-var-7 { --e-contact-buttons-chat-button-padding-block-end: 16px; --e-contact-buttons-chat-button-padding-block-start: 16px; --e-contact-buttons-chat-button-padding-inline-end: 20px; diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-8.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-8.scss index 41defa3c9021..dd4b098ed480 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-8.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-8.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-8 { +.e-floating-buttons-var-8 { --e-contact-buttons-size-small: 48px; --e-contact-buttons-size-medium: 56px; --e-contact-buttons-size-large: 64px; diff --git a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-9.scss b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-9.scss index dea0206573ff..aef2e09b6731 100644 --- a/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-9.scss +++ b/modules/floating-buttons/assets/scss/widgets/floating-buttons-var-9.scss @@ -1,4 +1,4 @@ -.e-contact-buttons-var-9 { +.e-floating-buttons-var-9 { --e-contact-buttons-size-small: 48px; --e-contact-buttons-size-medium: 56px; --e-contact-buttons-size-large: 64px; @@ -53,7 +53,7 @@ &:hover, &:focus { color: var(--e-contact-buttons-button-icon); - + svg { fill: var(--e-contact-buttons-button-icon); } @@ -118,33 +118,33 @@ &__chat-button-container { padding-inline-end: 0; } - + &__chat-button-icon-container { - + @media (min-width: $screen-desktop-min) { position: absolute; inset-inline-end: -5px; transition: var(--e-contact-buttons-transition); } } - + &__chat-button-text { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 50px; border-end-end-radius: 50px; margin-inline-start: var(--e-contact-buttons-overlap-margin); - + @media (min-width: $screen-desktop-min) { clip-path: inset(0 0 0 100%); } } - + &__chat-button { - + &:hover, &:focus { - + @media (min-width: $screen-desktop-min) { .e-contact-buttons { @@ -153,7 +153,7 @@ clip-path: inset(0 0 0 0); transition: var(--e-contact-buttons-transition); } - + &__chat-button-icon-container { inset-inline-end: 100%; transition: var(--e-contact-buttons-transition); diff --git a/modules/floating-buttons/widgets/floating-buttons.php b/modules/floating-buttons/widgets/floating-buttons.php index 3d3de3eac892..9839e526b7e9 100644 --- a/modules/floating-buttons/widgets/floating-buttons.php +++ b/modules/floating-buttons/widgets/floating-buttons.php @@ -18,7 +18,7 @@ class Floating_Buttons extends Widget_Floating_Button_Base { public function get_name(): string { - return 'contact-buttons'; + return 'floating-buttons'; } public function get_title(): string {