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/search.css
+++ b/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;
+        }
+      }
+    }
+  }
 }