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

211 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;
}
> .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;
2016-03-09 01:27:19 +03:00
}
2016-04-13 14:23:58 +03:00
> .params-wrap > .param:last-of-type, > .params-wrap > .param.last {
> .param-name:after {
border-color: $side-menu-active-bg-color;
}
}
2016-03-09 01:27:19 +03:00
}
.zippy-content-wrap {
padding: 0;
}
.param.complex.expanded > .param-info {
2016-03-09 01:27:19 +03:00
border-bottom: 0;
}
.param.complex > .param-name .param-name-content {
font-weight: bold;
cursor: pointer;
}
.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 {
border-collapse: collapse;
width: 100%;
}
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: "]";
}
.params-wrap.params-array:before {
content: "Array [";
2016-01-09 23:34:44 +03:00
padding-top: 1em;
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
.param.discriminator {
2016-03-09 01:27:19 +03:00
> .param-info {
2016-01-10 18:29:35 +03:00
padding-bottom: 0;
}
2016-03-09 01:27:19 +03:00
> .param-name:after {
display: none;
}
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-03-18 16:06:22 +03:00
ul {
text-align: left;
margin: 0;
padding: 0;
2016-01-10 18:29:35 +03:00
display: block;
2016-03-09 01:27:19 +03:00
}
2016-03-18 16:06:22 +03:00
li {
2016-03-18 16:10:29 +03:00
margin: 0.5em 0.3em 0.2em 0;
font-family: $headers-font, $headers-font-family;
font-size: .929em;
line-height: .929em;
2016-01-10 18:29:35 +03:00
border: 0;
color: white;
padding: 2px 8px 4px 8px;
border-radius: $border-radius;
background-color: rgba($black, 0.3);
2016-03-18 16:06:22 +03:00
display: inline-block;
cursor: pointer;
2016-01-09 23:34:44 +03:00
&:last-of-type {
margin-right: 0;
2016-01-09 23:34:44 +03:00
}
&.active {
background-color: $primary-color;
2016-01-09 23:34:44 +03:00
}
}