-
Notifications
You must be signed in to change notification settings - Fork 0
/
48aa8186-67735c86ae4015d55662.js.map
1 lines (1 loc) · 8.48 KB
/
48aa8186-67735c86ae4015d55662.js.map
1
{"version":3,"file":"48aa8186-67735c86ae4015d55662.js","mappings":"4pBAKaA,GAAiB,mIAS1B,gBAAGC,EAAH,EAAGA,MAAOC,EAAV,EAAUA,YAAaC,EAAvB,EAAuBA,KAAvB,OAAkCC,EAAAA,EAAAA,IAAjC,WACUH,EAAMI,OAAOC,eAAiB,EADzC,eAEcL,EAAMM,OAAOC,QAAQC,SAFnC,eAGcR,EAAMS,QAAQC,MAH5B,IAKkB,SAAhBT,GAAA,EALF,IAYEC,GAAI,EAZN,mGAyBoB,SAAhBD,GAAA,EAzBJ,QAT0B,wWAAvB,0EAyEMU,GAAO,wKAUhB,gBAAGX,EAAH,EAAGA,MAAOE,EAAV,EAAUA,KAAV,OAAqBC,EAAAA,EAAAA,IAApB,WACUH,EAAMI,OAAOC,eADxB,eAEcL,EAAMM,OAAOC,QAAQC,SAFnC,IAIEN,GAAI,EAJN,OAVgB,wFAiDPU,IAhBO,sKAQhB,gBAAGZ,EAAH,EAAGA,MAAH,OAAeG,EAAAA,EAAAA,IAAd,SACQH,EAAMM,OAAOC,QAAQM,SAD9B,kBAGWb,EAAMM,OAAOC,QAAQO,WAHhC,QARgB,MAgBD,gNAcNC,GAAU,2JAYVC,GAAW,oGAKXC,GAAU,yIAQVC,GAAc,mSAcvB,gBAAGlB,EAAH,EAAGA,MAAOmB,EAAV,EAAUA,MAAOC,EAAjB,EAAiBA,KAAMC,EAAvB,EAAuBA,SAAvB,OAAsClB,EAAAA,EAAAA,IAArC,wBACuBgB,EADxB,6FAKcnB,EAAMS,QAAQC,MAL5B,UAMSV,EAAMM,OAAOC,QAAQe,WAN9B,gGAegBD,EAAWrB,EAAMM,OAAOiB,UAAUC,KAAOxB,EAAMM,OAAOC,QAAQO,WAf9E,YAgBaO,EAAW,GAAM,GAhB9B,0CAqBcD,EArBd,6FA4BWpB,EAAMM,OAAOC,QAAQe,WA5BhC,yFAduB,wCAuDdG,GAAU,4IAUVC,GAAW,mCACpB,gBAAG1B,EAAH,EAAGA,MAAH,OAAeG,EAAAA,EAAAA,IAAd,6GAMmBH,EAAMM,OAAOC,QAAQC,SANzC,8CADoB,KAAjB,8CAgBMmB,GAAa,iIAQlB,qBAAGzB,MACH,IATkB,OAkBb0B,GAAS,uGAKlB,gBAAG1B,EAAH,EAAGA,KAAH,OAAcC,EAAAA,EAAAA,IAAb,UACSD,EAAO,EAAI,OADrB,OALkB,KAUT2B,GAAc,0KASvB,gBAAG7B,EAAH,EAAGA,MAAOqB,EAAV,EAAUA,SAAV,OAAyBlB,EAAAA,EAAAA,IACvBkB,IACFlB,EAAAA,EAAAA,IADU,yBAEiBH,EAAMM,OAAOiB,UAAUC,KAFxC,uBADV,wFAYWxB,EAAMM,OAAOC,QAAQM,SAZhC,8BAgBsBb,EAAMM,OAAOC,QAAQuB,SAhB3C,QATuB","sources":["webpack://@vallista-land/blog/./src/components/Sidebar/Sidebar.style.tsx"],"sourcesContent":["import { css } from '@emotion/react'\nimport styled from '@emotion/styled'\n\nimport { CommonLayoutProps } from './Sidebar.type'\n\nexport const _SidebarContainer = styled.div<CommonLayoutProps>`\n position: fixed;\n width: 320px;\n height: 100vh;\n top: 0;\n left: 80px;\n overflow-x: hidden;\n overflow-y: hidden;\n\n ${({ theme, scrollState, fold }) => css`\n z-index: ${theme.layers.AFTER_STANDARD - 1};\n background: ${theme.colors.PRIMARY.ACCENT_1};\n box-shadow: ${theme.shadows.SMALL};\n\n ${scrollState === 'SHOW' &&\n css`\n &:hover > div:last-of-type {\n margin-right: -8px;\n }\n `}\n\n ${fold &&\n css`\n left: -320px;\n\n & > div:first-of-type {\n left: -320px;\n }\n `}\n\n /* ipad Portrait and Landscape */\n @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {\n overflow-y: auto;\n\n ${scrollState === 'SHOW' &&\n css`\n &:hover > div:last-of-type {\n margin-right: 0;\n }\n `}\n }\n `}\n\n @media screen and (max-width: 1024px) {\n left: -320px;\n\n & > div:first-of-type {\n left: -320px;\n }\n }\n\n &:hover {\n overflow-y: auto;\n }\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\nexport const _Header = styled.div<CommonLayoutProps>`\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 80px;\n transform: translate3d(0, 0, 1);\n width: 320px;\n padding-bottom: 14px;\n\n ${({ theme, fold }) => css`\n z-index: ${theme.layers.AFTER_STANDARD};\n background: ${theme.colors.PRIMARY.ACCENT_1};\n\n ${fold &&\n css`\n left: -320px;\n\n & > div:first-of-type {\n left: -320px;\n }\n `}\n `}\n\n @media screen and (max-width: 1024px) {\n left: -320px;\n\n & > div:first-of-type {\n left: -320px;\n }\n }\n`\n\nexport const _Button = styled.button`\n border: none;\n background: none;\n outline: none;\n cursor: pointer;\n padding: 0;\n transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);\n\n ${({ theme }) => css`\n color: ${theme.colors.PRIMARY.ACCENT_4};\n &:hover {\n color: ${theme.colors.PRIMARY.FOREGROUND};\n }\n `}\n`\n\nexport const _Title = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n height: 35px;\n font-weight: 600;\n font-size: 14px;\n padding: 0 28px 2px;\n\n & > button {\n margin: 0;\n }\n`\n\nexport const _SearchBox = styled.div`\n display: flex;\n align-items: flex-end;\n height: 38px;\n padding: 0 24px;\n max-width: 100%;\n\n & > div {\n width: 100%;\n }\n`\n\nexport const _Categories = styled.div`\n margin-top: 73px;\n padding: 16px 24px 32px;\n`\n\nexport const _CardStyle = styled.nav`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n`\n\ntype CardStyleItemProps = Partial<CommonLayoutProps> & { image: string | null; text: string; isActive: boolean }\nexport const _CardStyleItem = styled.a<CardStyleItemProps>`\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n width: 130px;\n height: 130px;\n margin-bottom: 12px;\n border-radius: 12px;\n cursor: pointer;\n overflow: hidden;\n transform: scale(1, 1);\n transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);\n\n ${({ theme, image, text, isActive }) => css`\n background-image: url(${image});\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n box-shadow: ${theme.shadows.SMALL};\n color: ${theme.colors.PRIMARY.BACKGROUND};\n\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n height: inherit;\n background: ${isActive ? theme.colors.HIGHLIGHT.PINK : theme.colors.PRIMARY.FOREGROUND};\n opacity: ${isActive ? 0.5 : 0.3};\n border-radius: 12px;\n }\n\n &::after {\n content: '${text}';\n position: absolute;\n right: 0;\n bottom: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.1;\n color: ${theme.colors.PRIMARY.BACKGROUND};\n text-align: right;\n margin: 6px 6px 12px;\n word-break: keep-all;\n letter-spacing: -0.02rem;\n }\n `}\n\n &:hover {\n transform: scale(1.1, 1.1);\n }\n`\n\nexport const _ListStyle = styled.nav`\n display: flex;\n flex-direction: column;\n margin: 12px 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n`\n\nexport const _ListHeader = styled.div`\n ${({ theme }) => css`\n cursor: pointer;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n font-size: 14px;\n background-color: ${theme.colors.PRIMARY.ACCENT_1};\n padding: 0;\n margin: 0 0 6px 0;\n height: 30px;\n `}/* & > div {\n margin-right: 8px;\n } */\n`\n\nexport const _ListFoldIcon = styled.div<{ fold: boolean }>`\n display: flex;\n justify-content: flex-start;\n align-items: flex-end;\n\n & > div {\n & > svg {\n position: relative;\n ${({ fold }) =>\n !fold &&\n css`\n top: -2px;\n left: -2px;\n `}\n }\n }\n`\n\nexport const _ListBody = styled.div<{ fold: boolean }>`\n overflow-y: hidden;\n will-change: height;\n transition: height 0.2s ease;\n\n ${({ fold }) => css`\n height: ${fold ? 0 : 'auto'};\n `}\n`\n\nexport const _ListStyleItem = styled.a<Pick<CardStyleItemProps, 'isActive'>>`\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: 6px 0;\n transition: border 0.2s ease;\n\n ${({ theme, isActive }) => css`\n ${isActive &&\n css`\n border-left: 6px solid ${theme.colors.HIGHLIGHT.PINK};\n padding-left: 12px;\n `};\n\n & > div {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 6px;\n color: ${theme.colors.PRIMARY.ACCENT_4};\n }\n\n &:hover {\n background-color: ${theme.colors.PRIMARY.ACCENT_2};\n }\n\n /* &::before {\n content: '';\n transform: translateY(-50%);\n \n font-size: 1rem;\n } */\n `}\n\n & > svg {\n width: 20px;\n height: 20px;\n }\n`\n"],"names":["_SidebarContainer","theme","scrollState","fold","css","layers","AFTER_STANDARD","colors","PRIMARY","ACCENT_1","shadows","SMALL","_Header","_Title","ACCENT_4","FOREGROUND","_SearchBox","_Categories","_CardStyle","_CardStyleItem","image","text","isActive","BACKGROUND","HIGHLIGHT","PINK","_ListStyle","_ListHeader","_ListFoldIcon","_ListBody","_ListStyleItem","ACCENT_2"],"sourceRoot":""}