WIP: Search form in header bar

styles/components/icon.css

@@ -26,4 +26,8 @@
   &--back {
     background-image: url('/assets/icons/back.svg');
   }
+
+  &--close {
+    background-image: url('/assets/icons/close.svg');
+  }
 }

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;
+    }
+  }
 }

styles/components/search.css

@@ -35,4 +35,38 @@
     margin-top: -18px;
     right: 7px;
   }
+
+  &--closable {
+    .search {
+      &__field {
+        padding-right: 160px;
+      }
+
+      &__button {
+        right: 50px;
+        transform: translateX(20px);
+        transition: transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98) 100ms;
+
+        &.is-open {
+          transform: translateX(0);
+          transition-delay: 250ms;
+        }
+      }
+
+      &__close {
+        position: absolute;
+        padding: 10px;
+        top: 50%;
+        margin-top: -21px;
+        right: 4px;
+        transform: scale(0.2);
+        transition: transform 400ms cubic-bezier(0.24, 1.12, 0.71, 0.98);
+
+        &.is-open {
+          transform: rotate(180deg) scale(1);
+          transition-delay: 300ms;
+        }
+      }
+    }
+  }
 }