fui-fancyui/dist/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.js

FancyUI Libary

import { styled as e, css as n } from "styled-components";
import { boxShadow as s } from "../../../design/designFunctions/shadows/shadows.js";
import a from "../../atoms/RawUL/RawUL.js";
import { globalElementSizes as i } from "../../../design/theme/globalSizes.js";
const o = 60, m = e.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: ${o + 12 + "px"};
  height: ${o + 12 + "px"};
`, f = e.div`
  position: relative;
  height: ${o + "px"};
  width: ${o + "px"};
`, g = e.button`
  position: relative;
  background-color: ${({ theme: t }) => t.color.accent[0]};
  color: ${({ theme: t }) => t.color.secondary[0]};
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 100%;
  width: 100%;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  ${s.sm}

  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    font-size: 24px;
    transform-origin: 50% 50%;
    transform: ${({ $isOpen: t }) => t ? "translate(-50%, -50%) rotate(45deg)" : "translate(-50%, -50%) rotate(0)"};
    transition: transform 0.3s ease;
  }
`, x = e.div`
  position: absolute;
  height: ${o + "px"};
  width: ${o + "px"};
  border-bottom: 1.5px solid ${({ theme: t }) => t.color.accent[0]};
  border-top: 1.5px solid ${({ theme: t }) => t.color.accent[0]};
  border-left: solid transparent;
  border-right: solid transparent;
  border-radius: 50%;
  z-index: 49;
  top: 50%;
  right: 50%;
  transform: ${({ $isOpen: t }) => t ? "translate(50%, -50%) scale(1.12) rotate(125deg)" : "translate(50%, -50%) scale(0.9) rotate(20deg)"};
  opacity: ${({ $isOpen: t }) => t ? 1 : 0};
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
  pointer-events: none;
`, u = e.div`
  ${({ $textAlign: t }) => t === "right" ? n`
          align-items: flex-start;
          margin-left: ${"-" + parseInt(i.md) / 2 + "px"};
        ` : n`
          align-items: flex-end;
          margin-left: ${parseInt(i.md) / 2 + "px"};
        `}

  position: absolute;
  left: 50%;
  width: 0;
  transform: translate(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 18px;
  bottom: 75px;
`, h = e.div`
  opacity: ${({ $isOpen: t }) => t ? 1 : 0};
  transition:
    transform 0.25s ease-in-out,
    opacity 0.25s ease-in-out;
  transition-delay: ${({ $isOpen: t, $index: r }) => t ? 0.1 * r : 0.1 * (2 - r)}s;
  pointer-events: ${({ $isOpen: t }) => t ? "auto" : "none"};
  ${s.sm};
`;
e(a)``;
export {
  g as Button,
  h as MenueItemContainer,
  u as MenueItemWrapper,
  x as Ring,
  f as SpeedDialContainer,
  m as Wrapper
};