Files
pillar/src/styles/components/_search.sass
Tobias Johansson 6ae9a5ddeb Quick-Search: Added Quick-search in the topbar
Changed how and what we store in elastic to unify it with how we store
things in mongodb so we can have more generic javascript code
to render the data.

Elastic changes:
  Added:
  Node.project.url

  Altered to store id instead of url
  Node.picture

  Made Post searchable

./manage.py elastic reset_index
./manage.py elastic reindex

Thanks to Pablo and Sybren
2018-11-22 15:31:53 +01:00

68 lines
1.2 KiB
Sass

#search-overlay
position: fixed
top: 0
left: 0
right: 0
bottom: 0
width: 100%
height: 100%
visibility: hidden
opacity: 0
overflow-y: scroll
z-index: $zindex-sticky + 1
transition: visibility $long-transition, opacity $long-transition
&.show
opacity: 1
visibility: visible
background-color: rgba($body-bg, .7)
.qs-result
max-width: 80vw
#qs-toggle
opacity: 1
visibility: visible
.quick-search
opacity: 0
transition: opacity $short-transition
visibility: hidden
.quick-search.show
opacity: 1
visibility: visible
.qs-input
input
border-style: solid
border-radius: $border-radius
height: $input-height-inner
padding: $input-padding-y 25px $input-padding-y $input-padding-x
width: 30vw
&:focus
&+i+select
border-color: $color-primary
&.multi-scope // has a select next to it
border-right: none
border-bottom-right-radius: 0
border-top-right-radius: 0
select
border-width: 2px
border-left: none
border-bottom-right-radius: $border-radius
border-top-right-radius: $border-radius
height: $input-height-inner
margin-left: 5px
padding: $input-padding-y $input-padding-x
&:focus, option
// background-color: $dark
// color: $light
.qs-busy-symbol
margin-left: -2em