_code_editor.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .gf-code-editor {
  2. min-height: 36px;
  3. min-width: 280px;
  4. flex-grow: 1;
  5. margin-right: $space-xs;
  6. &.ace_editor {
  7. @include font-family-monospace();
  8. font-size: $font-size-md;
  9. min-height: 50px; // Include space for horizontal scrollbar
  10. @include border-radius($input-border-radius);
  11. border: $border-width solid $input-border-color;
  12. }
  13. .ace_content {
  14. z-index: 0;
  15. }
  16. }
  17. .ace_editor.ace_autocomplete {
  18. @include font-family-monospace();
  19. font-size: $font-size-md;
  20. // Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
  21. // is used for overriding styles with the same CSS specificity.
  22. background-color: $dropdownBackground !important;
  23. color: $dropdownLinkColor !important;
  24. border: 1px solid $dropdownBorder !important;
  25. width: 550px !important;
  26. .ace_scroller {
  27. .ace_selected,
  28. .ace_active-line,
  29. .ace_line-hover {
  30. color: $dropdownLinkColorHover;
  31. background-color: $dropdownLinkBackgroundHover !important;
  32. }
  33. .ace_line-hover {
  34. border-color: transparent;
  35. }
  36. .ace_completion-highlight {
  37. color: $yellow;
  38. }
  39. .ace_rightAlignedText {
  40. color: $text-muted;
  41. z-index: 0;
  42. }
  43. }
  44. }
  45. $doc-font-size: $font-size-sm;
  46. .ace_tooltip.ace_doc-tooltip {
  47. @include font-family-monospace();
  48. font-size: $doc-font-size;
  49. background-color: $popover-help-bg;
  50. color: $popover-help-color;
  51. background-image: none;
  52. border: 1px solid $dropdownBorder;
  53. padding: $space-sm $space-md;
  54. hr {
  55. background-color: $popover-help-color;
  56. margin: $space-sm 0;
  57. }
  58. code {
  59. padding: 0px 1px;
  60. margin: 0px;
  61. }
  62. }
  63. .ace_tooltip {
  64. border-radius: 3px;
  65. }
  66. .ace_hidden-cursors .ace_cursor {
  67. opacity: 0 !important;
  68. }