Work on Request and Response Samples and overall padding

lib/common/styles/_share-link.scss

@@ -18,6 +18,10 @@
   vertical-align: middle;
 }
 
+.sharable-header {
+  color: $secondary-color;
+}
+
 .sharable-header:hover .share-link:before, .share-link:hover:before {
   visibility: visible;
 }

lib/common/styles/_variables.scss

@@ -2,6 +2,7 @@
 // ---------------------------
 $primary-color : #0033a0;
 $secondary-color : #263238;
+$black : #263238;
 $green : #00aa13;
 $yellow : #f1c400;
 $red : #e53935;
@@ -23,7 +24,7 @@ $base-font-family : sans-serif;
 $base-font-weight : $regular;
 $base-font-size : 1em;
 $base-line-height : 1.4;
-$text-color : $secondary-color;
+$text-color : $black;
 
 // Heading Font
 // ---------------------------
@@ -55,19 +56,24 @@ $side-menu-item-vpadding: 5px;
 
 // Sample Panel
 // ---------------------------
-$samples-panel-bg-color: #263238;
+$samples-panel-bg-color: $black;
 $samples-panel-width: 40%;
-$sample-panel-headers-color: #8A9094;
+$sample-panel-headers-color: lighten($black, 50%);
-$sample-panel-color: #CFD2D3;
+$sample-panel-color: lighten($black, 80%);
 
 $tree-lines-color: #7D97CE;
 
 $side-menu-mobile-breakpoint: 1000px;
 
+// Border Radius
+// ---------------------------
+$border-radius: 2px;
+
 // Global Styles
 // ---------------------------
 @for $index from 1 through 5 {
   h#{$index}{
+    margin-top: 0;
     font-family: $headers-font, $headers-font-family;
     color: $headers-color;
     font-weight: $headers-font-weight;
@@ -99,105 +105,3 @@ footer {
     color: $headers-color;
   }
 }
-
-/* global redoc styles */
-
-:host p {
-  margin: 0;
-  margin-bottom: 1em;
-}
-
-/* markdown elements */
-
-:host .redoc-markdown-block {
-  pre {
-    font-family: Courier, monospace;
-    white-space: pre-wrap;
-    background-color: rgba(0,0,0,0.04);
-    padding: 10px;
-    overflow-x: auto;
-    line-height: normal;
-    border-radius: 3px;
-
-    code {
-      background-color: transparent;
-
-      &:before, &:after {
-        content: none;
-      }
-    }
-  }
-
-  code {
-    font-family: Courier, monospace;
-    background-color: rgba(0,0,0,0.04);
-    padding: 0.2em 0;
-    font-size: 0.85em;
-    border-radius: 3px;
-
-    &:before, &:after {
-      letter-spacing: -0.2em;
-      content: "\\00a0";
-    }
-  }
-
-  p {
-    margin: 0;
-    font-size: $base-font-size;
-    margin-bottom: 1em;
-  }
-
-  p:last-of-type {
-    margin-bottom: 0;
-  }
-
-  blockquote {
-    margin: 0;
-    margin-bottom: 1em;
-    padding: 0 15px;
-    color: #777;
-    border-left: 4px solid #ddd;
-  }
-
-  img {
-    max-width: 100%;
-    box-sizing: content-box;
-  }
-
-  ul, ol {
-    padding-left: 2em;
-    margin: 0;
-    margin-bottom: 1em;
-  }
-
-  table {
-    display: block;
-    width: 100%;
-    overflow: auto;
-    word-break: normal;
-    word-break: keep-all;
-    border-collapse: collapse;
-    border-spacing: 0;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-
-  table tr {
-    background-color: #fff;
-    border-top: 1px solid #ccc;
-
-    &:nth-child(2n) {
-      background-color: #f8f8f8;
-    }
-  }
-
-  table th, table td {
-    padding: 6px 13px;
-    border: 1px solid #ddd;
-  }
-
-  table th {
-    text-align: left;
-    font-weight: bold;
-  }
-}

lib/components/Method/method.html

@@ -3,10 +3,10 @@
     <h2 class="method-header sharable-header">
       <a class="share-link" href="#{{data.methodAnchor}}"></a>{{data.methodInfo.summary}}
     </h2>
-    <h3 class="method-endpoint">
+    <span class="method-endpoint">
-      <span class="http-method" [ngClass]="data.httpMethod">{{data.httpMethod}}</span>
+      <h5 class="http-method" [ngClass]="data.httpMethod">{{data.httpMethod}}</h5>
       <span class="api-url">{{data.apiUrl}}</span> <span class="path">{{data.path}}</span>
-    </h3>
+    </span>
     <div class="method-tags" *ngIf="data.methodInfo.tags.length">
       <a *ngFor="#tag of data.methodInfo.tags" attr.href="#{{tag}}"> {{tag}} </a>
     </div>

lib/components/Method/method.scss

@@ -12,31 +12,40 @@ responses-list, params-list {
 }
 
 .method-header {
-  margin-bottom: 1em;
+  margin-bottom: .5em;
 }
 
 .method-endpoint {
-  margin: 0;
+  margin: 0 0 2em 0;
-  font-weight: 200;
+  display: block;
-  font-size: 0;
+  font-weight: $light;
 }
 
-.method-endpoint > span {
+.method-endpoint > h5 {
-  padding-top: 3px;
+  padding-top: 4px;
   padding-bottom: 3px;
+  margin: 0;
+  font-size: .8em;
   vertical-align: middle;
-  font-size: 14px;
+  display: inline-block;
+  border-radius: $border-radius;
 }
 
 .api-url {
-  color: #999;
+  color: lighten($text-color, 30%);
   margin-left: 10px;
+  margin-top: 2px;
+  position: relative;
+  top: 1px;
+  font-size: 1em!important;
 }
 
 .path {
-  font-family: monospace;
+  font-weight: $bold;
-  font-weight: bold;
+  position: relative;
+  top: 1px;
   color: $headers-color;
+  font-size: 1em!important;
 }
 
 .method-tags {
@@ -68,13 +77,13 @@ responses-list, params-list {
 
 .method-content {
   width: 100% - $samples-panel-width;
-  padding: 20px 20px;
+  padding: 40px;
 }
 
 .method-samples {
   color: $sample-panel-color;
   width: 40%;
-  padding: 10px 20px;
+  padding: 40px;
   background: $samples-panel-bg-color;
 }
 
@@ -124,7 +133,7 @@ responses-samples {
 }
 
 .http-method.put {
-  background-color: crimson;
+  background-color: $red;
 }
 
 .http-method.options {

lib/components/MethodsList/methods-list.scss

@@ -2,7 +2,7 @@
 @import '../../common/styles/share-link';
 
 .tag-info {
-  padding: 0 20px;
+  padding: 40px;
   box-sizing: border-box;
   background-color: white;
 }

lib/components/ParamsList/params-list.html

@@ -1,6 +1,7 @@
-<h2 class="param-list-header" *ngIf="data.params.length"> Parameters </h2>
+<h4 class="param-list-header" *ngIf="data.params.length"> Parameters </h4>
 <template ngFor [ngForOf]="data.params" #paramType="$implicit">
   <header class="paramType"> {{paramType.place}} Parameters </header>
+  <br>
   <div class="params-wrap">
     <div *ngFor="#param of paramType.params" class="param">
         <div class="param-name">
@@ -22,10 +23,11 @@
 </template>
 
 <div *ngIf="data.bodyParam">
-  <h2 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h2>
+  <h4 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h4>
 
   <div class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
   <div>
+    <br>
     <json-schema-lazy [auto]="true" pointer="{{data.bodyParam.pointer}}/schema">
     </json-schema-lazy>
   </div>

lib/components/ParamsList/params-list.scss

@@ -1,10 +1,12 @@
+@import '../../common/styles/variables';
+
 .param-list-header {
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid lighten($text-color, 60%);
-  font-size: 18px;
   padding: 0.2em 0;
-  margin: 0.5em 0;
+  margin: 3em 0 .5em 0;
-  color: #253137;
+  color: $text-color;
   font-weight: normal;
+  text-transform: uppercase;
 }
 
 @import '../JsonSchema/json-schema-common';

lib/components/Redoc/redoc-loading-styles.scss

@@ -13,11 +13,12 @@ redoc.loading {
 }
 
 redoc.loading:before {
+  font-family: Montserrat;
   content: "Loading...";
   font-size: 28px;
   text-align: center;
   padding-top: 40px;
-  color: #3F5C9C;
+  color: #0033a0;
   font-weight: bold;
   display: block;
   position: absolute;

lib/components/Redoc/redoc.scss

@@ -29,7 +29,7 @@ api-info, .side-bar {
 }
 
 api-info {
-  padding: 10px 20px;
+  padding: 40px;
 }
 
 api-logo {
@@ -78,3 +78,100 @@ api-logo {
 #api-content.menu-opened:after {
   display: block;;
 }
+
+/* global redoc styles */
+
+:host p {
+  margin: 0;
+  margin-bottom: 1em;
+}
+
+/* markdown elements */
+
+:host .redoc-markdown-block {
+  pre {
+    font-family: Courier, monospace;
+    white-space: pre-wrap;
+    background-color: rgba(38,50,56,0.04);
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: $border-radius;
+    border: 1px solid rgba(38,50,56,0.1);
+
+    code {
+      background-color: transparent;
+
+      &:before, &:after {
+        content: none;
+      }
+    }
+  }
+
+  code {
+    font-family: Courier, monospace;
+    background-color: rgba(0,0,0,0.04);
+    padding: 0.2em 0;
+    font-size: 1em;
+    border-radius: 3px;
+
+    &:before, &:after {
+      letter-spacing: -0.2em;
+      content: "\\00a0";
+    }
+  }
+
+  p:last-of-type {
+    margin-bottom: 1em;
+  }
+
+  blockquote {
+    margin: 0;
+    margin-bottom: 1em;
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+  }
+
+  ul, ol {
+    padding-left: 2em;
+    margin: 0;
+    margin-bottom: 1em;
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+
+    &:nth-child(2n) {
+      background-color: #f8f8f8;
+    }
+  }
+
+  table th, table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+  }
+
+  table th {
+    text-align: left;
+    font-weight: bold;
+  }
+}

lib/components/RequestSamples/request-samples.scss

@@ -1,24 +1,32 @@
 @import '../../common/styles/variables';
 
 header {
-  font-size: 16px;
+  font-family: $headers-font;
-  margin: 5px 0;
+  font-size: .9em;
+  text-transform: uppercase;
+  margin: 0 0 12px 0;
   color: $sample-panel-headers-color;
   text-transform: uppercase;
   font-weight: normal;
 }
 
 :host > tabs > ul li {
-  font-size: 13px;
+  font-family: $headers-font;
+  font-size: .9em;
+  border-radius: $border-radius;
   margin: 2px 0;
-  padding: 2px 5px;
+  padding: 3px 10px 2px 10px;
   color: #8A9094;
   line-height: 1.25;
   color: $sample-panel-headers-color;
 
+  &.hover {
+    color: #ffffff;
+  }
+
   &.active {
-    background-color: white;
+    background-color: #ffffff;
-    color: #666;
+    color: $text-color;
   }
 }
 

lib/components/ResponsesSamples/responses-samples.scss

@@ -9,8 +9,10 @@ schema-sample {
 }
 
 header {
-  font-size: 16px;
+  font-family: $headers-font;
-  margin: 5px 0;
+  font-size: .9em;
+  text-transform: uppercase;
+  margin: 0 0 12px 0;
   color: $sample-panel-headers-color;
   text-transform: uppercase;
   font-weight: normal;