diff --git a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts index c479ad4..ac5bad8 100644 --- a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts +++ b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts @@ -1,42 +1,5 @@ import { style } from '@vanilla-extract/css'; -export const wrapper = style({ - position: 'relative', - - display: 'flex', - flexDirection: 'row', - backgroundColor: '#fff', - - width: '27rem', - height: '3rem', - padding: '10px 20px', - borderRadius: '50px', - - cursor: 'pointer', -}); - -export const glassesWrapper = style({ - display: 'flex', - flexDirection: 'row', -}); - -export const tagWrapper = style({ - display: 'flex', - flexDirection: 'row', - - marginRight: 'auto', -}); - -export const tagBox = style({ - padding: '6px', - borderRadius: '50px', - backgroundColor: '#6A6868', - - fontSize: '12px', - - marginRight: '10px', -}); - export const OutExpandedWrapper = style({ position: 'fixed', top: '0', @@ -47,13 +10,15 @@ export const OutExpandedWrapper = style({ display: 'flex', justifyContent: 'center', - width: '100vw', // 100%에서 100vw로 변경 - height: '100vh', // 100%에서 100vh로 변경 + width: '100vw', + height: '100vh', padding: '80px 54px', zIndex: '1000', - backgroundColor: 'rgba(0, 0, 0, 0.65)', // 반투명 검은색으로 변경 + // backgroundColor: 'rgba(0, 0, 0, 0.65)', + + backdropFilter: 'blur(10px)', }); export const expandedWrapper = style({ @@ -67,7 +32,7 @@ export const expandedWrapper = style({ flexDirection: 'column', width: '37rem', - height: '22rem', + height: 'fit-content', backgroundColor: '#fff', @@ -91,50 +56,3 @@ export const searchInput = style({ border: 'none', outline: 'none', }); - -export const expandedTagWrapper = style({ - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - - fontSize: '12px', -}); - -export const relatedTagWrapper = style({ - display: 'flex', - flexDirection: 'column', - - margin: '0', - padding: '0', -}); - -export const relatedTagBox = style({ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - - width: '100%', - - gap: '10px', - - cursor: 'pointer', - - ':focus': { - outline: 'none', - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, - - ':hover': { - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, -}); - -export const relatedTagText = style({ - fontSize: '12px', - - color: '#000', -}); - -export const focusedTag = style({ - backgroundColor: 'rgba(106, 104, 104, 0.1)', -}); diff --git a/src/commons/components/features/Inputs/Search/Search.css.ts b/src/commons/components/features/Inputs/Search/Search.css.ts index c479ad4..a6a9354 100644 --- a/src/commons/components/features/Inputs/Search/Search.css.ts +++ b/src/commons/components/features/Inputs/Search/Search.css.ts @@ -14,127 +14,3 @@ export const wrapper = style({ cursor: 'pointer', }); - -export const glassesWrapper = style({ - display: 'flex', - flexDirection: 'row', -}); - -export const tagWrapper = style({ - display: 'flex', - flexDirection: 'row', - - marginRight: 'auto', -}); - -export const tagBox = style({ - padding: '6px', - borderRadius: '50px', - backgroundColor: '#6A6868', - - fontSize: '12px', - - marginRight: '10px', -}); - -export const OutExpandedWrapper = style({ - position: 'fixed', - top: '0', - left: '0', - right: '0', - bottom: '0', - - display: 'flex', - justifyContent: 'center', - - width: '100vw', // 100%에서 100vw로 변경 - height: '100vh', // 100%에서 100vh로 변경 - - padding: '80px 54px', - - zIndex: '1000', - backgroundColor: 'rgba(0, 0, 0, 0.65)', // 반투명 검은색으로 변경 -}); - -export const expandedWrapper = style({ - position: 'absolute', - top: '0', - left: '0', - right: '0', - bottom: '0', - - display: 'flex', - flexDirection: 'column', - - width: '37rem', - height: '22rem', - - backgroundColor: '#fff', - - borderRadius: '25px', - padding: '20px', - - zIndex: '2000', -}); - -export const searchInput = style({ - width: '100%', - height: '16px', - - marginBottom: '14px', - - backgroundColor: 'transparent', - color: '#000', - - fontSize: '14px', - - border: 'none', - outline: 'none', -}); - -export const expandedTagWrapper = style({ - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - - fontSize: '12px', -}); - -export const relatedTagWrapper = style({ - display: 'flex', - flexDirection: 'column', - - margin: '0', - padding: '0', -}); - -export const relatedTagBox = style({ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - - width: '100%', - - gap: '10px', - - cursor: 'pointer', - - ':focus': { - outline: 'none', - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, - - ':hover': { - backgroundColor: 'rgba(106, 104, 104, 0.1)', - }, -}); - -export const relatedTagText = style({ - fontSize: '12px', - - color: '#000', -}); - -export const focusedTag = style({ - backgroundColor: 'rgba(106, 104, 104, 0.1)', -});