Update to use base-font-size and related positioning changes.

Author: sg00dwin

labelFilter.css

@@ -390,6 +390,7 @@
 }
 .selectize-control.plugin-remove_button [data-value] .remove {
   border-left: 1px solid #005c83;
+  padding: 0;
 }
 .selectize-control.single .selectize-input {
   background-color: rgba(0, 0, 0, 0);
@@ -403,6 +404,7 @@
 }
 .selectize-control.multi .selectize-input [data-value] {
   padding: 0 6px;
+  margin: 0 3px 0 0;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -432,7 +434,7 @@
   background: #ffffff;
   float: left;
   min-width: 230px;
-  min-height: 41px;
+  min-height: 30px;
   border: 1px solid #b7b7b7;
   border-radius: 1px;
 }
@@ -441,10 +443,10 @@
 }
 .filter .navbar-filter-widget .label-filter .selectize-control .selectize-input {
   vertical-align: middle;
-  padding-bottom: 0px;
+  padding: 3px 8px;
   border: 0;
   box-shadow: none;
-  font-size: 15px;
+  font-size: 13px;
   line-height: 1.66666667;
 }
 .filter .navbar-filter-widget .label-filter .selectize-control .selectize-input.full {
@@ -454,15 +456,15 @@
   border: 0;
 }
 .filter .navbar-filter-widget .label-filter .selectize-control .selectize-input input {
-  font-size: 15px;
-  height: 24px;
+  font-size: 13px;
+  height: 21px;
 }
 .filter .navbar-filter-widget .label-filter .selectize-control .selectize-dropdown {
   min-width: 100px;
   width: auto !important;
   white-space: nowrap;
   z-index: 9999;
-  margin: 7px 0 0 -1px;
+  margin: 1px 0 0 -1px;
   border: 1px solid #b7b7b7;
 }
 .filter .navbar-filter-widget .label-filter .selectize-control.label-filter-key .selectize-input.not-full {
@@ -471,9 +473,10 @@
 .filter .navbar-filter-widget .label-filter-add.btn {
   border-left: 0;
   border-radius: 0;
+  font-size: 13px;
   margin-right: 10px;
   opacity: 1;
-  height: 41px;
+  height: 30px;
 }
 .filter .navbar-filter-widget .label-filter-add.btn.disabled {
   opacity: .75;

labelFilter.js

@@ -74,7 +74,7 @@ angular.module('kubernetesUI')
     if (!dontFireCallbacks) {
       this._onActiveFiltersChangedCallbacks.fire(this._labelSelector);
     }
-  };  
+  };
 
   LabelFilter.prototype.onActiveFiltersChanged = function(callback) {
     this._onActiveFiltersChangedCallbacks.add(callback);
@@ -104,17 +104,17 @@ angular.module('kubernetesUI')
       .addClass("label-filter-operator")
       .attr("placeholder", "matching(...)")
       .hide()
-      .appendTo(labelFilterElem);      
+      .appendTo(labelFilterElem);
 
     this._labelFilterValuesInput = $('<select>')
       .addClass("label-filter-values")
       .attr("placeholder", "Value(s)")
       .attr("multiple", true)
       .hide()
-      .appendTo(labelFilterElem);   
+      .appendTo(labelFilterElem);
 
     this._labelFilterAddBtn = $('<button>')
-      .addClass("label-filter-add btn btn-default btn-lg disabled")
+      .addClass("label-filter-add btn btn-default disabled")
       .attr("disabled", true)
       .appendTo(filterInputElement)
       .append(
@@ -177,17 +177,17 @@ angular.module('kubernetesUI')
             return;
           }
           //for each value for key
-          for (var i = 0; i < optionsMap[key].length; i++) {                  
+          for (var i = 0; i < optionsMap[key].length; i++) {
             options.push(optionsMap[key][i]);
-          }                
+          }
           callback(options);
-        });          
+        });
 
         self._labelFilterOperatorSelectizeInput.css("display", "inline-block");
         var operator = self._labelFilterOperatorSelectize.getValue();
         if (!operator) {
           self._labelFilterOperatorSelectize.focus();
-        }                
+        }
         else {
           selectizeValues.focus();
         }
@@ -252,7 +252,7 @@ angular.module('kubernetesUI')
         self._labelFilterAddBtn.removeClass("disabled").prop('disabled', false);
       },
       onItemRemove: function(value) {
-        // disable button if we have removed all the values                
+        // disable button if we have removed all the values
       },
       load: function(query, callback) {
         var options = [];
@@ -266,11 +266,11 @@ angular.module('kubernetesUI')
         if (!optionsMap[key]) {
           callback({});
           return;
-        }        
+        }
         //for each value for key
-        for (var i = 0; i < optionsMap[key].length; i++) {                  
+        for (var i = 0; i < optionsMap[key].length; i++) {
           options.push(optionsMap[key][i]);
-        }                
+        }
         callback(options);
       }
     });
@@ -290,7 +290,7 @@ angular.module('kubernetesUI')
       self._labelFilterOperatorSelectize.clear();
       self._labelFilterValuesSelectizeInput.hide();
       self._labelFilterValuesSelectize.clear();
-      self._labelFilterAddBtn.addClass("disabled").prop('disabled', true);              
+      self._labelFilterAddBtn.addClass("disabled").prop('disabled', true);
 
       // show the filtering active indicator and add the individual filter to the list of active filters
       self.addActiveFilter(key, operator, values);
@@ -302,7 +302,7 @@ angular.module('kubernetesUI')
       this._labelSelector.each(function(filter) {
         self._renderActiveFilter(filter);
       });
-    }      
+    }
   };
 
   LabelFilter.prototype._getLabelFilterKeys = function() {
@@ -319,12 +319,12 @@ angular.module('kubernetesUI')
 
   LabelFilter.prototype.addActiveFilter = function(key, operator, values) {
     this._labelFilterActiveElement.show();
-    this._addActiveFilter(key, operator, values);    
+    this._addActiveFilter(key, operator, values);
   };
 
   LabelFilter.prototype._addActiveFilter = function(key, operator, values) {
     var filter = this._labelSelector.addConjunct(key, operator, values);
-    this._onActiveFiltersChangedCallbacks.fire(this._labelSelector);  
+    this._onActiveFiltersChangedCallbacks.fire(this._labelSelector);
     this._renderActiveFilter(filter);
   };
 
@@ -345,7 +345,7 @@ angular.module('kubernetesUI')
         $('<i>')
           .addClass("fa fa-times")
       )
-      .appendTo(this._labelFilterActiveFiltersElement);  
+      .appendTo(this._labelFilterActiveFiltersElement);
   };
 
   LabelFilter.prototype._removeActiveFilter = function(e) {

styles/labelFilter.less

@@ -42,7 +42,7 @@
 @selectize-vertical-gradient-color-start: #178ee9;
 @selectize-width-item-border: 0;
 @navbar-label-filter-bg: #fff;
-@navbar-input-height: 41px;
+@navbar-input-height: 30px;
 @navbar-menu-border: 1px solid @btn-default-border;
 
 
@@ -73,6 +73,7 @@
     font-size: @font-size-base;
     .remove {
       border-left: 1px solid darken(@dark-blue, 5%);
+      padding: 0;
     }
   }
 }
@@ -87,7 +88,8 @@
   &.multi {
     .selectize-input {
       [data-value] {
-        padding: 0 6px; // prevent text jump when 
+        padding: 0 6px; // prevent text jump when
+        margin: 0 3px 0 0;
         text-shadow: 0 1px 0 rgba(0,0,0,0.2);
         .selectize-border-radius(2px);
         .selectize-vertical-gradient(@selectize-color-item, @selectize-color-item);
@@ -115,10 +117,10 @@
         display: inline-block;
         .selectize-input {
           vertical-align: middle;
-          padding-bottom: 0px;
+          padding: 3px 8px;
           border: 0;
           box-shadow: none;
-          font-size: @font-size-large;
+          font-size: @font-size-base;
           line-height: @line-height-base;
           &.full {
             min-width: initial;
@@ -127,17 +129,17 @@
             }
           }
           input {
-            font-size: @font-size-large;
-            height: 24px; // keep IE from clipping text descenders
+            font-size: @font-size-base;
+            height: 21px; // keep IE from clipping text descenders
           }
         }
         .selectize-dropdown {
           min-width: 100px;
           width: auto !important; // overwrite inline width
           white-space: nowrap;
           z-index: 9999;
-          margin: 7px 0 0 -1px;
-          border: @navbar-menu-border; 
+          margin: 1px 0 0 -1px;
+          border: @navbar-menu-border;
           .selectize-dropdown-content {
             .option {
               &.selected {}
@@ -156,6 +158,7 @@
     .label-filter-add.btn {
       border-left: 0;
       border-radius: 0;
+      font-size: @font-size-base;
       margin-right: @selectize-padding-x;
       opacity: 1;
       height: @navbar-input-height;