mirror of
https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org.git
synced 2024-09-19 09:57:52 +00:00
123 lines
2 KiB
SCSS
123 lines
2 KiB
SCSS
// Search
|
|
|
|
.td-search {
|
|
background: transparent;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
// Search icon
|
|
&__icon {
|
|
// Vertically center the content.
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
// Position this on the left of the input.
|
|
position: absolute;
|
|
left: 0.75em;
|
|
|
|
// Click-through to the underlying input.
|
|
pointer-events: none;
|
|
|
|
&:before {
|
|
@extend .fa;
|
|
content: fa-content($fa-var-search);
|
|
}
|
|
|
|
// Styling adjustments for the navbar
|
|
@at-root {
|
|
.td-navbar & {
|
|
color: $navbar-dark-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Search input element
|
|
&__input {
|
|
width: 100%;
|
|
text-indent: 1.25em;
|
|
|
|
&:not(:focus) {
|
|
background: transparent;
|
|
}
|
|
|
|
&.form-control:focus {
|
|
border-color: tint-color($primary, 95%);
|
|
box-shadow: 0 0 0 2px tint-color($primary, 40%);
|
|
color: inherit;
|
|
}
|
|
|
|
// Styling adjustments for the navbar
|
|
@at-root {
|
|
.td-navbar & {
|
|
border: none;
|
|
color: $navbar-dark-color;
|
|
|
|
@include placeholder {
|
|
color: $navbar-dark-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide icon on focus
|
|
&:focus-within {
|
|
.td-search__icon {
|
|
display: none;
|
|
}
|
|
|
|
.td-search-input {
|
|
text-indent: 0px;
|
|
}
|
|
}
|
|
|
|
&:not(:focus-within) {
|
|
color: $input-placeholder-color;
|
|
}
|
|
}
|
|
|
|
.td-sidebar .td-search--algolia {
|
|
display: block;
|
|
padding: 0 0.5rem;
|
|
> button {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Offline search
|
|
|
|
.td-search--offline {
|
|
&:focus-within {
|
|
// Don't hide the search icon on focus: this gives better UX when user
|
|
// explores content of search-results popup and focus is lost.
|
|
|
|
.td-search__icon {
|
|
display: flex;
|
|
color: $input-placeholder-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.td-offline-search-results {
|
|
max-width: 90%;
|
|
|
|
.card {
|
|
margin-bottom: $spacer * 0.5;
|
|
|
|
.card-header {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
&__close-button {
|
|
// cursor: pointer;
|
|
float: right;
|
|
|
|
&:after {
|
|
@extend .fas;
|
|
content: fa-content($fa-var-times);
|
|
}
|
|
}
|
|
}
|