fix: limit all codemirror css rules to .graphiql-container

Yahkob · May 9, 2023 · 50da362 · 50da362
1 parent 0600749
commit 50da362
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/packages/graphiql-react/src/editor/style/codemirror.css b/packages/graphiql-react/src/editor/style/codemirror.css
@@ -1,31 +1,31 @@
 @import url('codemirror/lib/codemirror.css');
 
 /* Make the editors fill up their container and make them scrollable */
-.CodeMirror {
+.graphiql-container .CodeMirror {
   height: 100%;
   position: absolute;
   width: 100%;
 }
 
 /* Override font settings */
-.CodeMirror {
+.graphiql-container .CodeMirror {
   font-family: var(--font-family-mono);
 }
 
 /* Set default background color */
-.CodeMirror,
-.CodeMirror-gutters {
+.graphiql-container .CodeMirror,
+.graphiql-container .CodeMirror-gutters {
   background: none;
   background-color: var(--editor-background, hsl(var(--color-base)));
 }
 
-/* No padding around line number */
-.CodeMirror-linenumber {
+/* No padding around line numbers */
+.graphiql-container .CodeMirror-linenumber {
   padding: 0;
 }
 
 /* No border between gutter and editor */
-.CodeMirror-gutters {
+.graphiql-container .CodeMirror-gutters {
   border: none;
 }
 
@@ -114,19 +114,19 @@
 }
 
 /* Matching bracket colors */
-div.CodeMirror span.CodeMirror-matchingbracket,
-div.CodeMirror span.CodeMirror-nonmatchingbracket {
+.graphiql-container div.CodeMirror span.CodeMirror-matchingbracket,
+.graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
   color: hsl(var(--color-warning));
 }
 
 /* Selected text blocks */
-.CodeMirror-selected,
-.CodeMirror-focused .CodeMirror-selected {
+.graphiql-container .CodeMirror-selected,
+.graphiql-container .CodeMirror-focused .CodeMirror-selected {
   background: hsla(var(--color-neutral), var(--alpha-background-heavy));
 }
 
 /* Position the search dialog */
-.CodeMirror-dialog {
+.graphiql-container .CodeMirror-dialog {
   background: inherit;
   color: inherit;
   left: 0;
@@ -136,36 +136,36 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   position: absolute;
   z-index: 6;
 }
-.CodeMirror-dialog-top {
+.graphiql-container .CodeMirror-dialog-top {
   border-bottom: 1px solid
     hsla(var(--color-neutral), var(--alpha-background-heavy));
   padding-bottom: var(--px-12);
   top: 0;
 }
-.CodeMirror-dialog-bottom {
+.graphiql-container .CodeMirror-dialog-bottom {
   border-top: 1px solid
     hsla(var(--color-neutral), var(--alpha-background-heavy));
   bottom: 0;
   padding-top: var(--px-12);
 }
 
 /* Hide the search hint */
-.CodeMirror-search-hint {
+.graphiql-container .CodeMirror-search-hint {
   display: none;
 }
 
 /* Style the input field for searching */
-.CodeMirror-dialog input {
+.graphiql-container .CodeMirror-dialog input {
   border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
   border-radius: var(--border-radius-4);
   padding: var(--px-4);
 }
-.CodeMirror-dialog input:focus {
+.graphiql-container .CodeMirror-dialog input:focus {
   outline: hsl(var(--color-primary)) solid 2px;
 }
 
 /* Set the highlight color for search results */
-.cm-searching {
+.graphiql-container .cm-searching {
   background-color: hsla(var(--color-warning), var(--alpha-background-light));
   /**
    * When cycling through search results, CodeMirror overlays the current