Improve filter box design

3 files changed, 70 insertions, 67 deletions

diff --git a/assets/css/src/filters.css b/assets/css/src/filters.css
index 8f889556..0e0a35e7 100644
--- a/assets/css/src/filters.css
+++ b/assets/css/src/filters.css
@@ -1,68 +1,57 @@
-.toolbar {
-    font-size: 0.9em;
-    padding-top: 5px;
+.project-header {
+    margin-top: 8px;
+    margin-bottom: 20px;
 }
 
-.views {
+.filter-box {
     display: inline-block;
-    margin-right: 10px;
-    font-size: 0.9em;
+    position: relative;
+    font-size: 0;
+    margin-bottom: 20px;
 }
 
-.views li {
-    border: 1px solid #eee;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    display: inline;
+.project-header .filter-box {
+    margin: 0;
 }
 
-.menu-inline li.active a,
-.views li.active a {
-    font-weight: bold;
-    color: #000;
-    text-decoration: none;
+.filter-box form {
+    margin: 0;
 }
 
-.views li:first-child {
-    border-right: none;
+.filter-box input[type="text"] {
+    margin: 0;
+    font-size: 16px;
+    height: 26px;
+    border-color: #dedede;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
+    vertical-align: top;
 }
 
-.views li:last-child {
-    border-left: none;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+.filter-box input[type="text"]:focus {
+    color: #000;
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: 0;
+    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
 }
 
-.filters {
+.filter-box div.dropdown {
     display: inline-block;
-    border: 1px solid #eee;
-    border-radius: 5px;
-    padding: 5px;
-    padding-right: 10px;
-    margin-left: 8px;
-}
-
-.filters ul {
-    font-size: 0.8em;
-}
-
-.page-header .filters ul {
-    font-size: 0.9em;
-}
-
-form.search {
-    display: inline;
+    font-size: 16px;
+    border: 1px solid #dedede;
+    border-left: none;
+    margin: 0;
+    padding: 0;
+    padding-left: 5px;
+    padding-right: 8px;
+    height: 27px;
 }
 
-div.search {
-    margin-bottom: 20px;
+.filter-box div.dropdown:last-child {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
 }
 
-.filter-dropdowns {
-    font-size: 0.9em;
-    display: inline-block;
+.filter-box div.dropdown a {
+    line-height: 27px;
 }
diff --git a/assets/css/src/responsive.css b/assets/css/src/responsive.css
index 3ec47255..c94be166 100644
--- a/assets/css/src/responsive.css
+++ b/assets/css/src/responsive.css
@@ -1,14 +1,3 @@
-@media only screen and (max-width: 1080px) {
-    div.filter-dropdowns .filters {
-        margin-left: 0;
-    }
-
-    div.filter-dropdowns {
-        display: block;
-        margin-top: 5px;
-    }
-}
-
 @media only screen and (max-width: 1024px) {
 
     body {
@@ -32,15 +21,6 @@
         max-width: 150px;
     }
 
-    .task-time-form label {
-        display: block;
-    }
-
-    .task-time-form input[type="submit"] {
-        margin-top: 10px;
-        display: block;
-    }
-
     .page-header .form-input-large {
         width: 300px;
     }
diff --git a/assets/css/src/views.css b/assets/css/src/views.css
new file mode 100644
index 00000000..191b30c6
--- /dev/null
+++ b/assets/css/src/views.css
@@ -0,0 +1,34 @@
+.views {
+    display: inline-block;
+    margin-left: 10px;
+    margin-right: 10px;
+    font-size: 0.9em;
+}
+
+.views li {
+    border: 1px solid #eee;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    display: inline;
+}
+
+.menu-inline li.active a,
+.views li.active a {
+    font-weight: bold;
+    color: #000;
+    text-decoration: none;
+}
+
+.views li:first-child {
+    border-right: none;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.views li:last-child {
+    border-left: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}