mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-22 08:36:33 +03:00
JSONSchema tree and table
This commit is contained in:
Cesar
parent
2e53b9fa50
commit
a0a209820f
150
demo/main.css
150
demo/main.css
|
|
@ -1,98 +1,118 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding-top: 50px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
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 {
|
||||
font-size: 16px;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
}
|
||||
nav header {
|
||||
font-family: Monserrat, sans-serif;
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
font-size: 25px;
|
||||
color: #00329F;
|
||||
font-weight: bold;
|
||||
font-family: Monserrat, sans-serif;
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
font-size: 25px;
|
||||
color: #00329F;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav input {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
max-width: 500px;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
max-width: 500px;
|
||||
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||||
}
|
||||
|
||||
nav input:focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
|
||||
}
|
||||
|
||||
nav button {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 2px 10px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 2px 10px;
|
||||
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
nav button:hover {
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
background-color: #e6e6e6;
|
||||
border-color: #adadad;
|
||||
}
|
||||
nav button:active {
|
||||
background-color: #d4d4d4;
|
||||
border-color: #8c8c8c;
|
||||
background-color: #d4d4d4;
|
||||
border-color: #8c8c8c;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
nav header {
|
||||
position: absolute;
|
||||
}
|
||||
nav header {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
nav input {
|
||||
width: 70%;
|
||||
}
|
||||
nav header {
|
||||
display: none;
|
||||
}
|
||||
nav input {
|
||||
width: 70%;
|
||||
}
|
||||
nav header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
background-color: $tree-lines-color;
|
||||
height: $bullet-size + 6;
|
||||
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: {"
|
||||
|
|
|
|||
|
|
@ -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: "";
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ api-logo {
|
|||
}
|
||||
|
||||
p:last-of-type {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
|
|||
|
|
@ -1,41 +1,42 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
header {
|
||||
font-family: $headers-font;
|
||||
font-size: $h5;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
color: $sample-panel-headers-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
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-family: $headers-font;
|
||||
font-size: .9em;
|
||||
border-radius: $border-radius;
|
||||
margin: 2px 0;
|
||||
padding: 3px 10px 2px 10px;
|
||||
line-height: 1.25;
|
||||
color: $sample-panel-headers-color;
|
||||
font-family: $headers-font;
|
||||
font-size: .9em;
|
||||
border-radius: $border-radius;
|
||||
margin: 2px 0;
|
||||
padding: 3px 10px 2px 10px;
|
||||
line-height: 1.25;
|
||||
color: $sample-panel-headers-color;
|
||||
|
||||
&.hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
&.hover {
|
||||
background-color: rgba(white, .1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #ffffff;
|
||||
color: $text-color;
|
||||
}
|
||||
&.active {
|
||||
background-color: #ffffff;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
:host tabs ul {
|
||||
padding-top: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user