Changes in fonts and definitions

demo/index.html

@@ -14,7 +14,7 @@
       </form>
     </nav>
 
-    <redoc scroll-y-offset="body > nav" spec-url='swagger.yml'></redoc>
+    <redoc scroll-y-offset="body > nav" spec-url='http://localhost:3000/swagger.json'></redoc>
 
     <!-- ReDoc built file with all dependencies included -->
     <script src="main.js"> </script>

demo/main.css

@@ -1,6 +1,8 @@
 body {
   margin: 0;
   padding-top: 50px;
+	-webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 nav input, nav button  {

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/_variables.scss

@@ -21,7 +21,7 @@ $bold : 700;
 // ---------------------------
 $base-font : Roboto;
 $base-font-family : sans-serif;
-$base-font-weight : $regular;
+$base-font-weight : $light;
 $base-font-size : 1em;
 $base-line-height : 1.55em;
 $text-color : $black;

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

@@ -33,7 +33,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   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: $regular;
   box-sizing: border-box;
@@ -72,8 +72,8 @@ $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: normal;
@@ -81,23 +81,12 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
 .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 {

lib/components/JsonSchema/json-schema.scss

@@ -1,7 +1,7 @@
 @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;
@@ -9,8 +9,8 @@ $array-marker-line-height: 1.5;
 
 .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;
 }

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>
-    <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 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>

lib/components/Method/method.scss

@@ -17,6 +17,9 @@ responses-list, params-list {
 
 .method-endpoint {
   margin: 0 0 2em 0;
+  padding: 10px 20px;
+  border-radius: $border-radius*2;
+  background-color: darken($black, 2%);
   display: block;
   font-weight: $light;
 }
@@ -26,26 +29,28 @@ responses-list, params-list {
   padding-bottom: 0;
   margin: 0;
   font-size: .8em;
+    color: $black;
   vertical-align: middle;
   display: inline-block;
   border-radius: $border-radius;
 }
 
 .api-url {
-  color: rgba($text-color, .6);
+  color: rgba(#ffffff, .8);
   margin-left: 10px;
   margin-top: 2px;
   position: relative;
-  top: 2px;
+  top: 1px;
-  font-size: 1em!important;
+  font-family: $headers-font, $headers-font-family;
+  font-size: 0.929em!important;
 }
 
 .path {
-  font-weight: $bold;
+  font-family: $headers-font, $headers-font-family;
   position: relative;
   top: 1px;
-  color: $headers-color;
+  color: #ffffff;
-  font-size: 1em!important;
+  font-size: 0.929em!important;
 }
 
 .method-tags {
@@ -91,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;
 }
@@ -109,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: $red;
-}
-
-.http-method.options {
-  background-color: black;
-}
-
-.http-method.head {
-  background-color: darkkhaki;
-}
-
 @media (max-width: 1100px) {
   .methods:before {
     display: none;

lib/components/Redoc/redoc.scss

@@ -99,6 +99,7 @@ api-logo {
 
     p {
         font-family: $base-font, $base-font-family;
+        font-weight: $base-font-weight;
         margin: 0;
         margin-bottom: 1em;
         line-height: $base-line-height;

lib/components/RequestSamples/request-samples.scss

@@ -4,7 +4,7 @@ header {
   font-family: $headers-font;
   font-size: $h5;
   text-transform: uppercase;
-  margin: 0 0 12px 0;
+  margin: 0;
   color: $sample-panel-headers-color;
   text-transform: uppercase;
   font-weight: normal;
@@ -16,7 +16,6 @@ header {
   border-radius: $border-radius;
   margin: 2px 0;
   padding: 3px 10px 2px 10px;
-  color: #8A9094;
   line-height: 1.25;
   color: $sample-panel-headers-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.scss

@@ -10,25 +10,26 @@ schema-sample {
 
 header {
     font-family: $headers-font;
-  font-size: .9em;
+    font-size: 0.929em;
     text-transform: uppercase;
-  margin: 0 0 12px 0;
+    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;
 
     &.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.scss

@@ -13,7 +13,7 @@ $mobile-menu-compact-breakpoint: 550px;
     font-family: $headers-font, $headers-font-family;
     font-weight: $light;
     cursor: pointer;
-    color: $text-color;
+    color: rgba($text-color, .6);
     text-transform: uppercase;
     background-color: $side-bar-bg-color;
     -webkit-transition: all .15s ease-in-out;
@@ -22,7 +22,7 @@ $mobile-menu-compact-breakpoint: 550px;
     -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;
 
     &:hover,
     &.active {
@@ -33,9 +33,10 @@ $mobile-menu-compact-breakpoint: 550px;
 
 .menu-subitems {
     margin: 0;
-    font-size: 13px;
+    font-size: 0.929em;
-    font-weight: $regular;
+    line-height: 1.2em;
-    color: rgba($text-color, .6);
+    font-weight: $light;
+    color: rgba($text-color, .9);
     padding: 0;
     height: 0;
     overflow: hidden;
@@ -53,7 +54,7 @@ $mobile-menu-compact-breakpoint: 550px;
         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;
         overflow: hidden;
         text-overflow: ellipsis;