Distinguish monaco CSS overrides with page-specific layout

elastic · Oct 10, 2019 · 53d4b03 · 53d4b03
1 parent c99ba38
commit 53d4b03
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/x-pack/legacy/plugins/code/public/components/code_block/code_block.tsx b/x-pack/legacy/plugins/code/public/components/code_block/code_block.tsx
@@ -158,7 +158,7 @@ export class CodeBlock extends React.PureComponent<Props> {
   public render() {
     const height = this.lines.length * 18;
 
-    return <div ref={this.el} style={{ height }} />;
+    return <div ref={this.el} className="codeContainer__monaco" style={{ height }} />;
   }
 
   private lineNumber = (lineIndex: number) => this.props.lineNumber(lineIndex - 1);

diff --git a/x-pack/legacy/plugins/code/public/components/editor/editor.tsx b/x-pack/legacy/plugins/code/public/components/editor/editor.tsx
@@ -175,7 +175,7 @@ export class EditorComponent extends React.Component<IProps> {
         />
         <div
           tabIndex={0}
-          className="codeContainer__editor"
+          className="codeContainer__editor codeContainer__monaco"
           id="mainEditor"
           hidden={this.props.hidden}
         />

diff --git a/x-pack/legacy/plugins/code/public/components/integrations/index.tsx b/x-pack/legacy/plugins/code/public/components/integrations/index.tsx
@@ -21,7 +21,7 @@ const associateToService = (frame: Frame) => (repo: string) =>
 const handleImport = (repo: string) => alert(`import done: ${repo}`);
 
 export const Integrations = () => (
-  <div className="codeContainer__root codeIntegrations__container">
+  <div className="codeIntegrations__container">
     {frames.map(frame => {
       const { fileName, lineNumber } = frame;
       const key = `${fileName}#L${lineNumber}`;

diff --git a/x-pack/legacy/plugins/code/public/monaco/override_monaco_styles.scss b/x-pack/legacy/plugins/code/public/monaco/override_monaco_styles.scss
@@ -1,4 +1,4 @@
-.codeContainer__root {
+.codeContainer__monaco {
   .monaco-editor .cursors-layer > .cursor {
     display: none !important;
   }