| 1 | {"version":3,"sources":["../../src/Message/Message.styles.ts"],"names":["ContentWrapper","AvatarWrapper","showTitle","Avatar","Text","Title","isRightDir","Time","Media","Message","Wrapper"],"mappings":";;;;;;;;;;;;;AAIO,IAAMA,cAAc,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAQA,IAAMC,aAAa,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH,8FAMT;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,MAAH,GAAY,GAAzC;AAAA,CANS,i+HAAnB;;AASA,IAAMC,MAAM,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAZ;;AAWA,IAAMC,IAAI,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;AAgBA,IAAMC,KAAK,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH,kHAOL;AAAA,MAAGC,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,WAAH,GAAiB,WAAhD;AAAA,CAPK,i+HAAX;;AASA,IAAMC,IAAI,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;AAOA,IAAMC,KAAK,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH,w9HAAX;;AAEA,IAAMC,OAAO,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;;AAIA,IAAMC,OAAO,GAAG,oCAAO,KAAP;AAAA;AAAA;AAAA,EAAH,2DAIR;AAAA,MAAGJ,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,eAAH,GAAqB,eAApD;AAAA,CAJQ,eAOdC,IAPc,OAOLF,KAPK,mBAWhBJ,aAXgB,cAYN;AAAA,MAAGK,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,WAAH,GAAiB,WAAhD;AAAA,CAZM,aAaP;AAAA,MAAGA,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,GAAH,GAAS,IAAxC;AAAA,CAbO,QAiBhBN,cAjBgB,uBAkBG;AAAA,MAAGM,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,UAAH,GAAgB,YAA/C;AAAA,CAlBH,QAoBhBD,KApBgB,OAoBNE,IApBM,kBAqBF;AAAA,MAAGD,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,OAAH,GAAa,MAA5C;AAAA,CArBE,QAuBhBF,IAvBgB,wBAwBI;AAAA,MAAGE,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,SAAH,GAAe,SAA9C;AAAA,CAxBJ,aAyBP;AAAA,MAAGA,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,SAAH,GAAe,SAA9C;AAAA,CAzBO,qBA0BC;AAAA,MAAGA,UAAH,UAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,kBAAH,GAAwB,kBAAvD;AAAA,CA1BD,QA6BhBC,IA7BgB,aA8BP;AAAA,MAAGD,UAAH,UAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,IAAH,GAAU,GAAzC;AAAA,CA9BO,cA+BN;AAAA,MAAGA,UAAH,UAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,YAAH,GAAkB,YAAjD;AAAA,CA/BM,k+HAAb","sourcesContent":["import styled from '@emotion/styled';\n\nimport { IMessageProps } from './types';\n\nexport const ContentWrapper = styled('div')`\n display: flex;\n align-items: center;\n width: auto;\n animation: fadeIn 1s ease-in;\n /* max-width: max-content; */\n`;\n\nexport const AvatarWrapper = styled('div')<IMessageProps>`\n width: 42px;\n flex-shrink: 0;\n position: relative;\n display: flex;\n align-items: flex-end;\n padding-top: ${({ showTitle }) => (showTitle ? '26px' : '0')};\n`;\n\nexport const Avatar = styled('img')`\n width: 42px;\n height: 42px;\n background-color: #ced4da;\n border-radius: 21px;\n object-fit: cover;\n position: sticky;\n bottom: 0;\n z-index: 1;\n`;\n\nexport const Text = styled('div')`\n display: block;\n color: #333;\n padding: 10px 14px;\n font-size: 16px;\n min-width: 42px;\n min-height: 42px;\n text-align: left;\n\n /* hyphens: auto; перенос слов */\n`;\n\nexport type TitleType = {\n isRightDir: boolean;\n};\n\nexport const Title = styled('div')<IMessageProps>`\n display: block;\n /* text-transform: uppercase; */\n font-size: 12px;\n color: #a2aab3;\n /* opacity: 0; // прозрачность имени изменяется при наведении */\n transition: opacity 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);\n padding: ${({ isRightDir }) => (isRightDir ? '0 9px 0 0' : '0 0 0 9px')};\n`;\nexport const Time = styled('div')`\n color: #adb5bd;\n font-size: 10px;\n opacity: 0;\n transition: opacity 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);\n`;\n\nexport const Media = styled('div')``;\n\nexport const Message = styled('div')`\n width: 100%;\n`;\n\nexport const Wrapper = styled('div')<IMessageProps>`\n display: flex;\n max-width: 90%;\n align-items: stretch;\n margin: ${({ isRightDir }) => (isRightDir ? '0 0 20px auto' : '0 auto 20px 0')};\n /* margin-top: 20px; */\n &:hover {\n ${Time}, ${Title} {\n opacity: 1;\n }\n }\n ${AvatarWrapper} {\n margin: ${({ isRightDir }) => (isRightDir ? '0 0 0 6px' : '0 6px 0 0')};\n order: ${({ isRightDir }) => (isRightDir ? '1' : '-1')};\n }\n\n /* text-align: right; */\n ${ContentWrapper} {\n justify-content: ${({ isRightDir }) => (isRightDir ? 'flex-end' : 'flex-start')};\n }\n ${Title}, ${Time} {\n text-align: ${({ isRightDir }) => (isRightDir ? 'right' : 'left')};\n }\n ${Text} {\n background-color: ${({ isRightDir }) => (isRightDir ? '#2dce89' : '#e9ecef')};\n color: ${({ isRightDir }) => (isRightDir ? '#ffffff' : '#333333')};\n border-radius: ${({ isRightDir }) => (isRightDir ? '18px 18px 0 18px' : '18px 18px 18px 0')};\n }\n\n ${Time} {\n order: ${({ isRightDir }) => (isRightDir ? '-1' : '1')};\n margin: ${({ isRightDir }) => (isRightDir ? '0 24px 0 0' : '0 0 0 24px')};\n }\n`;\n"],"file":"Message.styles.js"} |