app/assets/stylesheets/modules/search_across.scss
.blacklight-search_across {
.sort-pagination {
flex-wrap: wrap;
}
.page-links {
@extend .w-100;
}
.search-widgets {
@extend .w-100;
display: flex;
justify-content: flex-end;
}
.btn-group {
margin-left: 0.5rem;
}
.search-group {
margin-left: 0;
margin-right: auto;
z-index: 0;
}
}
.exhibit-list {
.card {
flex-direction: row;
margin-bottom: $spacer;
@media (max-width: breakpoint-max(sm)) {
background-color: unset !important;
border: unset;
}
}
.card-body {
@media (max-width: breakpoint-max(sm)) {
padding-top: 0;
}
padding-bottom: $spacer * 0.5;
padding-top: $spacer * 0.5;
flex-direction: column;
}
.card-title {
@extend .h3;
@media (max-width: breakpoint-max(sm)) {
font-size: 20px;
}
.badge {
font-size: 75%; // Reset font-size to what bootstrap sets
vertical-align: bottom;
}
}
.card-img {
@media (max-width: breakpoint-max(sm)) {
max-width: 100px;
}
display: flex;
flex-direction: column;
max-width: 200px;
width: auto;
img {
object-fit: contain;
}
}
.exhibit-description,
&:hover .exhibit-description,
&:focus-within .exhibit-description {
@extend .my-1;
max-height: inherit;
}
.subtitle {
@media (max-width: breakpoint-max(sm)) {
margin-bottom: $spacer * 0.25;
}
font-size: 1rem;
line-height: $headings-line-height;
text-align: left;
}
.description {
-webkit-line-clamp: 4;
max-width: 75ch;
@media (max-width: breakpoint-max(sm)) {
display: none;
}
}
.exhibit-card {
padding-bottom: 0;
}
}
.exhibit-gallery {
.card-body {
@extend .p-3;
text-align: center;
}
.card-title {
@extend .h4;
}
.description {
display: none;
line-clamp: 4;
}
.exhibit-description,
&:hover .exhibit-description,
&:focus-within .exhibit-description {
@extend .mt-2;
margin-bottom: 0;
max-height: inherit;
}
.exhibit-card {
padding-bottom: 0;
}
}
.search-across-form {
input {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
// dropdown-men is position: static on small
// viewports but we want it to remain absolute
.dropdown-menu {
position: absolute;
}
.input-group {
flex-wrap: nowrap;
}
.site-search-type {
display: flex;
flex-grow: 3;
}
}