hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-09-20 15:09:02 +03:00
Code Issues Projects Releases Wiki Activity

console: updated override styles for GraphiQL / React-Select

Browse Source 
https://github.com/hasura/graphql-engine-mono/pull/2315

Co-authored-by: Nicolas Beaussart <7281023+beaussan@users.noreply.github.com>
GitOrigin-RevId: b1011bce3980b4ea5541ff7e68843b200fe7a6e8
This commit is contained in:
Martin Mark 2021-09-11 03:55:52 -04:00 committed by hasura-bot
parent ff8e76d1b7
commit e0cabef0ca
1 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
console/src/theme/tailwind.css
View File

@ -74,3 +74,76 @@ a[class=''] {
html {
font-size: 14px;
}
/* React Select - Fixes Inner Outline in Select Box */
input[id*='react-select'][id$='-input']:focus {
box-shadow: none;
}
/* ** GraphiQL CSS tweaks to fix compatibility */
/* Input fixes from Tailwind */
.graphiql-container input, .graphiql-container select{
min-width: min-content;
padding: 4px 8px;
height: 32px;
border-radius: 4px;
border: 1px solid rgb(203, 213, 225) !important;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.graphiql-container input:focus, .graphiql-container select:focus{
border: 1px solid rgb(251, 191, 36) !important;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(253, 230, 138) 0px 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.graphiql-explorer-actions > select {
font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
font-variant-caps: normal;
font-weight:400;
border: 1px solid #cbd5e1;
font-size: 14px;
padding: 5px 8px;
border-radius: 4px;
margin-left: 8px;
margin-right: 8px;
height: 32px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.graphiql-explorer-actions > select:focus {
border: 1px solid rgb(251, 191, 36) !important;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(253, 230, 138) 0px 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
/* While we're fixing the inputs maybe the Explorer header + footer */
/* Fixes header spacing */
.doc-explorer-title-bar{
height:46px !important;
}
.docExplorerHide{
padding: 16px !important;
}
/* Fixes spacing in operation title namer */
.graphiql-explorer-root{
padding-top:0 !important;
}
.graphiql-operation-title-bar{
margin-top:10px;
}
.graphiql-operation-title-bar > span > input{
margin-right:4px;
}
/* Fixes footer spacing */
.graphiql-explorer-actions > span {
font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
font-variant-caps: normal;
font-weight:500;
font-size: 12px;
letter-spacing:0px;
text-transform: capitalize;
}
.graphiql-explorer-actions{
margin: 4px 0px 0px -8px !important;
width: calc(100% + 16px) !important;
padding:10px !important;
}