From 91df459dc6fbfdef837da4b3ee7542a2a24ad2f3 Mon Sep 17 00:00:00 2001 From: Lorin Werthen Date: Sat, 8 Oct 2016 19:18:37 +0200 Subject: [PATCH] sliding search --- content/assets/scripts/search.coffee | 6 ++++++ content/assets/stylesheets/includes/general.scss | 12 ++++++++++++ layouts/default.erb | 1 + 3 files changed, 19 insertions(+) create mode 100644 content/assets/scripts/search.coffee diff --git a/content/assets/scripts/search.coffee b/content/assets/scripts/search.coffee new file mode 100644 index 0000000..dce58ed --- /dev/null +++ b/content/assets/scripts/search.coffee @@ -0,0 +1,6 @@ +$ -> + $('#tipue_search_input_field').focusin -> + $('#tipue_search_input').addClass("focused") + + $('#tipue_search_input_field').focusout -> + $('#tipue_search_input').removeClass("focused") diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss index 93e12ab..c38264d 100644 --- a/content/assets/stylesheets/includes/general.scss +++ b/content/assets/stylesheets/includes/general.scss @@ -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 "; diff --git a/layouts/default.erb b/layouts/default.erb index 9ecec65..ec8e71f 100644 --- a/layouts/default.erb +++ b/layouts/default.erb @@ -25,6 +25,7 @@ <%= asset :js, :tipuesearch %> + <%= asset :js, :search %>