css-team: first search-bar

git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@39 a672b425-5310-4d7a-af5c-997e18724b81

site/_includes/header.html

@@ -2,6 +2,7 @@
   <span class="boxTitle">
     <a href="/index.html"><img src="/assets/style/logo_white.png" height="50"></a>
   </span>
+  <span class="box-search"><input type="text" id="search-bar"><img src="/assets/style/lens.png" onclick="showSearch()"></span>
   <nav class="boxItem">
     <div>Learn
       <ul>

site/_sass/_header.scss

@@ -84,4 +84,37 @@ span {
       display: block;
     }
   }
+}
+
+.box-search{
+  width: 350px;
+  height: calc(50px + 1em);
+  float:right;
+  left: 60%;
+}
+
+.box-search input{
+background-color: #131313;
+    border: none;
+    height: 20px;
+    transition: 500ms;
+    border-bottom: 2px solid white;
+    position: absolute;
+    top: calc(50% - 12px);
+    margin-left:calc(18% + 22px);
+    opacity:0;
+}
+
+.box-search img{
+vertical-align: middle;
+    cursor: pointer;
+    width: 22px;
+    position: absolute;
+    left: calc(100% - 210px);
+    top: calc(50% - 12px);
+}
+
+.anim-search{
+  margin-left:0;
+  opacity:1;
 }