143 lines
2.1 KiB
CSS
143 lines
2.1 KiB
CSS
/* CCN — search results page. */
|
|
|
|
.search {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
.search__head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
padding-bottom: var(--space-5);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.search__heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.search__heading .type-h1 {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.search__count {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.search__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
.search__results {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
min-width: 0;
|
|
}
|
|
|
|
.search__pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* The filter rail: a disclosure below desktop, always open on it. */
|
|
.filters__toggle {
|
|
width: 100%;
|
|
list-style: none;
|
|
}
|
|
|
|
.filters__toggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.filters__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
padding-top: var(--space-5);
|
|
}
|
|
|
|
.filters__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.filters__title {
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.filters__clear {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.filters__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.filters__group legend {
|
|
margin-bottom: 10px;
|
|
padding: 0;
|
|
}
|
|
|
|
.filters__range {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.filters__field {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.search {
|
|
gap: var(--space-7);
|
|
padding-top: var(--space-8);
|
|
}
|
|
|
|
.search__body {
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: var(--space-10);
|
|
}
|
|
|
|
.filters {
|
|
flex-shrink: 0;
|
|
width: 260px;
|
|
}
|
|
|
|
.filters__toggle {
|
|
display: none;
|
|
}
|
|
|
|
.filters::details-content {
|
|
display: block;
|
|
content-visibility: visible;
|
|
}
|
|
|
|
.filters__form {
|
|
gap: var(--space-7);
|
|
padding-top: 0;
|
|
}
|
|
}
|