styled.ts 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import styled from 'styled-components';
  2. export const Container = styled.div`
  3. position: relative;
  4. cursor: pointer;
  5. font-size: 1rem;
  6. min-width: 74px;
  7. display: inline-block;
  8. `;
  9. export const Selected = styled.div`
  10. box-sizing: border-box;
  11. display: inline-flex;
  12. align-items: center;
  13. background-color: ${({ theme }) => theme.colors.gray};
  14. height: 32px;
  15. border-radius: 4px;
  16. padding: 0 6px 0 10px;
  17. transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  18. outline: none;
  19. width: 100%;
  20. `;
  21. export const InputContent = styled.input`
  22. background-color: ${({ theme }) => theme.colors.gray};
  23. border: none;
  24. outline: none;
  25. width: 50%;
  26. `;
  27. export const Content = styled.div`
  28. background-color: ${({ theme }) => theme.colors.gray};
  29. border: none;
  30. outline: none;
  31. width: 100%;
  32. display: flex;
  33. align-items: center;
  34. margin-right: 6px;
  35. `;
  36. export const OptionWrapper = styled.div`
  37. position: fixed;
  38. background-color: white;
  39. border-radius: 4px;
  40. top: 0;
  41. left: 0;
  42. padding: 6px 0;
  43. box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.38);
  44. max-height: 420px;
  45. z-index: 100;
  46. box-sizing: border-box;
  47. `;
  48. export const Option = styled.span`
  49. display: flex;
  50. padding: 5px 24px 5px 16px;
  51. :hover {
  52. background-color: ${({ theme }) => theme.colors['soft-blue']};
  53. }
  54. `;