payload/packages/next/src/views/API/RenderJSON/index.css at 78914049d5cc0d089febb0d969d6b0bdd8590bf2 · payloadcms/payload · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
@layer payload-default {
  .query-inspector {
    --tab-width: var(--spacer-4);
  }

  .query-inspector__json-children {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      width: var(--stroke-width-small);
      height: 100%;
      border-left: var(--stroke-width-small) dashed var(--color-border);
    }
  }

  .query-inspector__json-children--nested {
    li {
      padding-left: var(--spacer-2);
    }
  }

  .query-inspector__row-line--nested {
    .query-inspector__json-children {
      padding-left: var(--tab-width);
    }
  }

  .query-inspector__list-wrap {
    position: relative;
  }

  .query-inspector__list-toggle {
    all: unset;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
    position: relative;
    display: flex;
    column-gap: var(--spacer-2-5);
    row-gap: var(--spacer-2);
    align-items: center;
    background-color: var(--color-bg-secondary);
    width: calc(100% + var(--spacer-2));
    margin-left: calc(-1 * var(--spacer-2));
    padding-left: var(--spacer-2);

    &:not(.query-inspector__list-toggle--empty) {
      margin-left: calc(var(--tab-width) * -1 - var(--spacer-2));
      padding-left: calc(var(--tab-width) + var(--spacer-2));
      width: calc(100% + var(--tab-width) + var(--spacer-2));
    }

    svg .stroke {
      stroke: var(--color-icon-tertiary);
    }

    &:hover {
      background-color: var(--color-bg-secondary-hover);
    }
  }

  .query-inspector__list-toggle--empty {
    cursor: default;
    pointer-events: none;
  }

  .query-inspector__toggle-row-icon--open {
    transform: rotate(0deg);
  }

  .query-inspector__toggle-row-icon--closed {
    transform: rotate(-90deg);
  }

  .query-inspector__value-type--number {
    .query-inspector__value {
      color: var(--number-color);
    }
  }

  .query-inspector__value-type--string {
    .query-inspector__value {
      color: var(--string-color);
    }
  }

  .query-inspector__bracket {
    position: relative;
  }

  .query-inspector__bracket--position-end {
    left: var(--stroke-width-medium);
    width: calc(100% - var(--spacer-1));
  }

  /* Top-level JSON structure specific rules */
  .query-inspector__results {
    & > .query-inspector__row-line--nested {
      & > .query-inspector__list-toggle {
        margin-left: calc(-1 * var(--spacer-2));
        padding-left: var(--spacer-2);
        width: calc(100% + var(--spacer-2));
        column-gap: var(--spacer-1);

        .query-inspector__toggle-row-icon {
          margin-left: calc(var(--spacer-1) * -1);
        }
      }

      & > .query-inspector__json-children {
        padding-left: var(--spacer-3);
      }

      & > .query-inspector__bracket--nested > .query-inspector__bracket--position-end {
        padding-left: var(--spacer-3);
      }
    }
  }
}