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

Work on Request and Response Samples and overall padding

Browse Source
This commit is contained in:
Cesar 2016-03-01 13:08:02 -05:00
parent 2a8ea8f669
commit d07e2f0026
11 changed files with 168 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/common/styles/_share-link.scss
View File

@ -18,6 +18,10 @@
vertical-align: middle;
}
.sharable-header {
color: $secondary-color;
}
.sharable-header:hover .share-link:before, .share-link:hover:before {
visibility: visible;
}

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

@ -2,6 +2,7 @@
// ---------------------------
$primary-color : #0033a0;
$secondary-color : #263238;
$black : #263238;
$green : #00aa13;
$yellow : #f1c400;
$red : #e53935;
@ -23,7 +24,7 @@ $base-font-family : sans-serif;
$base-font-weight : $regular;
$base-font-size : 1em;
$base-line-height : 1.4;
$text-color : $secondary-color;
$text-color : $black;
// Heading Font
// ---------------------------
@ -55,19 +56,24 @@ $side-menu-item-vpadding: 5px;
// Sample Panel
// ---------------------------
$samples-panel-bg-color: #263238;
$samples-panel-bg-color: $black;
$samples-panel-width: 40%;
$sample-panel-headers-color: #8A9094;
$sample-panel-color: #CFD2D3;
$sample-panel-headers-color: lighten($black, 50%);
$sample-panel-color: lighten($black, 80%);
$tree-lines-color: #7D97CE;
$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;
@ -99,105 +105,3 @@ footer {
color: $headers-color;
}
}
/* global redoc styles */
:host p {
margin: 0;
margin-bottom: 1em;
}
/* markdown elements */
:host .redoc-markdown-block {
pre {
font-family: Courier, monospace;
white-space: pre-wrap;
background-color: rgba(0,0,0,0.04);
padding: 10px;
overflow-x: auto;
line-height: normal;
border-radius: 3px;
code {
background-color: transparent;
&:before, &:after {
content: none;
}
}
}
code {
font-family: Courier, monospace;
background-color: rgba(0,0,0,0.04);
padding: 0.2em 0;
font-size: 0.85em;
border-radius: 3px;
&:before, &:after {
letter-spacing: -0.2em;
content: "\\00a0";
}
}
p {
margin: 0;
font-size: $base-font-size;
margin-bottom: 1em;
}
p:last-of-type {
margin-bottom: 0;
}
blockquote {
margin: 0;
margin-bottom: 1em;
padding: 0 15px;
color: #777;
border-left: 4px solid #ddd;
}
img {
max-width: 100%;
box-sizing: content-box;
}
ul, ol {
padding-left: 2em;
margin: 0;
margin-bottom: 1em;
}
table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
table tr {
background-color: #fff;
border-top: 1px solid #ccc;
&:nth-child(2n) {
background-color: #f8f8f8;
}
}
table th, table td {
padding: 6px 13px;
border: 1px solid #ddd;
}
table th {
text-align: left;
font-weight: bold;
}
}

6
lib/components/Method/method.html
View File

@ -3,10 +3,10 @@
<h2 class="method-header sharable-header">
<a class="share-link" href="#{{data.methodAnchor}}"></a>{{data.methodInfo.summary}}
</h2>
<h3 class="method-endpoint">
<span class="http-method" [ngClass]="data.httpMethod">{{data.httpMethod}}</span>
<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>
</h3>
</span>
<div class="method-tags" *ngIf="data.methodInfo.tags.length">
<a *ngFor="#tag of data.methodInfo.tags" attr.href="#{{tag}}"> {{tag}} </a>
</div>

35
lib/components/Method/method.scss
View File

@ -12,31 +12,40 @@ responses-list, params-list {
}
.method-header {
margin-bottom: 1em;
margin-bottom: .5em;
}
.method-endpoint {
margin: 0;
font-weight: 200;
font-size: 0;
margin: 0 0 2em 0;
display: block;
font-weight: $light;
}
.method-endpoint > span {
padding-top: 3px;
.method-endpoint > h5 {
padding-top: 4px;
padding-bottom: 3px;
margin: 0;
font-size: .8em;
vertical-align: middle;
font-size: 14px;
display: inline-block;
border-radius: $border-radius;
}
.api-url {
color: #999;
color: lighten($text-color, 30%);
margin-left: 10px;
margin-top: 2px;
position: relative;
top: 1px;
font-size: 1em!important;
}
.path {
font-family: monospace;
font-weight: bold;
font-weight: $bold;
position: relative;
top: 1px;
color: $headers-color;
font-size: 1em!important;
}
.method-tags {
@ -68,13 +77,13 @@ responses-list, params-list {
.method-content {
width: 100% - $samples-panel-width;
padding: 20px 20px;
padding: 40px;
}
.method-samples {
color: $sample-panel-color;
width: 40%;
padding: 10px 20px;
padding: 40px;
background: $samples-panel-bg-color;
}
@ -124,7 +133,7 @@ responses-samples {
}
.http-method.put {
background-color: crimson;
background-color: $red;
}
.http-method.options {

2
lib/components/MethodsList/methods-list.scss
View File

@ -2,7 +2,7 @@
@import '../../common/styles/share-link';
.tag-info {
padding: 0 20px;
padding: 40px;
box-sizing: border-box;
background-color: white;
}

6
lib/components/ParamsList/params-list.html
View File

@ -1,6 +1,7 @@
<h2 class="param-list-header" *ngIf="data.params.length"> Parameters </h2>
<h4 class="param-list-header" *ngIf="data.params.length"> Parameters </h4>
<template ngFor [ngForOf]="data.params" #paramType="$implicit">
<header class="paramType"> {{paramType.place}} Parameters </header>
<br>
<div class="params-wrap">
<div *ngFor="#param of paramType.params" class="param">
<div class="param-name">
@ -22,10 +23,11 @@
</template>
<div *ngIf="data.bodyParam">
<h2 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h2>
<h4 class="param-list-header" *ngIf="data.bodyParam"> Request Body </h4>
<div class="body-param-description" innerHtml="{{data.bodyParam.description | marked}}"></div>
<div>
<br>
<json-schema-lazy [auto]="true" pointer="{{data.bodyParam.pointer}}/schema">
</json-schema-lazy>
</div>

10
lib/components/ParamsList/params-list.scss
View File

@ -1,10 +1,12 @@
@import '../../common/styles/variables';
.param-list-header {
border-bottom: 1px solid #999;
font-size: 18px;
border-bottom: 1px solid lighten($text-color, 60%);
padding: 0.2em 0;
margin: 0.5em 0;
color: #253137;
margin: 3em 0 .5em 0;
color: $text-color;
font-weight: normal;
text-transform: uppercase;
}
@import '../JsonSchema/json-schema-common';

3
lib/components/Redoc/redoc-loading-styles.scss
View File

@ -13,11 +13,12 @@ redoc.loading {
}
redoc.loading:before {
font-family: Montserrat;
content: "Loading...";
font-size: 28px;
text-align: center;
padding-top: 40px;
color: #3F5C9C;
color: #0033a0;
font-weight: bold;
display: block;
position: absolute;

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

@ -29,7 +29,7 @@ api-info, .side-bar {
}
api-info {
padding: 10px 20px;
padding: 40px;
}
api-logo {
@ -78,3 +78,100 @@ api-logo {
#api-content.menu-opened:after {
display: block;;
}
/* global redoc styles */
:host p {
margin: 0;
margin-bottom: 1em;
}
/* markdown elements */
:host .redoc-markdown-block {
pre {
font-family: Courier, monospace;
white-space: pre-wrap;
background-color: rgba(38,50,56,0.04);
padding: 12px 14px 15px 14px;
overflow-x: auto;
line-height: normal;
border-radius: $border-radius;
border: 1px solid rgba(38,50,56,0.1);
code {
background-color: transparent;
&:before, &:after {
content: none;
}
}
}
code {
font-family: Courier, monospace;
background-color: rgba(0,0,0,0.04);
padding: 0.2em 0;
font-size: 1em;
border-radius: 3px;
&:before, &:after {
letter-spacing: -0.2em;
content: "\\00a0";
}
}
p:last-of-type {
margin-bottom: 1em;
}
blockquote {
margin: 0;
margin-bottom: 1em;
padding: 0 15px;
color: #777;
border-left: 4px solid #ddd;
}
img {
max-width: 100%;
box-sizing: content-box;
}
ul, ol {
padding-left: 2em;
margin: 0;
margin-bottom: 1em;
}
table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
table tr {
background-color: #fff;
border-top: 1px solid #ccc;
&:nth-child(2n) {
background-color: #f8f8f8;
}
}
table th, table td {
padding: 6px 13px;
border: 1px solid #ddd;
}
table th {
text-align: left;
font-weight: bold;
}
}

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

@ -1,24 +1,32 @@
@import '../../common/styles/variables';
header {
font-size: 16px;
margin: 5px 0;
font-family: $headers-font;
font-size: .9em;
text-transform: uppercase;
margin: 0 0 12px 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: .9em;
border-radius: $border-radius;
margin: 2px 0;
padding: 2px 5px;
padding: 3px 10px 2px 10px;
color: #8A9094;
line-height: 1.25;
color: $sample-panel-headers-color;
&.hover {
color: #ffffff;
}
&.active {
background-color: white;
color: #666;
background-color: #ffffff;
color: $text-color;
}
}

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

@ -9,8 +9,10 @@ schema-sample {
}
header {
font-size: 16px;
margin: 5px 0;
font-family: $headers-font;
font-size: .9em;
text-transform: uppercase;
margin: 0 0 12px 0;
color: $sample-panel-headers-color;
text-transform: uppercase;
font-weight: normal;