docs: fix vars and headers showing

PR-URL: hasura/graphql-engine-mono#7348 GitOrigin-RevId: 57ff08f3159b7e8e62a7c02d7f1a5f2949c81364
hasura · Dec 23, 2022 · 21900dd · 21900dd
1 parent 523500e
commit 21900dd
Showing 1 changed file with 104 additions and 33 deletions.
diff --git a/docs/src/components/GraphiQLIDE/styles.scss b/docs/src/components/GraphiQLIDE/styles.scss
@@ -1,10 +1,11 @@
-
 /*** GraphiQL overrides ***/
 
 .graphiql {
   margin-bottom: 20px;
 
-  .query, .response, .variables {
+  .query,
+  .response,
+  .variables {
     display: none;
   }
 
@@ -18,6 +19,14 @@
 
   &.with-vars .graphiql-container {
     min-height: 375px;
+
+    .secondary-editor-title {
+      display: block;
+    }
+  }
+
+  .secondary-editor-title {
+    display: none;
   }
 
   .topBarWrap {
@@ -56,11 +65,15 @@
     padding: 15px 0 !important;
   }
 
-  .CodeMirror-gutter-wrapper, .CodeMirror-gutters {
+  .CodeMirror-gutter-wrapper,
+  .CodeMirror-gutters {
     display: none;
   }
 
-  .title, .docExplorerShow, .toolbar, &:not(.with-vars) .variable-editor {
+  .title,
+  .docExplorerShow,
+  .toolbar,
+  &:not(.with-vars) .variable-editor {
     display: none !important;
   }
 
@@ -79,7 +92,6 @@
 }
 /*** GraphiQL overrides END ***/
 
-
 html[data-theme='dark'] {
   .graphiql .graphiql-container {
     border: 1px solid var(--ifm-border-color);
@@ -93,7 +105,8 @@ html[data-theme='dark'] {
         color: inherit !important;
       }
     }
-    .secondary-editor-title, .resultWrap {
+    .secondary-editor-title,
+    .resultWrap {
       border-color: var(--color-gray-78);
     }
   }
@@ -104,35 +117,93 @@ html[data-theme='dark'] {
       Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
   */
 
-  .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
+  .cm-s-dracula.CodeMirror,
+  .cm-s-dracula .CodeMirror-gutters {
     background-color: var(--color-gray-86) !important;
     color: #f8f8f2 !important;
     border: none;
   }
-  .cm-s-dracula .CodeMirror-gutters { color: #282a36; }
-  .cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
-  .cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }
-  .cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
-  .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
-  .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
-  .cm-s-dracula span.cm-comment { color: #6272a4; }
-  .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; }
-  .cm-s-dracula span.cm-number { color: #bd93f9; }
-  .cm-s-dracula span.cm-variable { color: #50fa7b; }
-  .cm-s-dracula span.cm-variable-2 { color: white; }
-  .cm-s-dracula span.cm-def { color: #50fa7b; }
-  .cm-s-dracula span.cm-operator { color: #ff79c6; }
-  .cm-s-dracula span.cm-keyword { color: #ff79c6; }
-  .cm-s-dracula span.cm-punctuation { color: var(--color-gray-12); }
-  .cm-s-dracula span.cm-atom { color: #bd93f9; }
-  .cm-s-dracula span.cm-meta { color: #f8f8f2; }
-  .cm-s-dracula span.cm-tag { color: #ff79c6; }
-  .cm-s-dracula span.cm-attribute { color: #50fa7b; }
-  .cm-s-dracula span.cm-qualifier { color: #50fa7b; }
-  .cm-s-dracula span.cm-property { color: #66d9ef; }
-  .cm-s-dracula span.cm-builtin { color: #50fa7b; }
-  .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; }
-
-  .cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
-  .cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
+  .cm-s-dracula .CodeMirror-gutters {
+    color: #282a36;
+  }
+  .cm-s-dracula .CodeMirror-cursor {
+    border-left: solid thin #f8f8f0;
+  }
+  .cm-s-dracula .CodeMirror-linenumber {
+    color: #6d8a88;
+  }
+  .cm-s-dracula .CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .cm-s-dracula .CodeMirror-line::selection,
+  .cm-s-dracula .CodeMirror-line > span::selection,
+  .cm-s-dracula .CodeMirror-line > span > span::selection {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .cm-s-dracula .CodeMirror-line::-moz-selection,
+  .cm-s-dracula .CodeMirror-line > span::-moz-selection,
+  .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .cm-s-dracula span.cm-comment {
+    color: #6272a4;
+  }
+  .cm-s-dracula span.cm-string,
+  .cm-s-dracula span.cm-string-2 {
+    color: #f1fa8c;
+  }
+  .cm-s-dracula span.cm-number {
+    color: #bd93f9;
+  }
+  .cm-s-dracula span.cm-variable {
+    color: #50fa7b;
+  }
+  .cm-s-dracula span.cm-variable-2 {
+    color: white;
+  }
+  .cm-s-dracula span.cm-def {
+    color: #50fa7b;
+  }
+  .cm-s-dracula span.cm-operator {
+    color: #ff79c6;
+  }
+  .cm-s-dracula span.cm-keyword {
+    color: #ff79c6;
+  }
+  .cm-s-dracula span.cm-punctuation {
+    color: var(--color-gray-12);
+  }
+  .cm-s-dracula span.cm-atom {
+    color: #bd93f9;
+  }
+  .cm-s-dracula span.cm-meta {
+    color: #f8f8f2;
+  }
+  .cm-s-dracula span.cm-tag {
+    color: #ff79c6;
+  }
+  .cm-s-dracula span.cm-attribute {
+    color: #50fa7b;
+  }
+  .cm-s-dracula span.cm-qualifier {
+    color: #50fa7b;
+  }
+  .cm-s-dracula span.cm-property {
+    color: #66d9ef;
+  }
+  .cm-s-dracula span.cm-builtin {
+    color: #50fa7b;
+  }
+  .cm-s-dracula span.cm-variable-3,
+  .cm-s-dracula span.cm-type {
+    color: #ffb86c;
+  }
+
+  .cm-s-dracula .CodeMirror-activeline-background {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .cm-s-dracula .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: white !important;
+  }
 }