Merge pull request #21 from sg00dwin/revisions

minor tweaks

Author: jwforres

labelFilter.css

@@ -422,6 +422,10 @@
 .selectize-dropdown.single {
   border-color: #b7b7b7;
 }
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 5px 7px;
+}
 .filter .navbar-filter-widget:before,
 .filter .navbar-filter-widget:after {
   content: " ";
@@ -434,16 +438,17 @@
   background: #ffffff;
   float: left;
   min-width: 230px;
-  min-height: 30px;
+  min-height: 27px;
   border: 1px solid #b7b7b7;
   border-radius: 1px;
 }
 .filter .navbar-filter-widget .label-filter .selectize-control {
   display: inline-block;
 }
 .filter .navbar-filter-widget .label-filter .selectize-control .selectize-input {
+  background: transparent;
   vertical-align: middle;
-  padding: 3px 8px;
+  padding: 2px 8px;
   border: 0;
   box-shadow: none;
   font-size: 13px;
@@ -464,7 +469,7 @@
   width: auto !important;
   white-space: nowrap;
   z-index: 9999;
-  margin: 1px 0 0 -1px;
+  margin: 0 0 0 -1px;
   border: 1px solid #b7b7b7;
 }
 .filter .navbar-filter-widget .label-filter .selectize-control.label-filter-key .selectize-input.not-full {
@@ -476,7 +481,7 @@
   font-size: 13px;
   margin-right: 10px;
   opacity: 1;
-  height: 30px;
+  height: 27px;
 }
 .filter .navbar-filter-widget .label-filter-add.btn.disabled {
   opacity: .75;
@@ -490,6 +495,7 @@
   display: inline-block;
   font-weight: normal;
   padding-top: .3em;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 }
 .filter .active-filters .label-filter-active .label-filtering-remove-all i.fa.fa-times {
   margin-left: 5px;
@@ -507,13 +513,19 @@
   margin-left: 0;
   margin-right: 3px;
   max-width: 350px;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
   word-wrap: break-word;
   white-space: pre-wrap;
   /* Necessary even if line-height is set on active-filters
            when a label wraps. Otherwise, there is no margin or padding
            between filter and the input above. */
   margin-top: 2px;
 }
+.filter .active-filters .label-filter-active-filters .label i.fa-times {
+  font-size: 10px;
+  margin-top: -3px;
+  vertical-align: middle;
+}
 @media (min-width: 768px) {
   .filter .active-filters {
     margin-top: 0;

labelFilter.js

@@ -97,7 +97,7 @@ angular.module('kubernetesUI')
 
     this._labelFilterKeyInput = $('<select>')
       .addClass("label-filter-key")
-      .attr("placeholder", "Label key ")
+      .attr("placeholder", "Filter by label ")
       .appendTo(labelFilterElem);
 
     this._labelFilterOperatorInput = $('<select>')

styles/labelFilter.less

@@ -38,11 +38,12 @@
 @selectize-padding-y: 7px;
 @selectize-padding-dropdown-item-y: @selectize-padding-y;
 @selectize-padding-dropdown-item-x: @selectize-padding-y;
+@selectize-text-shadow: 0 1px 0 rgba(0,0,0,0.2);
 @selectize-vertical-gradient-color-end: #1da7ee;
 @selectize-vertical-gradient-color-start: #178ee9;
 @selectize-width-item-border: 0;
 @navbar-label-filter-bg: #fff;
-@navbar-input-height: 30px;
+@navbar-input-height: 27px;
 @navbar-menu-border: 1px solid @btn-default-border;
 
 
@@ -90,7 +91,7 @@
       [data-value] {
         padding: 0 6px; // prevent text jump when
         margin: 0 3px 0 0;
-        text-shadow: 0 1px 0 rgba(0,0,0,0.2);
+        text-shadow: @selectize-text-shadow;
         .selectize-border-radius(2px);
         .selectize-vertical-gradient(@selectize-color-item, @selectize-color-item);
       }
@@ -100,6 +101,9 @@
 .selectize-control.single .selectize-input, .selectize-dropdown.single {
   border-color: @btn-default-border;
 }
+.selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
+    padding: 5px 7px;
+}
 
 
 // Custom code for label filter
@@ -116,8 +120,9 @@
       .selectize-control {
         display: inline-block;
         .selectize-input {
+          background: transparent;
           vertical-align: middle;
-          padding: 3px 8px;
+          padding: 2px 8px;
           border: 0;
           box-shadow: none;
           font-size: @font-size-base;
@@ -138,7 +143,7 @@
           width: auto !important; // overwrite inline width
           white-space: nowrap;
           z-index: 9999;
-          margin: 1px 0 0 -1px;
+          margin: 0 0 0 -1px;
           border: @navbar-menu-border;
           .selectize-dropdown-content {
             .option {
@@ -177,6 +182,7 @@
         display: inline-block;
         font-weight: normal;
         padding-top: .3em;
+        text-shadow: @selectize-text-shadow;
       }
       .label-filtering-remove-all i.fa.fa-times {
         margin-left: 5px;
@@ -194,12 +200,18 @@
         margin-left: 0;
         margin-right: 3px;
         max-width: 350px;
+        text-shadow: @selectize-text-shadow;
         word-wrap: break-word;
         white-space: pre-wrap;
         /* Necessary even if line-height is set on active-filters
            when a label wraps. Otherwise, there is no margin or padding
            between filter and the input above. */
         margin-top: 2px;
+        i.fa-times {
+          font-size: 10px;
+          margin-top: -3px;
+          vertical-align: middle;
+        }
       }
     }
   }