luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ui/lib/open-api-explorer/addon/styles/addon.css
View File

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

2
ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs
View File

@ -40,5 +40,5 @@
<NamespaceReminder as |R|> <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. 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> </NamespaceReminder>
<div id="{{this.elementId}}-swagger"></div> <div id="{{this.elementId}}-swagger" class="swagger-ember"></div>
</div> </div>