Skip to content

Commit

Permalink
Fix: Floating Buttons - various fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mserino
mserino committed Jun 10, 2024
1 parent 3e16ae1 commit 38e22d3
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 211 deletions.
144 changes: 75 additions & 69 deletions modules/conversion-center/assets/scss/widgets/contact-buttons-var-1.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,83 +9,89 @@
--e-contact-buttons-message-bubble-chat-bg: #FFFFFF;
--e-contact-buttons-contact-text: #1C2448;

.e-contact-buttons__contact {
align-items: center;
background-color: var(--e-contact-buttons-chat-box-bg);
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
padding: 0 20px 20px 20px;
}

.e-contact-buttons__message-bubble {
background-color: var(--e-contact-buttons-chat-box-bg);
}

.e-contact-buttons__contact-text {
color: var(--e-contact-buttons-contact-text);
font-size: 20px;
font-weight: 400;
line-height: 25px;
margin-bottom: 0;
}

.e-contact-buttons__contact-links {
display: flex;
gap: 12px;
}
.e-contact-buttons {

.e-contact-buttons__contact-icon-link {
align-items: center;
background-color: var(--e-contact-buttons-contact-button-bg);
border-radius: 50px;
display: inline-flex;
justify-content: center;
transition: $transition-hover;

svg {
fill: var(--e-contact-buttons-contact-button-icon);
&__contact {
align-items: center;
background-color: var(--e-contact-buttons-chat-box-bg);
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
padding: 0 20px 20px 20px;
}

&:hover,
&:focus {
background-color: var(--e-contact-buttons-contact-button-bg-hover);

&__message-bubble {
background-color: var(--e-contact-buttons-chat-box-bg);
padding: 20px;
padding-inline-start: 40px;
}

&__contact-text {
color: var(--e-contact-buttons-contact-text);
font-size: 20px;
font-weight: 400;
line-height: 25px;
margin-bottom: 0;
}

&__contact-links {
display: flex;
gap: 12px;
}

&__contact-icon-link {
align-items: center;
background-color: var(--e-contact-buttons-contact-button-bg);
border-radius: 50px;
display: inline-flex;
justify-content: center;
transition: $transition-hover;

svg {
fill: var(--e-contact-buttons-contact-button-icon-hover);
fill: var(--e-contact-buttons-contact-button-icon);
}
}

&.has-size-small {
height: var(--e-contact-buttons-icon-size-small);
width: var(--e-contact-buttons-icon-size-small);

svg {
height: 26px;
width: 26px;

&:hover,
&:focus {
background-color: var(--e-contact-buttons-contact-button-bg-hover);
transition: $transition-hover;
svg {
fill: var(--e-contact-buttons-contact-button-icon-hover);
}
}
}

&.has-size-medium {
height: var(--e-contact-buttons-icon-size-medium);
width: var(--e-contact-buttons-icon-size-medium);

svg {
height: 28px;
width: 28px;

&.has-size-small {
height: var(--e-contact-buttons-icon-size-small);
width: var(--e-contact-buttons-icon-size-small);

svg {
height: 26px;
width: 26px;
}
}
}

&.has-size-large {
height: var(--e-contact-buttons-icon-size-large);
width: var(--e-contact-buttons-icon-size-large);

svg {
height: 32px;
width: 32px;

&.has-size-medium {
height: var(--e-contact-buttons-icon-size-medium);
width: var(--e-contact-buttons-icon-size-medium);

svg {
height: 28px;
width: 28px;
}
}

&.has-size-large {
height: var(--e-contact-buttons-icon-size-large);
width: var(--e-contact-buttons-icon-size-large);

svg {
height: 32px;
width: 32px;
}
}
}
}

}
161 changes: 82 additions & 79 deletions modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,92 +127,95 @@
}
}

.e-contact-buttons__chat-buttons-container {
display: flex;
}

.e-contact-buttons__close-button {
background-color: var(--e-contact-buttons-active-button-bg);
color: var(--e-contact-buttons-active-button-color);
border-radius: 50%;
inset-inline-end: unset;
inset-inline-start: unset;
position: relative;
top: unset;
}
.e-contact-buttons {

.e-contact-buttons__close-button,
.e-contact-buttons__chat-button {

&[aria-expanded="false"] {
display: none;
&__chat-buttons-container {
display: flex;
}
}

.e-contact-buttons__content {
border-radius: 0;
box-shadow: none;
margin: 0;
overflow: visible;
}

.e-contact-buttons__contact-links {
display: flex;
flex-direction: column;
gap: var(--e-contact-buttons-contact-gap);
}

.e-contact-buttons__contact-icon-container {
align-items: center;
background-color: var(--e-contact-buttons-contact-button-bg);
border-radius: 50px;
display: inline-flex;
justify-content: center;
transition: $transition-hover;
}

.e-contact-buttons__contact-icon-link {
align-items: center;
display: flex;
flex-direction: row;
gap: 14px;

svg {
fill: var(--e-contact-buttons-contact-button-icon);

&__close-button {
background-color: var(--e-contact-buttons-active-button-bg);
color: var(--e-contact-buttons-active-button-color);
border-radius: 50%;
inset-inline-end: unset;
inset-inline-start: unset;
position: relative;
top: unset;
}

&:hover,
&:focus {

.e-contact-buttons__contact-icon-container {
background-color: var(--e-contact-buttons-contact-button-bg-hover);
transition: $transition-hover;

&__close-button,
&__chat-button {

&[aria-expanded="false"] {
display: none;
}

}

&__content {
border-radius: 0;
box-shadow: none;
margin: 0;
overflow: visible;
}

&__contact-links {
display: flex;
flex-direction: column;
gap: var(--e-contact-buttons-contact-gap);
}

&__contact-icon-container {
align-items: center;
background-color: var(--e-contact-buttons-contact-button-bg);
border-radius: 50px;
display: inline-flex;
justify-content: center;
transition: $transition-hover;
}

&__contact-icon-link {
align-items: center;
display: flex;
flex-direction: row;
gap: 14px;

svg {
fill: var(--e-contact-buttons-contact-button-icon-hover);
fill: var(--e-contact-buttons-contact-button-icon);
}

&:hover,
&:focus {

.e-contact-buttons__contact-icon-container {
background-color: var(--e-contact-buttons-contact-button-bg-hover);
transition: $transition-hover;
}

svg {
fill: var(--e-contact-buttons-contact-button-icon-hover);
}
}
}
}

.e-contact-buttons__contact-tooltip {
background-color: var(--e-contact-buttons-tooltip-bg);
border-radius: 16px;
box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.15);
color: var(--e-contact-buttons-tooltip-text);
font-size: 13px;
line-height: 25px;
padding: 4px 14px;
position: relative;

&::after {
border-style: solid;
content: "";
height: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;

&__contact-tooltip {
background-color: var(--e-contact-buttons-tooltip-bg);
border-radius: 16px;
box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.15);
color: var(--e-contact-buttons-tooltip-text);
font-size: 13px;
line-height: 25px;
padding: 4px 14px;
position: relative;

&::after {
border-style: solid;
content: "";
height: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
}
}
}
}
Loading

0 comments on commit 38e22d3

Please sign in to comment.