-
Notifications
You must be signed in to change notification settings - Fork 0
/
48aa8186-ced992642747f1a19077.js.map
1 lines (1 loc) · 9.26 KB
/
48aa8186-ced992642747f1a19077.js.map
1
{"version":3,"file":"48aa8186-ced992642747f1a19077.js","mappings":"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","sources":["webpack://@portfolio/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.CYAN.DEFAULT : 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.CYAN.DEFAULT};\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":["_ref3","name","styles","_ref4","_ref5","_SidebarContainer","_styled","target","_ref6","theme","scrollState","fold","css","layers","AFTER_STANDARD","colors","PRIMARY","ACCENT_1","shadows","SMALL","_ref2","_Header","_ref7","_Title","_SearchBox","_Categories","_CardStyle","_CardStyleItem","_ref9","image","text","isActive","BACKGROUND","CYAN","DEFAULT","FOREGROUND","_ListStyle","_ListHeader","_ref10","_ref","_ListFoldIcon","_ref11","_ListBody","_ref12","_ListStyleItem","_ref13","ACCENT_4","ACCENT_2"],"sourceRoot":""}