blog-static/themes/vanilla/assets/scss/search.scss

95 lines
1.6 KiB
SCSS
Raw Normal View History

2020-12-27 20:08:40 -08:00
@import "variables.scss";
@import "mixins.scss";
$search-input-padding: 0.5rem;
$search-element-padding: 0.5rem 1rem 0.5rem 1rem;
@mixin green-shadow {
box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
}
.stork-input-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
input.stork-input {
@include bordered-block;
font-family: $font-body;
padding: $search-input-padding;
&:active, &:focus {
@include green-shadow;
border-color: $primary-color;
}
flex-grow: 1;
}
.stork-close-button {
@include bordered-block;
font-family: $font-body;
padding: $search-input-padding;
background-color: $code-color;
padding-left: 1.5rem;
padding-right: 1.5rem;
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.stork-output-visible {
@include bordered-block;
border-top: none;
}
.stork-result, .stork-message, .stork-attribution {
padding: $search-element-padding;
}
.stork-message:not(:last-child), .stork-result {
border-bottom: $standard-border;
}
.stork-results {
margin: 0;
padding: 0;
}
.stork-result {
list-style: none;
&.selected {
background-color: $code-color;
}
a:hover {
color: black;
}
}
.stork-title, .stork-excerpt {
margin: 0;
2020-12-28 22:03:04 -08:00
}
.stork-excerpt {
2020-12-27 20:08:40 -08:00
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stork-title {
font-family: $font-heading;
font-size: 1.4rem;
2020-12-28 22:03:04 -08:00
text-align: left;
width: 100%;
2020-12-27 20:08:40 -08:00
}
.stork-highlight {
2020-12-27 22:24:43 -08:00
background-color: lighten($primary-color, 30%);
2020-12-27 20:08:40 -08:00
}