| @import "src/app/styles/colors"; |
| @import "src/app/styles/font"; |
| @import "src/app/styles/variables"; |
| |
| .search { |
| display: flex; |
| height: 36px; |
| border-radius: 32px; |
| box-sizing: border-box; |
| align-items: center; |
| width: 36px; |
| padding-left: 4px; |
| cursor: pointer; |
| flex-direction: row-reverse; |
| |
| &:hover { |
| background-color: $black-08; |
| } |
| |
| @media (max-width: $small) { |
| display: none; |
| } |
| } |
| |
| .show-search-input { |
| animation: 0.3s open_search; |
| width: 250px; |
| padding-left: 22.4px; |
| background-color: $black-08; |
| } |
| |
| .search-input { |
| color: $white; |
| font-family: "Roboto", "Helvetica", "Arial", sans-serif; |
| line-height: 19px; |
| font-size: $fs-small; |
| background-color: transparent; |
| border: none; |
| outline: none; |
| height: 36px; |
| width: 100%; |
| |
| &::-webkit-input-placeholder { |
| color: $white-35; |
| } |
| } |
| |
| .search-icon { |
| padding: 0 7px 3px 0; |
| color: $white-35; |
| } |
| |
| .open-search { |
| animation: 0.3s move_search-icon; |
| padding-right: 16px; |
| padding-left: 4px; |
| } |
| |
| @keyframes open_search { |
| from { |
| width: 36px; |
| } |
| to { |
| width: 250px; |
| } |
| } |
| |
| @keyframes open_search_large { |
| from { |
| width: 36px; |
| } |
| to { |
| width: 150px; |
| } |
| } |
| |
| @keyframes move_search-icon { |
| from { |
| padding: 0 7px 3px 0; |
| } |
| to { |
| padding-right: 16px; |
| } |
| } |