Merge branch 'master' into releases

2024-11-24 09:33:44 +03:00 · 2016-03-14 22:42:28 +02:00 · 2016-03-14 22:42:28 +02:00 · 391c278d37
commit 391c278d37
parent 062ae34c15 6817737589
28 changed files with 721 additions and 602 deletions
--- a/README.md
+++ b/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)

--- a/demo/main.css
+++ b/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;
--- a/lib/common/components/Tabs/tabs.scss
+++ b/lib/common/components/Tabs/tabs.scss
@ -19,30 +19,31 @@ li.active {
  &:before {
    content: "";
    display: inline-block;
-    vertical-align: middle;
-    height: 6px;
-    width: 6px;
+    position: relative;
+    top: -2px;
+    height: 4px;
+    width: 4px;
    border-radius: 50%;
    margin-right: 0.5em;
  }
 }

 .tab-success:before {
-  box-shadow: 0 0 3px 0 #00aa11;
-  background-color: #00aa11;
+  box-shadow: 0 0 3px 0 $green;
+  background-color: $green;
 }

 .tab-error:before {
-  box-shadow: 0 0 3px 0 #E53935;
-  background-color: #E53935;
+  box-shadow: 0 0 3px 0 $red;
+  background-color: $red;
 }

 .tab-redirect:before {
-  box-shadow: 0 0 3px 0 #F88F00;
-  background-color: #F88F00;
+  box-shadow: 0 0 3px 0 $yellow;
+  background-color: $yellow;
 }

 .tab-info:before {
-  box-shadow: 0 0 3px 0 #66C2FF;
-  background-color: #66C2FF;
+  box-shadow: 0 0 3px 0 $primary-color;
+  background-color: $primary-color;
 }
--- a/lib/common/components/Zippy/zippy.scss
+++ b/lib/common/components/Zippy/zippy.scss
@ -1,17 +1,18 @@
-$zippy-success-bg-color: #E1F5E3;
-$zippy-success-color: #09AC1C;
+$zippy-success-color: #00aa13;
+$zippy-success-bg-color: rgba($zippy-success-color, .08);

-$zippy-error-bg-color: #FBE7E7;
-$zippy-error-color: #E54541;
+$zippy-error-color: #e53935;
+$zippy-error-bg-color: rgba($zippy-error-color, .06);

-$zippy-info-bg-color: #E1EFF5;
-$zippy-info-color: #096DAC;
+$zippy-info-color: #0033a0;
+$zippy-info-bg-color: rgba($zippy-info-color, .08);

-$zippy-redirect-bg-color: #F5F0E1;
-$zippy-redirect-color: #AC7C09;
+$zippy-redirect-color: #263238;
+$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;
-  line-height: 1;
+  font-size: 1.2em;
  margin-right: 0.2em;
-  vertical-align: text-bottom;
+  position: relative;
+  top: 0;
 }

 .zippy-content {
--- a/lib/common/styles/_share-link.scss
+++ b/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;
 }
--- a/lib/common/styles/_variables.scss
+++ b/lib/common/styles/_variables.scss
@ -1,20 +1,65 @@
-$headers-color: #00329F;
-$method-headers-color: #253137;
+// Colors
+// ---------------------------
+$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-color: #CFD2D3;
+$sample-panel-headers-color: lighten($black, 50%);
+$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;
--- a/lib/components/ApiInfo/api-info.html
+++ b/lib/components/ApiInfo/api-info.html
@ -1,3 +1,4 @@
+<div>
  <h1 class="api-info-header">{{data.title}} ({{data.version}})</h1>
  <p *ngIf="data.description" innerHtml="{{data.description | marked}}"> </p>
  <p>
@ -13,3 +14,4 @@
      <span *ngIf="!data.license.url"> {{data.license.name}} </span>
    </span>
  </p>
+</div>
--- a/lib/components/ApiInfo/api-info.scss
+++ b/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%;
+}
--- a/lib/components/JsonSchema/json-schema-common.scss
+++ b/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;
-  display: inline-block;
-  font-size: 14px;
+
+  font-size: 0.929em;
  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 {
-  display: flex;
-  display: -ms-flexbox;
+.param-description {
+    font-size: 13px;
 }

 .param-required {
@ -72,32 +59,21 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 }

 .param-type {
-  color: #999;
-  font-size: 12px;
+  color: $black;
+  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 {
-  color: rgba(0, 80, 0, 0.7);
-}
-
-.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 {
+    color: rgba($black, 0.4);
 }

 .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;
-  background-color: $tree-lines-color;
+  height: $bullet-size + 6;
+  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 {
-  position: static;
+.param:last-of-type > .param-name {
+  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: {"
--- a/lib/components/JsonSchema/json-schema.html
+++ b/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}">
-  <div *ngFor="#prop of data.properties" class="param-wrap">
-    <div class="param" [ngClass]="{'discriminator': prop.isDiscriminator}">
-      <div class="param-name">
+<table *ngIf="!isTrivial" class="params-wrap" [ngClass]="{'params-array': isArray}">
+  <template ngFor [ngForOf]="data.properties" #prop="$implicit">
+    <tr class="param" [ngClass]="{'discriminator': prop.isDiscriminator, 'complex': prop._pointer}">
+      <td class="param-name">
        <span class="param-name-content">{{prop._name}}</span>
-      </div>
-      <div class="param-info">
+      </td>
+      <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>
-    </div>
-    <div class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
-      <json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray'>
+      </td>
+    </tr>
+    <tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
+      <td colspan="2">
+        <json-schema pointer="{{prop._pointer}}" [isArray]='prop._isArray' class="nested-schema">
        </json-schema>
-    </div>
-  </div>
-  <div *ngIf="data.derived.length" class="param-wrap">
+      </td>
+    </tr>
+  </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>
-</div>
+    </td>
+  </tr>
+</table>
--- a/lib/components/JsonSchema/json-schema.js
+++ b/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';
-  }
 }
--- a/lib/components/JsonSchema/json-schema.scss
+++ b/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;
-  color: #999;
+  font-weight: $base-font-weight;
+  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;
-  }
-}
--- a/lib/components/Method/method.html
+++ b/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>
@ -17,11 +13,18 @@
    <responses-list pointer="{{pointer}}/responses"> </responses-list>
 </div>
 <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>
--- a/lib/components/Method/method.scss
+++ b/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;
-  font-weight: 200;
-  color: $method-headers-color;
+  margin-bottom: .9em;
 }

 .method-endpoint {
-  margin: 0;
-  font-weight: 200;
-  font-size: 0;
+  margin: 0 0 2em 0;
+  padding: 10px 20px;
+  border-radius: $border-radius*2;
+  background-color: darken($black, 2%);
+  display: block;
+  font-weight: $light;
 }

-.method-endpoint > span {
-  padding-top: 3px;
-  padding-bottom: 3px;
+.method-endpoint > h5 {
+  padding-top: 1px;
+  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-weight: bold;
-  color: $headers-color;
+  font-family: $headers-font, $headers-font-family;
+  position: relative;
+  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 {
-  font-size: 16px;
-  margin: 5px 0;
+.method-samples header,
+.method-samples > h5 {
  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;
-  background-color: #1976D3;
+  color: $black;
+  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;
--- a/lib/components/MethodsList/methods-list.scss
+++ b/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;
-  }
-}
--- a/lib/components/ParamsList/params-list.html
+++ b/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>
--- a/lib/components/ParamsList/params-list.scss
+++ b/lib/components/ParamsList/params-list.scss
@ -1,10 +1,12 @@
+@import '../../common/styles/variables';
+
 .param-list-header {
-  border-bottom: 1px solid #999;
-  font-size: 18px;
+  border-bottom: 1px solid rgba($text-color, .3);
  padding: 0.2em 0;
-  margin: 0.5em 0;
-  color: #253137;
+  margin: 3.5em 0 .8em 0;
+  color: rgba($text-color, .5);
  font-weight: normal;
+  text-transform: uppercase;
 }

@import '../JsonSchema/json-schema-common';
--- a/lib/components/Redoc/redoc-loading-styles.scss
+++ b/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;
--- a/lib/components/Redoc/redoc.scss
+++ b/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;;
-  left:0;
-  right: 0;
+  background: $samples-panel-bg-color;
+  height: 100%;
+  width: $samples-panel-width;
  top: 0;
-  bottom: 0;
-  background-color: black;
-  opacity: 0.5;
-  transition: all 0.3s ease;
+  right: 0;
+  position: absolute;
+  z-index: -1;
+}
+
+
+@media (max-width: 1100px) {
+  #api-content:before {
    display: none;
  }
-
-#api-content.menu-opened:after {
-  display: block;;
 }

-footer {
-  text-align: right;
-  padding: 10px;
-  font-size: 15px;
+/* global redoc styles */
+
+@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;
+    }
+}
+
+:host {
+    h1 { font-size: $h1; }
+    h2 { font-size: $h2; }
+    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);
-    padding: 10px;
+        background-color: rgba(38,50,56,0.04);
+        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);
-    padding: 0.2em 0;
-    font-size: 0.85em;
-    border-radius: 3px;
+        background-color: rgba(38,50,56,0.04);
+        padding: 0.1em 0 0.2em 0;
+        font-size: 1em;
+        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;
    }
--- a/lib/components/RequestSamples/request-samples.scss
+++ b/lib/components/RequestSamples/request-samples.scss
@ -1,24 +1,32 @@
@import '../../common/styles/variables';

 header {
-  font-size: 16px;
-  margin: 5px 0;
+    font-family: $headers-font;
+    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;
-  color: #8A9094;
+    padding: 3px 10px 2px 10px;
    line-height: 1.25;
    color: $sample-panel-headers-color;

+    &.hover {
+        background-color: rgba(white, .1);
+        color: #ffffff;
+    }
+
    &.active {
-    background-color: white;
-    color: #666;
+        background-color: #ffffff;
+        color: $text-color;
    }
 }

--- a/lib/components/ResponsesList/responses-list.html
+++ b/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}}">
--- a/lib/components/ResponsesList/responses-list.scss
+++ b/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;
 }
--- a/lib/components/ResponsesSamples/responses-samples.html
+++ b/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">
--- a/lib/components/ResponsesSamples/responses-samples.scss
+++ b/lib/components/ResponsesSamples/responses-samples.scss
@ -9,24 +9,32 @@ schema-sample {
 }

 header {
-  font-size: 16px;
-  margin: 5px 0;
+    font-family: $headers-font;
+    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;
-  color: #8A9094;
-  line-height: 1.25;
+    padding: 2px 8px 3px 8px;
    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;
    }
 }

--- a/lib/components/SchemaSample/schema-sample.scss
+++ b/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;
--- a/lib/components/SideMenu/side-menu.html
+++ b/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>
--- a/lib/components/SideMenu/side-menu.scss
+++ b/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 {
-  background-color: $side-menu-even-bg-color;
+    &:hover,
+    &.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;
-
-  padding: $side-menu-item-vpadding $side-menu-item-hpadding;
+        background-color: $side-menu-active-bg-color;
+        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) {
-    background-color: $side-bar-bg-color;
+    & li:hover,
+    & li.active {
+        background: darken($side-menu-active-bg-color, 6%);
    }
 }

-.menu-cat .menu-subitems {
-  li.active, li.active:nth-of-type(even) {
-    background-color: $side-menu-active-bg-color;
-  }
+
+.menu-subitems li.active {
 }

 .mobile-nav {
--- a/package.json
+++ b/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"