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

FancyUI Libary

import { css as e, styled as l } from "styled-components";
import { getBackgroundColor as o } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
import d from "../../../design/designFunctions/arrayToCssValues/arrayToCssValues.js";
const p = l.hr`
  background-color: ${({ theme: r, $themeType: a = "accent", $layer: t }) => o({ theme: r, $themeType: a, $layer: t })};
  display: block;
  border-radius: 2px;
  ${({ $direction: r = "horizontal", $thickness: a, $length: t }) => i({ direction: r, thickness: a, length: t })};
  border: 0;
  padding: 0;
  margin: ${({ $margin: r }) => d(r, "spacing") || "0"};
  transition: background-color 0.25s ease;

  ${({ $fadingOut: r, $direction: a = "horizontal", $fadeDirection: t = "end" }) => r ? e`
          mask: ${s(a, t)};
          -webkit-mask: ${s(a, t)};
        ` : e``}

  &::after {
    content: '';
    display: block;
    ${({ $direction: r = "horizontal", $thickness: a, $length: t }) => i({ direction: r, thickness: a, length: t })};
    background-color: ${({ $systemMessageType: r, theme: a, $isActive: t, $themeType: n = "secondary", $layer: c }) => o({
  theme: a,
  $themeType: t ? r ?? "accent" : n,
  $layer: t ? 0 : c
})};
    border: 0;
    padding: 0;
    filter: blur(0.5px);
    transition: background-color 0.25s ease;
  }

  ${({ $externalStyle: r }) => r};
`, i = (r) => {
  const { direction: a, thickness: t, length: n } = r;
  switch (a) {
    case "vertical":
      return e`
        width: ${t || "1px"};
        height: ${n || "100%"};
      `;
    case "horizontal":
      return e`
        width: ${n || "100%"};
        height: ${t || "1px"};
      `;
    default:
      return e`
        width: ${n || "100%"};
        height: ${t || "1px"};
      `;
  }
}, s = (r, a) => {
  const t = r === "horizontal";
  switch (a) {
    case "start":
      return t ? "linear-gradient(to right, transparent 0%, black 100%)" : "linear-gradient(to bottom, transparent 0%, black 100%)";
    case "end":
      return t ? "linear-gradient(to right, black 0%, transparent 100%)" : "linear-gradient(to bottom, black 0%, transparent 100%)";
    case "both":
      return t ? "linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%)" : "linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%)";
    default:
      return t ? "linear-gradient(to right, black 0%, transparent 100%)" : "linear-gradient(to bottom, black 0%, transparent 100%)";
  }
};
export {
  p as StyledFancyLine
};