cerc-io/icns-frontend
16
0
Fork 0
forked from LaconicNetwork/icns-frontend
Code Pull Requests Actions Activity

Minor styling fix to search input component and add transition

Browse Source
This commit is contained in:
Thunnini 2022-12-17 18:04:21 +09:00
parent 618442b58e
commit 02b0cde9b1
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/search-input/index.tsx
View File

@ -38,10 +38,9 @@ const SearchContainer = styled.div`
align-items: center; align-items: center;
gap: 0.625rem; gap: 0.625rem;
min-width: 10rem;
height: 2.3rem; height: 2.3rem;
padding: 0.5rem 1.3rem; padding: 0.6rem 1.4rem;
border-radius: 3rem; border-radius: 3rem;
background-color: ${color.grey["700"]}; background-color: ${color.grey["700"]};
@ -66,6 +65,9 @@ const SearchText = styled.input`
font-size: 1rem; font-size: 1rem;
line-height: 1.2rem; line-height: 1.2rem;
width: 5.5rem;
transition: width 0.2s ease-out;
::placeholder, ::placeholder,
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: ${color.grey["400"]}; color: ${color.grey["400"]};
@ -73,5 +75,7 @@ const SearchText = styled.input`
&:focus { &:focus {
outline: none; outline: none;
width: 10rem;
} }
`; `;