@particle-network/connectkit
Version:
8 lines (7 loc) • 4.08 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/pages/connecting/styles.ts"],
"sourcesContent": ["import { motion } from 'framer-motion';\nimport { css, keyframes, styled } from 'styled-components';\n\nexport const ConnectingContainer = styled(motion.div)`\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n`;\n\nconst dist = 2;\nconst shakeKeyframes = keyframes`\n 0%{ transform:none; }\n 25%{ transform:translateX(${dist}px); }\n 50%{ transform:translateX(-${dist}px); }\n 75%{ transform:translateX(${dist}px); }\n 100%{ transform:none; }\n`;\nconst outlineKeyframes = keyframes`\n 0%{ opacity:1; }\n 100%{ opacity:0; }\n`;\n\nexport const ConnectingAnimation = styled(motion.div)<{\n $shake: boolean;\n $circle: boolean;\n}>`\n user-select: none;\n position: relative;\n --spinner-error-opacity: 0;\n &:before {\n content: '';\n position: absolute;\n inset: 1px;\n opacity: 0;\n background: var(--pcm-error-color);\n ${(props) =>\n props.$circle &&\n css`\n inset: -5px;\n border-radius: 50%;\n background: none;\n box-shadow: inset 0 0 0 3.5px var(--pcm-error-color);\n `}\n }\n ${(props) =>\n props.$shake &&\n css`\n animation: ${shakeKeyframes} 220ms ease-out both;\n &:before {\n animation: ${outlineKeyframes} 220ms ease-out 750ms both;\n }\n `}\n`;\n\nexport const RetryButton = styled(motion.button)`\n z-index: 5;\n appearance: none;\n position: absolute;\n right: 2px;\n bottom: 2px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 16px;\n cursor: pointer;\n overflow: hidden;\n background: none;\n border: none;\n color: var(--pcm-body-background);\n transition: color 200ms ease;\n box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);\n\n &:before {\n z-index: 3;\n content: '';\n position: absolute;\n inset: 0;\n opacity: 0;\n transition: opacity 200ms ease;\n background: var(--pcm-body-color);\n }\n\n &:hover:before {\n opacity: 0.1;\n }\n`;\n\nexport const RetryIconContainer = styled(motion.div)`\n position: absolute;\n inset: 0;\n\n &:before {\n z-index: 1;\n content: '';\n position: absolute;\n inset: 3px;\n border-radius: 16px;\n background: conic-gradient(from 90deg, currentColor 10%, var(--pcm-accent-color) 80%);\n }\n\n svg {\n z-index: 2;\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n }\n`;\n\nexport const StatusContainer = styled(motion.div)`\n position: relative;\n padding: 0;\n margin-top: 28px;\n scale: 0.95;\n opacity: 0;\n will-change: transform, height;\n color: var(--pcm-body-color);\n padding-bottom: 16px;\n\n div:first-child {\n font-weight: 500;\n margin-bottom: 10px;\n font-size: 16px;\n }\n\n span {\n color: var(--pcm-body-color-secondary);\n white-space: pre-wrap;\n font-size: 14px;\n }\n`;\n"],
"mappings": ";;;;;;AAAA,SAAS,cAAc;AACvB,SAAS,KAAK,WAAW,cAAc;AADvC,IAGa,qBASP,MACA,gBAOA,kBAKO,qBAgCA,aAoCA,oBAsBA;AAnHb;AAAA;AAAA;AAGO,IAAM,sBAAsB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpD,IAAM,OAAO;AACb,IAAM,iBAAiB;AAAA;AAAA,8BAEO;AAAA,+BACC;AAAA,8BACD;AAAA;AAAA;AAG9B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAKlB,IAAM,sBAAsB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAa9C,CAAC,UACD,MAAM,WACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOF,CAAC,UACD,MAAM,UACN;AAAA,mBACe;AAAA;AAAA,qBAEE;AAAA;AAAA;AAAA;AAKd,IAAM,cAAc,OAAO,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCxC,IAAM,qBAAqB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB5C,IAAM,kBAAkB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
"names": []
}