Merge branch 'master' into releases

README.md

@@ -1,7 +1,7 @@
 # ReDoc
 [![Build Status](https://travis-ci.org/Rebilly/ReDoc.svg?branch=master)](https://travis-ci.org/Rebilly/ReDoc) [![Coverage Status](https://coveralls.io/repos/Rebilly/ReDoc/badge.svg?branch=master&service=github)](https://coveralls.io/github/Rebilly/ReDoc?branch=master) [![Code Climate](https://codeclimate.com/github/Rebilly/ReDoc/badges/gpa.svg)](https://codeclimate.com/github/Rebilly/ReDoc) [![David](https://david-dm.org/Rebilly/ReDoc/dev-status.svg)](https://david-dm.org/Rebilly/ReDoc#info=devDependencies) [![Stories in Ready](https://badge.waffle.io/Rebilly/ReDoc.png?label=ready&title=Ready)](https://waffle.io/Rebilly/ReDoc)
 
-[![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/swagger-parser) [![Bower](http://img.shields.io/bower/v/redoc.svg)](http://bower.io/) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Rebilly/ReDoc/blob/master/LICENSE)
+[![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/redoc) [![Bower](http://img.shields.io/bower/v/redoc.svg)](http://bower.io/) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Rebilly/ReDoc/blob/master/LICENSE)
 
 [![Browser Compatibility](https://saucelabs.com/browser-matrix/redoc.svg)](https://saucelabs.com/u/redoc)
 

demo/main.css

@@ -1,10 +1,31 @@
+@import url(http://fonts.googleapis.com/css?family=#{$base-font}:#{$light},#{$regular},#{$bold});
+@import url(http://fonts.googleapis.com/css?family=#{$headers-font}:#{$light},#{$regular});
+
 body {
-  font-family: Verdana, Geneva, sans-serif;
-  font-size: 14px;
-  color: #333;
     margin: 0;
-  line-height: 1.5;
     padding-top: 50px;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -moz-tap-highlight-color: rgba(0,0,0,0);
+    -ms-tap-highlight-color: rgba(0,0,0,0);
+    -o-tap-highlight-color: rgba(0,0,0,0);
+    tap-highlight-color: rgba(0,0,0,0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smoothing: antialiased;
+    -webkit-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
+    osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+    -ms-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+    text-rendering: optimizeSpeed!important;
+    font-smooth: always;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 nav input, nav button  {
@@ -16,6 +37,7 @@ nav input, nav button  {
     outline: none;
 }
 nav header {
+    font-family: Monserrat, sans-serif;
     float: left;
     margin-left: 20px;
     font-size: 25px;

lib/common/components/Tabs/tabs.scss

@@ -19,30 +19,31 @@ li.active {
   &:before {
     content: "";
     display: inline-block;
-    vertical-align: middle;
+    position: relative;
-    height: 6px;
+    top: -2px;
-    width: 6px;
+    height: 4px;
+    width: 4px;
     border-radius: 50%;
     margin-right: 0.5em;
   }
 }
 
 .tab-success:before {
-  box-shadow: 0 0 3px 0 #00aa11;
+  box-shadow: 0 0 3px 0 $green;
-  background-color: #00aa11;
+  background-color: $green;
 }
 
 .tab-error:before {
-  box-shadow: 0 0 3px 0 #E53935;
+  box-shadow: 0 0 3px 0 $red;
-  background-color: #E53935;
+  background-color: $red;
 }
 
 .tab-redirect:before {
-  box-shadow: 0 0 3px 0 #F88F00;
+  box-shadow: 0 0 3px 0 $yellow;
-  background-color: #F88F00;
+  background-color: $yellow;
 }
 
 .tab-info:before {
-  box-shadow: 0 0 3px 0 #66C2FF;
+  box-shadow: 0 0 3px 0 $primary-color;
-  background-color: #66C2FF;
+  background-color: $primary-color;
 }

lib/common/components/Zippy/zippy.scss

@@ -1,17 +1,18 @@
-$zippy-success-bg-color: #E1F5E3;
+$zippy-success-color: #00aa13;
-$zippy-success-color: #09AC1C;
+$zippy-success-bg-color: rgba($zippy-success-color, .08);
 
-$zippy-error-bg-color: #FBE7E7;
+$zippy-error-color: #e53935;
-$zippy-error-color: #E54541;
+$zippy-error-bg-color: rgba($zippy-error-color, .06);
 
-$zippy-info-bg-color: #E1EFF5;
+$zippy-info-color: #0033a0;
-$zippy-info-color: #096DAC;
+$zippy-info-bg-color: rgba($zippy-info-color, .08);
 
-$zippy-redirect-bg-color: #F5F0E1;
+$zippy-redirect-color: #263238;
-$zippy-redirect-color: #AC7C09;
+$zippy-redirect-bg-color: rgba($zippy-redirect-color, .08);
 
 .zippy-title {
   padding: 10px;
+  border-radius: 2px;
   margin: 2px 0;
   line-height: 1.5em;
   background-color: #f2f2f2;
@@ -39,10 +40,10 @@ $zippy-redirect-color: #AC7C09;
 }
 
 span.zippy-indicator {
-  font-size: 1.5em;
+  font-size: 1.2em;
-  line-height: 1;
   margin-right: 0.2em;
-  vertical-align: text-bottom;
+  position: relative;
+  top: 0;
 }
 
 .zippy-content {

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

@@ -1,20 +1,65 @@
-$headers-color: #00329F;
+// Colors
-$method-headers-color: #253137;
+// ---------------------------
+$primary-color : #0033a0;
+$secondary-color : #263238;
+$black : #263238;
+$green : #00aa13;
+$yellow : #f1c400;
+$red : #e53935;
 
+// Font
+// ---------------------------
+$em-size : 14px;
+
+// Font weights
+// ---------------------------
+$light : 300;
+$regular : 400;
+$bold : 700;
+
+// Base Font
+// ---------------------------
+$base-font : Roboto;
+$base-font-family : sans-serif;
+$base-font-weight : $light;
+$base-font-size : 1em;
+$base-line-height : 1.55em;
+$text-color : $black;
+
+// Heading Font
+// ---------------------------
+$headers-font : Montserrat;
+$headers-font-family : sans-serif;
+$headers-font-weight : $regular;
+$headers-color : $primary-color;
+$method-headers-color : $primary-color;
+$h1: 1.85714285714286em;
+$h2: 1.5714285714285714em;
+$h3: 1.2857142857142858em;
+$h4: 1.1428571428571428em;
+$h5: 0.929em;
+
+// Side Bar
+// ---------------------------
 $side-bar-width: 260px;
 $side-bar-bg-color: #FAFAFA;
-
 $side-menu-item-color: #384248;
 $side-menu-even-bg-color: #F0F0F0;
-$side-menu-active-bg-color: #DEDEDE;
+$side-menu-active-bg-color: #f0f0f0;
 $side-menu-item-hpadding: 20px;
 $side-menu-item-vpadding: 5px;
 
-$samples-panel-bg-color: #263238;
+// Sample Panel
+// ---------------------------
+$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;
+$tree-lines-color: rgba($primary-color, .5);
 
 $side-menu-mobile-breakpoint: 1000px;
+
+// Border Radius
+// ---------------------------
+$border-radius: 2px;

lib/components/ApiInfo/api-info.html

@@ -1,6 +1,7 @@
-<h1 class="api-info-header">{{data.title}} ({{data.version}})</h1>
+<div>
-<p *ngIf="data.description" innerHtml="{{data.description | marked}}"> </p>
+  <h1 class="api-info-header">{{data.title}} ({{data.version}})</h1>
-<p>
+  <p *ngIf="data.description" innerHtml="{{data.description | marked}}"> </p>
+  <p>
     <!-- TODO: create separate components for contact and license ? -->
     <span *ngIf="data.contact"> Contact:
       <a *ngIf="data.contact.url" href="{{data.contact.url}}">
@@ -12,4 +13,5 @@
       <a *ngIf="data.license.url" href="{{data.license.url}}"> {{data.license.name}} </a>
       <span *ngIf="!data.license.url"> {{data.license.name}} </span>
     </span>
-</p>
+  </p>
+</div>

lib/components/ApiInfo/api-info.scss

@@ -1,6 +1,9 @@
 @import '../../common/styles/variables';
 
 .api-info-header {
-  color: $headers-color;
   font-weight: normal;
 }
+
+:host > div {
+  width: 60%;
+}

lib/components/JsonSchema/json-schema-common.scss

@@ -1,6 +1,6 @@
 @import '../../common/styles/variables';
 $lines-width: 1px;
-$bullet-size: 7px;
+$bullet-size: 1px;
 $cell-spacing: 25px;
 $cell-padding: 10px;
 $bullet-margin: 10px;
@@ -11,6 +11,7 @@ $param-name-height: 20px;
 
 $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
+/*
 .param-schema {
   padding-left: $sub-schema-offset - $lines-width;
   border-left: $line-border;
@@ -18,29 +19,19 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
 .param-wrap {
   position: relative;
-}
+}*/
-
-.param-schema:before {
-  content: "";
-  position: absolute;
-  left: $sub-schema-offset;
-  top: ($param-name-height/2) + $cell-padding;
-  bottom: 0;
-  border-left: $line-border;
-}
 
 .param-name {
-  flex-grow: 0;
+
-  -ms-flex-grow: 0;
+  font-size: 0.929em;
-  display: inline-block;
-  font-size: 14px;
   padding: $cell-padding 0 $cell-padding 0;
-  font-weight: bold;
+  font-weight: $regular;
   box-sizing: border-box;
   line-height: $param-name-height;
   border-left: $line-border;
   white-space: nowrap;
   position: relative;
+  vertical-align: top;
 }
 
 .param-name-content {
@@ -49,18 +40,14 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 }
 
 .param-info {
-  //width: 100%;
-  flex-grow: 1;
-  -ms-flex-grow: 1;
   padding: $cell-padding 0;
   box-sizing: border-box;
   border-bottom: 1px solid #ccc;
-  display: inline-block;
+  width: 75%;
 }
 
-.param {
+.param-description {
-  display: flex;
+    font-size: 13px;
-  display: -ms-flexbox;
 }
 
 .param-required {
@@ -72,32 +59,21 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 }
 
 .param-type {
-  color: #999;
+  color: $black;
-  font-size: 12px;
+  font-size: 0.929em;
   line-height: $param-name-height;
   vertical-align: middle;
-  font-weight: bold;
+  font-weight: normal;
 }
 
 .param-type.array:before {
   content: "Array of ";
-  color: #999;
+  color: $black;
+  font-weight: $base-font-weight;
 }
 
-.param-type.string, .enum-value.string {
+.param-type {
-  color: rgba(0, 80, 0, 0.7);
+    color: rgba($black, 0.4);
-}
-
-.param-type.integer, .param-type.number, .enum-value.number {
-  color: rgba(74, 139, 179, 0.8);
-}
-
-.param-type.object {
-  color: rgba(0, 50, 159, 0.7);
-}
-
-.param-type.boolean, .enum-value.boolean {
-  color: firebrick;
 }
 
 .param-type.with-hint {
@@ -116,12 +92,13 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 /* tree */
 
 // Bullet
+
 .param-name > span:before {
   content: "";
   display: inline-block;
   width: $bullet-size;
-  height: $bullet-size;
+  height: $bullet-size + 6;
-  background-color: $tree-lines-color;
+  background-color: $primary-color;
   margin: 0 $bullet-margin;
   vertical-align: middle;
 }
@@ -135,7 +112,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   top: ($param-name-height/2) + $cell-padding;
 }
 
-.param-wrap:first-of-type > .param > .param-name:before {
+ .param:first-of-type > .param-name:before {
   content: "";
   display: block;
   position: absolute;
@@ -145,14 +122,14 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   height: ($param-name-height/2) + $cell-padding;
 }
 
-.param-wrap:last-of-type > .param > .param-name {
+.param:last-of-type > .param-name {
-  position: static;
+  position: relative;
 
   &:after {
     content: "";
     display: block;
     position: absolute;
-    left: -$lines-width;
+    left: -$lines-width - 1px;
     border-left: $line-border-erase;
     top: ($param-name-height/2) + $cell-padding + $lines-width;
     background-color: white;
@@ -169,7 +146,8 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 }
 
 .param-enum {
-  color: #666;
+  color: $text-color;
+  font-size: 13px;
 
   &:before {
     content: "Values: {"

lib/components/JsonSchema/json-schema.html

@@ -2,13 +2,13 @@
   <span class="param-type param-type-trivial {{type}}"
   [ngClass]="{'with-hint': _displayTypeHint}" title="{{_displayTypeHint}}">{{_displayType}}</span>
 </span>
-<div *ngIf="!isTrivial" class="params-wrap" [ngClass]="{'params-array': isArray}">
+<table *ngIf="!isTrivial" class="params-wrap" [ngClass]="{'params-array': isArray}">
-  <div *ngFor="#prop of data.properties" class="param-wrap">
+  <template ngFor [ngForOf]="data.properties" #prop="$implicit">
-    <div class="param" [ngClass]="{'discriminator': prop.isDiscriminator}">
+    <tr class="param" [ngClass]="{'discriminator': prop.isDiscriminator, 'complex': prop._pointer}">
-      <div class="param-name">
+      <td class="param-name">
         <span class="param-name-content">{{prop._name}}</span>
-      </div>
+      </td>
-      <div class="param-info">
+      <td class="param-info">
         <div>
           <span class="param-type {{prop.type}}" [ngClass]="{'with-hint': prop._displayTypeHint}"
           title="{{prop._displayTypeHint}}"> {{prop._displayType}} {{prop._displayFormat}}</span>
@@ -19,19 +19,23 @@
         </div>
         <div class="param-description" innerHtml="{{prop.description | marked}}"></div>
         <div class="discriminator-info" *ngIf="prop.isDiscriminator"> This field value determines the exact schema: </div>
-      </div>
+      </td>
-    </div>
+    </tr>
-    <div class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
+    <tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
-      <json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray'>
+      <td colspan="2">
+        <json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray' class="nested-schema">
         </json-schema>
-    </div>
+      </td>
-  </div>
+    </tr>
-  <div *ngIf="data.derived.length" class="param-wrap">
+  </template>
+  <tr *ngIf="data.derived.length" class="param-wrap discriminator-wrap">
+    <td colspan="2">
       <tabs>
         <tab *ngFor="#derived of data.derived" tabTitle="{{derived.name}}">
-        <json-schema pointer="{{derived.$ref}}" [final]="derived.final">
+          <json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part">
           </json-schema>
         </tab>
       </tabs>
-  </div>
+    </td>
-</div>
+  </tr>
+</table>

lib/components/JsonSchema/json-schema.js

@@ -130,30 +130,4 @@ export default class JsonSchema extends BaseComponent {
 
     return propData;
   }
-
-  ngAfterViewInit() {
-    // adjust widht only on parent level
-    let $el = this.$element.parentElement;
-    while($el && $el.tagName !== 'JSON-SCHEMA' && $el.tagName !== 'REDOC') {
-      $el = $el.parentElement;
-    }
-    if ($el && $el.tagName === 'REDOC' ) {
-      this.adjustNameColumnWidth();
-    }
-  }
-
-  adjustNameColumnWidth() {
-    // TODO handle internal schemes differently
-
-    let names = [].slice.call(this.$element.querySelectorAll('.param-name-content'));
-    let widths = names.map(el => el.offsetWidth);
-    let maxWidth = Math.max(...widths);
-    if (!maxWidth) return;
-    names.forEach(el => {
-      el.parentNode.style.minWidth = maxWidth + 'px';
-    });
-
-    let discrValues = this.$element.querySelector('tabs ul');
-    if (discrValues) discrValues.style.paddingLeft = maxWidth + 'px';
-  }
 }

lib/components/JsonSchema/json-schema.scss

@@ -1,16 +1,61 @@
 @import 'json-schema-common';
 
 /* styles for array-schema for array */
-$array-marker-font-sz: 12px;
+$array-marker-font-sz: 13px;
 $array-marker-line-height: 1.5;
 :host {
   display: block;
 }
 
+.param-schema > td {
+  border-left: $line-border;
+  padding: 0 10px;
+}
+
+json-schema.nested-schema {
+  background-color: $side-menu-active-bg-color;
+  padding: 10px 20px;
+  position: relative;
+  border-radius: $border-radius;
+
+  &:before, &:after {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-width: 10px 15px 0;
+    margin-left: -7.5px;
+    border-top-color: white;
+  }
+  &:before {
+    left: 10%;
+  }
+
+  &:after {
+    right: 10%;
+  }
+
+  .param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after {
+    border-color: #f1f1f1;
+  }
+}
+
+.param.complex > .param-info {
+  border-bottom: 0;
+}
+
+.params-wrap {
+  border-collapse: collapse;
+  width: 100%;
+}
+
 .params-wrap.params-array:before, .params-wrap.params-array:after {
   display: block;
-  font-weight: bold;
+  font-weight: $base-font-weight;
-  color: #999;
+  color: $black;
   font-size: $array-marker-font-sz;
   line-height: $array-marker-line-height;
 }
@@ -50,19 +95,31 @@ $array-marker-line-height: 1.5;
 }
 
 .param.discriminator {
-  > div {
+  > .param-info {
     padding-bottom: 0;
     border-bottom: 0;
   }
+
+  > .param-name:after {
+    display: none;
+  }
 }
 
 .discriminator-info {
   font-weight: bold;
 }
 
+.discriminator-wrap > td {
+  border-left: $line-border;
+  padding: 0;
+}
+
 :host tabs {
   display: block;
-  border-left: 1px solid $tree-lines-color;
+}
+
+:host ul {
+    text-align: center;
 }
 
 :host tabs li {
@@ -82,10 +139,3 @@ $array-marker-line-height: 1.5;
     background-color: $headers-color;
   }
 }
-
-tabs .params-wrap > .param-wrap:first-of-type .param-name {
-  border-left: 0;
-  &:before {
-    display: none;
-  }
-}

lib/components/Method/method.html

@@ -3,10 +3,6 @@
         <h2 class="method-header sharable-header">
             <a class="share-link" href="#{{data.methodAnchor}}"></a>{{data.methodInfo.summary}}
         </h2>
-    <h3 class="method-endpoint">
-      <span class="http-method" [ngClass]="data.httpMethod">{{data.httpMethod}}</span>
-      <span class="api-url">{{data.apiUrl}}</span> <span class="path">{{data.path}}</span>
-    </h3>
         <div class="method-tags" *ngIf="data.methodInfo.tags.length">
             <a *ngFor="#tag of data.methodInfo.tags" attr.href="#{{tag}}"> {{tag}} </a>
         </div>
@@ -15,14 +11,21 @@
     </p>
     <params-list pointer="{{pointer}}/parameters"> </params-list>
     <responses-list pointer="{{pointer}}/responses"> </responses-list>
-  </div>
+</div>
-  <div class="method-samples">
+<div class="method-samples">
+    <h5>Definition</h5>
+    <span class="method-endpoint">
+        <h5 class="http-method" [ngClass]="data.httpMethod">{{data.httpMethod}}</h5>
+        <span class="api-url">{{data.apiUrl}}</span> <span class="path">{{data.path}}</span>
+    </span>
     <div *ngIf="data.bodyParam">
+        <br>
         <request-samples [pointer]="pointer" [bodySchemaPtr]="data.bodyParam._pointer">
         </request-samples>
     </div>
     <div>
+        <br>
         <responses-samples pointer="{{pointer}}/responses"> </responses-samples>
     </div>
-  </div>
+</div>
 <div>

lib/components/Method/method.scss

@@ -4,7 +4,7 @@
 :host {
   padding-bottom: 100px;
   display: block;
-  border-bottom: 2px solid rgba(127, 127, 127, 0.25);
+  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
 }
 
 responses-list, params-list {
@@ -12,33 +12,45 @@ responses-list, params-list {
 }
 
 .method-header {
-  font-size: 25px;
+  margin-bottom: .9em;
-  font-weight: 200;
-  color: $method-headers-color;
 }
 
 .method-endpoint {
-  margin: 0;
+  margin: 0 0 2em 0;
-  font-weight: 200;
+  padding: 10px 20px;
-  font-size: 0;
+  border-radius: $border-radius*2;
+  background-color: darken($black, 2%);
+  display: block;
+  font-weight: $light;
 }
 
-.method-endpoint > span {
+.method-endpoint > h5 {
-  padding-top: 3px;
+  padding-top: 1px;
-  padding-bottom: 3px;
+  padding-bottom: 0;
+  margin: 0;
+  font-size: .8em;
+    color: $black;
   vertical-align: middle;
-  font-size: 14px;
+  display: inline-block;
+  border-radius: $border-radius;
 }
 
 .api-url {
-  color: #999;
+  color: rgba(#ffffff, .8);
   margin-left: 10px;
+  margin-top: 2px;
+  position: relative;
+  top: 1px;
+  font-family: $headers-font, $headers-font-family;
+  font-size: 0.929em!important;
 }
 
 .path {
-  font-family: monospace;
+  font-family: $headers-font, $headers-font-family;
-  font-weight: bold;
+  position: relative;
-  color: $headers-color;
+  top: 1px;
+  color: #ffffff;
+  font-size: 0.929em!important;
 }
 
 .method-tags {
@@ -70,13 +82,13 @@ responses-list, params-list {
 
 .method-content {
   width: 100% - $samples-panel-width;
-  padding: 0 20px;
+  padding: 40px;
 }
 
 .method-samples {
   color: $sample-panel-color;
   width: 40%;
-  padding: 10px 20px;
+  padding: 40px;
   background: $samples-panel-bg-color;
 }
 
@@ -84,13 +96,16 @@ responses-samples {
   display: block;
 }
 
-.method-samples header {
+.method-samples header,
-  font-size: 16px;
+.method-samples > h5 {
-  margin: 5px 0;
   color: $sample-panel-headers-color;
   text-transform: uppercase;
 }
 
+.method-samples > h5 {
+    margin-bottom: 8px;
+}
+
 .method-samples schema-sample {
   display: block;
 }
@@ -102,41 +117,17 @@ responses-samples {
 }
 
 .method-description {
-  padding: 30px 0;
+  padding: 6px 0 10px 0;
   margin: 0;
 }
 
 .http-method {
-  color: white;
+  color: $black;
-  background-color: #1976D3;
+  background: #ffffff;
   padding: 3px 10px;
   text-transform: uppercase;
 }
 
-.http-method.delete {
-  background-color: red;
-}
-
-.http-method.post {
-  background-color: #00329F;
-}
-
-.http-method.patch {
-  background-color: orange;
-}
-
-.http-method.put {
-  background-color: crimson;
-}
-
-.http-method.options {
-  background-color: black;
-}
-
-.http-method.head {
-  background-color: darkkhaki;
-}
-
 @media (max-width: 1100px) {
   .methods:before {
     display: none;

lib/components/MethodsList/methods-list.scss

@@ -2,9 +2,10 @@
 @import '../../common/styles/share-link';
 
 .tag-info {
-  padding: 0 20px;
+  padding: 40px;
   box-sizing: border-box;
   background-color: white;
+  width: 60%;
 }
 
 .tag-info:after, .tag-info:before {
@@ -22,20 +23,3 @@
   display: block;
   position: relative;;
 }
-
-.methods:before {
-  content: "";
-  background: $samples-panel-bg-color;
-  height: 100%;
-  width: $samples-panel-width;
-  top: 0;
-  right: 0;
-  position: absolute;
-  z-index: -1;
-}
-
-@media (max-width: 1100px) {
-  .methods:before {
-    display: none;
-  }
-}

lib/components/ParamsList/params-list.html

@@ -1,6 +1,7 @@
-<h2 class="param-list-header" *ngIf="data.params.length"> Parameters </h2>
+<h5 class="param-list-header" *ngIf="data.params.length"> Parameters </h5>
 <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>
+  <h5 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h5>
 
   <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 rgba($text-color, .3);
-  font-size: 18px;
   padding: 0.2em 0;
-  margin: 0.5em 0;
+  margin: 3.5em 0 .8em 0;
-  color: #253137;
+  color: rgba($text-color, .5);
   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

@@ -7,6 +7,10 @@
 
 .redoc-wrap {
     position: relative;
+    font-family: $base-font, $base-font-family;
+    font-size: $em-size;
+    line-height: $base-line-height;
+    color: $text-color;
 }
 
 side-menu {
@@ -25,7 +29,7 @@ api-info, .side-bar {
 }
 
 api-info {
-  padding: 10px 20px;
+    padding: 40px;
 }
 
 api-logo {
@@ -52,51 +56,80 @@ api-logo {
 
 #api-content {
   margin-left: $side-bar-width;
+  position: relative;
   @media (max-width: $side-menu-mobile-breakpoint) {
       padding-top: 3em;
       margin-left: 0;
   }
 }
 
-#api-content:after {
+#api-content:before {
   content: "";
-  position: absolute;;
+  background: $samples-panel-bg-color;
-  left:0;
+  height: 100%;
-  right: 0;
+  width: $samples-panel-width;
   top: 0;
-  bottom: 0;
+  right: 0;
-  background-color: black;
+  position: absolute;
-  opacity: 0.5;
+  z-index: -1;
-  transition: all 0.3s ease;
+}
+
+
+@media (max-width: 1100px) {
+  #api-content:before {
     display: none;
+  }
 }
 
-#api-content.menu-opened:after {
+/* global redoc styles */
-  display: block;;
+
+@for $index from 1 through 5 {
+    :host h#{$index}{
+        margin-top: 0;
+        font-family: $headers-font, $headers-font-family;
+        color: $headers-color;
+        font-weight: $headers-font-weight;
+    }
 }
 
-footer {
+:host {
-  text-align: right;
+    h1 { font-size: $h1; }
-  padding: 10px;
+    h2 { font-size: $h2; }
-  font-size: 15px;
+    h3 { font-size: $h3; }
+    h4 { font-size: $h4; }
+    h5 { font-size: $h5; }
+
+    p {
+        font-family: $base-font, $base-font-family;
+        font-weight: $base-font-weight;
+        margin: 0;
+        margin-bottom: 1em;
+        line-height: $base-line-height;
+    }
 
     a {
-    color: #999;
         text-decoration: none;
+        color: $primary-color;
+    }
+
+    p > code {
+        color: $red;
+        border: 1px solid rgba(38,50,56,0.1);
     }
 
     strong {
         font-size: 18px;
         color: $headers-color;
     }
+
+    footer {
+        text-align: right;
+        padding: 10px;
+        font-size: 15px;
+    }
 }
 
-/* global redoc styles */
 
-:host p {
-  margin: 0;
-  margin-bottom: 1em;
-}
 
 /* markdown elements */
 
@@ -104,11 +137,12 @@ footer {
     pre {
         font-family: Courier, monospace;
         white-space: pre-wrap;
-    background-color: rgba(0,0,0,0.04);
+        background-color: rgba(38,50,56,0.04);
-    padding: 10px;
+        padding: 12px 14px 15px 14px;
         overflow-x: auto;
         line-height: normal;
-    border-radius: 3px;
+        border-radius: $border-radius;
+        border: 1px solid rgba(38,50,56,0.1);
 
         code {
             background-color: transparent;
@@ -121,10 +155,10 @@ footer {
 
     code {
         font-family: Courier, monospace;
-    background-color: rgba(0,0,0,0.04);
+        background-color: rgba(38,50,56,0.04);
-    padding: 0.2em 0;
+        padding: 0.1em 0 0.2em 0;
-    font-size: 0.85em;
+        font-size: 1em;
-    border-radius: 3px;
+        border-radius: $border-radius;
 
         &:before, &:after {
             letter-spacing: -0.2em;
@@ -132,11 +166,6 @@ footer {
         }
     }
 
-  p {
-    margin: 0;
-    margin-bottom: 1em;
-  }
-
     p:last-of-type {
         margin-bottom: 0;
     }

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: $h5;
+    text-transform: uppercase;
+    margin: 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 {
+        background-color: rgba(white, .1);
+        color: #ffffff;
+    }
+
     &.active {
-    background-color: white;
+        background-color: #ffffff;
-    color: #666;
+        color: $text-color;
     }
 }
 

lib/components/ResponsesList/responses-list.html

@@ -11,9 +11,6 @@
       <div class="header-description" innerHtml="{{header.description | marked}}"> </div>
     </div>
   </div>
-  <header>
-    Response schema
-  </header>
   <json-schema *ngIf="response.schema && options.disableLazySchemas" class="schema type" pointer="{{response.pointer}}/schema">
   </json-schema>
   <json-schema-lazy #lazySchema pointer="{{response.schema ? response.pointer + '/schema' : null}}">

lib/components/ResponsesList/responses-list.scss

@@ -1,7 +1,9 @@
+@import '../../common/styles/variables';
+
 .responses-list-header {
   font-size: 18px;
   padding: 0.2em 0;
-  margin: 0.5em 0;
+  margin: 3em 0 1.1em 0;
   color: #253137;
   font-weight: normal;
 }

lib/components/ResponsesSamples/responses-samples.html

@@ -1,4 +1,4 @@
-<header *ngIf="data.responses.length"> Responses samples </header>
+<header *ngIf="data.responses.length"> Response samples </header>
 <tabs *ngIf="data.responses.length">
   <tab *ngFor="#response of data.responses" tabTitle="{{response.code}} {{response.description}}"
     [tabStatus]="response.type">

lib/components/ResponsesSamples/responses-samples.scss

@@ -9,24 +9,32 @@ schema-sample {
 }
 
 header {
-  font-size: 16px;
+    font-family: $headers-font;
-  margin: 5px 0;
+    font-size: 0.929em;
+    text-transform: uppercase;
+    margin: 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: 0.929em;
+    border-radius: $border-radius;
     margin: 2px 0;
-  padding: 2px 5px;
+    padding: 2px 8px 3px 8px;
-  color: #8A9094;
-  line-height: 1.25;
     color: $sample-panel-headers-color;
+    line-height: 1.25;
+
+    &:hover {
+        color: #ffffff;
+        background-color: rgba(white, .1);
+    }
 
     &.active {
         background-color: white;
-    color: #666;
+        color: $black;
     }
 }
 

lib/components/SchemaSample/schema-sample.scss

@@ -1,3 +1,5 @@
+@import '../../common/styles/variables';
+
 pre {
   background-color: transparent;
   padding: 0;
@@ -62,6 +64,13 @@ pre {
     padding-left: 6px;
   }
 
+  .redoc-json {
+      padding: 20px;
+      border-radius: $border-radius*2;
+      background-color: darken($black, 2%);
+      margin-bottom: 36px;
+  }
+
   ul, .redoc-json ul {
   	list-style-type: none;
   	padding: 0px;

lib/components/SideMenu/side-menu.html

@@ -6,7 +6,7 @@
   </span>
 </div>
 <div id="resources-nav">
-  <h2 class="menu-header"> API reference </h2>
+  <h5 class="menu-header"> API reference </h5>
   <div *ngFor="var cat of data.menu; #idx = index" class="menu-cat">
 
     <label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label>

lib/components/SideMenu/side-menu.scss

@@ -6,69 +6,68 @@ $mobile-menu-compact-breakpoint: 550px;
     color: $headers-color;
     padding: 0 $side-menu-item-hpadding;
     margin: 10px 0;
-  font-size: 16px;
 }
 
 .menu-cat-header {
-  font-size: 15px;
+    font-size: $h5;
+    font-family: $headers-font, $headers-font-family;
+    font-weight: $light;
     cursor: pointer;
-  color: $side-menu-item-color;
+    color: rgba($text-color, .6);
     text-transform: uppercase;
     background-color: $side-bar-bg-color;
-
+    -webkit-transition: all .15s ease-in-out;
+    -moz-transition: all .15s ease-in-out;
+    -ms-transition: all .15s ease-in-out;
+    -o-transition: all .15s ease-in-out;
+    transition: all .15s ease-in-out;
     display: block;
-  padding: $side-menu-item-vpadding $side-menu-item-hpadding;
+    padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding;
-}
 
-.menu-cat:nth-of-type(even) .menu-cat-header {
+    &:hover,
-  background-color: $side-menu-even-bg-color;
+    &.active {
-}
+        color: $primary-color;
-
+        background-color: $side-menu-active-bg-color;
-.menu-cat .menu-cat-header.active {
+    }
-  background-color: darken($side-menu-active-bg-color, 5%);
 }
 
 .menu-subitems {
     margin: 0;
+    font-size: 0.929em;
+    line-height: 1.2em;
+    font-weight: $light;
+    color: rgba($text-color, .9);
     padding: 0;
     height: 0;
     overflow: hidden;
-}
 
-.menu-subitems.active {
+    &.active {
         height: auto;
-}
+    }
 
-.menu-subitems li {
+    & li {
+        -webkit-transition: all .15s ease-in-out;
+        -moz-transition: all .15s ease-in-out;
+        -ms-transition: all .15s ease-in-out;
+        -o-transition: all .15s ease-in-out;
+        transition: all .15s ease-in-out;
         list-style: none inside none;
         cursor: pointer;
-
+        background-color: $side-menu-active-bg-color;
-  padding: $side-menu-item-vpadding $side-menu-item-hpadding;
+        padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2;
         padding-left: $side-menu-item-hpadding*2;
-  background-color: $side-bar-bg-color;
         overflow: hidden;
         text-overflow: ellipsis;
-}
-
-.menu-subitems li:nth-of-type(even) {
-  background-color: $side-menu-even-bg-color;
-}
-
-// invert item colors for odd categories
-.menu-cat:nth-of-type(odd) {
-  .menu-subitems li {
-    background-color: $side-menu-even-bg-color;
     }
 
-  .menu-subitems li:nth-of-type(even) {
+    & li:hover,
-    background-color: $side-bar-bg-color;
+    & li.active {
+        background: darken($side-menu-active-bg-color, 6%);
     }
 }
 
-.menu-cat .menu-subitems {
+
-  li.active, li.active:nth-of-type(even) {
+.menu-subitems li.active {
-    background-color: $side-menu-active-bg-color;
-  }
 }
 
 .mobile-nav {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "redoc",
   "description": "Swagger-generated API Reference Documentation",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "git://github.com/Rebilly/ReDoc"