WIP search input on shopfront page.

app/assets/stylesheets/darkswarm/_shop-inputs.css.sass

@@ -9,8 +9,7 @@
   @include placeholder(rgba(0,0,0,0.4), #777)
   
   input#search
-    @include big-input(rgba(0,0,0,0.3), #777, $clr-brick)
-    @include big-input-static
+    @include medium-input(rgba(0,0,0,0.3), #777, $clr-brick)
 
   // ordering
   product

app/assets/stylesheets/darkswarm/big-input.sass

@@ -13,7 +13,7 @@
   border: 2px solid $input
   font-size: 2rem 
   box-shadow: 0
-  padding: 0.75rem 1rem 0.35rem 1rem
+  padding: 0.75rem 1rem 0.35rem
   height: auto
   width: 100%
   margin-bottom: 0.5rem
@@ -33,8 +33,9 @@
     background: white 
     background: rgba(255,255,255,0.5)
     text-shadow: 0 0 10px #ffffff
-    padding: 1.5rem 1rem 1rem 1rem
+    padding: 1.5rem 1rem 1rem
     letter-spacing: 0.02rem
+    outline: none
 
 @mixin big-input-static
   outline: 0
@@ -42,6 +43,36 @@
     padding: 0.75rem 1rem 0.35rem 1rem
     letter-spacing: 0
 
+@mixin medium-input($input, $inputhvr, $inputactv)
+  @include avenir
+  @include csstrans
+  @include border-radius(0.5rem)
+  background: rgba(255,255,255,0.1)
+  border: 2px solid $input
+  font-size: 1rem 
+  box-shadow: 0
+  padding: 0.75rem 1rem 0.35rem
+  height: auto
+  width: 100%
+  margin-bottom: 0.5rem
+  box-shadow: none
+  color: $inputactv
+
+  &:hover
+    @include box-shadow(0 1px 1px 0 rgba(255,255,255,0.25))
+    border: 2px solid $inputhvr
+    color: $inputactv
+
+  &:active, &:focus, &.active
+    border: 2px solid $inputactv
+    color: $inputactv
+    background: white 
+    background: rgba(255,255,255,0.5)
+    text-shadow: 0 0 10px #ffffff
+    padding: 1em 1rem 0.75rem
+    letter-spacing: 0.02rem
+    outline: none
+
 @mixin placeholder($placeholder, $placeholderhvr)
   ::-webkit-input-placeholder
     color: $placeholder