Styling for big sexy search bar

app/assets/stylesheets/darkswarm/active_table_search.css.sass

@@ -9,7 +9,6 @@
 
 .filter-box
   background: rgba(255,255,255,0.5)
-  margin-top: 5rem
 
   .tdhead
     padding: 0.25rem 0.5rem
@@ -76,16 +75,18 @@
   position: relative
 
   i.ofn-i_020-search
-    position: absolute
-    left: 26px
-    top: 12px
-    font-size: 1.6em
-    z-index: 2
-    color: #b2b2b2
+    // position: absolute
+    // left: 26px
+    // top: 12px
+    // font-size: 1.6em
+    // z-index: 2
+    // color: #b2b2b2
   
   input[type="text"]
     font-size: 2em  
     @include big-input
-    padding-left: 44px
+    // padding-left: 44px
   
+  placeholder
+    color: $disabled-dark
 

app/assets/stylesheets/darkswarm/animations.sass

@@ -1,3 +1,58 @@
+@import mixins
+
+// ANIMATION FUNCTIONS
+
+@-webkit-keyframes slideInDown
+  0%
+    opacity: 0
+    -webkit-transform: translateY(-20px)
+    transform: translateY(-20px)
+  100%
+    -webkit-transform: translateY(0)
+    transform: translateY(0)
+
+@keyframes slideInDown
+  0%
+    opacity: 0
+    -webkit-transform: translateY(-20px)
+    -ms-transform: translateY(-20px)
+    transform: translateY(-20px)
+  100%
+    -webkit-transform: translateY(0)
+    -ms-transform: translateY(0)
+    transform: translateY(0)
+
+@-webkit-keyframes slideOutUp
+  0%
+    -webkit-transform: translateY(0)
+    transform: translateY(0)
+  100%
+    opacity: 0
+    -webkit-transform: translateY(-20px)
+    transform: translateY(-20px)
+
+
+@keyframes slideOutUp
+  0%
+    -webkit-transform: translateY(0)
+    -ms-transform: translateY(0)
+    transform: translateY(0)
+
+@-webkit-keyframes fadeIn
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+
+@keyframes fadeIn
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+// ANIMATION CLASSES
+
 .fade
   opacity: 0
   -webkit-transition: opacity .15s linear
@@ -53,16 +108,36 @@
 
 
 .animate-show
-  -webkit-transition: all linear 0.25s
-  transition: all linear 0.25s
-  line-height: 20px
-  opacity: 1
+  -webkit-animation-name: slideInDown
+  animation-name: slideInDown
+  -webkit-animation-duration: 0.5s
+  animation-duration: 0.5s
+  -webkit-animation-fill-mode: both
+  animation-fill-mode: both
+  // line-height: 20px
+  // opacity: 1
 
 .animate-show.ng-hide-add,
 .animate-show.ng-hide-remove
-  display: block !important
+  // display: block !important
 
 .animate-show.ng-hide
-  line-height: 0
-  opacity: 0
-  padding: 0 10px
+  -webkit-animation-name: slideOutUp
+  animation-name: slideOutUp
+  -webkit-animation-duration: 0.15s
+  animation-duration: 0.15s
+  -webkit-animation-fill-mode: both
+  animation-fill-mode: both
+  // line-height: 0
+  // opacity: 0
+  // padding: 0 10px
+
+.row.animate-show ~ .row
+  -webkit-animation-name: fadeIn
+  animation-name: fadeIn
+  -webkit-animation-duration: 0.5s
+  animation-duration: 0.5s
+  -webkit-animation-fill-mode: both
+  animation-fill-mode: both
+
+

app/assets/stylesheets/darkswarm/mixins.sass

@@ -9,17 +9,22 @@
   padding-bottom: 100px
 
 @mixin big-input 
-  border: 1px solid #999
-  font-size: 18px
+  // border: 1px solid #999
+  background: transparent
+  border: none
+  border-bottom: 1px dotted black
+  font-size: 2rem
   @extend .avenir
   box-shadow: 0
-  padding: 0.75em 1em
+  padding: 1rem 0 0.5rem 0
   height: auto
   margin-bottom: 0.1rem
-  background: rgba(255,255,255,0.65)
+  box-shadow: none
+  // background: rgba(255,255,255,0.65)
   &:active, &:hover, &:focus
-    background: rgba(255,255,255,1)
-    border-color: #888
+    color: black
+    // background: rgba(255,255,255,1)
+    // border-color: #888
 
 @mixin disabled
   color: $disabled-bright
@@ -41,6 +46,18 @@
   -webkit-border-radius: $border-radius
   border-radius: $border-radius
 
+@mixin transform-translate($translate)
+  -ms-transform: $translate
+  -webkit-transform: $translate
+  transform: $translate
+
+@mixin transform-scale($scale)
+  -moz-transform: $scale
+  -webkit-transform: $scale
+  -o-transform: $scale
+  -ms-transform: $scale
+  transform: $scale
+
 // Typography \\
 
 @mixin avenir

app/views/producers/index.html.haml

@@ -11,12 +11,14 @@
 
   #active-table-search.row.pad-top
     .small-12.columns
-      %i.ofn-i_020-search
       %input{type: :text, 
       "ng-model" => "query", 
-      placeholder: "Search postcode, suburb or producer name...",
+      placeholder: "Search Producer <or> Suburb / Postcode / State",
       "ng-debounce" => "150",
       "ofn-disable-enter" => true}
+      / %placeholder
+      /   %i.ofn-i_020-search
+      /   Search Producer or by Suburb / Postcode / State 
 
   = render partial: "producers/filters"