website/assets/scss/components/_search.scss
2021-03-09 18:56:02 +05:30

75 lines
1.1 KiB
SCSS

.navbar-form {
position: relative;
}
#suggestions {
position: absolute;
right: 0;
margin-top: 0.5rem;
width: calc(100vw - 3rem);
}
#suggestions a {
display: block;
text-decoration: none;
padding: 0.75rem;
margin: 0 0.5rem;
}
#suggestions a:focus {
background: $gray-100;
outline: 0;
}
#suggestions div:not(:first-child) {
border-top: 1px dashed $gray-200;
}
#suggestions div:first-child {
margin-top: 0.5rem;
}
#suggestions div:last-child {
margin-bottom: 0.5rem;
}
#suggestions a:hover {
background: $gray-100;
}
#suggestions span {
display: flex;
font-size: $font-size-base;
}
#suggestions span:first-child {
font-weight: $headings-font-weight;
color: $black;
}
#suggestions span:nth-child(2) {
color: $gray-700;
}
@include media-breakpoint-up(sm) {
#suggestions {
width: 30rem;
}
#suggestions a {
display: flex;
}
#suggestions span:first-child {
width: 9rem;
padding-right: 1rem;
border-right: 1px solid $gray-200;
display: inline-block;
text-align: right;
}
#suggestions span:nth-child(2) {
width: 19rem;
padding-left: 1rem;
}
}