@icoms-detection/ui/src/stitches/modal.ts

This is the OFFICIAL UI library created by Icoms Detection to design their apps.

import { styled } from "../stitches.config";
import { SizeProps } from "../utils/types";

const sizes: Record<SizeProps, any> = {
  "2xs": {
    maxWidth: "200px",
  },
  xs: {
    maxWidth: "250px",
  },
  sm: {
    maxWidth: "300px",
  },
  base: {
    maxWidth: "320px",
  },
  lg: {
    maxWidth: "380px",
  },
  xl: {
    maxWidth: "460px",
  },
  "2xl": {
    maxWidth: "540px",
  },
};

export const SubDialog = styled("div", {
  alignItems: "center",
  justifyContent: "center",
  minHeight: "100vh",
  textAlign: "center",
  display: "flex",
  padding: "1rem",
  "@sm": { display: "block", padding: 0 },
});

export const DialogOverlay = styled("div", {
  position: "fixed",
  top: "0px",
  right: "0px",
  bottom: "0px",
  left: "0px",
  backgroundColor: "$neutral_500",
  opacity: 0.9,
});

export const TrickySpan = styled("span", {
  display: "none",
  "@sm": { height: "100vh", verticalAlign: "middle", display: "inline-block" },
});

export const StyledModal = styled("div", {
  position: "relative",
  display: "inline-block",
  verticalAlign: "bottom",
  backgroundColor: "white",
  borderRadius: "5px",
  padding: "1.25rem 1rem 1rem 1rem",
  overflow: "hidden",
  width: "100%",
  boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
  "@sm": {
    margin: "2rem 0",
    verticalAlign: "middle",
    padding: "1.5rem",
  },
  variants: {
    size: sizes,
  },
});