_code_editor.scss 1.6 KB

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