redoc/lib/components/JsonSchema/json-schema.scss
2016-04-13 15:46:41 +03:00

189 lines
3.5 KiB
SCSS

@import 'json-schema-common';
/* styles for array-schema for array */
$array-marker-font-sz: 13px;
$array-marker-line-height: 1.5;
:host {
display: block;
}
.param-schema > td {
border-left: $line-border;
padding: 0 10px;
}
.derived-schema {
display: none;
}
.derived-schema.active {
display: block;
}
json-schema.nested-schema {
background-color: white;
padding: 10px 20px;
position: relative;
border-radius: $border-radius;
&:before, &:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
border-style: solid;
border-color: transparent;
border-width: 10px 15px 0;
margin-left: -7.5px;
border-top-color: $side-menu-active-bg-color;
}
&:before {
left: 10%;
}
&:after {
right: 10%;
}
.param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after {
border-color: white;
}
}
json-schema[nesteven="true"] {
background-color: $side-menu-active-bg-color;
border-radius: $border-radius;
&:before, &:after {
border-top-color: white;
}
> .params-wrap > .param:first-of-type > .param-name:before, > .params-wrap > .param:last-of-type > .param-name:after {
border-color: $side-menu-active-bg-color;
}
> .params-wrap > .param:last-of-type, > .params-wrap > .param.last {
> .param-name:after {
border-color: $side-menu-active-bg-color;
}
}
}
.param.complex > .param-info {
border-bottom: 0;
}
.params-wrap {
border-collapse: collapse;
width: 100%;
}
.params-wrap.params-array:before, .params-wrap.params-array:after {
display: block;
font-weight: $base-font-weight;
color: $black;
font-size: $array-marker-font-sz;
line-height: $array-marker-line-height;
}
.params-wrap.params-array:after {
content: "]";
}
.params-wrap.params-array:before {
content: "Array [";
padding-top: 1em;
}
.params-wrap.params-array {
padding-left: $bullet-margin;
}
.param-schema.param-array:before {
bottom: ($array-marker-font-sz * $array-marker-line-height) / 2;
width: $bullet-margin;
border-left-style: dashed;
border-bottom: $lines-width dashed $tree-lines-color;
}
.params-wrap.params-array > .param-wrap:first-of-type > .param > .param-name:after {
content: "";
display: block;
position: absolute;
left: -$lines-width;
top: 0;
border-left: $line-border-erase;
height: ($param-name-height/2) + $cell-padding;
}
.params-wrap > .param > .param-schema.param-array {
border-left-color: transparent;
}
.param.discriminator {
> .param-info {
padding-bottom: 0;
border-bottom: 0;
}
> .param-name:after {
display: none;
}
}
.discriminator-info {
font-weight: $regular;
margin-bottom: 10px;
> span {
font-size: 0.9em;
font-weight: $light;
}
}
.discriminator-wrap:not(.empty) > td {
//border-left: $line-border;
padding: 0;
position: relative;
&:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
border-left: $line-border;
height: ($param-name-height/2) + $cell-padding + 1;
z-index: 1;
}
}
ul {
text-align: left;
margin: 0;
padding: 0;
display: block;
}
li {
margin: 0.5em 0.3em 0.2em 0;
font-family: $headers-font, $headers-font-family;
font-size: .929em;
line-height: .929em;
border: 0;
color: white;
padding: 2px 8px 4px 8px;
border-radius: $border-radius;
background-color: rgba($black, 0.3);
display: inline-block;
cursor: pointer;
&:last-of-type {
margin-right: 0;
}
&.active {
background-color: $primary-color;
}
}