Last active
December 13, 2016 20:31
-
-
Save wincent/bdc72e085b97158e4cc87e8c1226dd25 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--- old.css 2016-12-13 11:26:59.000000000 -0800 | |
+++ old-transformed-to-new.css 2016-12-13 12:18:42.000000000 -0800 | |
@@ -1,10 +1,11 @@ | |
.graphiql-container { | |
color: #141823; | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
- -webkit-flex-direction: row; | |
- -ms-flex-direction: row; | |
+ -ms-flex-direction: row; | |
+ -webkit-box-orient: horizontal; | |
+ -webkit-box-direction: normal; | |
flex-direction: row; | |
font-family: | |
system, | |
@@ -27,14 +28,15 @@ | |
} | |
.graphiql-container .editorWrap { | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
- -webkit-flex-direction: column; | |
- -ms-flex-direction: column; | |
+ -ms-flex-direction: column; | |
+ -webkit-box-orient: vertical; | |
+ -webkit-box-direction: normal; | |
flex-direction: column; | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
} | |
@@ -48,36 +50,40 @@ | |
} | |
.graphiql-container .topBarWrap { | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
- -webkit-flex-direction: row; | |
- -ms-flex-direction: row; | |
+ -ms-flex-direction: row; | |
+ -webkit-box-orient: horizontal; | |
+ -webkit-box-direction: normal; | |
flex-direction: row; | |
} | |
.graphiql-container .topBar { | |
- -webkit-align-items: center; | |
- -ms-align-items: center; | |
+ -ms-align-items: center; | |
+ -webkit-box-align: center; | |
+ -ms-flex-align: center; | |
align-items: center; | |
background: -webkit-linear-gradient(#f7f7f7, #e2e2e2); | |
background: linear-gradient(#f7f7f7, #e2e2e2); | |
border-bottom: 1px solid #d0d0d0; | |
cursor: default; | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
height: 34px; | |
padding: 7px 14px 6px; | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
- -webkit-flex-direction: row; | |
- -ms-flex-direction: row; | |
+ -ms-flex-direction: row; | |
+ -webkit-box-orient: horizontal; | |
+ -webkit-box-direction: normal; | |
flex-direction: row; | |
-webkit-user-select: none; | |
-ms-user-select: none; | |
- user-select: none; | |
+ -moz-user-select: none; | |
+ user-select: none; | |
} | |
.graphiql-container .toolbar { | |
@@ -108,46 +114,48 @@ | |
margin: 0 3px -1px 0; | |
position: relative; | |
-webkit-transform: rotate(-45deg); | |
- -ms-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
width: 9px; | |
} | |
.graphiql-container .editorBar { | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
- -webkit-flex-direction: row; | |
- -ms-flex-direction: row; | |
+ -ms-flex-direction: row; | |
+ -webkit-box-orient: horizontal; | |
+ -webkit-box-direction: normal; | |
flex-direction: row; | |
} | |
.graphiql-container .queryWrap { | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
- -webkit-flex-direction: column; | |
- -ms-flex-direction: column; | |
+ -ms-flex-direction: column; | |
+ -webkit-box-orient: vertical; | |
+ -webkit-box-direction: normal; | |
flex-direction: column; | |
} | |
.graphiql-container .resultWrap { | |
border-left: solid 1px #e0e0e0; | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
position: relative; | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
- -webkit-flex-direction: column; | |
- -ms-flex-direction: column; | |
+ -ms-flex-direction: column; | |
+ -webkit-box-orient: vertical; | |
+ -webkit-box-direction: normal; | |
flex-direction: column; | |
} | |
@@ -176,19 +184,21 @@ | |
} | |
.graphiql-container .query-editor { | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
position: relative; | |
} | |
.graphiql-container .variable-editor { | |
- display: -webkit-flex; | |
display: -ms-flex; | |
+ display: -webkit-box; | |
+ display: -ms-flexbox; | |
display: flex; | |
height: 29px; | |
- -webkit-flex-direction: column; | |
- -ms-flex-direction: column; | |
+ -ms-flex-direction: column; | |
+ -webkit-box-orient: vertical; | |
+ -webkit-box-direction: normal; | |
flex-direction: column; | |
position: relative; | |
} | |
@@ -206,20 +216,21 @@ | |
text-transform: lowercase; | |
-webkit-user-select: none; | |
-ms-user-select: none; | |
- user-select: none; | |
+ -moz-user-select: none; | |
+ user-select: none; | |
} | |
.graphiql-container .codemirrorWrap { | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
position: relative; | |
height: 100%; | |
} | |
.graphiql-container .result-window { | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
position: relative; | |
height: 100%; | |
@@ -412,12 +423,8 @@ | |
.autoInsertedLeaf.cm-property { | |
-webkit-animation-duration: 6s; | |
- -moz-animation-duration: 6s; | |
- -ms-animation-duration: 6s; | |
animation-duration: 6s; | |
-webkit-animation-name: insertionFade; | |
- -moz-animation-name: insertionFade; | |
- -ms-animation-name: insertionFade; | |
animation-name: insertionFade; | |
border-bottom: 2px solid rgba(255, 255, 255, 0); | |
border-radius: 2px; | |
@@ -425,18 +432,6 @@ | |
padding: 2px 4px 1px; | |
} | |
-@-moz-keyframes insertionFade { | |
- from, to { | |
- background: rgba(255, 255, 255, 0); | |
- border-color: rgba(255, 255, 255, 0); | |
- } | |
- | |
- 15%, 85% { | |
- background: #fbffc9; | |
- border-color: #f0f3c0; | |
- } | |
-} | |
- | |
@-webkit-keyframes insertionFade { | |
from, to { | |
background: rgba(255, 255, 255, 0); | |
@@ -485,9 +480,6 @@ | |
opacity: 0; | |
padding: 6px 10px; | |
-webkit-transition: opacity 0.15s; | |
- -moz-transition: opacity 0.15s; | |
- -ms-transition: opacity 0.15s; | |
- -o-transition: opacity 0.15s; | |
transition: opacity 0.15s; | |
} | |
@@ -501,8 +493,6 @@ | |
border-radius: 4px; | |
background: #08f; | |
background: -webkit-linear-gradient(#43A8FF, #0F83E8); | |
- background: -moz-linear-gradient(#43A8FF, #0F83E8); | |
- background: -ms-linear-gradient(#43A8FF, #0F83E8); | |
background: linear-gradient(#43A8FF, #0F83E8); | |
box-shadow: | |
0 1px 1px rgba(0, 0, 0, 0.2), | |
@@ -657,15 +647,8 @@ | |
width: auto; | |
border: 0; | |
-webkit-animation: blink 1.06s steps(1) infinite; | |
- -moz-animation: blink 1.06s steps(1) infinite; | |
- -ms-animation: blink 1.06s steps(1) infinite; | |
animation: blink 1.06s steps(1) infinite; | |
} | |
-@-moz-keyframes blink { | |
- 0% { background: #7e7; } | |
- 50% { background: none; } | |
- 100% { background: #7e7; } | |
-} | |
@-webkit-keyframes blink { | |
0% { background: #7e7; } | |
50% { background: none; } | |
@@ -826,8 +809,7 @@ | |
min-height: 1px; /* prevents collapsing before first draw */ | |
} | |
.CodeMirror pre { | |
- /* Reset some styles that the rest of the page might have set */ | |
- -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; | |
+ /* Reset some styles that the rest of the page might have set */ border-radius: 0; | |
border-width: 0; | |
background: transparent; | |
font-family: inherit; | |
@@ -874,7 +856,6 @@ | |
.CodeMirror-gutter, | |
.CodeMirror-gutters, | |
.CodeMirror-linenumber { | |
- -moz-box-sizing: content-box; | |
box-sizing: content-box; | |
} | |
@@ -905,6 +886,7 @@ | |
.CodeMirror-selected { background: #d9d9d9; } | |
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } | |
.CodeMirror-crosshair { cursor: crosshair; } | |
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-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; } | |
@@ -970,15 +952,17 @@ | |
.graphiql-container .doc-explorer-title-bar { | |
cursor: default; | |
- display: -webkit-flex; | |
display: -ms-flexbox; | |
+ display: -webkit-box; | |
display: flex; | |
height: 34px; | |
line-height: 14px; | |
padding: 8px 8px 5px; | |
position: relative; | |
-webkit-user-select: none; | |
- user-select: none; | |
+ -moz-user-select: none; | |
+ -ms-user-select: none; | |
+ user-select: none; | |
} | |
.graphiql-container .doc-explorer-title { | |
@@ -988,8 +972,8 @@ | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
overflow-x: hidden; | |
- -webkit-flex: 1; | |
- -ms-flex: 1; | |
+ -ms-flex: 1; | |
+ -webkit-box-flex: 1; | |
flex: 1; | |
} | |
@@ -1017,7 +1001,6 @@ | |
position: relative; | |
width: 9px; | |
-webkit-transform: rotate(-45deg); | |
- -ms-transform: rotate(-45deg); | |
transform: rotate(-45deg); | |
} | |
@@ -1072,7 +1055,8 @@ | |
padding: 10px 0; | |
-webkit-user-select: none; | |
-ms-user-select: none; | |
- user-select: none; | |
+ -moz-user-select: none; | |
+ user-select: none; | |
} | |
.graphiql-container .doc-category-item { | |
@@ -1233,7 +1217,8 @@ | |
height: 36px; | |
width: 36px; | |
left: 50%; | |
- transform: translate(-50%, -50%); | |
+ -webkit-transform: translate(-50%, -50%); | |
+ transform: translate(-50%, -50%); | |
z-index: 10; | |
} | |
@@ -1244,8 +1229,6 @@ | |
width: 24px; | |
position: absolute; | |
-webkit-animation: rotation .6s infinite linear; | |
- -moz-animation: rotation .6s infinite linear; | |
- -o-animation: rotation .6s infinite linear; | |
animation: rotation .6s infinite linear; | |
border-left: 6px solid rgba(150, 150, 150, .15); | |
border-right: 6px solid rgba(150, 150, 150, .15); | |
@@ -1259,25 +1242,13 @@ | |
to { -webkit-transform: rotate(359deg); } | |
} | |
-@-moz-keyframes rotation { | |
- from { -moz-transform: rotate(0deg); } | |
- to { -moz-transform: rotate(359deg); } | |
-} | |
- | |
-@-o-keyframes rotation { | |
- from { -o-transform: rotate(0deg); } | |
- to { -o-transform: rotate(359deg); } | |
-} | |
- | |
@keyframes rotation { | |
- from { transform: rotate(0deg); } | |
- to { transform: rotate(359deg); } | |
+ from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } | |
+ to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } | |
} | |
.CodeMirror-hints { | |
background: white; | |
- -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); | |
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); | |
font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace; | |
font-size: 13px; | |
list-style: none; | |
@@ -1293,18 +1264,14 @@ | |
.CodeMirror-hints-wrapper { | |
background: white; | |
- -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); | |
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); | |
margin-left: -6px; | |
position: absolute; | |
z-index: 10; | |
} | |
.CodeMirror-hints-wrapper .CodeMirror-hints { | |
- -webkit-box-shadow: none; | |
- -moz-box-shadow: none; | |
- box-shadow: none; | |
+ box-shadow: none; | |
position: relative; | |
margin-left: 0; | |
z-index: 0; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment