graphiql-rails 1.0.2 → 1.1.0

data/app/assets/stylesheets/graphiql/rails/application.css

@@ -1,3 +1,10 @@
 /*
- = require ./graphiql-0.4.5
+ = require ./graphiql-0.6.6
 */
+
+html, body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+}

data/app/assets/stylesheets/graphiql/rails/{graphiql-0.4.5.css → graphiql-0.6.6.css}

@@ -1,20 +1,27 @@
-html, body {
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-  width: 100%;
-}
-
 #graphiql-container {
   color: #141823;
-  width: 100%;
-  display: -webkit-flex;
   display:         flex;
-  -webkit-flex-direction: row;
+  display: -webkit-flex;
           flex-direction: row;
-  height: 100%;
-  font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
+  -webkit-flex-direction: row;
+  font-family:
+    system,
+    -apple-system,
+    'San Francisco',
+    '.SFNSDisplay-Regular',
+    'Segoe UI',
+    Segoe,
+    'Segoe WP',
+    'Helvetica Neue',
+    helvetica,
+    'Lucida Grande',
+    arial,
+    sans-serif;
   font-size: 14px;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
 }
 
 #graphiql-container .editorWrap {
@@ -43,34 +50,40 @@ html, body {
 }
 
 #graphiql-container .topBar {
+  -webkit-align-items: center;
+          align-items: center;
   background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
   background:         linear-gradient(#f7f7f7, #e2e2e2);
-  border-bottom: solid 1px #d0d0d0;
+  border-bottom: 1px solid #d0d0d0;
   cursor: default;
-  height: 34px;
-  padding: 7px 14px 6px;
-  -webkit-user-select: none;
-          user-select: none;
   display: -webkit-flex;
   display:         flex;
-  -webkit-flex-direction: row;
-          flex-direction: row;
+  height: 34px;
+  padding: 7px 14px 6px;
   -webkit-flex: 1;
           flex: 1;
-  -webkit-align-items: center;
-          align-items: center;
+  -webkit-flex-direction: row;
+          flex-direction: row;
+  -webkit-user-select: none;
+          user-select: none;
+}
+
+#graphiql-container .toolbar {
+  overflow-x: auto;
 }
 
 #graphiql-container .docExplorerShow {
   background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
   background:         linear-gradient(#f7f7f7, #e2e2e2);
-  border: none;
-  border-bottom: solid 1px #d0d0d0;
-  border-left: solid 1px rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid #d0d0d0;
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: none;
+  border-top: none;
   color: #3B5998;
   cursor: pointer;
   font-size: 14px;
   outline: 0;
+  margin: 0;
   padding: 2px 20px 0 18px;
 }
 
@@ -82,45 +95,45 @@ html, body {
   height: 9px;
   margin: 0 3px -1px 0;
   position: relative;
-  width: 9px;
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
+  width: 9px;
 }
 
 #graphiql-container .editorBar {
   display: -webkit-flex;
   display:         flex;
-  -webkit-flex-direction: row;
-          flex-direction: row;
   -webkit-flex: 1;
           flex: 1;
+  -webkit-flex-direction: row;
+          flex-direction: row;
 }
 
 #graphiql-container .queryWrap {
   display: -webkit-flex;
   display:         flex;
-  -webkit-flex-direction: column;
-          flex-direction: column;
   -webkit-flex: 1;
           flex: 1;
+  -webkit-flex-direction: column;
+          flex-direction: column;
 }
 
 #graphiql-container .resultWrap {
-  position: relative;
+  border-left: solid 1px #e0e0e0;
   display: -webkit-flex;
   display:         flex;
-  -webkit-flex-direction: column;
-          flex-direction: column;
+  position: relative;
   -webkit-flex: 1;
           flex: 1;
-  border-left: solid 1px #e0e0e0;
+  -webkit-flex-direction: column;
+          flex-direction: column;
 }
 
 #graphiql-container .docExplorerWrap {
+  background: white;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
-  z-index: 3;
   position: relative;
-  background: white;
+  z-index: 3;
 }
 
 #graphiql-container .docExplorerResizer {
@@ -147,9 +160,9 @@ html, body {
 }
 
 #graphiql-container .variable-editor {
-  height: 30px;
   display: -webkit-flex;
   display:         flex;
+  height: 29px;
   -webkit-flex-direction: column;
           flex-direction: column;
   position: relative;
@@ -157,8 +170,8 @@ html, body {
 
 #graphiql-container .variable-editor-title {
   background: #eeeeee;
-  border-bottom: solid 1px #d6d6d6;
-  border-top: solid 1px #e0e0e0;
+  border-bottom: 1px solid #d6d6d6;
+  border-top: 1px solid #e0e0e0;
   color: #777;
   font-variant: small-caps;
   font-weight: bold;
@@ -184,8 +197,8 @@ html, body {
 
 #graphiql-container .footer {
   background: #f6f7f8;
-  border-left: solid 1px #e0e0e0;
-  border-top: solid 1px #e0e0e0;
+  border-left: 1px solid #e0e0e0;
+  border-top: 1px solid #e0e0e0;
   margin-left: 12px;
   position: relative;
 }
@@ -216,20 +229,63 @@ html, body {
   padding-left: 3px;
 }
 
+#graphiql-container .toolbar-button {
+  background: #fdfdfd;
+  background: -webkit-linear-gradient(#fbfbfb, #f8f8f8);
+  background:         linear-gradient(#fbfbfb, #f8f8f8);
+  border-width: 0.5px;
+  border-style: solid;
+  border-color: #d3d3d3 #d0d0d0 #bababa;
+  border-radius: 4px;
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.13), inset 0 1px #fff;
+  color: #444;
+  cursor: pointer;
+  display: inline-block;
+  margin: 0 5px 0;
+  padding: 2px 8px 4px;
+  text-decoration: none;
+}
+
+#graphiql-container .toolbar-button:active {
+  background: -webkit-linear-gradient(#ececec, #d8d8d8);
+  background:         linear-gradient(#ececec, #d8d8d8);
+  border-color: #cacaca #c9c9c9 #b0b0b0;
+  box-shadow:
+    0 1px 0 #fff,
+    inset 0 1px rgba(255, 255, 255, 0.2),
+    inset 0 1px 1px rgba(0, 0, 0, 0.08);
+}
+
+#graphiql-container .toolbar-button.error {
+  background: -webkit-linear-gradient(#fdf3f3, #e6d6d7);
+  background:         linear-gradient(#fdf3f3, #e6d6d7);
+  color: #b00;
+}
+
+#graphiql-container .execute-button-wrap {
+  position: relative;
+  margin: 0 14px 0 28px;
+  height: 34px;
+}
+
 #graphiql-container .execute-button {
   background: -webkit-linear-gradient(#fdfdfd, #d2d3d6);
   background:         linear-gradient(#fdfdfd, #d2d3d6);
-  border: solid 1px rgba(0,0,0,0.25);
+  border: 1px solid rgba(0,0,0,0.25);
   border-radius: 17px;
   box-shadow: 0 1px 0 #fff;
   cursor: pointer;
   fill: #444;
   height: 34px;
-  margin: 0 14px 0 28px;
+  margin: 0;
   padding: 0;
   width: 34px;
 }
 
+#graphiql-container .execute-button svg {
+  pointer-events: none;
+}
+
 #graphiql-container .execute-button:active {
   background: -webkit-linear-gradient(#e6e6e6, #c0c0c0);
   background:         linear-gradient(#e6e6e6, #c0c0c0);
@@ -243,19 +299,49 @@ html, body {
   outline: 0;
 }
 
+#graphiql-container .execute-options {
+  background: #fff;
+  box-shadow:
+    0 0 0 1px rgba(0,0,0,0.1),
+    0 2px 4px rgba(0,0,0,0.25);
+  left: -1px;
+  margin: 0;
+  padding: 8px 0;
+  position: absolute;
+  top: 37px;
+  z-index: 100;
+}
+
+#graphiql-container .execute-options li {
+  padding: 2px 30px 4px 10px;
+  list-style: none;
+  min-width: 100px;
+  cursor: pointer;
+}
+
+#graphiql-container .execute-options li.selected {
+  background: #e10098;
+  color: white;
+}
+
 #graphiql-container .CodeMirror-scroll {
   -webkit-overflow-scrolling: touch;
 }
 
 #graphiql-container .CodeMirror {
+  color: #141823;
+  font-family:
+    'Consolas',
+    'Inconsolata',
+    'Droid Sans Mono',
+    'Monaco',
+    monospace;
+  font-size: 13px;
+  height: 100%;
+  left: 0;
   position: absolute;
   top: 0;
-  left: 0;
-  height: 100%;
   width: 100%;
-  font-size: 13px;
-  font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
-  color: #141823;
 }
 
 #graphiql-container .CodeMirror-lines {
@@ -264,11 +350,13 @@ html, body {
 
 .CodeMirror-hint-information .content {
   -webkit-box-orient: vertical;
+          box-orient: vertical;
   color: #141823;
   display: -webkit-box;
   font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
   font-size: 13px;
   -webkit-line-clamp: 3;
+          line-clamp: 3;
   line-height: 16px;
   max-height: 48px;
   overflow: hidden;
@@ -285,22 +373,22 @@ html, body {
 
 .CodeMirror-hint-information .infoType {
   color: #30a;
-  margin-right: 0.5em;
-  display: inline;
   cursor: pointer;
+  display: inline;
+  margin-right: 0.5em;
 }
 
 .autoInsertedLeaf.cm-property {
-  padding: 2px 4px 1px;
-  margin: -2px -4px -1px;
-  border-radius: 2px;
-  border-bottom: solid 2px rgba(255, 255, 255, 0);
   -webkit-animation-duration: 6s;
      -moz-animation-duration: 6s;
           animation-duration: 6s;
   -webkit-animation-name: insertionFade;
      -moz-animation-name: insertionFade;
           animation-name: insertionFade;
+  border-bottom: 2px solid rgba(255, 255, 255, 0);
+  border-radius: 2px;
+  margin: -2px -4px -1px;
+  padding: 2px 4px 1px;
 }
 
 @-moz-keyframes insertionFade {
@@ -341,22 +429,32 @@ html, body {
 
 div.CodeMirror-lint-tooltip {
   background-color: white;
-  color: #141823;
   border: 0;
   border-radius: 2px;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
-   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
-  font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
+  color: #141823;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+  font-family:
+    system,
+    -apple-system,
+    'San Francisco',
+    '.SFNSDisplay-Regular',
+    'Segoe UI',
+    Segoe,
+    'Segoe WP',
+    'Helvetica Neue',
+    helvetica,
+    'Lucida Grande',
+    arial,
+    sans-serif;
   font-size: 13px;
   line-height: 16px;
-  padding: 6px 10px;
   opacity: 0;
-  transition: opacity 0.15s;
-  -moz-transition: opacity 0.15s;
+  padding: 6px 10px;
   -webkit-transition: opacity 0.15s;
-  -o-transition: opacity 0.15s;
-  -ms-transition: opacity 0.15s;
+     -moz-transition: opacity 0.15s;
+      -ms-transition: opacity 0.15s;
+       -o-transition: opacity 0.15s;
+          transition: opacity 0.15s;
 }
 
 div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
@@ -370,16 +468,15 @@ div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
   background: #08f;
   background: -webkit-linear-gradient(#43A8FF, #0F83E8);
   background:         linear-gradient(#43A8FF, #0F83E8);
-
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.2),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   color: white;
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   font-family: arial;
-  line-height: 0;
-  padding: 0px 4px 1px;
   font-size: 12px;
+  line-height: 0;
   margin: 0 3px;
+  padding: 0px 4px 1px;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.1);
 }
 
@@ -625,7 +722,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 }
 
 /* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actuall scrolling happens, thus preventing shaking and
+   before actual scrolling happens, thus preventing shaking and
    flickering artifacts. */
 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
   position: absolute;
@@ -651,12 +748,14 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-gutters {
   position: absolute; left: 0; top: 0;
+  min-height: 100%;
   z-index: 3;
 }
 .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
   display: inline-block;
+  vertical-align: top;
   margin-bottom: -30px;
   /* Hack to make IE7 behave */
   *zoom:1;
@@ -665,7 +764,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 .CodeMirror-gutter-wrapper {
   position: absolute;
   z-index: 4;
-  height: 100%;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
 }
 .CodeMirror-gutter-elt {
   position: absolute;
@@ -698,6 +803,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
@@ -740,19 +847,19 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: hidden;
   visibility: hidden;
 }
-.CodeMirror-measure pre { position: static; }
 
-.CodeMirror div.CodeMirror-cursor {
-  position: absolute;
-  border-right: none;
-  width: 0;
-}
+.CodeMirror-cursor { position: absolute; }
+.CodeMirror-measure pre { position: static; }
 
 div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
   z-index: 3;
 }
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
 .CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
 }
@@ -760,8 +867,8 @@ div.CodeMirror-cursors {
 .CodeMirror-selected { background: #d9d9d9; }
 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 .CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror ::selection { background: #d7d4f0; }
-.CodeMirror ::-moz-selection { background: #d7d4f0; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 
 .cm-searching {
   background: #ffa;
@@ -921,6 +1028,33 @@ span.CodeMirror-selectedtext { background: none; }
 #graphiql-container .arg:last-child:after {
   content: '';
 }
+
+#graphiql-container .doc-alert-text {
+  color: #F00F00;
+  font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
+  font-size: 13px;
+}
+
+#graphiql-container .search-box-outer {
+  border: 1px solid #d3d6db;
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 12px;
+  height: 24px;
+  margin-bottom: 12px;
+  padding: 3px 8px 5px;
+  vertical-align: middle;
+  width: 100%;
+}
+
+#graphiql-container .search-box-input {
+  border: 0;
+  font-size: 12px;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  width: 100%;
+}
 .CodeMirror-foldmarker {
   color: blue;
   text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;