From 267d5e7e408cbcc3dfc3df983d2dd47fdee094b0 Mon Sep 17 00:00:00 2001
From: Matthew Irish <meirish@users.noreply.github.com>
Date: Wed, 3 Jul 2019 08:17:14 -0500
Subject: [PATCH] make style overrides more specific because loading order
 isn't guaranteed (#7049)

---
 .../open-api-explorer/addon/styles/addon.css  | 73 +++++++++----------
 .../addon/templates/components/swagger-ui.hbs |  2 +-
 2 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/ui/lib/open-api-explorer/addon/styles/addon.css b/ui/lib/open-api-explorer/addon/styles/addon.css
index cebb78cbb..25d1d8689 100644
--- a/ui/lib/open-api-explorer/addon/styles/addon.css
+++ b/ui/lib/open-api-explorer/addon/styles/addon.css
@@ -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."
 }
diff --git a/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs b/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs
index 8cf1bee55..2ec4792b1 100644
--- a/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs
+++ b/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs
@@ -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>