make style overrides more specific because loading order isn't guaranteed (#7049)

This commit is contained in:
Matthew Irish 2019-07-03 08:17:14 -05:00 committed by GitHub
parent 9c0d9f6fc0
commit 267d5e7e40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 41 deletions

View File

@ -1,29 +1,25 @@
/*THIS FILE LOADS AFTER THE SWAGGER-UI CSS, SO WE'LL USE IT TO OVERRIDE STYLES */
.swagger-ui .wrapper {
.swagger-ember .swagger-ui .wrapper {
padding: 0;
}
.swagger-ui .info {
.swagger-ember .swagger-ui .info {
margin: 25px 0;
}
/*hide the swagger-ui headers*/
.swagger-ui .filter-container,
.swagger-ui .information-container.wrapper {
.swagger-ember .swagger-ui .filter-container,
.swagger-ember .swagger-ui .information-container.wrapper {
display: none;
}
/*some general de-rounding and removing backgrounds and drop shadows*/
.swagger-ui .btn {
.swagger-ember .swagger-ui .btn {
border-width: 1px;
box-shadow: none;
border-radius: 0px;
}
.swagger-ui .opblock {
.swagger-ember .swagger-ui .opblock {
background: none;
border-width: 1px;
border-radius: 2px;
@ -31,32 +27,30 @@
}
/*START: customize method, path, description so that it's formatted like this:*/
/* {method} {path/to/api} */
/* {A lengthy description goes here} */
.swagger-ui .opblock .opblock-summary,
.swagger-ui .opblock .opblock-summary-description {
/*customize method, path, description*/
.swagger-ember .swagger-ui .opblock .opblock-summary,
.swagger-ember .swagger-ui .opblock .opblock-summary-description {
display: block;
margin: 0;
padding: 0;
}
.swagger-ui .opblock .opblock-summary {
.swagger-ember .swagger-ui .opblock .opblock-summary {
padding: 1rem;
}
.swagger-ui .opblock .opblock-summary-description {
.swagger-ember .swagger-ui .opblock .opblock-summary-description {
font-size: 14px;
}
.swagger-ui .opblock .opblock-summary-method,
.swagger-ui .opblock .opblock-summary-path{
.swagger-ember .swagger-ui .opblock .opblock-summary-method,
.swagger-ember .swagger-ui .opblock .opblock-summary-path{
display: inline-block;
margin: 0;
padding: 0;
}
.swagger-ui .opblock .opblock-summary-method {
.swagger-ember .swagger-ui .opblock .opblock-summary-method {
border-radius: 1px;
min-width: auto;
text-align: left;
@ -67,14 +61,13 @@
padding: 0 2px;
margin-right: 8px;
}
/*END: customize method, path, description*/
/*START: make tags look like list items */
.swagger-ui .opblock-tag{
/*make tags look like list items */
.swagger-ember .swagger-ui .opblock-tag{
font-size: 16px;
}
.swagger-ui .opblock-tag-section .opblock-tag {
.swagger-ember .swagger-ui .opblock-tag-section .opblock-tag {
color: #0a0a0a;
font-weight: 600 !important;
font-size: 1rem !important;
@ -86,9 +79,9 @@
margin: 0;
}
.swagger-ui .opblock-tag:hover,
.swagger-ui .opblock-tag:focus,
.swagger-ui .opblock-tag:active {
.swagger-ember .swagger-ui .opblock-tag:hover,
.swagger-ember .swagger-ui .opblock-tag:focus,
.swagger-ember .swagger-ui .opblock-tag:active {
margin-left: -0.75rem !important;
margin-right: -0.75rem !important;
padding-left: 0.75rem;
@ -98,62 +91,62 @@
}
/*shrink the size of the arrows*/
.swagger-ui .expand-methods svg, .swagger-ui .expand-operation svg {
.swagger-ember .swagger-ui .expand-methods svg,
.swagger-ember .swagger-ui .expand-operation svg {
height: 12px;
width: 12px;
}
/*END: make tags look like list items */
/*operation box - GET (blue) */
.swagger-ui .opblock.opblock-get {
.swagger-ember .swagger-ui .opblock.opblock-get {
background: #f5f8ff;
border: 1px solid #bfd4ff;
}
/*operation label*/
.swagger-ui .opblock.opblock-get .opblock-summary-method {
.swagger-ember .swagger-ui .opblock.opblock-get .opblock-summary-method {
color: #1563ff;
background: none;
}
/*and expanded tab highlight */
.swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span::after {
.swagger-ember .swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span::after {
background: #1563ff;
}
/*operation box - POST (green) */
.swagger-ui .opblock.opblock-post {
.swagger-ember .swagger-ui .opblock.opblock-post {
background: #fafdfa;
border: 1px solid #c6e9c9;
}
.swagger-ui .opblock.opblock-post .opblock-summary-method {
.swagger-ember .swagger-ui .opblock.opblock-post .opblock-summary-method {
color: #2eb039;
background: none;
}
.swagger-ui .opblock.opblock-post .tab-header .tab-item.active h4 span::after {
.swagger-ember .swagger-ui .opblock.opblock-post .tab-header .tab-item.active h4 span::after {
background: #2eb039;
}
/*operation box - POST (red) */
.swagger-ui .opblock.opblock-delete {
.swagger-ember .swagger-ui .opblock.opblock-delete {
background: #fdfafb;
border: 1px solid #f9ecee;
}
.swagger-ui .opblock.opblock-delete .opblock-summary-method {
.swagger-ember .swagger-ui .opblock.opblock-delete .opblock-summary-method {
color: #c73445;
background: none;
}
.swagger-ui .opblock.opblock-delete .tab-header .tab-item.active h4 span::after {
.swagger-ember .swagger-ui .opblock.opblock-delete .tab-header .tab-item.active h4 span::after {
background: #c73445;
}
/*remove "LOADING" from initial loading spinner*/
.swagger-ui .loading-container .loading::after {
.swagger-ember .swagger-ui .loading-container .loading::after {
content: "";
}
/*add text about requests to a live vault server*/
.swagger-ui .btn.execute::after {
.swagger-ember .swagger-ui .btn.execute::after {
content: " - send a request with your token to Vault."
}

View File

@ -40,5 +40,5 @@
<NamespaceReminder as |R|>
Requests use the header <code>X-Vault-Namespace: {{R.namespace.path}}</code>. You can also use <code>{{R.namespace.path}}</code> as an API prefix. See <DocLink @path="/api/overview#namespaces">docs</DocLink> for examples.
</NamespaceReminder>
<div id="{{this.elementId}}-swagger"></div>
<div id="{{this.elementId}}-swagger" class="swagger-ember"></div>
</div>