Style Searchbar. Add basic fade animations for searchbar and navigation.

cloud/static/assets/js/layout.min.js

@@ -4,12 +4,12 @@ var searchToggleStatus = false
 
 /* Selectors
    ================================================================== */
-var searchButton = document.querySelector('#searchButton')
-var searchCloseButton = document.querySelector('#searchCloseButton')
-var searchNav = document.querySelector('#searchNav')
-var searchNavInput = document.querySelector('#searchNav input')
-var navbarNav = document.querySelector('#navbarNav')
-var profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
+var searchButton = document.querySelector('#searchButton'),
+    searchCloseButton = document.querySelector('#searchCloseButton'),
+    searchNav = document.querySelector('#searchNav'),
+    searchNavInput = document.querySelector('#searchNav input'),
+    navbarNav = document.querySelector('#navbarNav'),
+    profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
 
 /* Interactions
    ================================================================== */
@@ -21,11 +21,11 @@ searchCloseButton.addEventListener('click', closeSearch)
    ================================================================== */
 function showSearch() {
   searchToggleStatus = true
-  searchNav.classList.add('active')
+  searchNav.classList.remove('hidden')
   searchNavInput.focus()
-  navbarNav.classList.add('invisible')
+  navbarNav.classList.add('hidden')
   profileMenu.classList.add('visible')
-  // $('#search-overlay').addClass('active')
+  // $('#search-overlay').addClass('visible')
   // if (searchToggleStatus == true) {
   //   // $(document.body).click(function() {
   //     // console.log('detect click outside');      
@@ -48,9 +48,8 @@ function showSearch() {
 }
 
 function closeSearch() {
-  console.log('close button working')
-  searchNav.classList.remove('active')
-  navbarNav.classList.remove('invisible')
+  searchNav.classList.add('hidden')
+  navbarNav.classList.remove('hidden')
   profileMenu.classList.remove('visible')
   // $('#search-overlay').removeClass('active')
 }

src/scripts/layout.js

@@ -4,12 +4,12 @@ var searchToggleStatus = false
 
 /* Selectors
    ================================================================== */
-var searchButton = document.querySelector('#searchButton')
-var searchCloseButton = document.querySelector('#searchCloseButton')
-var searchNav = document.querySelector('#searchNav')
-var searchNavInput = document.querySelector('#searchNav input')
-var navbarNav = document.querySelector('#navbarNav')
-var profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
+var searchButton = document.querySelector('#searchButton'),
+    searchCloseButton = document.querySelector('#searchCloseButton'),
+    searchNav = document.querySelector('#searchNav'),
+    searchNavInput = document.querySelector('#searchNav input'),
+    navbarNav = document.querySelector('#navbarNav'),
+    profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
 
 /* Interactions
    ================================================================== */
@@ -21,11 +21,11 @@ searchCloseButton.addEventListener('click', closeSearch)
    ================================================================== */
 function showSearch() {
   searchToggleStatus = true
-  searchNav.classList.add('active')
+  searchNav.classList.remove('hidden')
   searchNavInput.focus()
-  navbarNav.classList.add('invisible')
+  navbarNav.classList.add('hidden')
   profileMenu.classList.add('visible')
-  // $('#search-overlay').addClass('active')
+  // $('#search-overlay').addClass('visible')
   // if (searchToggleStatus == true) {
   //   // $(document.body).click(function() {
   //     // console.log('detect click outside');      
@@ -48,9 +48,8 @@ function showSearch() {
 }
 
 function closeSearch() {
-  console.log('close button working')
-  searchNav.classList.remove('active')
-  navbarNav.classList.remove('invisible')
+  searchNav.classList.add('hidden')
+  navbarNav.classList.remove('hidden')
   profileMenu.classList.remove('visible')
   // $('#search-overlay').removeClass('active')
 }

src/styles/_navbar.sass

@@ -83,7 +83,16 @@ nav.navbar
     transition: none
     display: none
   #navbarNav
-    &.invisible
+    animation-timing-function: cubic-bezier(0.4,0,0.2,1)
+    animation-fill-mode: backwards
+    opacity: 1
+    transition: opacity .15s ease-in
+    visibility: visible
+    &.hidden
+      animation-fill-mode: backwards
+      animation-timing-function: cubic-bezier(0.4,0,0.2,1)
+      opacity: 0
+      transition: visibility 0s .15s, opacity .15s ease-in
       visibility: hidden
     .dropdown-toggle::after
       display:none !important
@@ -144,6 +153,7 @@ nav.navbar
     list-style: none
     background-color: #fff
     background-clip: padding-box
+    box-shadow: 0px 4px 4px 0px hsla(0, 0%, 80%, 0.25)
   .dropdown:hover
     background: none
     &>.dropdown-menu
@@ -162,30 +172,39 @@ nav.navbar
     outline: none
 
 #searchNav
-  background-color: #fff
-  position: absolute
-  display: none
+  display: flex
   align-items: center
   justify-content: center
-  width: calc(100% - 40px)
+  background-color: #fff
   max-height: 56px
+  position: absolute
+  width: calc(100% - 40px)
   z-index: 1001
+  animation-timing-function: cubic-bezier(0.4,0,0.2,1)
+  animation-fill-mode: backwards
+  opacity: 1
+  transition: opacity .15s ease-in
+  visibility: visible
   +media-breakpoint-up(md)
     width: calc(100% - 25px)
-  &.active
-    display: flex
+  &.hidden
+    animation-fill-mode: backwards
+    animation-timing-function: cubic-bezier(0.4,0,0.2,1)
+    opacity: 0
+    transition: visibility 0s .15s, opacity .15s ease-in
+    visibility: hidden
   .search-container
     position: relative
     max-width: 560px
     width: 100%
   input
-    padding: 8px 20px 8px 46px
+    padding: 11px 20px 11px 46px
     color: #4d4e53
     box-shadow: none
-    border: 1px solid #bebebe
+    border: 1px solid #e5e5e5
     border-radius: 4px
     border-bottom-color: none
-    background-color: #fff
+    background-color: #fcfcfc
     font-size: 18px
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
     width: 100%
@@ -193,13 +212,13 @@ nav.navbar
   .search-icon
     cursor: pointer
     position: absolute
-    top: 11px
+    top: 14px
     left: 11px
   #searchCloseButton
     cursor: pointer
     position: absolute
     right: 16px
-    top: 9px
+    top: 12px
 // #search-overlay.active {
 //   opacity: 1;
 //   visibility: visible;

src/templates/layout.pug

@@ -94,7 +94,7 @@ html(lang="en")
 					span
 					span
 				//- Search Bar
-				#searchNav
+				#searchNav.hidden
 					span.search-container
 						input#cloud-search(type="text", placeholder="Search Blender Cloud")
 						i.search-icon.pi-search

static/assets/img/icons/icon-close-button.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+  <defs>
+    <polygon id="icon-close-button-a" points="14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="icon-close-button-b" fill="#fff">
+      <use xlink:href="#icon-close-button-a"/>
+    </mask>
+    <g fill="#111" mask="url(#icon-close-button-b)">
+      <rect width="24" height="24" transform="translate(-5 -5)"/>
+    </g>
+  </g>
+</svg>