Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 08:36:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

JSONSchema tree and table

Browse Source
This commit is contained in:
Cesar 2016-03-14 15:29:27 -04:00
parent 2e53b9fa50
commit a0a209820f
8 changed files with 131 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
demo/main.css
View File

@ -1,98 +1,118 @@
body { body {
margin: 0; margin: 0;
padding-top: 50px; padding-top: 50px;
-webkit-font-smoothing: antialiased; -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; -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 { nav input, nav button {
font-size: 16px; font-size: 16px;
height: 28px; height: 28px;
box-sizing: border-box; box-sizing: border-box;
vertical-align: middle; vertical-align: middle;
line-height: 1; line-height: 1;
outline: none; outline: none;
} }
nav header { nav header {
font-family: Monserrat, sans-serif; font-family: Monserrat, sans-serif;
float: left; float: left;
margin-left: 20px; margin-left: 20px;
font-size: 25px; font-size: 25px;
color: #00329F; color: #00329F;
font-weight: bold; font-weight: bold;
} }
nav input { nav input {
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
max-width: 500px; max-width: 500px;
color: #555; color: #555;
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
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; -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; -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; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
} }
nav input:focus { nav input:focus {
border-color: #66afe9; border-color: #66afe9;
outline: 0; outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); -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); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
} }
nav button { nav button {
background-color: #fff; background-color: #fff;
color: #333; color: #333;
padding: 2px 10px; padding: 2px 10px;
touch-action: manipulation; touch-action: manipulation;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
} }
nav button:hover { nav button:hover {
background-color: #e6e6e6; background-color: #e6e6e6;
border-color: #adadad; border-color: #adadad;
} }
nav button:active { nav button:active {
background-color: #d4d4d4; background-color: #d4d4d4;
border-color: #8c8c8c; border-color: #8c8c8c;
} }
nav { nav {
width: 100%; width: 100%;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
background-color: white; background-color: white;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
nav header { nav header {
position: absolute; position: absolute;
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {
nav input { nav input {
width: 70%; width: 70%;
} }
nav header { nav header {
display: none; display: none;
} }
} }

2
lib/common/styles/_variables.scss
View File

@ -61,7 +61,7 @@ $samples-panel-width: 40%;
$sample-panel-headers-color: lighten($black, 50%); $sample-panel-headers-color: lighten($black, 50%);
$sample-panel-color: lighten($black, 80%); $sample-panel-color: lighten($black, 80%);
$tree-lines-color: #7D97CE; $tree-lines-color: rgba($primary-color, .5);
$side-menu-mobile-breakpoint: 1000px; $side-menu-mobile-breakpoint: 1000px;

13
lib/components/JsonSchema/json-schema-common.scss
View File

@ -1,6 +1,6 @@
@import '../../common/styles/variables'; @import '../../common/styles/variables';
$lines-width: 1px; $lines-width: 1px;
$bullet-size: 7px; $bullet-size: 1px;
$cell-spacing: 25px; $cell-spacing: 25px;
$cell-padding: 10px; $cell-padding: 10px;
$bullet-margin: 10px; $bullet-margin: 10px;
@ -46,6 +46,10 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
width: 75%; width: 75%;
} }
.param-description {
font-size: 13px;
}
.param-required { .param-required {
color: red; color: red;
font-weight: bold; font-weight: bold;
@ -93,8 +97,8 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
content: ""; content: "";
display: inline-block; display: inline-block;
width: $bullet-size; width: $bullet-size;
height: $bullet-size; height: $bullet-size + 6;
background-color: $tree-lines-color; background-color: $primary-color;
margin: 0 $bullet-margin; margin: 0 $bullet-margin;
vertical-align: middle; vertical-align: middle;
} }
@ -142,7 +146,8 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
} }
.param-enum { .param-enum {
color: #666; color: $text-color;
font-size: 13px;
&:before { &:before {
content: "Values: {" content: "Values: {"

3
lib/components/JsonSchema/json-schema.scss
View File

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

2
lib/components/Redoc/redoc.scss
View File

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

53
lib/components/RequestSamples/request-samples.scss
View File

@ -1,41 +1,42 @@
@import '../../common/styles/variables'; @import '../../common/styles/variables';
header { header {
font-family: $headers-font; font-family: $headers-font;
font-size: $h5; font-size: $h5;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
color: $sample-panel-headers-color; color: $sample-panel-headers-color;
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
} }
:host > tabs > ul li { :host > tabs > ul li {
font-family: $headers-font; font-family: $headers-font;
font-size: .9em; font-size: .9em;
border-radius: $border-radius; border-radius: $border-radius;
margin: 2px 0; margin: 2px 0;
padding: 3px 10px 2px 10px; padding: 3px 10px 2px 10px;
line-height: 1.25; line-height: 1.25;
color: $sample-panel-headers-color; color: $sample-panel-headers-color;
&.hover { &.hover {
color: #ffffff; background-color: rgba(white, .1);
} color: #ffffff;
}
&.active { &.active {
background-color: #ffffff; background-color: #ffffff;
color: $text-color; color: $text-color;
} }
} }
:host tabs ul { :host tabs ul {
padding-top: 10px; padding-top: 10px;
} }
pre { pre {
overflow-x: auto; overflow-x: auto;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
} }

2
lib/components/ResponsesSamples/responses-samples.html
View File

@ -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"> <tabs *ngIf="data.responses.length">
<tab *ngFor="#response of data.responses" tabTitle="{{response.code}} {{response.description}}" <tab *ngFor="#response of data.responses" tabTitle="{{response.code}} {{response.description}}"
[tabStatus]="response.type"> [tabStatus]="response.type">

5
lib/components/ResponsesSamples/responses-samples.scss
View File

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