UNPKG

@particle-network/connectkit

Version:

particle.network

8 lines (7 loc) • 5.25 kB
1
2
3
4
5
6
7
8
{ "version": 3, "sources": ["../../src/components/socialLogin/styles.ts"], "sourcesContent": ["import { motion } from 'framer-motion';\nimport { css, keyframes, styled } from 'styled-components';\nimport { ForwardContainer, WalletLable } from '../wallets/styles';\n\nconst FadeIn = keyframes`\nfrom { opacity: 0; }\n to { opacity: 1; }\n`;\n\nexport const SocialLoginContainer = styled(motion.div)<{\n $felxRow: boolean;\n}>`\n width: 100%;\n display: flex;\n justify-content: space-between;\n transform: translateZ(0);\n flex-wrap: wrap;\n flex-direction: ${(props) => {\n if (props.$felxRow) {\n return 'row';\n }\n return 'column';\n }};\n gap: ${(props) => {\n if (props.$felxRow) {\n return '0px';\n }\n return '12px';\n }};\n`;\n\nexport const SocialItem = styled(motion.div)<{ $felxRow: boolean; $isDisabled?: boolean }>`\n display: flex;\n align-items: center;\n gap: 10px;\n height: 46px;\n border: 1px solid var(--pcm-button-border-color);\n transition: 0.2s ease width;\n cursor: pointer;\n opacity: 0;\n animation: ${FadeIn} 300ms ease-out both;\n position: relative;\n user-select: none;\n\n ${(props) => {\n if (props.$isDisabled) {\n return css`\n opacity: 0.5 !important;\n cursor: not-allowed !important;\n pointer-events: none !important;\n `;\n } else {\n return css``;\n }\n }}\n\n ${(props) => {\n if (props.$felxRow) {\n return css`\n padding: 0;\n width: 46px;\n border-radius: var(--pcm-rounded-full);\n justify-content: center;\n `;\n }\n\n return css`\n padding-left: 16px;\n padding-right: 16px;\n width: 100%;\n border-radius: var(--pcm-rounded-lg);\n justify-content: flex-start;\n ${ForwardContainer} {\n svg {\n height: inherit;\n width: inherit;\n }\n }\n @media only screen and (min-width: 560px) {\n &:hover {\n ${WalletLable} {\n opacity: 0;\n transform: translateX(-15px);\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 ${WalletLable} {\n opacity: 0;\n transform: translateX(-15px);\n }\n ${ForwardContainer} {\n opacity: 1;\n transform: translateX(10px);\n }\n }\n }\n `;\n }}\n\n @media only screen and (min-width: 560px) {\n &:hover {\n box-shadow: var(--pcm-button-hover-shadow);\n }\n }\n\n @media only screen and (max-width: 560px) {\n &:hover:active {\n box-shadow: var(--pcm-button-hover-shadow);\n }\n }\n\n svg {\n object-fit: cover;\n ${(props) => {\n if (props.$felxRow) {\n return css`\n height: 30px;\n width: 30px;\n `;\n }\n return css`\n height: 22px;\n width: 22px;\n `;\n }}\n }\n\n span {\n font-weight: 500;\n font-size: 14px;\n white-space: nowrap;\n text-align: center;\n text-transform: capitalize;\n display: ${(props) => {\n if (props.$felxRow) {\n return 'none';\n }\n return 'block';\n }};\n }\n`;\n\nexport const ToggleContainer = styled(motion.div)`\n height: 47px;\n width: 47px;\n cursor: pointer;\n border-radius: var(--pcm-rounded-full);\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--pcm-body-background-secondary);\n opacity: 0;\n animation: ${FadeIn} 300ms ease-out both;\n\n &:hover {\n box-shadow: var(--pcm-button-hover-shadow);\n }\n svg {\n height: 25px;\n width: 25px;\n object-fit: cover;\n }\n`;\n"], "mappings": ";;;;;;;;;;;AAAA,SAAS,cAAc;AACvB,SAAS,KAAK,WAAW,cAAc;AADvC,IAIM,QAKO,sBAsBA,YAsHA;AArJb,IAAAA,eAAA;AAAA;AAAA;AAEA;AAEA,IAAM,SAAS;AAAA;AAAA;AAAA;AAKR,IAAM,uBAAuB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQjC,CAAC,UAAU;AAC3B,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,SACO,CAAC,UAAU;AAChB,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA;AAGK,IAAM,aAAa,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAS5B;AAAA;AAAA;AAAA;AAAA,IAIX,CAAC,UAAU;AACX,UAAI,MAAM,aAAa;AACrB,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA,IAEE,CAAC,UAAU;AACX,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT;AAEA,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQI;AAAA;AAAA;AAAA;AAAA,YAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASA;AAAA;AAAA;AAAA;AAAA,YAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBI,CAAC,UAAU;AACX,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA;AAAA;AAAA;AAAA,MAIT;AACA,aAAO;AAAA;AAAA;AAAA;AAAA,IAIT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASW,CAAC,UAAU;AACpB,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA;AAAA;AAIG,IAAM,kBAAkB,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;", "names": ["init_styles"] }