fui-fancyui/dist/src/components/atoms/FancyTextOverlay/FancyTextOverlay.style.js

FancyUI Libary

import { styled as n, css as e } from "styled-components";
import { textShadow as a } from "../../../design/designFunctions/shadows/shadows.js";
const t = {
  start: "rgba(0,0,0,0.4) 0%",
  end: "rgba(0,0,0,0) 40%"
}, s = n.div`
  position: relative;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  width: fit-content;
  height: fit-content;
  ${({ $externalStyle: r }) => r};
`, d = n.div`
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;

  ${({ $position: r }) => {
  switch (r) {
    case "top-left":
      return e`
          background: linear-gradient(135deg, ${t.start}, ${t.end});
        `;
    case "top-right":
      return e`
          background: linear-gradient(225deg, ${t.start}, ${t.end});
        `;
    case "center":
      return e`
          background: radial-gradient(ellipse 75% 50% at center, ${t.start}, ${t.end});
        `;
    case "bottom-left":
      return e`
          background: linear-gradient(45deg, ${t.start}, ${t.end});
        `;
    case "bottom-right":
      return e`
          background: linear-gradient(325deg, ${t.start}, ${t.end});
        `;
    case "bottom-center":
      return e`
          background: linear-gradient(to top, ${t.start}, ${t.end});
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        `;
    case "top-center":
      return e`
          background: linear-gradient(to bottom, ${t.start}, ${t.end});
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        `;
    default:
      return "";
  }
}};
`, l = n.div`
  position: absolute;
  z-index: 1;
  padding: ${({ theme: r }) => r.spacing.md};
  pointer-events: none;
  ${a.lg}

  ${({ $position: r }) => {
  switch (r) {
    case "top-left":
      return e`
          text-align: left;
          top: 0;
          left: 0;
        `;
    case "top-right":
      return e`
          text-align: right;
          top: 0;
          right: 0;
        `;
    case "center":
      return e`
          text-align: center;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        `;
    case "bottom-left":
      return e`
          text-align: left;
          bottom: 0;
          left: 0;
        `;
    case "bottom-right":
      return e`
          text-align: right;
          bottom: 0;
          right: 0;
        `;
    case "bottom-center":
      return e`
          text-align: center;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        `;
    case "top-center":
      return e`
          text-align: center;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        `;
    default:
      return "";
  }
}};
`;
export {
  d as Gradient,
  l as TextWrapper,
  s as Wrapper
};