Browse Source

StatsPicker: Fix multiple value input layout etc. (#17827)

* Add padding and centering

* Vertically center input

* Add noOptions styles

* Move reove button to same line

* StatsPicker: style tweak
Tobias Skarhed 6 years ago
parent
commit
3aed4d3613
1 changed files with 20 additions and 0 deletions
  1. 20 0
      packages/grafana-ui/src/components/Select/_Select.scss

+ 20 - 0
packages/grafana-ui/src/components/Select/_Select.scss

@@ -58,6 +58,10 @@ $select-input-bg-disabled: $input-bg-disabled;
   position: absolute;
   position: absolute;
   z-index: $zindex-dropdown;
   z-index: $zindex-dropdown;
   min-width: 100%;
   min-width: 100%;
+  &-notice--no-options {
+    background-color: $input-bg;
+    padding: 10px;
+  }
 }
 }
 
 
 .gf-form-select-box__menu-list {
 .gf-form-select-box__menu-list {
@@ -75,6 +79,21 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 
 .gf-form-select-box__multi-value {
 .gf-form-select-box__multi-value {
   display: inline;
   display: inline;
+  margin: 0 6px 0 0;
+  cursor: pointer;
+}
+
+.gf-form-select-box__multi-value__remove {
+  text-align: center;
+  display: inline-block;
+  height: 14px;
+  vertical-align: middle;
+  margin-left: 2px;
+}
+
+.gf-form-select-box__multi-value__label {
+  display: inline;
+  vertical-align: middle;
 }
 }
 
 
 .gf-form-select-box__option {
 .gf-form-select-box__option {
@@ -105,6 +124,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   vertical-align: middle;
   vertical-align: middle;
   > div {
   > div {
     display: inline-block;
     display: inline-block;
+    vertical-align: middle;
   }
   }
 }
 }