@wikicasa-dev/components 2.1.4-alpha.8 → 2.1.4

package/dist/plugins/buttonPlugin.js

@@ -1,232 +0,0 @@
-import n from "../_virtual/plugin.js";
-const o = {
-  //New colors
-  primary: { value: "#F20282", hover: "#E30C79", outlineHover: "#FFF8FB" },
-  secondary: { value: "#2b5dff", hover: "#244FD9" },
-  lightgray: { value: "#C1C8D5" },
-  ghost: { value: "#FAFBFF" },
-  lavender: { value: "#E9EFFE" },
-  black: { value: "#222222" },
-  warning: { value: "#FFD167" },
-  white: { value: "#FFF", hover: "" },
-  danger: { value: "#FA4F64" }
-}, b = n(({ addComponents: r, theme: t }) => {
-  r({
-    ".btn": {
-      "--btn-px": "25px",
-      "--btn-py": "11px",
-      "--btn-bg-color": "transparent",
-      "--btn-text-color": o.black.value,
-      "--btn-border-color": "unset",
-      "--btn-border-width": "0",
-      "--btn-border-radius": "24px",
-      "--btn-border-style": "solid",
-      "--btn-height": "40px",
-      "--btn-width": "auto",
-      "--btn-font-size": t("fontSize.16"),
-      "--btn-transition": "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
-      "--btn-font-weight": `${t("fontWeight.semibold")}`,
-      display: "inline-flex",
-      "align-items": "center",
-      "justify-content": "center",
-      "font-size": "var(--btn-font-size)",
-      "font-weight": "var(--btn-font-weight)",
-      "white-space": "nowrap",
-      border: "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
-      "border-radius": "var(--btn-border-radius)",
-      cursor: "pointer",
-      height: "var(--btn-height)",
-      width: "var(--btn-width)",
-      "background-color": "var(--btn-bg-color)",
-      color: "var(--btn-text-color)",
-      padding: "var(--btn-py) var(--btn-px)",
-      transition: "var(--btn-transition)",
-      "line-height": "1",
-      "-webkit-tap-highlight-color": "transparent",
-      "&.btn-lg": {
-        "--btn-height": "48px",
-        "--btn-px": "24px",
-        "--btn-py": "12px"
-      },
-      "&.btn-sm": {
-        "--btn-px": "24px",
-        "--btn-py": "8px",
-        "--btn-height": "40px"
-      },
-      "&.btn-rounded": {
-        "--btn-px": "0",
-        "--btn-py": "0"
-      },
-      "&.btn-outline": {
-        "--btn-border-width": "1px",
-        "--btn-bg-color": o.white.value
-      },
-      "&.btn-primary": {
-        ...e(
-          {
-            bgColor: o.primary.value,
-            textColor: o.white.value,
-            hoverBgColor: o.primary.hover
-          },
-          {
-            mainColor: o.white.hover,
-            textColor: o.primary.value,
-            hoverBgColor: o.primary.outlineHover
-          }
-        ),
-        "text-transform": "uppercase"
-      },
-      "&.btn-secondary": e(
-        {
-          bgColor: o.secondary.value,
-          textColor: o.white.value,
-          hoverBgColor: o.secondary.hover
-        },
-        {
-          mainColor: o.secondary.value,
-          textColor: o.secondary.value
-        }
-      ),
-      "&.btn-ternary": {
-        ...e({
-          bgColor: o.white.value,
-          textColor: o.secondary.value,
-          hoverBgColor: o.white.value,
-          hoverTextColor: o.secondary.hover
-        }),
-        "--btn-border-color": o.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-border-radius": "24px"
-      },
-      "&.btn-quaternary": {
-        "--btn-px": "0",
-        "--btn-py": "0",
-        "--btn-text-color": o.secondary.value,
-        "--btn-height": "auto",
-        "&:hover": {
-          "text-decoration": "underline",
-          "--btn-text-color": o.secondary.hover
-        },
-        "&:disabled": {
-          "--btn-bg-color": "transparent",
-          "--btn-text-color": o.lightgray.value
-        }
-      },
-      "&.btn-single-selection": {
-        "--btn-px": "16px",
-        "--btn-py": "8px",
-        "--btn-border-radius": t("borderRadius.2xs"),
-        "--btn-border-color": o.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-font-weight": t("fontWeight.regular"),
-        "&:hover": {
-          "--btn-border-color": o.secondary.value
-        },
-        "&:active,&.active,&[data-active='true']": {
-          "--btn-bg-color": o.ghost.value,
-          "--btn-text-color": o.secondary.value,
-          "--btn-border-color": o.secondary.value
-        }
-      }
-    },
-    //OLD style. Kept for retro-compatibility
-    ".btn-light": e({
-      textColor: o.primary.value,
-      bgColor: o.white.value,
-      hoverTextColor: o.primary.value,
-      hoverBgColor: "#FAFAFA"
-    }),
-    ".btn-warning": e({
-      bgColor: o.warning.value,
-      textColor: "#2A3761",
-      hoverBgColor: "#F2C761"
-    }),
-    ".btn-danger": e(
-      {
-        bgColor: o.danger.value,
-        textColor: o.white.value,
-        hoverBgColor: "#E0485A"
-      },
-      {
-        mainColor: o.danger.value,
-        textColor: o.danger.value
-      }
-    ),
-    ".btn-multi-selection": {
-      "--btn-py": "10px",
-      "--btn-height": "40px",
-      "font-weight": t("fontWeight.regular"),
-      "--btn-border-radius": t("borderRadius.xs"),
-      "--btn-border-color": "#EAEFFD",
-      "--btn-border-width": "1px",
-      "white-space": "normal",
-      ...e({
-        textColor: o.black.value,
-        bgColor: "#F5F7FA",
-        hoverBgColor: o.lavender.value
-      })
-    },
-    ".btn-facile": {
-      "--btn-facile-color": "#FF6600",
-      "--btn-facile-hover-color": "#b34700",
-      ...e({
-        bgColor: "var(--btn-facile-color)",
-        textColor: o.white.value,
-        hoverBgColor: "var(--btn-facile-hover-color)",
-        hoverTextColor: o.white.value
-      })
-    },
-    ".btn-show-more": {
-      "--btn-border-radius": "0",
-      "--btn-border-color": o.white.value,
-      ...e({
-        textColor: "#2B5DFF",
-        bgColor: o.white.value,
-        hoverTextColor: "#3646B3",
-        hoverBgColor: o.white.value
-      })
-    },
-    ".btn-transparent": {
-      "--border-color": "transparent",
-      "--btn-px": "0",
-      "--btn-py": "0",
-      "&:hover": {
-        "--btn-bg-color": "transparent",
-        "--border-color": "transparent"
-      }
-    }
-  });
-}), e = (r, t) => ({
-  "--btn-bg-color": r.bgColor,
-  "--btn-text-color": r.textColor,
-  "&:disabled": {
-    cursor: "not-allowed"
-  },
-  "&:hover:not(:disabled)": {
-    "--btn-text-color": r.hoverTextColor,
-    "--btn-bg-color": r.hoverBgColor
-  },
-  ...t ? {
-    "&.btn-outline": l(t)
-  } : {}
-}), l = (r) => ({
-  "--btn-border-color": r.mainColor ?? r.borderColor,
-  "--btn-text-color": r.textColor,
-  "--btn-bg-color": "#fff",
-  //By default, the active section is the same of the hover section in desktop mode
-  "&:active": {
-    "--btn-bg-color": (r.mainColor ?? r.activeBgColor ?? r.hoverBgColor) + " !important",
-    //By default, on active the text is white
-    ...r.activeTextColor || r.hoverTextColor ? {
-      "--btn-text-color": r.activeTextColor ?? r.hoverTextColor
-    } : {}
-  },
-  "&:hover": {
-    //By default, the text color is white
-    ...r.hoverBgColor ? { "--btn-bg-color": r.hoverBgColor } : {},
-    "--btn-text-color": r.hoverTextColor ?? r.textColor
-  }
-});
-export {
-  b as buttonPlugin
-};