grafana/public/sass/components/_code_editor.scss
Torkel Ödegaard 8b7decf57b
Styles & Theme: Inline form styles polish & tweaks (#23521)
* Styles: Refactoring and tweaks to inline form styles

* Minor change

* Minor fix

* Updated snapshot

* tweaks

* minor tweak

* Updated modal style

* Updated snapshot

* Updated more snapshots
2020-04-13 09:58:40 +02:00

85 lines
1.7 KiB
SCSS

.gf-code-editor {
min-height: 36px;
min-width: 280px;
flex-grow: 1;
margin-right: $space-xs;
&.ace_editor {
@include font-family-monospace();
font-size: $font-size-md;
min-height: 50px; // Include space for horizontal scrollbar
@include border-radius($input-border-radius);
border: $border-width solid $input-border-color;
}
.ace_content {
z-index: 0;
}
}
.ace_editor.ace_autocomplete {
@include font-family-monospace();
font-size: $font-size-md;
// Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
// is used for overriding styles with the same CSS specificity.
background-color: $dropdownBackground !important;
color: $dropdownLinkColor !important;
border: 1px solid $dropdownBorder !important;
width: 550px !important;
.ace_scroller {
.ace_selected,
.ace_active-line,
.ace_line-hover {
color: $dropdownLinkColorHover;
background-color: $dropdownLinkBackgroundHover !important;
}
.ace_line-hover {
border-color: transparent;
}
.ace_completion-highlight {
color: $yellow;
}
.ace_rightAlignedText {
color: $text-muted;
z-index: 0;
}
}
}
$doc-font-size: $font-size-sm;
.ace_tooltip.ace_doc-tooltip {
@include font-family-monospace();
font-size: $doc-font-size;
background-color: $popover-help-bg;
color: $popover-help-color;
background-image: none;
border: 1px solid $dropdownBorder;
padding: $space-sm $space-md;
hr {
background-color: $popover-help-color;
margin: $space-sm 0;
}
code {
padding: 0px 1px;
margin: 0px;
}
}
.ace_tooltip {
border-radius: 3px;
}
.ace_hidden-cursors .ace_cursor {
opacity: 0 !important;
}