.lpt-floating-menu {
position: fixed;
z-index: var(--lp-z-overlay);
bottom: 70px;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
}
.lpt-floating-menu__checkbox {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.lpt-floating-menu__background {
position: absolute;
bottom: 0;
left: 50%;
z-index: 0;
width: 80px;
height: 80px;
border: 1px solid rgba(99, 129, 168, .1);
border-radius: var(--lp-radius-circle);
background: rgba(99, 129, 168, .18);
box-shadow:
0 10px 30px rgba(0, 0, 0, .25),
inset 0 0 20px rgba(99, 129, 168, .08);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
transform: translateX(-50%) scale(0);
transition:
transform .6s cubic-bezier(.2, .8, .2, 1),
opacity .6s ease;
}
.lpt-floating-menu__checkbox:checked
~ .lpt-floating-menu__background {
opacity: 1;
transform: translateX(-50%) scale(6);
}
.lpt-floating-menu__toggle {
position: absolute;
bottom: 0;
left: 50%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: var(--lp-radius-circle);
background: linear-gradient(
135deg,
var(--lp-color-primary),
var(--lp-color-primary-dark)
);
box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
cursor: pointer;
transform: translateX(-50%);
animation: lpt-floating 3s ease-in-out infinite;
}
.lpt-floating-menu__toggle::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
background: rgba(99, 129, 168, .35);
animation: lpt-pulse 2s infinite;
}
.lpt-floating-menu__toggle i {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #fff !important;
font-size: 24px;
line-height: 1;
transition:
opacity .25s ease,
transform .25s ease;
}
.lpt-floating-menu__open-icon, .lpt-floating-menu__close-icon {position: absolute;color:#fff}
.lpt-floating-menu__open-icon {
opacity: 1;
transform: scale(1) rotate(0);
}
.lpt-floating-menu__close-icon {
opacity: 0;
transform: scale(.6) rotate(-90deg);
}
.lpt-floating-menu__checkbox:checked
~ .lpt-floating-menu__toggle
.lpt-floating-menu__open-icon {
opacity: 0;
transform: scale(.6) rotate(90deg);
}
.lpt-floating-menu__checkbox:checked
~ .lpt-floating-menu__toggle
.lpt-floating-menu__close-icon {
opacity: 1;
transform: scale(1) rotate(0);
}
.lpt-floating-menu__items {
position: absolute;
bottom: 0;
left: 50%;
z-index: 5;
transform: translateX(-50%);
}
.lpt-floating-menu__item {
--lpt-angle: calc(180deg + (180deg / 5) * var(--lpt-item-index));
--lpt-radius: 155px;
position: absolute;
bottom: 0;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--lp-radius-circle);
background: var(--lp-color-white);
color: var(--lp-color-text-dark);
box-shadow: var(--lp-shadow-md);
opacity: 0;
filter: blur(8px);
transform: translate(-50%, -50%) scale(.3);
pointer-events: none;
}
.lpt-floating-menu__item i,
.lpt-floating-menu__item svg {
color: var(--lp-color-primary);
font-size: 20px;
}
.lpt-floating-menu__checkbox:checked
~ .lpt-floating-menu__items
.lpt-floating-menu__item {
animation: lpt-radial-open .75s cubic-bezier(.2, .8, .2, 1)
forwards;
animation-delay: calc(var(--lpt-item-index) * .05s);
pointer-events: auto;
}
@keyframes lpt-radial-open {
from {
opacity: 0;
filter: blur(8px);
transform: translate(-50%, -50%) scale(.3);
}
to {
opacity: 1;
filter: blur(0);
transform:
translate(
calc(
-50% + cos(var(--lpt-angle)) * var(--lpt-radius)
),
calc(
-50% + sin(var(--lpt-angle)) * var(--lpt-radius)
)
)
scale(1);
}
}
@keyframes lpt-floating {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-6px);
}
}
@keyframes lpt-pulse {
0% {
opacity: .6;
transform: scale(1);
}
70% {
opacity: 0;
transform: scale(1.6);
}
100% {
opacity: 0;
}
}
@media (max-width: 700px) {
.lpt-floating-menu {
bottom: 50px;
}
.lpt-floating-menu__item {
--lpt-radius: 128px;
width: 50px;
height: 50px;
}
.lpt-floating-menu__toggle {
width: 58px;
height: 58px;
}
}
@media (prefers-reduced-motion: reduce) {
.lpt-floating-menu__toggle,
.lpt-floating-menu__toggle::before {
animation: none;
}
.lpt-floating-menu__checkbox:checked
~ .lpt-floating-menu__items
.lpt-floating-menu__item {
animation-duration: .01ms;
}
}