145 lines
2.7 KiB
SCSS
145 lines
2.7 KiB
SCSS
@mixin theme(
|
|
$default-color: black,
|
|
$string-color: green,
|
|
$number-color: blue,
|
|
$boolean-color: red,
|
|
$null-color: #855A00,
|
|
$undefined-color: rgb(202, 11, 105),
|
|
$function-color: #FF20ED,
|
|
$toggler-opacity: 0.6,
|
|
$toggler-color: #45376F,
|
|
$bracket-color: blue,
|
|
$key-color: #00008B,
|
|
$url-color: blue
|
|
) {
|
|
font-family: monospace;
|
|
&, a, a:hover {
|
|
color: $default-color;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.json-formatter-row {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.json-formatter-children {
|
|
&.json-formatter-empty {
|
|
opacity: 0.5;
|
|
margin-left: 1rem;
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
&.json-formatter-object:after {
|
|
content: "No properties";
|
|
}
|
|
&.json-formatter-array:after {
|
|
content: "[]";
|
|
}
|
|
}
|
|
}
|
|
|
|
.json-formatter-string {
|
|
color: $string-color;
|
|
white-space: pre;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.json-formatter-number {
|
|
color: $number-color;
|
|
}
|
|
.json-formatter-boolean {
|
|
color: $boolean-color;
|
|
}
|
|
.json-formatter-null {
|
|
color: $null-color;
|
|
}
|
|
.json-formatter-undefined {
|
|
color: $undefined-color;
|
|
}
|
|
.json-formatter-function {
|
|
color: $function-color;
|
|
}
|
|
.json-formatter-date {
|
|
background-color: fade($default-color, 5%);
|
|
}
|
|
.json-formatter-url {
|
|
text-decoration: underline;
|
|
color: $url-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.json-formatter-bracket {
|
|
color: $bracket-color;
|
|
}
|
|
.json-formatter-key {
|
|
color: $key-color;
|
|
cursor: pointer;
|
|
padding-right: 0.2rem;
|
|
}
|
|
|
|
.json-formatter-constructor-name {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.json-formatter-toggler {
|
|
line-height: 1rem;
|
|
font-size: 1rem;
|
|
vertical-align: baseline;
|
|
opacity: $toggler-opacity;
|
|
cursor: pointer;
|
|
padding-right: 0.3rem;
|
|
|
|
&:after {
|
|
display: inline-block;
|
|
transition: none;
|
|
content: '+';
|
|
}
|
|
}
|
|
|
|
// Inline preview on hover (optional)
|
|
> a > .json-formatter-preview-text {
|
|
opacity: 0;
|
|
transition: opacity .15s ease-in;
|
|
font-style: italic;
|
|
}
|
|
|
|
&:hover > a > .json-formatter-preview-text {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
// Open state
|
|
&.json-formatter-open {
|
|
> .json-formatter-toggler-link .json-formatter-toggler:after {
|
|
transform: none;
|
|
content: '-';
|
|
}
|
|
> .json-formatter-children:after {
|
|
display: inline-block;
|
|
}
|
|
> a > .json-formatter-preview-text {
|
|
display: none;
|
|
}
|
|
&.json-formatter-empty:after {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.json-formatter-nomad.json-formatter-row {
|
|
@include theme(
|
|
$grey,
|
|
$nomad-green,
|
|
$packer-blue,
|
|
$consul-pink,
|
|
$terraform-purple,
|
|
$terraform-purple-dark,
|
|
$white,
|
|
0.6,
|
|
$black,
|
|
$grey-dark,
|
|
$white,
|
|
$blue
|
|
);
|
|
}
|