Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-05 12:30:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add _variables.scss and start stylesheets refactoring

Browse Source
This commit is contained in:
Roman Hotsiy 2015-11-22 15:45:27 +02:00
parent 5bf1e62c75
commit a78dd4a0ab
16 changed files with 78 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/common/styles/_variables.scss Normal file
View File

@ -0,0 +1,12 @@
$headers-color: #00329F;
$method-headers-color: #253137;
$side-menu-bg-color: #FAFAFA;
$side-menu-width: 260px;
$samples-panel-bg-color: #263238;
$samples-panel-width: 40%;
$sample-panel-headers-color: #8A9094;
$sample-panel-color: #CFD2D3;
$tree-lines-color: #7D97CE;

2
lib/components/ApiInfo/api-info.html
View File

@ -1,4 +1,4 @@
<h1>{{data.title}} ({{data.version}})</h1> <h1 class="api-info-header">{{data.title}} ({{data.version}})</h1>
<p *ng-if="data.description" inner-html="{{data.description | marked}}"> </p> <p *ng-if="data.description" inner-html="{{data.description | marked}}"> </p>
<p> <p>
<!-- TODO: create separate components for contact and license ? --> <!-- TODO: create separate components for contact and license ? -->

6
lib/components/ApiInfo/api-info.scss
View File

@ -1,3 +1,5 @@
h1 { @import '../../common/styles/variables';
color: #1976D3;
.api-info-header {
color: $headers-color;
} }

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

@ -1,10 +1,4 @@
h2 { @import '../../common/styles/variables';
border-bottom: 1px solid #999;
font-size: 18px;
padding: 0.2em 0;
margin: 0.5em 0;
color: #253137;
}
.param-schema { .param-schema {
padding-left: 13px; padding-left: 13px;
@ -22,18 +16,16 @@ h2 {
left: 14px; left: 14px;
top: 10px; top: 10px;
bottom: 0; bottom: 0;
border-left: 1px solid #7D97CE; border-left: 1px solid $tree-lines-color;
} }
.param-name { .param-name {
/*display: table-cell;*/
padding: 0 5px; padding: 0 5px;
font-weight: bold; font-weight: bold;
box-sizing: border-box; box-sizing: border-box;
} }
.param-info { .param-info {
/*display: table-cell;*/
width: 100%; width: 100%;
padding: 0 5px; padding: 0 5px;
box-sizing: border-box; box-sizing: border-box;
@ -59,10 +51,11 @@ h2 {
color: #999; color: #999;
font-size: 12px; font-size: 12px;
line-height: 2; line-height: 2;
font-weight: bold;
} }
.param-name { .param-name {
border-left: 1px solid #7D97CE; border-left: 1px solid $tree-lines-color;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
} }
@ -72,7 +65,7 @@ h2 {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: #7D97CE; background-color: $tree-lines-color;
margin: 0 5px; margin: 0 5px;
top: -1px; top: -1px;
position: relative; position: relative;
@ -81,7 +74,7 @@ h2 {
.param-name > span:after { .param-name > span:after {
content: ""; content: "";
position: absolute; position: absolute;
border-top: 1px solid #7D97CE; border-top: 1px solid $tree-lines-color;
width: 10px; width: 10px;
left: 0; left: 0;
top: 10px; top: 10px;

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

@ -1,7 +1,7 @@
<div class="method"> <div class="method">
<div class="content"> <div class="method-content">
<h2>{{data.methodInfo.summary}}</h2> <h2 class="method-header">{{data.methodInfo.summary}}</h2>
<h3> <h3 class="method-endpoint">
<span class="http-method" [ng-class]="data.method">{{data.method}}</span> <span class="http-method" [ng-class]="data.method">{{data.method}}</span>
<span class="api-url">{{data.apiUrl}}</span> <span class="path">{{data.path}}</span> <span class="api-url">{{data.apiUrl}}</span> <span class="path">{{data.path}}</span>
</h3> </h3>
@ -16,7 +16,7 @@
<br> <br>
<responses-list pointer="{{pointer}}/responses"> </responses-list> <responses-list pointer="{{pointer}}/responses"> </responses-list>
</div> </div>
<div class="samples"> <div class="method-samples">
<div *ng-if="data.bodyParam"> <div *ng-if="data.bodyParam">
<header> Body sample </header> <header> Body sample </header>
<schema-sample pointer="{{data.bodyParam._pointer}}/schema"> </schema-sample> <schema-sample pointer="{{data.bodyParam._pointer}}/schema"> </schema-sample>

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

@ -1,35 +1,37 @@
@import '../../common/styles/variables';
responses-list, params-list { responses-list, params-list {
display: block; display: block;
} }
h2 { .method-header {
font-size: 25px; font-size: 25px;
font-weight: 200; font-weight: 200;
color: #253137; color: $method-headers-color;
} }
h3 { .method-endpoint {
margin: 0; margin: 0;
font-weight: 200; font-weight: 200;
font-size: 0; font-size: 0;
} }
h3 > span { .method-endpoint > span {
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
vertical-align: middle; vertical-align: middle;
font-size: 14px; font-size: 14px;
} }
span.api-url { .api-url {
color: #999; color: #999;
margin-left: 10px; margin-left: 10px;
} }
span.path { .path {
font-family: monospace; font-family: monospace;
font-weight: bold; font-weight: bold;
color: #00329F; color: $headers-color;
} }
.method-tags { .method-tags {
@ -44,7 +46,7 @@ span.path {
text-decoration: none; text-decoration: none;
} }
.method-tags a:before{ .method-tags a:before {
content: '#'; content: '#';
margin-right: -0.4em; margin-right: -0.4em;
} }
@ -53,19 +55,19 @@ span.path {
padding: 0; padding: 0;
} }
.content, .samples { .method-content, .method-samples {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
} }
.content { .method-content {
width: 60%; width: 100% - $samples-panel-width;
padding: 0 20px; padding: 0 20px;
} }
.samples { .method-samples {
color: white; color: $sample-panel-color;
width: 40%; width: 40%;
padding: 10px 20px; padding: 10px 20px;
} }
@ -74,15 +76,15 @@ responses-samples {
display: block; display: block;
} }
.samples header { .method-samples header {
font-size: 20px; font-size: 16px;
margin: 5px 0; margin: 5px 0;
color: $sample-panel-headers-color;
text-transform: uppercase;
} }
.samples schema-sample { .method-samples schema-sample {
display: block; display: block;
padding: 5px;
background-color: rgb(18, 20, 39);
} }
.method:after { .method:after {

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

@ -1,3 +1,5 @@
@import '../../common/styles/variables';
method { method {
padding-bottom: 100px; padding-bottom: 100px;
display: block; display: block;
@ -16,7 +18,7 @@ method {
} }
.tag-info h1 { .tag-info h1 {
color: #00329F; color: $headers-color;
text-transform: capitalize; text-transform: capitalize;
font-weight: bold; font-weight: bold;
} }
@ -28,9 +30,9 @@ method {
.methods:before { .methods:before {
content: ""; content: "";
background: #2C2E3E; background: $samples-panel-bg-color;
height: 100%; height: 100%;
width: 40%; width: $samples-panel-width;
top: 0; top: 0;
right: 0; right: 0;
position: absolute; position: absolute;

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

@ -1,4 +1,4 @@
<h2 *ng-if="data.params.length"> Parameters </h2> <h2 class="param-list-header" *ng-if="data.params.length"> Parameters </h2>
<div class="params-wrap"> <div class="params-wrap">
<div *ng-for="#param of data.params" class="param"> <div *ng-for="#param of data.params" class="param">
<div class="param-name"> <div class="param-name">
@ -15,7 +15,7 @@
</div> </div>
<div *ng-if="data.bodyParam"> <div *ng-if="data.bodyParam">
<h2 *ng-if="data.bodyParam"> Request Body </h2> <h2 class="param-list-header" *ng-if="data.bodyParam"> Request Body </h2>
<div class="body-param-description" inner-html="{{data.bodyParam.description | marked}}"></div> <div class="body-param-description" inner-html="{{data.bodyParam.description | marked}}"></div>
<div> <div>

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

@ -1,4 +1,6 @@
h2 { @import '../../common/styles/variables';
.param-list-header {
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
font-size: 18px; font-size: 18px;
padding: 0.2em 0; padding: 0.2em 0;
@ -45,7 +47,7 @@ h2 {
} }
.param-name { .param-name {
border-left: 1px solid #7D97CE; border-left: 1px solid $tree-lines-color;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
} }
@ -55,7 +57,7 @@ h2 {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: #7D97CE; background-color: $tree-lines-color;
margin: 0 5px; margin: 0 5px;
top: -1px; top: -1px;
position: relative; position: relative;
@ -64,7 +66,7 @@ h2 {
.param-name > span:after { .param-name > span:after {
content: ""; content: "";
position: absolute; position: absolute;
border-top: 1px solid #7D97CE; border-top: 1px solid $tree-lines-color;
width: 10px; width: 10px;
left: 0; left: 0;
top: 10px; top: 10px;

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

@ -1,3 +1,5 @@
@import '../../common/styles/variables';
side-menu { side-menu {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
@ -10,13 +12,13 @@ api-info, side-menu {
side-menu { side-menu {
position: fixed; position: fixed;
width: 260px; width: $side-menu-width;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;; overflow-x: hidden;;
background-color: #f2f2f2; background-color: $side-menu-bg-color;
} }
.api-content { .api-content {
margin-left: 260px; margin-left: $side-menu-width;
} }

2
lib/components/ResponsesList/responses-list.html
View File

@ -1,4 +1,4 @@
<table class="inline"> <table>
<thead> <thead>
<tr> <tr>
<th colspan="3"> Responses </th> <th colspan="3"> Responses </th>

3
lib/components/SchemaSample/schema-sample.js
View File

@ -9,7 +9,8 @@ import SchemaSampler from 'json-schema-instantiator';
templateUrl: './lib/components/SchemaSample/schema-sample.html', templateUrl: './lib/components/SchemaSample/schema-sample.html',
styles: [` styles: [`
pre { pre {
background-color: #121427; background-color: transparent;
padding: 0;
} }
`] `]
}) })

2
lib/components/SideMenu/side-menu.html
View File

@ -1,4 +1,4 @@
<h2> Api reference </h2> <h2 class="menu-header"> Api reference </h2>
<div *ng-for="var cat of data.menu; var idx = index"> <div *ng-for="var cat of data.menu; var idx = index">
<side-menu-cat [cat-details]="cat" (expand)="activateAndScroll(idx, -1)" <side-menu-cat [cat-details]="cat" (expand)="activateAndScroll(idx, -1)"
(activate)="activateAndScroll(idx, $event.methodIdx)"> (activate)="activateAndScroll(idx, $event.methodIdx)">

2
lib/components/SideMenu/side-menu.scss
View File

@ -1,4 +1,4 @@
h2 { .menu-header {
text-transform: uppercase; text-transform: uppercase;
color: #1976D3; color: #1976D3;
} }

4
lib/components/SideMenuCat/side-menu-cat.html
View File

@ -1,5 +1,5 @@
<label (click)="expandCat()" [ng-class]="{active: data.active}"> {{data.name}}</label> <label class="menu-item" (click)="expandCat()" [ng-class]="{active: data.active}"> {{data.name}}</label>
<ul [ng-class]="{active: data.active}"> <ul class="menu-subitems" [ng-class]="{active: data.active}">
<li *ng-for="var method of data.methods; var idx = index" <li *ng-for="var method of data.methods; var idx = index"
[ng-class]="{active: method.active}" [ng-class]="{active: method.active}"
(click)="activateMethod(idx)"> (click)="activateMethod(idx)">

10
lib/components/SideMenuCat/side-menu-cat.scss
View File

@ -1,4 +1,4 @@
label { .menu-item {
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
@ -6,23 +6,23 @@ label {
text-transform: capitalize; text-transform: capitalize;
} }
ul { .menu-subitems {
padding-left: 20px; padding-left: 20px;
margin: 0; margin: 0;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
} }
ul.active { .menu-subitems.active {
height: auto; height: auto;
} }
li { .menu-subitems li {
list-style: none inside none; list-style: none inside none;
padding: 5px 0; padding: 5px 0;
cursor: pointer; cursor: pointer;
} }
label.active, li.active { .menu-item.active, .menu-subitems li.active {
color: #1976D3; color: #1976D3;
} }