@stainless-api/docs-ui 0.1.0-beta.24 → 0.1.0-beta.25

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