_jsontree.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /* Structure */
  2. json-tree {
  3. .json-tree-key {
  4. vertical-align: middle;
  5. }
  6. .expandable {
  7. position: relative;
  8. &::before {
  9. pointer-events: none;
  10. }
  11. &::before,
  12. > .json-tree-key {
  13. cursor: pointer;
  14. }
  15. }
  16. .json-tree-branch-preview {
  17. display: inline-block;
  18. vertical-align: middle;
  19. }
  20. }
  21. /* Looks */
  22. json-tree {
  23. ul {
  24. padding-left: $spacer;
  25. }
  26. li,
  27. ul {
  28. list-style: none;
  29. }
  30. li {
  31. line-height: 18px;
  32. }
  33. .json-tree-key {
  34. color: $variable;
  35. padding: 5px 10px 5px 15px;
  36. &::after {
  37. content: ':';
  38. }
  39. }
  40. json-node.expandable {
  41. &::before {
  42. content: '\25b6';
  43. position: absolute;
  44. left: 0px;
  45. font-size: 8px;
  46. transition: transform 0.1s ease;
  47. }
  48. &.expanded::before {
  49. transform: rotate(90deg);
  50. }
  51. }
  52. .json-tree-leaf-value,
  53. .json-tree-branch-preview {
  54. word-break: break-all;
  55. }
  56. .json-tree-branch-preview {
  57. overflow: hidden;
  58. font-style: italic;
  59. max-width: 40%;
  60. height: 1.5em;
  61. opacity: 0.7;
  62. }
  63. }