WIP: Search form in header bar

2017-03-20 22:47:46 +01:00
parent 7a6f2d97ac
commit fd029dad9e
7 changed files with 138 additions and 29 deletions
--- a/styles/components/nav.css
+++ b/styles/components/nav.css
@@ -1,9 +1,33 @@
 .nav {
  white-space: nowrap;
+
  &__item {
    display: inline-flex;
+    position: relative;
    & + .nav__item {
      margin-left: 20px;
    }
  }
+
+  &__search {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    visibility: hidden;
+    overflow: hidden;
+    width: 0;
+    margin-top: -25px;
+    opacity: 0.8;
+    transition:
+      width 400ms cubic-bezier(0.24, 1.12, 0.71, 0.98) 100ms,
+      visibility 0s linear 500ms,
+      opacity 200ms linear;
+
+    &.is-open {
+      opacity: 1;
+      width: 600px;
+      visibility: visible;
+      transition-delay: 0s;
+    }
+  }
 }