move editor styles to @graphiql/react (#2532)

graphql · Aug 24, 2022 · e5a289b · e5a289b
1 parent 6cf88e2
commit e5a289b
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 11 deletions.
diff --git a/packages/graphiql-react/src/editor/components/header-editor.tsx b/packages/graphiql-react/src/editor/components/header-editor.tsx
@@ -2,6 +2,7 @@ import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
 
 import '../style/codemirror.css';
 import '../style/fold.css';
+import '../style/editor.css';
 
 type HeaderEditorProps = UseHeaderEditorArgs & { isHidden?: boolean };
 

diff --git a/packages/graphiql-react/src/editor/components/query-editor.tsx b/packages/graphiql-react/src/editor/components/query-editor.tsx
@@ -7,6 +7,7 @@ import '../style/hint.css';
 import '../style/info.css';
 import '../style/jump.css';
 import '../style/auto-insertion.css';
+import '../style/editor.css';
 
 export function QueryEditor(props: UseQueryEditorArgs) {
   const ref = useQueryEditor(props);

diff --git a/packages/graphiql-react/src/editor/components/response-editor.tsx b/packages/graphiql-react/src/editor/components/response-editor.tsx
@@ -3,6 +3,7 @@ import { useResponseEditor, UseResponseEditorArgs } from '../response-editor';
 import '../style/codemirror.css';
 import '../style/fold.css';
 import '../style/info.css';
+import '../style/editor.css';
 
 export function ResponseEditor(props: UseResponseEditorArgs) {
   const ref = useResponseEditor(props);

diff --git a/packages/graphiql-react/src/editor/components/variable-editor.tsx b/packages/graphiql-react/src/editor/components/variable-editor.tsx
@@ -4,6 +4,7 @@ import '../style/codemirror.css';
 import '../style/fold.css';
 import '../style/lint.css';
 import '../style/hint.css';
+import '../style/editor.css';
 
 type VariableEditorProps = UseVariableEditorArgs & {
   isHidden?: boolean;

diff --git a/packages/graphiql-react/src/editor/style/editor.css b/packages/graphiql-react/src/editor/style/editor.css
@@ -0,0 +1,10 @@
+.graphiql-editor {
+  height: 100%;
+  position: relative;
+
+  &.hidden {
+    /* Just setting `display: none;` would break the editor gutters */
+    position: absolute;
+    visibility: hidden;
+  }
+}
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -31,17 +31,6 @@
   padding: var(--px-16);
 }
 
-/* Any codemirror editor */
-.graphiql-container .graphiql-editor {
-  height: 100%;
-  position: relative;
-}
-.graphiql-container .graphiql-editor.hidden {
-  /* Just setting `display: none;` would break the editor gutters */
-  position: absolute;
-  visibility: hidden;
-}
-
 /* The tab bar for editor tools */
 .graphiql-container .graphiql-editor-tools {
   align-items: center;