iso-json-tree/dist/JsonTree.css

iso-json-tree

body{font-family: sans-serif;}

.JsonTree-Tree {
	background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    box-shadow: 0 0 10px #ccc;
}

.JsonTree-Node-Item {
	margin: 3px 0 3px 15px;
}

.JsonTree-Node-Key {
	display: inline-block;
	vertical-align: top;
	color: #008fd2;
}

.JsonTree-Node-Key a{
	text-decoration: none;
	color: #008fd2;
}

.JsonTree-Node-Value {
	display: inline-block;
	margin-left: 10px;
	vertical-align: top;
}
.JsonTree-Node-Value.child-element {display: block;}

.JsonTree-Node-Value.hidden {display: none;}

.JsonTree-Node-Value-String { color: green; }

.JsonTree-Node-Value-String a { color: green; }

.JsonTree-Node-Value-Number { color: red; }

.JsonTree-Node-Value-Func { color: black; }
.JsonTree-Node-Value-Func-Line {margin-left: 15px;}
.JsonTree-Node-Value-Func-Line:first-child {margin-left: 0}
.JsonTree-Node-Value-Func-Line:last-child {margin-left: 0}

.Collapsable-Arrow {
	text-decoration: none;
	color: #008fd2;
	font-size: 85%;
	display: inline-block;
	width: 15px;
    height: 15px;
    margin-right: 4px;

	transform: rotate(-90deg);
  	transition: transform 0.2s ease-out;
}

.Collapsable-Arrow.Open {
  transform: rotate(0deg);
  transition: transform 0.2s ease-out;
}

.Collapsable-Content {
	display: block;
}

.Collapsable-Content.Hidden {
	display: none;
}