@particle-network/connectkit
Version:
8 lines (7 loc) • 10.4 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/components/modal/styles.ts"],
"sourcesContent": ["import { motion } from 'framer-motion';\nimport type { HTMLAttributes } from 'react';\nimport { keyframes, styled } from 'styled-components';\n\ninterface FlexProps extends HTMLAttributes<HTMLDivElement> {\n gap?: number;\n}\n\nconst FadeIn = keyframes`\nfrom { opacity: 0; }\n to { opacity: 1; }\n`;\n\nconst FadeOut = keyframes`\nfrom { opacity: 1; }\n to { opacity: 0; }\n`;\n\nconst BoxIn = keyframes`\n from{ opacity: 0; transform: scale(0.97); }\n to{ opacity: 1; transform: scale(1); }\n`;\nconst BoxOut = keyframes`\n from{ opacity: 1; transform: scale(1); }\n to{ opacity: 0; transform: scale(0.97); }\n`;\n\nconst MobileBoxIn = keyframes`\n from { transform: translate3d(0, 100%, 0); }\n to { transform: translate3d(0, 0%, 0); }\n`;\n\nconst MobileBoxOut = keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n`;\n\nexport const ModalRoot = styled.div`\n z-index: 2147483646;\n position: fixed;\n inset: 0;\n`;\n\nexport const ModalOverlay = styled(motion.div)<{\n $active: boolean;\n}>`\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--pcm-overlay-background, rgba(71, 88, 107, 0.24));\n backdrop-filter: var(--pcm-overlay-backdrop-filter, blur(6px));\n opacity: 0;\n animation: ${(props) => (props.$active ? FadeIn : FadeOut)} 150ms ease-out both;\n`;\n\nexport const ModalContainer = styled(motion.div)<{\n $positionInside?: boolean;\n}>`\n --ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n --duration: 200ms;\n --transition: height var(--duration) var(--ease), width var(--duration) var(--ease);\n z-index: 3;\n display: block;\n pointer-events: none;\n position: ${(props) => (props.$positionInside ? 'unset' : 'absolute')};\n left: 50%;\n top: 50%;\n width: 100%;\n height: auto;\n transform: ${(props) => {\n return props.$positionInside ? 'none' : 'translate(-50%, -50%)';\n }};\n backface-visibility: hidden;\n @media only screen and (max-width: 560px) {\n pointer-events: auto;\n left: 0;\n top: auto;\n bottom: -5px;\n transform: none;\n }\n`;\n\nexport const BoxContainer = styled(motion.div)<{\n $positionInside?: boolean;\n}>`\n z-index: 2;\n position: relative;\n color: var(--pcm-body-color, black);\n animation: 150ms ease both;\n animation-name: ${(props) => (props.$positionInside ? null : BoxOut)};\n margin: auto;\n height: var(--height);\n width: 400px;\n border-radius: var(--pcm-rounded-xl);\n background: var(--pcm-body-background);\n box-shadow: var(--pcm-modal-box-shadow);\n transition: all 300ms ease;\n overflow: hidden;\n &.active {\n animation-name: ${(props) => (props.$positionInside ? null : BoxIn)};\n }\n\n @media only screen and (max-width: 560px) {\n animation-name: ${(props) => (props.$positionInside ? null : MobileBoxOut)};\n animation-duration: 130ms;\n animation-timing-function: ease;\n width: 100%;\n transition: 200ms height cubic-bezier(0.15, 1.15, 0.6, 1);\n will-change: height;\n border-bottom-left-radius: ${(props) => (props.$positionInside ? null : 0)};\n border-bottom-right-radius: ${(props) => (props.$positionInside ? null : 0)};\n\n &.active {\n animation-name: ${(props) => (props.$positionInside ? null : MobileBoxIn)};\n animation-duration: 300ms;\n animation-delay: 32ms;\n animation-timing-function: cubic-bezier(0.15, 1.15, 0.6, 1);\n }\n }\n`;\n\nexport const PageContainer = styled(motion.div)`\n z-index: 2;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: auto;\n`;\n\nexport const PageContents = styled(motion.div)`\n width: 100%;\n padding: 64px 0 24px 0;\n backface-visibility: hidden;\n box-sizing: border-box;\n`;\n\nexport const PageContent = styled(motion.div)`\n max-width: 100%;\n margin: 0 4px 22px;\n padding: 12px 20px 8px;\n overflow-x: visible;\n max-height: var(--pcm-modal-max-height, 65vh);\n overflow-y: auto;\n opacity: 0;\n animation: ${FadeIn} 300ms ease-out both;\n`;\n\nexport const ControllerContainer = styled(motion.div)`\n z-index: 3;\n position: absolute;\n top: 0;\n left: 50%;\n height: 64px;\n transform: translateX(-50%);\n backface-visibility: hidden;\n width: 100%;\n pointer-events: auto;\n`;\n\nexport const BackButton = styled(motion.button)`\n z-index: 3;\n cursor: pointer;\n position: absolute;\n top: 21px;\n left: 17px;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n transform-origin: center center;\n border-radius: 16px;\n padding: 0;\n margin: 0;\n color: var(--pcm-body-action-color);\n background: var(--pcm-body-background);\n transition: background-color 200ms ease;\n background: var(--pcm-body-background-secondary);\n border: none;\n svg {\n display: block;\n position: relative;\n left: -1px;\n }\n\n &:active {\n transform: scale(0.9);\n svg {\n left: 0px;\n }\n }\n`;\n\nexport const CloseButton = styled(motion.button)`\n z-index: 3;\n cursor: pointer;\n position: absolute;\n top: 21px;\n right: 17px;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 16px;\n padding: 0;\n margin: 0;\n color: var(--pcm-body-action-color);\n background: var(--pcm-body-background);\n transition: background-color 200ms ease;\n background: var(--pcm-body-background-secondary);\n border: none;\n svg {\n display: block;\n }\n &:active {\n transform: scale(0.9);\n }\n`;\n\nexport const ModalHeading = styled(motion.div)`\n z-index: 3;\n pointer-events: none;\n user-select: none;\n position: absolute;\n top: 12px;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n transform: translateX(-50%);\n width: 100%;\n text-align: center;\n font-size: 17px;\n line-height: 20px;\n padding: 0 24px;\n font-weight: var(--pcm-modal-heading-font-weight, 600);\n color: var(--pcm-body-color);\n span {\n display: inline-block;\n }\n`;\n\nexport const ErrorContent = styled(motion.div)`\n background: var(--pcm-error-background);\n color: var(--pcm-error-color);\n text-align: center;\n height: 28px;\n margin: 0 24px;\n line-height: 28px;\n border-radius: 30px;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n padding: 0 16px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n svg {\n display: inline-block;\n margin-right: 8px;\n }\n`;\n\nexport const ErrorMessage = styled(motion.div)<{\n $display: boolean;\n}>`\n display: ${(props) => (props.$display ? 'flex' : 'none')};\n width: 100%;\n margin: 16px auto;\n align-items: center;\n justify-content: center;\n opacity: 0;\n animation: ${(props) => (props.$display ? FadeIn : FadeOut)} 200ms ease-out both;\n`;\n\nexport const ModalContentContainer = styled(motion.div)`\n position: relative;\n padding: 0;\n`;\n\nexport const FlexCenter = styled.div<FlexProps>`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ${(props) => props.gap || 0}px;\n`;\n\nexport const FlexLeft = styled.div<FlexProps>`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: ${(props) => props.gap || 0}px;\n`;\n\nexport const FlexRight = styled.div<FlexProps>`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: ${(props) => props.gap || 0}px;\n`;\n\nexport const FlexBetween = styled.div<FlexProps>`\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: ${(props) => props.gap || 0}px;\n`;\n"],
"mappings": "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",
"names": []
}