@stainless-api/docs-ui 0.1.0-beta.7 → 0.1.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,47 +1,39 @@
1
- @layer docs-ui {
2
- /* Resets */
3
- .stldocs-root {
4
- line-height: 100%;
5
-
6
- *:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
7
- &::before,
8
- &::after {
9
- all: unset;
10
- }
11
-
12
- all: unset;
13
- display: revert;
14
- }
15
-
16
- *,
17
- *::before,
18
- *::after {
19
- box-sizing: border-box;
20
- }
21
-
22
- h1,
23
- h2,
24
- h3,
25
- h4,
26
- h5 {
27
- display: block;
28
- line-height: 120%;
29
- font-weight: 500;
30
- }
1
+ /* Resets */
2
+ .stldocs-root {
3
+ line-height: 100%;
4
+ letter-spacing: -0.01em;
5
+
6
+ a {
7
+ color: inherit;
8
+ cursor: pointer;
9
+ text-decoration: none;
10
+ }
31
11
 
32
- div {
33
- display: block;
34
- }
12
+ *,
13
+ *::before,
14
+ *::after {
15
+ box-sizing: border-box;
16
+ }
35
17
 
36
- a {
37
- cursor: pointer;
38
- }
18
+ h1,
19
+ h2,
20
+ h3,
21
+ h4,
22
+ h5 {
23
+ display: block;
24
+ color: var(--stl-ui-foreground);
25
+ font-weight: 500;
26
+ line-height: var(--stl-ui-typography-line-height-headings);
27
+ }
39
28
 
40
- span {
41
- display: inline;
42
- }
29
+ display: block;
30
+ margin: 0;
31
+ }
43
32
 
44
- display: block;
45
- margin: 0;
33
+ .sl-markdown-content {
34
+ .stldocs-root
35
+ :not(a, strong, em, del, span, input, code, br)
36
+ + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
37
+ margin-top: 0;
46
38
  }
47
39
  }
@@ -1,335 +1,334 @@
1
- @layer docs-ui {
2
- .stldocs-root .stldocs-search-form {
1
+ .stldocs-root .stldocs-search-form {
2
+ display: flex;
3
+ flex-direction: column;
4
+
5
+ .stldocs-search-filter {
6
+ margin-top: 0.8rem;
3
7
  display: flex;
4
- flex-direction: column;
8
+ gap: 1rem;
5
9
 
6
- .stldocs-search-filter {
7
- margin-top: 0.8rem;
10
+ .stldocs-togglebutton {
8
11
  display: flex;
9
- gap: 1rem;
12
+ flex-grow: 1;
13
+ gap: 0.5rem;
14
+ border-radius: 8px;
15
+ padding: 0.4em 0.8em;
16
+ line-height: 1.5;
17
+ justify-content: center;
18
+ font-size: 0.9rem;
19
+ cursor: pointer;
10
20
 
11
- .stldocs-togglebutton {
12
- display: flex;
13
- flex-grow: 1;
14
- gap: 0.5rem;
15
- border-radius: 8px;
16
- padding: 0.4em 0.8em;
21
+ &:hover,
22
+ &[data-stldocs-toggle-selected='true'] {
23
+ background-color: var(--stldocs-color-selected);
24
+
25
+ .stldocs-search-filter-count {
26
+ color: var(--stldocs-color-text-invert);
27
+ background-color: var(--stldocs-color-text);
28
+ }
29
+ }
30
+
31
+ .stldocs-icon {
32
+ margin: auto 0;
33
+ }
34
+
35
+ .stldocs-search-filter-count {
36
+ font-size: 0.75rem;
37
+ margin: auto 0;
38
+ background-color: var(--stldocs-color-selected);
39
+ border-radius: 0.5rem;
40
+ padding: 0 0.5rem;
17
41
  line-height: 1.5;
18
- justify-content: center;
19
- font-size: 0.9rem;
20
- cursor: pointer;
42
+ }
43
+ }
44
+ }
21
45
 
22
- &:hover,
23
- &[data-stldocs-toggle-selected='true'] {
24
- background-color: var(--stldocs-color-selected);
46
+ .stldocs-search-result {
47
+ display: flex;
48
+ flex-direction: column;
49
+ gap: 0.5rem;
50
+ cursor: pointer;
51
+ margin: 0.5rem 0;
52
+ padding: 0.5rem 0.8rem;
53
+
54
+ mark {
55
+ background-color: var(--stldocs-color-hairline);
56
+ border-bottom: 1px dotted var(--stldocs-color-text);
57
+ }
25
58
 
26
- .stldocs-search-filter-count {
27
- color: var(--stldocs-color-text-invert);
28
- background-color: var(--stldocs-color-text);
29
- }
30
- }
59
+ &[data-stldocs-search-result='resource'] {
60
+ .stldocs-search-result-resource-info {
61
+ display: flex;
62
+ gap: 0.5rem;
31
63
 
32
- .stldocs-icon {
33
- margin: auto 0;
64
+ .stldocs-search-result-resource-title {
65
+ font-weight: 600;
34
66
  }
35
67
 
36
- .stldocs-search-filter-count {
37
- font-size: 0.75rem;
38
- margin: auto 0;
39
- background-color: var(--stldocs-color-selected);
40
- border-radius: 0.5rem;
41
- padding: 0 0.5rem;
42
- line-height: 1.5;
68
+ .stldocs-search-result-resource-path {
69
+ font-family: var(--stldocs-font-mono);
70
+ color: var(--stldocs-color-text);
43
71
  }
44
72
  }
45
73
  }
46
74
 
47
- .stldocs-search-result {
48
- display: flex;
49
- flex-direction: column;
50
- gap: 0.5rem;
51
- cursor: pointer;
52
- margin: 0.5rem 0;
53
- padding: 0.5rem 0.8rem;
54
-
55
- mark {
56
- background-color: var(--stldocs-color-hairline);
57
- border-bottom: 1px dotted var(--stldocs-color-text);
75
+ &[data-stldocs-search-result='http_method'] {
76
+ h3.stldocs-method-title {
77
+ font-size: 1.2rem;
58
78
  }
59
79
 
60
- &[data-stldocs-search-result='resource'] {
61
- .stldocs-search-result-resource-info {
62
- display: flex;
63
- gap: 0.5rem;
80
+ .stldocs-method-header {
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: 0.5rem;
64
84
 
65
- .stldocs-search-result-resource-title {
66
- font-weight: 600;
67
- }
85
+ .stldocs-method-signature {
86
+ font-family: var(--stldocs-font-mono);
87
+ color: var(--stldocs-color-text);
88
+ white-space: pre-wrap;
89
+ word-break: break-word;
68
90
 
69
- .stldocs-search-result-resource-path {
70
- font-family: var(--stldocs-font-mono);
91
+ .stldocs-text-identifier {
71
92
  color: var(--stldocs-color-text);
72
93
  }
73
94
  }
74
- }
75
-
76
- &[data-stldocs-search-result='http_method'] {
77
- h3.stldocs-method-title {
78
- font-size: 1.2rem;
79
- }
80
95
 
81
- .stldocs-method-header {
82
- display: flex;
83
- flex-direction: column;
84
- gap: 0.5rem;
96
+ .stldocs-method-route {
97
+ font-size: 0.8rem;
85
98
 
86
- .stldocs-method-signature {
87
- font-family: var(--stldocs-font-mono);
88
- color: var(--stldocs-color-text);
89
- white-space: pre-wrap;
90
- word-break: break-word;
91
-
92
- .stldocs-text-identifier {
93
- color: var(--stldocs-color-text);
94
- }
99
+ .stldocs-method-route-httpmethod {
100
+ font-size: 0.7rem;
101
+ text-transform: uppercase;
102
+ font-weight: 600;
103
+ padding: 4px;
104
+ border-radius: 4px;
105
+ align-self: baseline;
95
106
  }
96
107
 
97
- .stldocs-method-route {
98
- font-size: 0.8rem;
99
-
100
- .stldocs-method-route-httpmethod {
101
- font-size: 0.7rem;
102
- text-transform: uppercase;
103
- font-weight: 600;
104
- padding: 4px;
105
- border-radius: 4px;
106
- align-self: baseline;
107
- }
108
-
109
- .stldocs-method-route-endpoint {
110
- font-family: var(--stldocs-font-mono);
111
- color: var(--stldocs-color-text-mid);
112
- }
108
+ .stldocs-method-route-endpoint {
109
+ font-family: var(--stldocs-font-mono);
110
+ color: var(--stldocs-color-text-mid);
113
111
  }
114
112
  }
115
-
116
- .stldocs-method-description {
117
- color: var(--stldocs-color-text);
118
- }
119
113
  }
120
114
 
121
- &[data-stldocs-search-result='property'] {
122
- .stldocs-property-info {
123
- display: flex;
124
- flex-direction: column;
125
- gap: 0.5rem;
126
- }
115
+ .stldocs-method-description {
116
+ color: var(--stldocs-color-text);
117
+ }
118
+ }
127
119
 
128
- .stldocs-property-header {
129
- display: flex;
130
- gap: 0.5rem;
120
+ &[data-stldocs-search-result='property'] {
121
+ .stldocs-property-info {
122
+ display: flex;
123
+ flex-direction: column;
124
+ gap: 0.5rem;
125
+ }
131
126
 
132
- .stldocs-property-name {
133
- font-family: var(--stldocs-font-mono);
134
- }
127
+ .stldocs-property-header {
128
+ display: flex;
129
+ gap: 0.5rem;
135
130
 
136
- .stldocs-property-typename {
137
- color: var(--stldocs-color-text-mid);
138
- }
131
+ .stldocs-property-name {
132
+ font-family: var(--stldocs-font-mono);
139
133
  }
140
134
 
141
- .stldocs-property-description {
142
- color: var(--stldocs-color-text);
135
+ .stldocs-property-typename {
136
+ color: var(--stldocs-color-text-mid);
143
137
  }
144
138
  }
145
139
 
146
- &[data-stldocs-search-result='model'] {
147
- .stldocs-property-info {
148
- display: flex;
149
- flex-direction: column;
150
- gap: 0.5rem;
151
-
152
- .stldocs-property-type {
153
- font-family: var(--stldocs-font-mono);
154
- color: var(--stldocs-color-text);
155
- }
156
- }
140
+ .stldocs-property-description {
141
+ color: var(--stldocs-color-text);
157
142
  }
143
+ }
158
144
 
159
- &[data-stldocs-search-result='guide'] {
160
- .stldocs-search-result-guide-title {
161
- font-size: 1.2rem;
162
- }
145
+ &[data-stldocs-search-result='model'] {
146
+ .stldocs-property-info {
147
+ display: flex;
148
+ flex-direction: column;
149
+ gap: 0.5rem;
163
150
 
164
- .stldocs-search-result-guide-excerpt {
151
+ .stldocs-property-type {
152
+ font-family: var(--stldocs-font-mono);
165
153
  color: var(--stldocs-color-text);
166
154
  }
167
-
168
- .stldocs-search-breadcrumb-item {
169
- text-transform: capitalize;
170
- }
171
155
  }
172
156
  }
173
157
 
174
- .stldocs-search-breadcrumb {
175
- display: flex;
176
- gap: 0.5rem;
177
- font-size: 0.8rem;
158
+ &[data-stldocs-search-result='guide'] {
159
+ .stldocs-search-result-guide-title {
160
+ font-size: 1.2rem;
161
+ }
178
162
 
179
- .stldocs-search-breadcrumb-item {
180
- color: var(--stldocs-color-text-mid);
163
+ .stldocs-search-result-guide-excerpt {
164
+ color: var(--stldocs-color-text);
181
165
  }
182
166
 
183
- .stldocs-icon {
184
- margin-top: auto;
185
- margin-bottom: auto;
167
+ .stldocs-search-breadcrumb-item {
168
+ text-transform: capitalize;
186
169
  }
187
170
  }
188
171
  }
189
172
 
190
- .stldocs-root .stldocs-search-modal {
191
- display: none;
192
- margin: auto;
193
- padding: 1rem;
194
- inset: 0;
195
- max-width: 1024px;
196
- max-height: 80vh;
197
- background-color: var(--stldocs-color-bg);
198
- color: var(--stldocs-color-text);
199
- border: 1px solid var(--stldocs-color-hairline);
200
- border-radius: 8px;
173
+ .stldocs-search-breadcrumb {
174
+ display: flex;
175
+ gap: 0.5rem;
176
+ font-size: 0.8rem;
201
177
 
202
- &:popover-open,
203
- &[data-stldocs-modal-open='true'] {
204
- display: block;
205
- position: fixed;
178
+ .stldocs-search-breadcrumb-item {
179
+ color: var(--stldocs-color-text-mid);
206
180
  }
207
181
 
208
- .stldocs-search-form {
209
- height: 100%;
210
-
211
- .stldocs-listview {
212
- margin: 0.8rem 0;
213
- height: 100%;
214
- }
182
+ .stldocs-icon {
183
+ margin-top: auto;
184
+ margin-bottom: auto;
215
185
  }
186
+ }
187
+ }
216
188
 
217
- &::backdrop {
218
- background-color: var(--stldocs-color-backdrop-overlay);
219
- -webkit-backdrop-filter: blur(0.25rem);
220
- backdrop-filter: blur(0.25rem);
189
+ .stldocs-root .stldocs-search-modal {
190
+ display: none;
191
+ margin: auto;
192
+ padding: 1rem;
193
+ inset: 0;
194
+ max-width: 1024px;
195
+ max-height: 80vh;
196
+ background-color: var(--stldocs-color-bg);
197
+ color: var(--stldocs-color-text);
198
+ border: 1px solid var(--stldocs-color-hairline);
199
+ border-radius: 8px;
200
+
201
+ &:popover-open,
202
+ &[data-stldocs-modal-open='true'] {
203
+ display: block;
204
+ position: fixed;
205
+ }
206
+
207
+ .stldocs-search-form {
208
+ height: 100%;
209
+
210
+ .stldocs-listview {
211
+ margin: 0.8rem 0;
212
+ height: 100%;
221
213
  }
222
214
  }
223
215
 
224
- .stldocs-root #stldocs-chat {
225
- display: flex;
226
- flex-direction: column;
227
- display: none;
216
+ &::backdrop {
217
+ background-color: var(--stldocs-color-backdrop-overlay);
218
+ -webkit-backdrop-filter: blur(0.25rem);
219
+ backdrop-filter: blur(0.25rem);
220
+ }
221
+ }
228
222
 
229
- .stldocs-chat-header {
230
- display: flex;
231
- gap: 0.5rem;
232
- padding-bottom: 10px;
223
+ .stldocs-root #stldocs-chat {
224
+ display: flex;
225
+ flex-direction: column;
226
+ display: none;
233
227
 
234
- h5 {
235
- flex-grow: 1;
236
- }
228
+ .stldocs-chat-header {
229
+ display: flex;
230
+ gap: 0.5rem;
231
+ padding-bottom: 10px;
237
232
 
238
- .lucide-message-square-plus {
239
- cursor: pointer;
240
- }
233
+ h5 {
234
+ flex-grow: 1;
241
235
  }
242
236
 
243
- &[data-stldocs-modal-open=true] {
244
- display: flex;
237
+ .lucide-message-square-plus {
238
+ cursor: pointer;
245
239
  }
240
+ }
246
241
 
247
- .stldocs-chat-messages {
248
- padding: 0 2rem;
249
- overflow-y: auto;
250
- flex-grow: 1;
242
+ &[data-stldocs-modal-open='true'] {
243
+ display: flex;
244
+ }
251
245
 
252
- .stldocs-loading-spinner {
253
- svg {
254
- animation: stldocs-spinner-rotate 1s linear infinite;
255
- }
256
- }
246
+ .stldocs-chat-messages {
247
+ padding: 0 2rem;
248
+ overflow-y: auto;
249
+ flex-grow: 1;
257
250
 
258
- .stldocs-chat-message {
259
- margin-bottom: 50px;
260
- display: flex;
261
- flex-direction: column;
262
- gap: 1rem;
251
+ .stldocs-loading-spinner {
252
+ svg {
253
+ animation: stldocs-spinner-rotate 1s linear infinite;
254
+ }
255
+ }
263
256
 
264
- p, li {
265
- line-height: 150%;
257
+ .stldocs-chat-message {
258
+ margin-bottom: 50px;
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 1rem;
266
262
 
267
- code {
268
- white-space: pre;
269
- word-break: normal;
270
- overflow-wrap: normal;
271
- }
272
- }
263
+ p,
264
+ li {
265
+ line-height: 150%;
273
266
 
274
- pre {
275
- background-color: rgb(30, 30, 30);
276
- padding: 10px;
277
- border-radius: 8px;
278
- font-family: var(--stldocs-font-mono);
279
- font-size: var(--stldocs-font-size-code);
280
- line-height: 1.3rem;
267
+ code {
281
268
  white-space: pre;
282
- margin-bottom: 1rem;
283
- overflow-x: auto;
269
+ word-break: normal;
270
+ overflow-wrap: normal;
284
271
  }
272
+ }
285
273
 
286
- table {
287
- border-spacing: 10px;
274
+ pre {
275
+ background-color: rgb(30, 30, 30);
276
+ padding: 10px;
277
+ border-radius: 8px;
278
+ font-family: var(--stldocs-font-mono);
279
+ font-size: var(--stldocs-font-size-code);
280
+ line-height: 1.3rem;
281
+ white-space: pre;
282
+ margin-bottom: 1rem;
283
+ overflow-x: auto;
284
+ }
288
285
 
289
- thead tr {
290
- font-weight: bold;
291
- }
286
+ table {
287
+ border-spacing: 10px;
288
+
289
+ thead tr {
290
+ font-weight: bold;
292
291
  }
293
292
  }
293
+ }
294
294
 
295
- .stldocs-chat-message[data-stldocs-chat-message='user'] {
296
- background-color: var(--stldocs-color-gray-6);
297
- border-radius: 6px;
298
- margin-left: auto;
299
- padding: 12px;
300
- width: 60%;
301
- }
295
+ .stldocs-chat-message[data-stldocs-chat-message='user'] {
296
+ background-color: var(--stldocs-color-gray-6);
297
+ border-radius: 6px;
298
+ margin-left: auto;
299
+ padding: 12px;
300
+ width: 60%;
302
301
  }
302
+ }
303
303
 
304
- .stldocs-chat-input {
305
- border: 1px solid var(--stldocs-color-hairline);
306
- background-color: var(--stldocs-color-snippet-box-bg);
307
- border-radius: 8px;
308
- padding: 10px;
309
- display: flex;
310
- gap: 1rem;
311
- min-height: 100px;
304
+ .stldocs-chat-input {
305
+ border: 1px solid var(--stldocs-color-hairline);
306
+ background-color: var(--stldocs-color-snippet-box-bg);
307
+ border-radius: 8px;
308
+ padding: 10px;
309
+ display: flex;
310
+ gap: 1rem;
311
+ min-height: 100px;
312
312
 
313
- textarea {
314
- flex-grow: 1;
315
- }
313
+ textarea {
314
+ flex-grow: 1;
315
+ }
316
316
 
317
- .stldocs-chat-input-buttons {
318
- display: flex;
319
- flex-direction: column;
320
- gap: 0.5rem;
321
- }
317
+ .stldocs-chat-input-buttons {
318
+ display: flex;
319
+ flex-direction: column;
320
+ gap: 0.5rem;
321
+ }
322
322
 
323
- button {
324
- padding: 0.3rem;
325
- align-self: flex-start;
326
- border-radius: 8px;
327
- border: 1px solid var(--stldocs-color-hairline);
328
- cursor: pointer;
323
+ button {
324
+ padding: 0.3rem;
325
+ align-self: flex-start;
326
+ border-radius: 8px;
327
+ border: 1px solid var(--stldocs-color-hairline);
328
+ cursor: pointer;
329
329
 
330
- &:hover {
331
- background-color: var(--stldocs-color-gray-6);
332
- }
330
+ &:hover {
331
+ background-color: var(--stldocs-color-gray-6);
333
332
  }
334
333
  }
335
334
  }
@@ -339,4 +338,4 @@
339
338
  100% {
340
339
  transform: rotate(360deg);
341
340
  }
342
- }
341
+ }