Move server styles into its own scss file; add a little polish

src/core/components/layouts/base.jsx

@@ -94,7 +94,7 @@ export default class BaseLayout extends React.Component {
             ) : null }
 
             { servers && servers.size ? (
-              <div className="server-container">
+              <div className="global-server-container">
                 <span className="servers-title">Server</span>
                 <Col className="servers wrapper" mobile={12}>
                   <Servers

src/core/plugins/oas3/components/operation-servers.jsx

@@ -74,14 +74,16 @@ export default class OperationServers extends React.Component {
     const serversToDisplay = operationServers || pathServers
     const displaying = operationServers ? "operation" : "path"
 
-    return <div className="opblock-section">
+    return <div className="opblock-section operation-servers">
       <div className="opblock-section-header">
         <div className="tab-header">
           <h4 className="opblock-title">Servers</h4>
         </div>
       </div>
       <div className="opblock-description-wrapper">
-        <h4>These {displaying}-level options override the global server options.</h4>
+        <h4 className="message">
+          These {displaying}-level options override the global server options.
+        </h4>
         <Servers
           servers={serversToDisplay}
           currentServer={this.getSelectedServer()}

src/core/plugins/oas3/components/servers.jsx

@@ -93,7 +93,7 @@ export default class Servers extends React.Component {
     let shouldShowVariableUI = currentServerVariableDefs.size !== 0
 
     return (
-      <div>
+      <div className="servers">
         <label htmlFor="servers">
           <select onChange={ this.onServerChange }>
             { servers.valueSeq().map(

src/style/_layout.scss

@@ -650,80 +650,6 @@
     }
 }
 
-.server-container
-{
-    margin: 0 0 20px 0;
-    padding: 30px 0;
-
-    background: $server-container-background-color;
-    box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
-
-    .computed-url {
-      margin: 2em 0;
-
-      code {
-        color: $server-container-computed-url-code-font-color;
-        display: inline-block;
-        padding: 4px;
-        font-size: 16px;
-        margin: 0 1em;
-        font-style: italic;
-      }
-    }
-
-    .servers-title {
-      margin: 20px;
-      line-height: 2em;
-      font-weight: bold;
-    }
-
-    .servers
-    {
-        display: flex;
-        align-items: center;
-
-         > label
-        {
-            font-size: 12px;
-
-            display: flex;
-            flex-direction: column;
-
-            margin: -20px 15px 0 0;
-
-            @include text_headline();
-
-            select
-            {
-                min-width: 130px;
-            }
-        }
-
-        table {
-            tr {
-                width: 30em;
-            }
-            td {
-                display: inline-block;
-                max-width: 15em;
-                vertical-align: middle;
-                padding-top: 10px;
-                padding-bottom: 10px;
-
-                &:first-of-type {
-                  padding-right: 2em;
-                }
-
-                input {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-    }
-}
-
-
 .loading-container
 {
     padding: 40px 0 60px;

src/style/_servers.scss

@@ -0,0 +1,75 @@
+.servers
+{
+     > label
+    {
+        font-size: 12px;
+
+        margin: -20px 15px 0 0;
+
+        @include text_headline();
+
+        select
+        {
+            min-width: 130px;
+        }
+    }
+
+    h4.message {
+      padding-bottom: 2em;
+    }
+
+    table {
+        tr {
+            width: 30em;
+        }
+        td {
+            display: inline-block;
+            max-width: 15em;
+            vertical-align: middle;
+            padding-top: 10px;
+            padding-bottom: 10px;
+
+            &:first-of-type {
+              padding-right: 2em;
+            }
+
+            input {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .computed-url {
+      margin: 2em 0;
+
+      code {
+        display: inline-block;
+        padding: 4px;
+        font-size: 16px;
+        margin: 0 1em;
+      }
+    }
+}
+
+
+.global-server-container
+{
+    margin: 0 0 20px 0;
+    padding: 30px 0;
+
+    background: $server-container-background-color;
+    box-shadow: 0 1px 2px 0 rgba($server-container-box-shadow-color,.15);
+
+    .servers-title {
+      margin: 20px;
+      line-height: 2em;
+      font-weight: bold;
+    }
+}
+
+.operation-servers {
+  h4.message {
+    margin-bottom: 2em;
+  }
+}

src/style/main.scss

@@ -9,6 +9,7 @@
     @import 'form';
     @import 'modal';
     @import 'models';
+    @import 'servers';
     @import 'table';
     @import 'topbar';
     @import 'information';