| :host { |
| display: block; |
| } |
| .td-json-formatter-wrapper { |
| padding-top: 2px; |
| padding-bottom: 2px; |
| .td-key { |
| // [layout] |
| box-sizing: border-box; |
| display: flex; |
| // [layout="row"] |
| flex-direction: row; |
| // [layout-align="start center"] |
| align-items: flex-start; |
| align-content: center; |
| max-width: 100%; |
| justify-content: flex-start; |
| &.td-key-node { |
| &:hover { |
| cursor: pointer; |
| } |
| } |
| } |
| .td-object-children { |
| &.ng-animating { |
| overflow: hidden; |
| } |
| & .td-key, |
| & .td-object-children { |
| padding-left: 24px; |
| ::ng-deep [dir='rtl'] & { |
| padding-right: 24px; |
| padding-left: 0; |
| } |
| &.td-key-leaf { |
| padding-left: 48px; |
| ::ng-deep [dir='rtl'] & { |
| padding-right: 48px; |
| padding-left: 0; |
| } |
| } |
| } |
| } |
| .value { |
| margin-left: 5px; |
| ::ng-deep [dir='rtl'] & { |
| padding-right: 5px; |
| padding-left: 0; |
| } |
| .td-empty { |
| opacity: 0.5; |
| text-decoration: line-through; |
| } |
| .string { |
| word-break: break-word; |
| } |
| .date { |
| word-break: break-word; |
| } |
| } |
| } |
