Styled search-bar

4 files changed, 53 insertions, 24 deletions

diff --git a/res/css/partials/base.scss b/res/css/partials/base.scss
index b9b14886..5c76b51f 100644
--- a/res/css/partials/base.scss
+++ b/res/css/partials/base.scss
@@ -1,6 +1,7 @@
 @import "../modules/colors";
 @import "../modules/mixins";
 @import "../modules/typography";
+@import "../modules/positions";
 
 //Globals
 html, body {
@@ -37,4 +38,32 @@ a:hover {
 
 a:active {
   color: #FFF;
+}
+
+//input box stuff
+input{
+  background-color: white;
+  color: #363636; //$dark-grey
+  border: 0;
+  &:focus {
+    border: 0;
+    outline: 0;
+    background-color: white;
+  }
+  font-size: $h3-size;
+}
+
+::-webkit-input-placeholder { /* WebKit browsers */
+  color:    #919095;//$mid-grey
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  color:    #919095;//$mid-grey
+  opacity:  1;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+  color:    #919095;//$mid-grey
+  opacity:  1;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+  color:    #919095;//$mid-grey
 }
\ No newline at end of file
diff --git a/res/css/partials/input-field.scss b/res/css/partials/input-field.scss
index 5b4e478f..39f5bdc2 100644
--- a/res/css/partials/input-field.scss
+++ b/res/css/partials/input-field.scss
@@ -1,18 +1,4 @@
-input{
-  background-color: rgba(17,17,17,0.8);
-  color: white;
-  border-width: 1px;
-  border-color: #303030;
-  font-size:14px;
 
-  outline:none;
-  border-color:#303030;
-  box-shadow:0 0 0px #303030;
-  -webkit-transition: all 0.04s ease-in-out;
-  -moz-transition: all 0.04s ease-in-out;
-  -ms-transition: all 0.04s ease-in-out;
-  -o-transition: all 0.04s ease-in-out;
-}
 
 #textinputui {
   position: fixed;
@@ -29,9 +15,6 @@ input{
   width:900px;
 }
 
-input:focus {
-}
-
 #suggestion{
   list-style-type: none;
 }
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index 1353f2fd..b832aca0 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -1,9 +1,26 @@
-#search {
-  height: 30px;
-  max-width: 100%;
+.search-bar{
+  position: fixed;
+  top: $top-bar-height;
+  width:100%;
+  height:$search-bar-height;
+  box-shadow:black;
+  alpha:0.3;
+  distance:1;
+  background: white;
 }
 
-#searchdiv {
-  width: 200px;
-  float: right;
+.search-input{
+  position: fixed;
+  width: 100%;
+  top: $top-bar-height+($search-bar-height - $search-icon-height)/2;
+  height:$search-icon-height;
+  left: 100px;
+}
+.search-icon {
+  position:fixed;
+  width:20px;
+  height:$search-icon-height;
+  left: 60px;
+  top: $top-bar-height+($search-bar-height - $search-icon-height)/2;
+
 }
diff --git a/res/css/partials/top-bar.scss b/res/css/partials/top-bar.scss
index 71414b7a..0224410c 100644
--- a/res/css/partials/top-bar.scss
+++ b/res/css/partials/top-bar.scss
@@ -3,7 +3,7 @@
   top:0;
   left:0;
   width:100%;
-  height:36px;
+  height:$top-bar-height;
   background-color:#363636; //todo: $dark-grey
 }