redoc/lib/components/JsonSchema/json-schema.scss

225 lines
3.8 KiB
SCSS
Raw Normal View History

@import 'json-schema-common';
2015-11-28 01:44:35 +03:00
/* styles for array-schema for array */
2016-03-08 23:03:05 +03:00
$array-marker-font-sz: 13px;
2015-11-28 01:44:35 +03:00
$array-marker-line-height: 1.5;
2016-02-07 17:11:15 +03:00
:host {
display: block;
}
2016-03-09 01:27:19 +03:00
.param-schema > td {
border-left: $line-border;
padding: 0 10px;
}
2016-03-18 16:06:22 +03:00
.derived-schema {
display: none;
}
.derived-schema.active {
display: block;
}
:host.nested-schema {
2016-04-07 20:59:59 +03:00
background-color: white;
2016-03-09 01:27:19 +03:00
padding: 10px 20px;
position: relative;
2016-03-14 22:29:27 +03:00
border-radius: $border-radius;
2016-03-09 01:27:19 +03:00
&: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;
2016-04-07 20:59:59 +03:00
border-top-color: $side-menu-active-bg-color;
2016-03-09 01:27:19 +03:00
}
&:before {
left: 10%;
}
&:after {
right: 10%;
}
.param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after {
2016-04-07 20:59:59 +03:00
border-color: white;
}
}
:host[nestodd="true"] {
2016-04-07 20:59:59 +03:00
background-color: $side-menu-active-bg-color;
border-radius: $border-radius;
&:before, &:after {
border-top-color: white;
}
2016-08-10 14:44:24 +03:00
> .params-wrap > .param:first-of-type > .param-name:before,
> .params-wrap > .param:last-of-type > .param-name:after {
2016-04-07 20:59:59 +03:00
border-color: $side-menu-active-bg-color;
2016-03-09 01:27:19 +03:00
}
2016-04-13 14:23:58 +03:00
2016-08-10 14:44:24 +03:00
> .params-wrap > .param:last-of-type,
> .params-wrap > .param.last {
2016-04-13 14:23:58 +03:00
> .param-name:after {
border-color: $side-menu-active-bg-color;
}
}
2016-03-09 01:27:19 +03:00
}
2016-07-15 23:44:42 +03:00
zippy {
overflow: visible;
}
.zippy-content-wrap {
padding: 0;
}
.param.complex.expanded > .param-info {
2016-03-09 01:27:19 +03:00
border-bottom: 0;
}
2016-07-10 14:42:49 +03:00
.param.complex > .param-name .param-name-wrap {
font-weight: bold;
cursor: pointer;
2016-07-10 15:43:17 +03:00
color: $black;
}
.param.complex > .param-name svg {
height: 1.2em;
vertical-align: middle;
transition: all 0.3s ease;
}
.param.complex.expanded > .param-name svg{
transform: rotateZ(-180deg);
}
.param.additional > .param-name {
color: rgba($black, 0.4);
}
2016-03-09 01:27:19 +03:00
.params-wrap {
width: 100%;
}
2016-07-10 14:44:22 +03:00
table {
border-spacing: 0;
}
2015-11-28 01:44:35 +03:00
.params-wrap.params-array:before, .params-wrap.params-array:after {
display: block;
2016-03-08 23:03:05 +03:00
font-weight: $base-font-weight;
color: $black;
2015-11-28 01:44:35 +03:00
font-size: $array-marker-font-sz;
line-height: $array-marker-line-height;
}
.params-wrap.params-array:after {
content: "]";
2016-08-10 14:44:24 +03:00
font-family: monospace;
2015-11-28 01:44:35 +03:00
}
.params-wrap.params-array:before {
content: "Array [";
2016-01-09 23:34:44 +03:00
padding-top: 1em;
2016-08-10 14:44:24 +03:00
font-family: monospace;
2015-11-28 01:44:35 +03:00
}
.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;
}
2016-01-09 23:34:44 +03:00
.params-wrap > .param > .param-schema.param-array {
border-left-color: transparent;
}
2016-01-10 18:29:35 +03:00
.discriminator-info {
font-weight: $regular;
2016-03-18 16:10:29 +03:00
margin-bottom: 10px;
2016-04-13 14:26:59 +03:00
> span {
font-size: 0.9em;
font-weight: $light;
}
2016-01-10 18:29:35 +03:00
}
2016-04-13 15:46:41 +03:00
.discriminator-wrap:not(.empty) > td {
//border-left: $line-border;
2016-03-09 01:27:19 +03:00
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;
}
2016-03-09 01:27:19 +03:00
}
2016-07-01 18:10:01 +03:00
ul, li {
2016-03-18 16:06:22 +03:00
margin: 0;
2016-03-09 01:27:19 +03:00
}
2016-07-01 18:10:01 +03:00
ul {
list-style: none;
padding-left: 1em;
}
2016-01-09 23:34:44 +03:00
2016-07-01 18:10:01 +03:00
li:before {
content: "- ";
font-weight: bold;
2016-01-09 23:34:44 +03:00
}
2016-08-10 14:44:24 +03:00
.array-tuple > .tuple-item {
margin-top: 1.5em;
display: flex;
> span {
flex: 0;
2016-08-10 15:22:42 +03:00
padding: 10px 15px 10px 0;
2016-08-10 14:44:24 +03:00
font-family: monospace;
}
> json-schema {
flex: 1;
&:before, &:after {
display: none;
}
}
}
.param-enum-value {
padding: 2px;
background-color: #e6ebf6;
&:before {
content: " = ";
}
}