Global styles and Menu style

lib/common/styles/_variables.scss

@@ -23,7 +23,7 @@ $base-font : Roboto;
 $base-font-family : sans-serif;
 $base-font-weight : $regular;
 $base-font-size : 1em;
-$base-line-height : 1.4;
+$base-line-height : 1.55em;
 $text-color : $black;
 
 // Heading Font
@@ -37,7 +37,7 @@ $h1: 1.85714285714286em;
 $h2: 1.5714285714285714em;
 $h3: 1.2857142857142858em;
 $h4: 1.1428571428571428em;
-$h5: 1em;
+$h5: 0.929em;
 
 // Google Fonts
 // ---------------------------
@@ -50,7 +50,7 @@ $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;
 
@@ -68,40 +68,3 @@ $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;
-  }
-}
-
-h1 { font-size: $h1; }
-h2 { font-size: $h2; }
-h3 { font-size: $h3; }
-h4 { font-size: $h4; }
-h5 { font-size: $h5; }
-
-p {
-  font-size: $base-font-size;
-}
-
-footer {
-  text-align: right;
-  padding: 10px;
-  font-size: 15px;
-
-  a {
-    color: #999;
-    text-decoration: none;
-  }
-
-  strong {
-    font-size: 18px;
-    color: $headers-color;
-  }
-}

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

@@ -35,7 +35,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   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;
@@ -76,7 +76,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   font-size: 12px;
   line-height: $param-name-height;
   vertical-align: middle;
-  font-weight: bold;
+  font-weight: normal;
 }
 
 .param-type.array:before {

lib/components/Method/method.scss

@@ -12,7 +12,7 @@ responses-list, params-list {
 }
 
 .method-header {
-  margin-bottom: .5em;
+  margin-bottom: .9em;
 }
 
 .method-endpoint {
@@ -22,8 +22,8 @@ responses-list, params-list {
 }
 
 .method-endpoint > h5 {
-  padding-top: 4px;
+  padding-top: 1px;
-  padding-bottom: 3px;
+  padding-bottom: 0;
   margin: 0;
   font-size: .8em;
   vertical-align: middle;
@@ -32,11 +32,11 @@ responses-list, params-list {
 }
 
 .api-url {
-  color: lighten($text-color, 30%);
+  color: rgba($text-color, .6);
   margin-left: 10px;
   margin-top: 2px;
   position: relative;
-  top: 1px;
+  top: 2px;
   font-size: 1em!important;
 }
 

lib/components/ParamsList/params-list.html

@@ -1,4 +1,4 @@
-<h4 class="param-list-header" *ngIf="data.params.length"> Parameters </h4>
+<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>
@@ -23,7 +23,7 @@
 </template>
 
 <div *ngIf="data.bodyParam">
-  <h4 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h4>
+  <h5 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h5>
 
   <div class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
   <div>

lib/components/ParamsList/params-list.scss

@@ -1,10 +1,10 @@
 @import '../../common/styles/variables';
 
 .param-list-header {
-  border-bottom: 1px solid lighten($text-color, 60%);
+  border-bottom: 1px solid rgba($text-color, .3);
   padding: 0.2em 0;
-  margin: 3em 0 .5em 0;
+  margin: 3.5em 0 .8em 0;
-  color: $text-color;
+  color: rgba($text-color, .5);
   font-weight: normal;
   text-transform: uppercase;
 }

lib/components/Redoc/redoc.scss

@@ -81,11 +81,53 @@ api-logo {
 
 /* global redoc styles */
 
-:host p {
+@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;
         margin: 0;
         margin-bottom: 1em;
+        line-height: $base-line-height;
     }
 
+    a {
+        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;
+    }
+}
+
+
+
 /* markdown elements */
 
 :host .redoc-markdown-block {
@@ -110,10 +152,10 @@ api-logo {
 
     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: 1em;
-    border-radius: 3px;
+        border-radius: $border-radius;
 
         &:before, &:after {
             letter-spacing: -0.2em;

lib/components/RequestSamples/request-samples.scss

@@ -2,7 +2,7 @@
 
 header {
   font-family: $headers-font;
-  font-size: .9em;
+  font-size: $h5;
   text-transform: uppercase;
   margin: 0 0 12px 0;
   color: $sample-panel-headers-color;

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,67 @@ $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: $text-color;
     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;
-}
 
-.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: 13px;
+    font-weight: $regular;
+    color: rgba($text-color, .6);
     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-left: $side-menu-item-hpadding*2;
-  background-color: $side-bar-bg-color;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
-.menu-subitems li:nth-of-type(even) {
+    & li:hover,
-  background-color: $side-menu-even-bg-color;
+    & li.active {
-}
+        background: darken($side-menu-active-bg-color, 6%);
-
-// 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;
     }
 }
 
-.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 {