1
0
Fork 0
blog/src/components/molecules/Search/SearchResults.module.css

73 lines
1010 B
CSS

.searchResults {
position: absolute;
left: 0;
right: 0;
z-index: 10;
top: 0;
bottom: 0;
background: var(--body-background-color);
animation: fadein 0.3s;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 91vh;
}
.results {
composes: container from '../../Layout.module.css';
padding: var(--spacer) calc(var(--spacer) / 2);
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 60rem) {
.results {
padding-left: 0;
padding-right: 0;
}
}
.results li {
display: block;
flex: 0 0 48%;
margin-bottom: var(--spacer);
}
@media (min-width: 40rem) {
.results li {
flex-basis: 31%;
}
}
.results li::before {
display: none;
}
.results img {
margin-bottom: 0;
}
.results a {
display: block;
}
.results a > div {
margin-bottom: 0;
}
.results a:hover h4,
.results a:focus h4 {
color: var(--link-color);
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}