search.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. .gf-box.search-container {
  2. left: 52px;
  3. top: 33px;
  4. margin: 15px;
  5. z-index: 1000;
  6. position: absolute;
  7. width: 700px;
  8. box-shadow: 0px 0px 55px 0px black;
  9. padding: 10px;
  10. .label-tag {
  11. margin-left: 6px;
  12. font-size: 11px;
  13. padding: 2px 6px;
  14. }
  15. }
  16. // Search
  17. .search-field-wrapper {
  18. padding-bottom: 10px;
  19. input {
  20. width: 100%;
  21. padding: 18px 8px;
  22. box-sizing: border-box;
  23. }
  24. button {
  25. margin: 0 4px 0 0;
  26. }
  27. > span {
  28. display: block;
  29. overflow: hidden;
  30. }
  31. }
  32. .search-results-container {
  33. height: 450px;
  34. overflow: auto;
  35. display: block;
  36. line-height: 28px;
  37. .search-result-item:hover, .search-result-item.selected {
  38. background-color: @grafanaListHighlight;
  39. }
  40. .selected {
  41. .search-result-tag {
  42. opacity: 0.70;
  43. color: white;
  44. }
  45. }
  46. .fa-star, .fa-star-o {
  47. padding-left: 13px;
  48. }
  49. .fa-star {
  50. color: @orange;
  51. }
  52. .search-result-link {
  53. color: @grafanaListMainLinkColor;
  54. .fa {
  55. padding-right: 10px;
  56. }
  57. }
  58. .search-result-item {
  59. display: block;
  60. padding: 3px 10px;
  61. white-space: nowrap;
  62. background-color: @grafanaListBackground;
  63. margin-bottom: 4px;
  64. }
  65. .search-result-tags {
  66. float: right;
  67. }
  68. .search-result-actions {
  69. float: right;
  70. padding-left: 20px;
  71. }
  72. }
  73. .search-switches {
  74. position: absolute;
  75. top: 19px;
  76. right: 21px;
  77. }
  78. .search-button-row {
  79. padding-top: 20px;
  80. button {
  81. margin-right: 10px;
  82. }
  83. }