48 lines
846 B
SCSS
48 lines
846 B
SCSS
#search {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
i {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.search-input {
|
|
color: $body-color;
|
|
outline: none;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.search-results-box {
|
|
position: absolute;
|
|
top: 2.75rem;
|
|
z-index: 50;
|
|
width: 90vw;
|
|
max-width: 750px;
|
|
max-height: 50vh;
|
|
|
|
background: $search-bg;
|
|
border: $border-color solid 1px;
|
|
border-radius: 0 0 $border-radius $border-radius;
|
|
|
|
.search-results {
|
|
width: 100%; /** same as .search-results-box **/
|
|
max-height: calc(50vh - 1.25em); /** same as .search-results-box - border (top/bottom) **/
|
|
overflow: auto;
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include color-mode(dark) {
|
|
#search {
|
|
.search-input {
|
|
color: $body-color-dark;
|
|
}
|
|
.search-results-box {
|
|
background: $dark-bg;
|
|
border: $border-color-dark solid 1px;
|
|
}
|
|
}
|
|
}
|