JSONSchema tree and table

demo/main.css

@@ -1,8 +1,28 @@
 body {
     margin: 0;
     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  {

lib/common/styles/_variables.scss

@@ -61,7 +61,7 @@ $samples-panel-width: 40%;
 $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;
 

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;
@@ -46,6 +46,10 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   width: 75%;
 }
 
+.param-description {
+    font-size: 13px;
+}
+
 .param-required {
   color: red;
   font-weight: bold;
@@ -93,8 +97,8 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
   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;
 }
@@ -142,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.scss

@@ -13,9 +13,10 @@ $array-marker-line-height: 1.5;
 }
 
 json-schema.nested-schema {
-  background-color: #F1F1F1;
+  background-color: $side-menu-active-bg-color;
   padding: 10px 20px;
   position: relative;
+  border-radius: $border-radius;
 
   &:before, &:after {
     content: "";

lib/components/Redoc/redoc.scss

@@ -165,7 +165,7 @@ api-logo {
     }
 
     p:last-of-type {
-        margin-bottom: 1em;
+        margin-bottom: 0;
     }
 
     blockquote {

lib/components/RequestSamples/request-samples.scss

@@ -20,6 +20,7 @@ header {
     color: $sample-panel-headers-color;
 
     &.hover {
+        background-color: rgba(white, .1);
         color: #ffffff;
     }
 

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

@@ -27,6 +27,11 @@ header {
     color: $sample-panel-headers-color;
     line-height: 1.25;
 
+    &:hover {
+        color: #ffffff;
+        background-color: rgba(white, .1);
+    }
+
     &.active {
         background-color: white;
         color: $black;