| | |
| | | } |
| | | |
| | | & > #search-layout { |
| | | display: flex; |
| | | display: none; |
| | | flex-direction: row; |
| | | visibility: hidden; |
| | | border: 1px solid var(--lightgray); |
| | | |
| | | &.display-results { |
| | | display: flex; |
| | | } |
| | | |
| | | @media all and (min-width: $tabletBreakpoint) { |
| | | &[data-preview] { |
| | | & .result-card > p.preview { |
| | |
| | | } |
| | | |
| | | @media all and (max-width: $tabletBreakpoint) { |
| | | display: block; |
| | | display: block !important; |
| | | |
| | | & > *:not(#results-container) { |
| | | display: none !important; |
| | | } |
| | |
| | | & .highlight { |
| | | background: color-mix(in srgb, var(--tertiary) 60%, transparent); |
| | | border-radius: 5px; |
| | | scroll-margin-top: 2rem; |
| | | } |
| | | |
| | | & > #preview-container { |
| | |
| | | font-family: inherit; |
| | | color: var(--dark); |
| | | line-height: 1.5em; |
| | | font-weight: 400; |
| | | font-weight: $normalWeight; |
| | | background: var(--light); |
| | | border-top-right-radius: 5px; |
| | | border-bottom-right-radius: 5px; |
| | |
| | | margin: 0 auto; |
| | | width: min($pageWidth, 100%); |
| | | } |
| | | |
| | | a.internal { |
| | | background-color: none; |
| | | } |
| | | } |
| | | |
| | | & > #results-container { |
| | |
| | | outline: none; |
| | | font-weight: inherit; |
| | | |
| | | &:hover, |
| | | &:focus, |
| | | &.focus { |
| | | background: var(--lightgray); |
| | |
| | | padding: 0.2rem 0.4rem; |
| | | margin: 0 0.1rem; |
| | | line-height: 1.4rem; |
| | | font-weight: bold; |
| | | font-weight: $boldWeight; |
| | | color: var(--secondary); |
| | | |
| | | &.match-tag { |