Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-07-04 19:13:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor tree lines css

Browse Source
This commit is contained in:
Roman Hotsiy 2015-11-22 20:04:18 +02:00
parent a78dd4a0ab
commit 166af1ffb3
4 changed files with 70 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,19 @@
@import '../../common/styles/variables'; @import '../../common/styles/variables';
$lines-width: 1px;
$bullet-size: 7px;
$cell-spacing: 25px;
$cell-padding: 5px;
$bullet-margin: 10px;
$line-border: $lines-width solid $tree-lines-color;
$line-border-erase: $lines-width solid white;
$param-name-height: 20px;
$sub-schema-offset: ($bullet-size/2) + $bullet-margin;
.param-schema { .param-schema {
padding-left: 13px; padding-left: $sub-schema-offset - $lines-width;
padding-top: 5px; border-left: $line-border;
border-left: 1px solid #7D97CE;
} }
.param-wrap { .param-wrap {
@ -13,22 +23,32 @@
.param-schema:before { .param-schema:before {
content: ""; content: "";
position: absolute; position: absolute;
left: 14px; left: $sub-schema-offset;
top: 10px; top: ($param-name-height/2) + $cell-padding;
bottom: 0; bottom: 0;
border-left: 1px solid $tree-lines-color; border-left: $line-border;
} }
.param-name { .param-name {
padding: 0 5px; font-size: 14px;
padding: $cell-padding $cell-spacing $cell-padding 0;
font-weight: bold; font-weight: bold;
box-sizing: border-box; box-sizing: border-box;
line-height: $param-name-height;
border-left: $line-border;
white-space: nowrap;
position: relative;
> span {
vertical-align: middle;
}
} }
.param-info { .param-info {
width: 100%; width: 100%;
padding: 0 5px; padding: $cell-padding 0;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #ccc;
} }
.param { .param {
@ -39,64 +59,58 @@
color: red; color: red;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
} line-height: $param-name-height;
vertical-align: middle;
.param-description {
padding: 0.5em 0;
border-bottom: 1px solid #999;
} }
.param-type { .param-type {
text-transform: capitalize; text-transform: capitalize;
color: #999; color: #999;
font-size: 12px; font-size: 12px;
line-height: 2; line-height: $param-name-height;
vertical-align: middle;
font-weight: bold; font-weight: bold;
} }
.param-name {
border-left: 1px solid $tree-lines-color;
white-space: nowrap;
position: relative;
}
/* tree */ /* tree */
// Bullet
.param-name > span:before { .param-name > span:before {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 8px; width: $bullet-size;
height: 8px; height: $bullet-size;
background-color: $tree-lines-color; background-color: $tree-lines-color;
margin: 0 5px; margin: 0 $bullet-margin;
top: -1px; vertical-align: middle;
position: relative;
} }
.param-name > span:after { .param-name > span:after {
content: ""; content: "";
position: absolute; position: absolute;
border-top: 1px solid $tree-lines-color; border-top: $line-border;
width: 10px; width: $bullet-margin;
left: 0; left: 0;
top: 10px; top: ($param-name-height/2) + $cell-padding;
} }
.param-wrap:first-of-type .param-name:before { .param-wrap:first-of-type .param-name:before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: -1px; left: -$lines-width;
width: 1px; top: 0;
background-color: white; border-left: $line-border-erase;
height: 10px; height: ($param-name-height/2) + $cell-padding;
} }
.param-wrap:last-of-type > .param > .param-name:after { .param-wrap:last-of-type > .param > .param-name:after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: -1px; left: -$lines-width;
width: 1px; border-left: $line-border-erase;
top: 11px; top: ($param-name-height/2) + $cell-padding + $lines-width;
background-color: white; background-color: white;
bottom: 0; bottom: 0;
} }

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

@ -1,5 +1,3 @@
@import '../../common/styles/variables';
.param-list-header { .param-list-header {
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
font-size: 18px; font-size: 18px;
@ -8,87 +6,44 @@
color: #253137; color: #253137;
} }
@import '../JsonSchema/json-schema.scss';
// paramters can't be multilevel so table representation works for it without javascript
.params-wrap { .params-wrap {
display: table; display: table;
} }
.param-name { .param-name {
display: table-cell; display: table-cell;
padding: 0 5px; vertical-align: top;
font-weight: bold;
} }
.param-info { .param-info {
display: table-cell; display: table-cell;
width: 100%;
padding: 0 5px;
} }
.param { .param {
display: table-row; display: table-row;
} }
.param-required {
color: red;
font-weight: bold;
font-size: 12px;
}
.param-description {
padding: 0.5em 0;
border-bottom: 1px solid #999;
}
.param-type {
text-transform: capitalize;
color: #999;
font-weight: bold;
font-size: 12px;
}
.param-name {
border-left: 1px solid $tree-lines-color;
white-space: nowrap;
position: relative;
}
/* tree */
.param-name > span:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: $tree-lines-color;
margin: 0 5px;
top: -1px;
position: relative;
}
.param-name > span:after {
content: "";
position: absolute;
border-top: 1px solid $tree-lines-color;
width: 10px;
left: 0;
top: 10px;
}
.param:first-of-type .param-name:before { .param:first-of-type .param-name:before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: -2px; left: -$lines-width;
width: 2px; top: 0;
background-color: white; border-left: $line-border-erase;
height: 10px; height: ($param-name-height/2) + $cell-padding;
} }
.param:last-of-type .param-name:after { .param:last-of-type .param-name:after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: -2px; left: -$lines-width;
width: 2px; border-left: $line-border-erase;
top: 11px; top: ($param-name-height/2) + $cell-padding + $lines-width;
background-color: white; background-color: white;
bottom: 0; bottom: 0;
} }