sliding search
This commit is contained in:
parent
596b077797
commit
91df459dc6
3 changed files with 19 additions and 0 deletions
6
content/assets/scripts/search.coffee
Normal file
6
content/assets/scripts/search.coffee
Normal file
|
@ -0,0 +1,6 @@
|
|||
$ ->
|
||||
$('#tipue_search_input_field').focusin ->
|
||||
$('#tipue_search_input').addClass("focused")
|
||||
|
||||
$('#tipue_search_input_field').focusout ->
|
||||
$('#tipue_search_input').removeClass("focused")
|
|
@ -96,9 +96,16 @@ footer.footer {
|
|||
font: inherit;
|
||||
color: inherit;
|
||||
|
||||
width: 40px;
|
||||
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
transition: all 0.5s;
|
||||
|
||||
|
||||
input {
|
||||
background: none;
|
||||
border: none;
|
||||
|
@ -111,6 +118,11 @@ footer.footer {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover, &:focus, &.focused {
|
||||
width: 170px;
|
||||
border: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content: "\f002 ";
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
<link href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch_set.js"></script>
|
||||
<%= asset :js, :tipuesearch %>
|
||||
<%= asset :js, :search %>
|
||||
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
|
|
Loading…
Reference in a new issue