-
Notifications
You must be signed in to change notification settings - Fork 0
/
d265142c-40f9a9b91020b502d977.js.map
1 lines (1 loc) · 4.07 KB
/
d265142c-40f9a9b91020b502d977.js.map
1
{"version":3,"file":"d265142c-40f9a9b91020b502d977.js","mappings":"uPAGO,MAAMA,GAAUC,EAAAA,EAAAA,GAAA,SAAAC,OAAA,YAAAD,CAAA,gCAKnBE,IAAA,IAAC,MAAEC,GAAOD,EAAA,OAAKE,EAAAA,EAAAA,IAAG,cACJD,EAAME,OAAOC,QAAQC,SAAQ,YAChCJ,EAAMK,OAAOC,eAAiB,EAAC,UAC3C,4aAiCUC,GAAQV,EAAAA,EAAAA,GAAA,WAAAC,OAAA,YAAAD,CAAA,CAAAW,KAAA,SAAAC,OAAA,uMAeRC,GAAQb,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAW,KAAA,UAAAC,OAAA,4EAORE,GAASd,EAAAA,EAAAA,GAAA,KAAAC,OAAA,YAAAD,CAAA,2ZAyClBe,IAAA,IAAC,MAAEZ,EAAK,QAAEa,GAASD,EAAA,OAAKX,EAAAA,EAAAA,IAAG,qHAOhBD,EAAME,OAAOC,QAAQW,WAAU,wBAI1Bd,EAAME,OAAOC,QAAQY,SAAQ,yCAIlCf,EAAME,OAAOC,QAAQa,WAAU,KAGxCH,IACFZ,EAAAA,EAAAA,IAAG,mGAQ0BD,EAAME,OAAOe,KAAKC,QAAO,gIAQrBlB,EAAME,OAAOe,KAAKC,QAAO,UAGzD,UACF,I","sources":["webpack://@portfolio/blog/./src/components/NavBar/NavBar.style.tsx"],"sourcesContent":["import { css } from '@emotion/react'\nimport styled from '@emotion/styled'\n\nexport const _Container = styled.aside`\n position: fixed;\n top: 0;\n left: 0;\n\n ${({ theme }) => css`\n background: ${theme.colors.PRIMARY.ACCENT_2};\n z-index: ${theme.layers.AFTER_STANDARD + 1};\n `}\n\n @media screen and (min-width: 1025px) {\n min-width: 80px;\n height: 100vh;\n }\n\n @media screen and (max-width: 1024px) {\n top: 43px;\n min-height: 60px;\n width: 100vw;\n overflow-y: hidden;\n overflow-x: auto;\n\n /** 파이어폭스 스크롤 대응 */\n scrollbar-width: 8px;\n // thumb background 순\n scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-background);\n\n /** 사파리 크롬 스크롤 대응 */\n &::-webkit-scrollbar {\n background: var(--scrollbar-background);\n height: 8px;\n width: 8px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 0;\n }\n }\n`\n\nexport const _Section = styled.section`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n @media screen and (min-width: 1025px) {\n flex-direction: column;\n height: 100vh;\n }\n\n @media screen and (max-width: 1024px) {\n flex-direction: row;\n }\n`\n\nexport const _Wrapper = styled.nav`\n @media screen and (max-width: 1024px) {\n display: flex;\n flex-direction: row;\n }\n`\n\nexport const _Category = styled.a<{ checked?: boolean }>`\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n cursor: pointer;\n transition: background 0.2s ease;\n\n & > div > div > div > svg {\n width: 32px;\n height: 32px;\n }\n\n @media screen and (max-width: 1024px) {\n width: 60px;\n height: 60px;\n\n & > figure {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n overflow: hidden;\n }\n\n & > svg {\n width: 24px;\n height: 24px;\n }\n }\n\n & > div {\n width: inherit;\n height: inherit;\n\n & img {\n border-radius: 12px;\n }\n }\n\n ${({ theme, checked }) => css`\n & > div > div:first-of-type {\n width: inherit;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n color: ${theme.colors.PRIMARY.FOREGROUND};\n }\n\n &:hover {\n background: ${theme.colors.PRIMARY.ACCENT_3};\n }\n\n &:hover > div > div:first-of-type {\n color: ${theme.colors.PRIMARY.BACKGROUND};\n }\n\n ${checked &&\n css`\n &:before {\n position: absolute;\n left: 0;\n top: 0;\n width: 80px;\n height: 80px;\n content: '';\n border-left: 3px solid ${theme.colors.CYAN.DEFAULT};\n box-sizing: border-box;\n\n @media screen and (max-width: 1024px) {\n width: 60px;\n height: 60px;\n border-left: none;\n\n border-bottom: 3px solid ${theme.colors.CYAN.DEFAULT};\n }\n }\n `}\n `}\n`\n"],"names":["_Container","_styled","target","_ref","theme","css","colors","PRIMARY","ACCENT_2","layers","AFTER_STANDARD","_Section","name","styles","_Wrapper","_Category","_ref2","checked","FOREGROUND","ACCENT_3","BACKGROUND","CYAN","DEFAULT"],"sourceRoot":""}