mirror of
https://github.com/Redocly/redoc.git
synced 2025-01-26 23:54:07 +03:00
Add _variables.scss and start stylesheets refactoring
This commit is contained in:
Roman Hotsiy
parent
5bf1e62c75
commit
a78dd4a0ab
12
lib/common/styles/_variables.scss
Normal file
12
lib/common/styles/_variables.scss
Normal 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;
|
||||
|
|
@ -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>
|
||||
<!-- TODO: create separate components for contact and license ? -->
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
h1 {
|
||||
color: #1976D3;
|
||||
@import '../../common/styles/variables';
|
||||
|
||||
.api-info-header {
|
||||
color: $headers-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
h2 {
|
||||
border-bottom: 1px solid #999;
|
||||
font-size: 18px;
|
||||
padding: 0.2em 0;
|
||||
margin: 0.5em 0;
|
||||
color: #253137;
|
||||
}
|
||||
@import '../../common/styles/variables';
|
||||
|
||||
.param-schema {
|
||||
padding-left: 13px;
|
||||
|
|
@ -13,7 +7,7 @@ h2 {
|
|||
}
|
||||
|
||||
.param-wrap {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.param-schema:before {
|
||||
|
|
@ -22,18 +16,16 @@ h2 {
|
|||
left: 14px;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
border-left: 1px solid #7D97CE;
|
||||
border-left: 1px solid $tree-lines-color;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
/*display: table-cell;*/
|
||||
padding: 0 5px;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.param-info {
|
||||
/*display: table-cell;*/
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -59,10 +51,11 @@ h2 {
|
|||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
border-left: 1px solid #7D97CE;
|
||||
border-left: 1px solid $tree-lines-color;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -72,7 +65,7 @@ h2 {
|
|||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #7D97CE;
|
||||
background-color: $tree-lines-color;
|
||||
margin: 0 5px;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
|
|
@ -81,7 +74,7 @@ h2 {
|
|||
.param-name > span:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-top: 1px solid #7D97CE;
|
||||
border-top: 1px solid $tree-lines-color;
|
||||
width: 10px;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="method">
|
||||
<div class="content">
|
||||
<h2>{{data.methodInfo.summary}}</h2>
|
||||
<h3>
|
||||
<div class="method-content">
|
||||
<h2 class="method-header">{{data.methodInfo.summary}}</h2>
|
||||
<h3 class="method-endpoint">
|
||||
<span class="http-method" [ng-class]="data.method">{{data.method}}</span>
|
||||
<span class="api-url">{{data.apiUrl}}</span> <span class="path">{{data.path}}</span>
|
||||
</h3>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<br>
|
||||
<responses-list pointer="{{pointer}}/responses"> </responses-list>
|
||||
</div>
|
||||
<div class="samples">
|
||||
<div class="method-samples">
|
||||
<div *ng-if="data.bodyParam">
|
||||
<header> Body sample </header>
|
||||
<schema-sample pointer="{{data.bodyParam._pointer}}/schema"> </schema-sample>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,37 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
responses-list, params-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
.method-header {
|
||||
font-size: 25px;
|
||||
font-weight: 200;
|
||||
color: #253137;
|
||||
color: $method-headers-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
.method-endpoint {
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
h3 > span {
|
||||
.method-endpoint > span {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span.api-url {
|
||||
.api-url {
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span.path {
|
||||
.path {
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
color: #00329F;
|
||||
color: $headers-color;
|
||||
}
|
||||
|
||||
.method-tags {
|
||||
|
|
@ -44,7 +46,7 @@ span.path {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.method-tags a:before{
|
||||
.method-tags a:before {
|
||||
content: '#';
|
||||
margin-right: -0.4em;
|
||||
}
|
||||
|
|
@ -53,19 +55,19 @@ span.path {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.content, .samples {
|
||||
.method-content, .method-samples {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 60%;
|
||||
.method-content {
|
||||
width: 100% - $samples-panel-width;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.samples {
|
||||
color: white;
|
||||
.method-samples {
|
||||
color: $sample-panel-color;
|
||||
width: 40%;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
|
@ -74,15 +76,15 @@ responses-samples {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.samples header {
|
||||
font-size: 20px;
|
||||
.method-samples header {
|
||||
font-size: 16px;
|
||||
margin: 5px 0;
|
||||
color: $sample-panel-headers-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.samples schema-sample {
|
||||
.method-samples schema-sample {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
background-color: rgb(18, 20, 39);
|
||||
}
|
||||
|
||||
.method:after {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
method {
|
||||
padding-bottom: 100px;
|
||||
display: block;
|
||||
|
|
@ -16,7 +18,7 @@ method {
|
|||
}
|
||||
|
||||
.tag-info h1 {
|
||||
color: #00329F;
|
||||
color: $headers-color;
|
||||
text-transform: capitalize;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -28,9 +30,9 @@ method {
|
|||
|
||||
.methods:before {
|
||||
content: "";
|
||||
background: #2C2E3E;
|
||||
background: $samples-panel-bg-color;
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
width: $samples-panel-width;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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 *ng-for="#param of data.params" class="param">
|
||||
<div class="param-name">
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
h2 {
|
||||
@import '../../common/styles/variables';
|
||||
|
||||
.param-list-header {
|
||||
border-bottom: 1px solid #999;
|
||||
font-size: 18px;
|
||||
padding: 0.2em 0;
|
||||
|
|
@ -45,7 +47,7 @@ h2 {
|
|||
}
|
||||
|
||||
.param-name {
|
||||
border-left: 1px solid #7D97CE;
|
||||
border-left: 1px solid $tree-lines-color;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -55,7 +57,7 @@ h2 {
|
|||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #7D97CE;
|
||||
background-color: $tree-lines-color;
|
||||
margin: 0 5px;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
|
|
@ -64,7 +66,7 @@ h2 {
|
|||
.param-name > span:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-top: 1px solid #7D97CE;
|
||||
border-top: 1px solid $tree-lines-color;
|
||||
width: 10px;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
side-menu {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -10,13 +12,13 @@ api-info, side-menu {
|
|||
|
||||
side-menu {
|
||||
position: fixed;
|
||||
width: 260px;
|
||||
width: $side-menu-width;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;;
|
||||
background-color: #f2f2f2;
|
||||
background-color: $side-menu-bg-color;
|
||||
}
|
||||
|
||||
.api-content {
|
||||
margin-left: 260px;
|
||||
margin-left: $side-menu-width;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<table class="inline">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3"> Responses </th>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import SchemaSampler from 'json-schema-instantiator';
|
|||
templateUrl: './lib/components/SchemaSample/schema-sample.html',
|
||||
styles: [`
|
||||
pre {
|
||||
background-color: #121427;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
`]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<side-menu-cat [cat-details]="cat" (expand)="activateAndScroll(idx, -1)"
|
||||
(activate)="activateAndScroll(idx, $event.methodIdx)">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
h2 {
|
||||
.menu-header {
|
||||
text-transform: uppercase;
|
||||
color: #1976D3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<label (click)="expandCat()" [ng-class]="{active: data.active}"> {{data.name}}</label>
|
||||
<ul [ng-class]="{active: data.active}">
|
||||
<label class="menu-item" (click)="expandCat()" [ng-class]="{active: data.active}"> {{data.name}}</label>
|
||||
<ul class="menu-subitems" [ng-class]="{active: data.active}">
|
||||
<li *ng-for="var method of data.methods; var idx = index"
|
||||
[ng-class]="{active: method.active}"
|
||||
(click)="activateMethod(idx)">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
label {
|
||||
.menu-item {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
|
|
@ -6,23 +6,23 @@ label {
|
|||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
ul {
|
||||
.menu-subitems {
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul.active {
|
||||
.menu-subitems.active {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
.menu-subitems li {
|
||||
list-style: none inside none;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label.active, li.active {
|
||||
.menu-item.active, .menu-subitems li.active {
|
||||
color: #1976D3;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user