UNPKG

@particle-network/connectkit

Version:

particle.network

8 lines (7 loc) • 3.83 kB
1
2
3
4
5
6
7
8
{ "version": 3, "sources": ["../../src/components/wallets/styles.ts"], "sourcesContent": ["import { motion } from 'framer-motion';\nimport { styled } from 'styled-components';\n\nexport const WalletsContainer = styled(motion.div)`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 16px;\n`;\n\nexport const WalletIconContainer = styled(motion.div)`\n height: 22px;\n width: 22px;\n border-radius: 6px;\n overflow: hidden;\n\n svg {\n width: 100%;\n height: 100%;\n }\n`;\n\nexport const WalletLable = styled(motion.div)<{\n $customLable?: boolean;\n}>`\n position: absolute;\n margin: auto 16px;\n right: 0;\n height: 25px;\n background: ${(props) =>\n props.$customLable ? 'var(--pcm-wallet-lable-background)' : 'var(--pcm-body-background-secondary)'};\n color: ${(props) => (props.$customLable ? 'var(--pcm-wallet-lable-color)' : 'var(--pcm-body-color-secondary)')};\n font-size: 12px;\n font-weight: 300;\n text-align: center;\n line-height: 25px;\n padding: 0 10px 0 21px;\n border-radius: 25px;\n max-width: 40%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition-property: opacity, transform;\n opacity: 1;\n transition-duration: 200ms;\n\n &:before {\n content: '';\n position: absolute;\n height: 7px;\n width: 7px;\n background: ${(props) => (props.$customLable ? 'var(--pcm-wallet-lable-color)' : 'var(--pcm-accent-color)')};\n border-radius: 50%;\n top: 9px;\n left: 10px;\n }\n`;\n\nexport const ForwardContainer = styled(motion.div)`\n margin: auto 0;\n position: absolute;\n right: 26px;\n opacity: 0;\n transition-property: opacity, transform;\n transition-duration: 200ms;\n color: var(--pcm-body-color);\n`;\n\nexport const WalletItem = styled(motion.div)`\n width: 100%;\n height: 47px;\n border: 1px solid var(--pcm-button-border-color);\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0 16px;\n border-radius: var(--pcm-rounded-lg);\n gap: 12px;\n position: relative;\n user-select: none;\n\n @media only screen and (min-width: 560px) {\n &:hover {\n box-shadow: var(--pcm-button-hover-shadow);\n ${WalletLable} {\n opacity: 0;\n transform: translateX(-15px);\n }\n\n ${ForwardContainer} {\n opacity: 1;\n transform: translateX(10px);\n }\n }\n }\n\n @media only screen and (max-width: 560px) {\n &:hover:active {\n box-shadow: var(--pcm-button-hover-shadow);\n ${WalletLable} {\n opacity: 0;\n transform: translateX(-15px);\n }\n\n ${ForwardContainer} {\n opacity: 1;\n transform: translateX(10px);\n }\n }\n }\n &.all-wallets-btn {\n background: var(--pcm-body-background-secondary);\n border: none;\n font-weight: 500;\n &:hover {\n box-shadow: none;\n }\n }\n`;\n"], "mappings": ";;;;;;AAAA,SAAS,cAAc;AACvB,SAAS,cAAc;AADvB,IAGa,kBAOA,qBAYA,aAoCA,kBAUA;AApEb;AAAA;AAAA;AAGO,IAAM,mBAAmB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,IAAM,sBAAsB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY7C,IAAM,cAAc,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO5B,CAAC,UACb,MAAM,eAAe,uCAAuC;AAAA,WACrD,CAAC,UAAW,MAAM,eAAe,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAoB5D,CAAC,UAAW,MAAM,eAAe,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9E,IAAM,mBAAmB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1C,IAAM,aAAa,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBnC;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;", "names": [] }