| | |
| | | @use "../../styles/variables.scss" as *; |
| | | |
| | | .search { |
| | | min-width: 5rem; |
| | | max-width: 12rem; |
| | | min-width: fit-content; |
| | | max-width: 14rem; |
| | | flex-grow: 0.3; |
| | | margin: 0 1.5rem; |
| | | |
| | | & > #search-icon { |
| | | background-color: var(--lightgray); |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | white-space: nowrap; |
| | | |
| | | & > div { |
| | | flex-grow: 1; |
| | |
| | | |
| | | & > #search-container { |
| | | position: fixed; |
| | | contain: layout; |
| | | z-index: 999; |
| | | left: 0; |
| | | top: 0; |
| | | width: 100vw; |
| | | height: 100vh; |
| | | overflow: scroll; |
| | | overflow-y: auto; |
| | | display: none; |
| | | backdrop-filter: blur(4px); |
| | | |
| | |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | | |
| | | @media all and (max-width: 1200px) { |
| | | @media all and (max-width: $fullPageWidth) { |
| | | width: 90%; |
| | | } |
| | | |
| | |
| | | width: 100%; |
| | | border-radius: 5px; |
| | | background: var(--light); |
| | | box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16); |
| | | box-shadow: |
| | | 0 14px 50px rgba(27, 33, 48, 0.12), |
| | | 0 10px 30px rgba(27, 33, 48, 0.16); |
| | | margin-bottom: 2em; |
| | | } |
| | | |
| | |
| | | font-weight: 700; |
| | | } |
| | | |
| | | &:hover, &:focus { |
| | | &:hover, |
| | | &:focus { |
| | | background: var(--lightgray); |
| | | } |
| | | |
| | |
| | | margin: 0; |
| | | } |
| | | |
| | | & > p { |
| | | & > p { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |