grafana/public/sass/components/_jsontree.scss

77 lines
1.0 KiB
SCSS
Raw Normal View History

/* Structure */
json-tree {
.json-tree-key {
vertical-align: middle;
}
2018-12-25 13:18:38 -06:00
.expandable {
position: relative;
2018-12-25 13:18:38 -06:00
&::before {
pointer-events: none;
}
2018-12-25 13:18:38 -06:00
2017-12-19 09:22:41 -06:00
&::before,
> .json-tree-key {
cursor: pointer;
}
}
2018-12-25 13:18:38 -06:00
.json-tree-branch-preview {
display: inline-block;
vertical-align: middle;
}
}
/* Looks */
json-tree {
ul {
padding-left: $spacer;
}
2018-12-25 13:18:38 -06:00
2017-12-19 09:22:41 -06:00
li,
ul {
list-style: none;
}
2018-12-25 13:18:38 -06:00
li {
line-height: 18px;
}
2018-12-25 13:18:38 -06:00
.json-tree-key {
color: $variable;
padding: 5px 10px 5px 15px;
2018-12-25 13:18:38 -06:00
&::after {
2018-12-25 13:18:38 -06:00
content: ':';
}
}
2018-12-25 13:18:38 -06:00
json-node.expandable {
&::before {
2018-12-25 13:18:38 -06:00
content: '\25b6';
position: absolute;
left: 0px;
font-size: 8px;
2017-12-19 09:22:41 -06:00
transition: transform 0.1s ease;
}
2018-12-25 13:18:38 -06:00
&.expanded::before {
transform: rotate(90deg);
}
}
2018-12-25 13:18:38 -06:00
2017-12-19 09:22:41 -06:00
.json-tree-leaf-value,
.json-tree-branch-preview {
word-break: break-all;
}
2018-12-25 13:18:38 -06:00
.json-tree-branch-preview {
overflow: hidden;
font-style: italic;
max-width: 40%;
height: 1.5em;
2017-12-19 09:22:41 -06:00
opacity: 0.7;
}
}