diff --git a/labelFilter.css b/labelFilter.css index bcdb851..a1adf15 100644 --- a/labelFilter.css +++ b/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,7 +438,7 @@ background: #ffffff; float: left; min-width: 230px; - min-height: 30px; + min-height: 27px; border: 1px solid #b7b7b7; border-radius: 1px; } @@ -442,8 +446,9 @@ 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,6 +513,7 @@ 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 @@ -514,6 +521,11 @@ 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; diff --git a/labelFilter.js b/labelFilter.js index 3c76593..2c3fae0 100644 --- a/labelFilter.js +++ b/labelFilter.js @@ -97,7 +97,7 @@ angular.module('kubernetesUI') this._labelFilterKeyInput = $('') diff --git a/styles/labelFilter.less b/styles/labelFilter.less index 63e67dc..b8b4674 100644 --- a/styles/labelFilter.less +++ b/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; + } } } }