Style toolbar

ui/scripts/ui/widgets/listView.js

@@ -839,7 +839,7 @@
         if (!filters) return false;
 
         var $filters = $('<div></div>').addClass('filters reduced-hide');
-        $filters.append($('<label>').html(_l('label.filterBy')));
+        $filters.append($('<label>').html(_l('label.filterBy') + ': '));
 
         var $filterSelect = $('<select id="filterBy"></select>').appendTo($filters);
 

ui/stylesheets/cloudstack.scss

@@ -249,10 +249,4 @@ body {
     .panel-controls {
         display: none;
     }
-
-    .section-select, .filters {
-        @include span-columns(4);
-
-        margin: 8px;
-    }
 }

ui/stylesheets/csui/_toolbar.scss

@@ -1,21 +1,30 @@
 @mixin csui-toolbar {
     @include row;
 
-    padding: 5px;
-    background: #e0e0e0;
-
-    .search-bar {
-        @include span-columns(2);
-
-        input[type=text] {
-            padding: 5px;
-        }
-    }
+    background: lighten(#e0e0e0, 5%);
+    padding: 10px;
 
     .button.action {
         @include csui-button;
 
         float: right;
-        margin: 8px;
+        margin-right: 10px;
+    }
+
+    input, label, select {
+        float: left;
+        margin: 0 10px 0 10px;
+        padding-top: 6px;
+        padding-bottom: 6px;
+        font-size: 12px;
+    }
+
+    label {
+        margin-right: 0px;
+    }
+
+    .search-bar {
+        float: right;
+        margin-right: 25px;
     }
 }