1
0
mirror of synced 2025-12-23 11:54:18 -05:00
Files
docs/components/Search.module.scss
Kevin Heis f17c7a2598 Update search to use rem units where possible (#22970)
* Update search to use rem units where possible

* Use more primer classes

* Move more search to primer classes
2021-11-18 20:43:31 +00:00

48 lines
811 B
SCSS

/* TODO remove mark styling if https://github.com/primer/css/pull/1756 ships */
.resultsContainer mark {
background: none;
color: inherit;
}
.searchResultContent mark {
color: var(--color-fg-default);
background-color: var(--color-attention-subtle);
}
/* end TODO */
.searchResultContent {
max-height: 4rem;
}
.resultsContainerHeader {
width: 0;
border-radius: 0 0 0 4px; // primer rounded-1
transition: width 0.3s ease-in-out;
}
.resultsContainerOpen.resultsContainerHeader {
width: 60vw;
max-width: 48rem;
}
.searchInput {
transition: width 0.3s ease-in-out;
}
.searchInputHeader {
width: 16rem;
}
.headerSearchOpen {
background: var(--color-primer-canvas-backdrop);
}
.searchInputExpanded {
width: 54vw;
max-width: 43rem;
}
.headerSearchResults {
max-height: 80vh;
}