Move CSS from sourounging div to input element to allow for resize on

focus/transitions etc. This is in preparations of the redesign.

Author: gfldex

assets/sass/style.scss

@@ -207,34 +207,50 @@ td, th {
 }
 
 #search {
+    text-align: right;
+
     label {
         float: left;
         font-size: 1.25em;
     }
 
     div {
         overflow: hidden;
+/*
         border-width: 0.1em;
         border-style: solid;
         border-radius: 0.5em;
         padding: 0 0.5em;
         background-color: #FFFFFF;
+*/
     }
 }
 
 #query {
     outline: none;
-    border: none;
+
+    border-width: 0.1em;
+    border-style: solid;
+    border-radius: 0.5em;
+    border-color: #8BC313;
+
     margin: 0;
-    padding: 0;
-    width: 100%;
-    background: none;
+    padding: 0.25em 0.5em 0.25em 0.5em;
+    width: 95%;
+    background-color: #FFFFFF;
     color: #777777;
+
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    -ms-transition: all .2s ease-out;
+    -o-transition: all .2s ease-out;
+    transition: all .2s easeout;
 }
 
 #query:focus {
     color: #000000;
     text-align: left;
+    width: 95%;
 }
 
 #query::input-placeholder {

html/css/style.css

@@ -173,30 +173,42 @@ td, th {
   width: 84%;
   margin-top: 10px; }
 
-#search label {
-  float: left;
-  font-size: 1.25em; }
+#search {
+  text-align: right; }
+  #search label {
+    float: left;
+    font-size: 1.25em; }
+  #search div {
+    overflow: hidden;
+    /*
+        border-width: 0.1em;
+        border-style: solid;
+        border-radius: 0.5em;
+        padding: 0 0.5em;
+        background-color: #FFFFFF;
+*/ }
 
-#search div {
-  overflow: hidden;
+#query {
+  outline: none;
   border-width: 0.1em;
   border-style: solid;
   border-radius: 0.5em;
-  padding: 0 0.5em;
-  background-color: #FFFFFF; }
-
-#query {
-  outline: none;
-  border: none;
+  border-color: #8BC313;
   margin: 0;
-  padding: 0;
-  width: 100%;
-  background: none;
-  color: #777777; }
+  padding: 0.25em 0.5em 0.25em 0.5em;
+  width: 95%;
+  background-color: #FFFFFF;
+  color: #777777;
+  -webkit-transition: all .2s ease-out;
+  -moz-transition: all .2s ease-out;
+  -ms-transition: all .2s ease-out;
+  -o-transition: all .2s ease-out;
+  transition: all .2s easeout; }
 
 #query:focus {
   color: #000000;
-  text-align: left; }
+  text-align: left;
+  width: 95%; }
 
 #query::input-placeholder {
   text-align: right; }