@stainless-api/docs-ui 0.1.0-beta.22 → 0.1.0-beta.23

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,590 +1,573 @@
1
- /* Design System Defaults */
2
- .stldocs-root {
3
- font-family: var(--stldocs-font);
4
- background-color: var(--stldocs-color-bg);
5
- color: var(--stldocs-color-text);
6
- letter-spacing: -0.01em;
7
-
8
- h1 {
9
- font-size: var(--stldocs-font-size-h1);
10
- letter-spacing: -0.03em;
11
- }
12
-
13
- h2 {
14
- font-size: var(--stldocs-font-size-h2);
15
- letter-spacing: -0.03em;
16
- }
17
-
18
- h3 {
19
- font-size: var(--stldocs-font-size-h3);
20
- letter-spacing: -0.02em;
21
- }
22
-
23
- h4 {
24
- font-size: var(--stldocs-font-size-h4);
25
- letter-spacing: -0.02em;
26
- }
27
-
28
- h5 {
29
- font-size: var(--stldocs-font-size-h5);
30
- letter-spacing: -0.02em;
31
- }
32
- }
33
-
34
- /* Color mapping for types */
35
- .stldocs-root {
36
- .stldocs-text-keyword {
37
- color: var(--stldocs-color-text-muted);
38
- }
1
+ @layer docs-ui {
2
+ /* Design System Defaults */
3
+ .stldocs-root {
4
+ font-family: var(--stldocs-font);
5
+ background-color: var(--stldocs-color-bg);
39
6
 
40
- .stldocs-property-type,
41
- .stldocs-property-declaration,
42
- .stldocs-type:not(.stldocs-property-typename .stldocs-type) {
43
- font-family: var(--stldocs-font-mono);
44
-
45
- .stldocs-type-keyword {
46
- color: var(--stldocs-syntax-color-orange);
7
+ h1 {
8
+ font-size: var(--stldocs-font-size-h1);
47
9
  }
48
10
 
49
- .stldocs-type-string {
50
- color: var(--stldocs-syntax-color-green);
11
+ h2 {
12
+ font-size: var(--stldocs-font-size-h2);
51
13
  }
52
14
 
53
- .stldocs-type-brace,
54
- .stldocs-type-bracket,
55
- .stldocs-type-plain,
56
- .stldocs-text-operator,
57
- .stldocs-text-punctuation,
58
- .stldocs-truncation,
59
- .stldocs-type-array {
60
- color: var(--stldocs-color-text-tertiary);
15
+ h3 {
16
+ font-size: var(--stldocs-font-size-h3);
61
17
  }
62
18
 
63
- .stldocs-type-plain {
64
- font-family: var(--stldocs-font);
19
+ h4 {
20
+ font-size: var(--stldocs-font-size-h4);
65
21
  }
66
22
 
67
- .stldocs-type-reference {
68
- color: var(--stldocs-syntax-color-blue);
69
- font-weight: 600;
70
- a:hover {
71
- text-decoration: underline;
72
- }
73
- }
74
-
75
- .stldocs-literal-string {
76
- color: var(--stldocs-syntax-color-green);
23
+ h5 {
24
+ font-size: var(--stldocs-font-size-h5);
77
25
  }
26
+ }
78
27
 
79
- .stldocs-literal-numeric {
80
- color: var(--stldocs-syntax-color-orange);
28
+ /* Color mapping for types */
29
+ .stldocs-root {
30
+ .stldocs-text-keyword {
31
+ color: var(--stldocs-color-text-muted);
81
32
  }
82
33
 
83
- .stldocs-text-identifier {
34
+ .stldocs-property-type,
35
+ .stldocs-property-declaration,
36
+ .stldocs-type:not(.stldocs-property-typename .stldocs-type) {
84
37
  font-family: var(--stldocs-font-mono);
85
- color: var(--stldocs-color-text);
86
- }
87
38
 
88
- .stldocs-type-propertyname .stldocs-text-identifier {
89
- font-family: var(--stldocs-font);
90
- font-weight: 600;
91
- }
92
- }
39
+ .stldocs-type-keyword {
40
+ color: var(--stldocs-syntax-color-orange);
41
+ }
93
42
 
94
- [data-stldocs-language='http'] {
95
- .stldocs-property-type,
96
- .stldocs-property-declaration {
43
+ .stldocs-type-string {
44
+ color: var(--stldocs-syntax-color-green);
45
+ }
46
+
47
+ .stldocs-type-brace,
48
+ .stldocs-type-bracket,
49
+ .stldocs-type-plain,
50
+ .stldocs-text-operator,
51
+ .stldocs-text-punctuation,
97
52
  .stldocs-truncation,
98
- .stldocs-type-array,
99
- .stldocs-text-punctuation {
53
+ .stldocs-type-array {
54
+ color: var(--stldocs-color-text-tertiary);
55
+ }
56
+
57
+ .stldocs-type-plain {
100
58
  font-family: var(--stldocs-font);
101
59
  }
102
- }
103
- }
104
- }
105
60
 
106
- /* HTTP Method Color Settings */
107
- .stldocs-root .stldocs-method-route,
108
- .stldocs-root .stldocs-sidebar-method {
109
- [data-method='get'] {
110
- background: var(--stldocs-color-http-get-bg);
111
- color: var(--stldocs-color-http-get);
112
- border-color: var(--stldocs-color-http-get);
113
- }
61
+ .stldocs-type-reference {
62
+ color: var(--stldocs-syntax-color-blue);
63
+ font-weight: 600;
64
+ }
114
65
 
115
- [data-method='post'] {
116
- background: var(--stldocs-color-http-post-bg);
117
- color: var(--stldocs-color-http-post);
118
- border-color: var(--stldocs-color-http-post);
119
- }
66
+ .stldocs-literal-string {
67
+ color: var(--stldocs-syntax-color-green);
68
+ }
120
69
 
121
- [data-method='patch'],
122
- [data-method='put'] {
123
- background: var(--stldocs-color-http-put-bg);
124
- color: var(--stldocs-color-http-put);
125
- border-color: var(--stldocs-color-http-put);
126
- }
70
+ .stldocs-literal-numeric {
71
+ color: var(--stldocs-syntax-color-orange);
72
+ }
127
73
 
128
- [data-method='delete'] {
129
- background: var(--stldocs-color-http-delete-bg);
130
- color: var(--stldocs-color-http-delete);
131
- border-color: var(--stldocs-color-http-delete);
132
- }
133
- }
74
+ .stldocs-text-identifier {
75
+ font-family: var(--stldocs-font-mono);
76
+ color: var(--stldocs-color-text);
77
+ }
134
78
 
135
- /* Generic expand/collapse button */
136
- .stldocs-root .stldocs-expander {
137
- &[data-stldocs-expander-muted='true'] {
138
- .stldocs-icon {
139
- visibility: hidden;
79
+ .stldocs-type-propertyname .stldocs-text-identifier {
80
+ font-family: var(--stldocs-font);
81
+ font-weight: 600;
82
+ }
140
83
  }
141
84
 
142
- &:hover {
143
- .stldocs-icon {
144
- visibility: visible;
85
+ [data-stldocs-language='http'] {
86
+ .stldocs-property-type,
87
+ .stldocs-property-declaration {
88
+ .stldocs-truncation,
89
+ .stldocs-type-array,
90
+ .stldocs-text-punctuation {
91
+ font-family: var(--stldocs-font);
92
+ }
145
93
  }
146
94
  }
147
95
  }
148
96
 
149
- .stldocs-expander-summary {
150
- cursor: pointer;
151
- display: flex;
152
- /* padding: 0.4rem 0; */
97
+ /* HTTP Method Color Settings */
98
+ .stldocs-root .stldocs-method-route,
99
+ .stldocs-root .stldocs-sidebar-method {
100
+ [data-method='get'] {
101
+ background: var(--stldocs-color-http-get-bg);
102
+ color: var(--stldocs-color-http-get);
103
+ border-color: var(--stldocs-color-http-get);
104
+ }
153
105
 
154
- & > .stldocs-expander-summary-icon {
155
- margin-right: 8px;
156
- transform: translateX(-0.5px) translateY(-0.5px);
106
+ [data-method='post'] {
107
+ background: var(--stldocs-color-http-post-bg);
108
+ color: var(--stldocs-color-http-post);
109
+ border-color: var(--stldocs-color-http-post);
110
+ }
157
111
 
158
- & > .stldocs-icon {
159
- vertical-align: middle;
160
- color: var(--stldocs-color-text-tertiary);
161
- background-color: var(--stldocs-color-bg);
162
- }
112
+ [data-method='patch'],
113
+ [data-method='put'] {
114
+ background: var(--stldocs-color-http-put-bg);
115
+ color: var(--stldocs-color-http-put);
116
+ border-color: var(--stldocs-color-http-put);
117
+ }
163
118
 
164
- & > :last-child {
165
- display: none;
166
- }
119
+ [data-method='delete'] {
120
+ background: var(--stldocs-color-http-delete-bg);
121
+ color: var(--stldocs-color-http-delete);
122
+ border-color: var(--stldocs-color-http-delete);
167
123
  }
168
124
  }
169
125
 
170
- &[open],
171
- &[data-open='true'] {
172
- & > .stldocs-expander-summary {
173
- .stldocs-type-preview-content {
174
- display: none;
126
+ /* Generic expand/collapse button */
127
+ .stldocs-root .stldocs-expander {
128
+ &[data-stldocs-expander-muted='true'] {
129
+ .stldocs-icon {
130
+ visibility: hidden;
131
+ }
132
+
133
+ &:hover {
134
+ .stldocs-icon {
135
+ visibility: visible;
136
+ }
175
137
  }
138
+ }
139
+
140
+ .stldocs-expander-summary {
141
+ cursor: pointer;
142
+ display: flex;
143
+ /* padding: 0.4rem 0; */
176
144
 
177
145
  & > .stldocs-expander-summary-icon {
178
- & > :first-child {
179
- display: none;
146
+ margin-right: 8px;
147
+ transform: translateX(-0.5px) translateY(-0.5px);
148
+
149
+ & > .stldocs-icon {
150
+ vertical-align: middle;
151
+ color: var(--stldocs-color-text-tertiary);
152
+ background-color: var(--stldocs-color-bg);
180
153
  }
181
154
 
182
155
  & > :last-child {
183
- display: inline;
156
+ display: none;
184
157
  }
185
158
  }
186
159
  }
187
160
 
188
- & > .stldocs-expander-content {
189
- margin-left: var(--stldocs-expander-margin-shift);
190
- line-height: 150%;
161
+ &[open],
162
+ &[data-open='true'] {
163
+ & > .stldocs-expander-summary {
164
+ .stldocs-type-preview-content {
165
+ display: none;
166
+ }
191
167
 
192
- & > .stldocs-property-children {
193
- border-left: 1px solid var(--stldocs-color-hairline-light);
194
- padding-left: 16px;
168
+ & > .stldocs-expander-summary-icon {
169
+ & > :first-child {
170
+ display: none;
171
+ }
195
172
 
196
- .stldocs-expander {
197
- margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
198
- padding-right: var(--stldocs-expander-right-margin);
173
+ & > :last-child {
174
+ display: inline;
175
+ }
199
176
  }
200
177
  }
201
- }
202
- }
203
- }
204
178
 
205
- /* Markdown content */
206
- .stldocs-root .stldocs-content {
207
- a {
208
- color: var(--stldocs-color-text-accent);
209
- }
210
-
211
- code {
212
- font-family: var(--stldocs-font-mono);
213
- border-radius: 4px;
214
- padding: 0 4px;
215
- background-color: var(--stldocs-color-bg-inline-code);
216
- word-break: break-all;
217
- font-size: 0.84rem;
218
- }
179
+ & > .stldocs-expander-content {
180
+ margin-left: var(--stldocs-expander-margin-shift);
181
+ line-height: 150%;
219
182
 
220
- strong {
221
- font-weight: bold;
222
- }
183
+ & > .stldocs-property-children {
184
+ border-left: 1px solid var(--stldocs-color-hairline-light);
185
+ padding-left: 16px;
223
186
 
224
- em {
225
- font-style: italic;
187
+ .stldocs-expander {
188
+ margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
189
+ padding-right: var(--stldocs-expander-right-margin);
190
+ }
191
+ }
192
+ }
193
+ }
226
194
  }
227
195
 
228
- p {
229
- display: block;
230
- margin: 0 0 1em;
196
+ /* Markdown content */
197
+ .stldocs-root .stldocs-content {
198
+ a {
199
+ color: var(--stldocs-color-text-accent);
200
+ }
231
201
 
232
- &:last-child {
233
- margin: 0;
202
+ code {
203
+ font-family: var(--stldocs-font-mono);
204
+ border-radius: 4px;
205
+ padding: 0 4px;
206
+ background-color: var(--stldocs-color-bg-inline-code);
207
+ word-break: break-all;
208
+ font-size: 0.84rem;
234
209
  }
235
- }
236
210
 
237
- li {
238
- margin-bottom: 0.25rem;
239
- display: list-item;
240
- }
211
+ strong {
212
+ font-weight: bold;
213
+ }
241
214
 
242
- ol,
243
- ul {
244
- display: block;
245
- list-style-type: initial;
246
- margin-left: 2rem;
247
- margin-bottom: 0.8rem;
248
- }
215
+ em {
216
+ font-style: italic;
217
+ }
249
218
 
250
- ol {
251
- list-style-type: decimal;
252
- }
253
- }
219
+ p {
220
+ display: block;
221
+ margin: 0 0 1em;
254
222
 
255
- .stldocs-root .stldocs-input {
256
- border: 1px solid var(--stldocs-color-hairline);
257
- border-radius: 0.3rem;
258
- padding: 0.5rem;
259
- display: flex;
260
- gap: 0.5rem;
223
+ &:last-child {
224
+ margin: 0;
225
+ }
226
+ }
261
227
 
262
- input {
263
- flex-grow: 1;
264
- border: none;
265
- background-color: transparent;
228
+ li {
229
+ margin-bottom: 0.25rem;
230
+ display: list-item;
231
+ }
266
232
 
267
- &:focus {
268
- outline: none;
233
+ ol,
234
+ ul {
235
+ display: block;
236
+ list-style-type: initial;
237
+ margin-left: 2rem;
238
+ margin-bottom: 0.8rem;
269
239
  }
270
- }
271
240
 
272
- .stldocs-icon {
273
- margin-top: auto;
274
- margin-bottom: auto;
241
+ ol {
242
+ list-style-type: decimal;
243
+ }
275
244
  }
276
- }
277
-
278
- .stldocs-root .stldocs-listview {
279
- overflow-y: scroll;
280
245
 
281
- .stldocs-listview-item:not(:last-child) {
282
- border-bottom: 1px solid var(--stldocs-color-hairline);
283
- }
246
+ .stldocs-root .stldocs-input {
247
+ border: 1px solid var(--stldocs-color-hairline);
248
+ border-radius: 0.3rem;
249
+ padding: 0.5rem;
250
+ display: flex;
251
+ gap: 0.5rem;
284
252
 
285
- [data-stldocs-listview-selected='true'] > :first-child {
286
- background-color: var(--stldocs-color-selected);
287
- border-radius: 0.5rem;
288
- }
289
- }
253
+ input {
254
+ flex-grow: 1;
255
+ }
290
256
 
291
- .stldocs-root {
292
- .stldocs-tooltip-host {
293
- display: inline-block;
257
+ .stldocs-icon {
258
+ margin-top: auto;
259
+ margin-bottom: auto;
260
+ }
294
261
  }
295
262
 
296
- .stldocs-tooltip-content {
297
- border: 1px solid var(--stldocs-color-hairline);
298
- background: var(--stldocs-color-bg);
299
- border-radius: 8px;
300
- padding: 0.2rem 0.4rem;
263
+ .stldocs-root .stldocs-listview {
264
+ overflow-y: scroll;
301
265
 
302
- * {
303
- font-size: 0.8rem !important;
266
+ .stldocs-listview-item:not(:last-child) {
267
+ border-bottom: 1px solid var(--stldocs-color-hairline);
304
268
  }
305
269
 
306
- position: absolute;
270
+ [data-stldocs-listview-selected='true'] > :first-child {
271
+ background-color: var(--stldocs-color-selected);
272
+ border-radius: 0.5rem;
273
+ }
274
+ }
307
275
 
308
- transition:
309
- opacity 0.3s ease-in-out,
310
- visibility 0.3s step-end 0.3s;
311
- visibility: hidden;
312
- opacity: 0;
276
+ .stldocs-root {
277
+ .stldocs-tooltip-host {
278
+ display: inline-block;
279
+ }
313
280
 
314
- max-width: 400px;
315
- max-height: 300px;
316
- overflow: auto;
281
+ .stldocs-tooltip-content {
282
+ border: 1px solid var(--stldocs-color-hairline);
283
+ background: var(--stldocs-color-bg);
284
+ border-radius: 8px;
285
+ padding: 0.2rem 0.4rem;
317
286
 
318
- .stldocs-property-description {
319
- display: none;
320
- }
321
- }
287
+ * {
288
+ font-size: 0.8rem !important;
289
+ }
322
290
 
323
- .stldocs-tooltip:hover .stldocs-tooltip-content {
324
- transition-delay: 0s, 0s;
325
- visibility: visible;
326
- opacity: 1;
327
- }
328
- }
291
+ position: absolute;
329
292
 
330
- .stldocs-root {
331
- .stldocs-breadcrumbs {
332
- display: flex;
333
- align-items: center;
334
- gap: 0.5rem;
293
+ transition:
294
+ opacity 0.3s ease-in-out,
295
+ visibility 0.3s step-end 0.3s;
296
+ visibility: hidden;
297
+ opacity: 0;
335
298
 
336
- svg {
337
- width: 1rem;
338
- min-width: 1rem;
339
- stroke: var(--stldocs-color-text-secondary);
340
- opacity: 0.25;
341
- margin: 0;
342
- }
299
+ max-width: 400px;
300
+ max-height: 300px;
301
+ overflow: auto;
343
302
 
344
- .stldocs-breadcrumbs-non-link,
345
- .stldocs-breadcrumbs-link {
346
- color: var(--stldocs-color-text-secondary);
347
- font-size: var(--stldocs-font-size-small);
348
- line-height: 150%;
349
- text-decoration: none;
303
+ .stldocs-property-description {
304
+ display: none;
305
+ }
350
306
  }
351
307
 
352
- .stldocs-breadcrumbs-link:hover {
353
- text-decoration: underline;
354
- color: var(--stldocs-color-text);
308
+ .stldocs-tooltip:hover .stldocs-tooltip-content {
309
+ transition-delay: 0s, 0s;
310
+ visibility: visible;
311
+ opacity: 1;
355
312
  }
313
+ }
356
314
 
357
- .stldocs-breadcrumbs-item {
315
+ .stldocs-root {
316
+ .stldocs-breadcrumbs {
317
+ padding: 1rem var(--stldocs-content-padding) 0;
358
318
  display: flex;
359
319
  align-items: center;
360
320
  gap: 0.5rem;
361
- margin: 0;
362
- height: var(--stldocs-button-size);
363
- }
364
- }
365
321
 
366
- /* Dropdown component styles */
367
- .stldocs-dropdown {
368
- position: relative;
369
- font-size: 0.85rem;
322
+ svg {
323
+ width: 1rem;
324
+ min-width: 1rem;
325
+ stroke: var(--stldocs-color-text-secondary);
326
+ opacity: 0.25;
327
+ margin: 0;
328
+ }
370
329
 
371
- span {
372
- display: flex;
373
- align-items: center;
374
- justify-content: center;
375
- }
376
- }
330
+ .stldocs-breadcrumbs-non-link,
331
+ .stldocs-breadcrumbs-link {
332
+ color: var(--stldocs-color-text-secondary);
333
+ font-size: var(--stldocs-font-size-small);
334
+ line-height: 150%;
335
+ text-decoration: none;
336
+ }
377
337
 
378
- .stldocs-dropdown-trigger {
379
- display: flex;
380
- align-items: center;
381
- justify-content: space-between;
382
- gap: 6px;
383
- padding: 0.5rem;
338
+ .stldocs-breadcrumbs-link:hover {
339
+ text-decoration: underline;
340
+ color: var(--stldocs-color-text);
341
+ }
384
342
 
385
- .stldocs-icon {
386
- margin: unset;
387
- width: 16px;
343
+ .stldocs-breadcrumbs-item {
344
+ display: flex;
345
+ align-items: center;
346
+ gap: 0.5rem;
347
+ margin: 0;
348
+ height: var(--stldocs-button-size);
349
+ }
388
350
  }
389
351
 
390
- &:hover {
391
- border-color: var(--stldocs-color-hairline-shade);
392
- }
393
- }
352
+ /* Dropdown component styles */
353
+ .stldocs-dropdown {
354
+ position: relative;
355
+ font-size: 0.85rem;
394
356
 
395
- .stldocs-dropdown-trigger-content {
396
- display: flex;
397
- align-items: center;
398
- gap: 8px;
399
- }
357
+ span {
358
+ display: flex;
359
+ align-items: center;
360
+ justify-content: center;
361
+ }
362
+ }
400
363
 
401
- .stldocs-dropdown-chevron {
402
- margin-right: calc(-1 * var(--sl-button-icon-offset));
403
- padding: 0;
404
- opacity: 0.25;
405
- }
364
+ .stldocs-dropdown-trigger {
365
+ display: flex;
366
+ align-items: center;
367
+ justify-content: space-between;
368
+ gap: 6px;
369
+ padding: 0.5rem;
406
370
 
407
- .stldocs-dropdown-chevron svg path {
408
- stroke: var(--stldocs-color-text-secondary);
409
- }
371
+ .stldocs-icon {
372
+ margin: unset;
373
+ width: 16px;
374
+ }
410
375
 
411
- .stldocs-dropdown-menu {
412
- --stldocs-dropdown-menu-border-radius: 8px;
413
- --stldocs-dropdown-menu-background-color: var(--stldocs-color-bg);
414
- --stldocs-dropdown-menu-border-color: var(--stldocs-color-hairline);
415
-
416
- position: absolute;
417
- right: 0;
418
- bottom: 100%;
419
- z-index: var(--stldocs-z-index-theme-select);
420
- background: var(--stldocs-dropdown-menu-background-color);
421
- border: 1px solid var(--stldocs-dropdown-menu-border-color);
422
- border-radius: var(--stldocs-dropdown-menu-border-radius);
423
- margin-bottom: 4px;
424
- padding: 0;
425
- width: 100%;
426
- min-width: 100px;
427
- overflow: hidden;
428
- display: none;
429
- box-shadow: 0px 4px 4px -2px #00000014;
430
-
431
- &.below {
432
- margin-bottom: unset;
433
- bottom: unset;
434
- top: 100%;
435
- margin-top: 4px;
376
+ &:hover {
377
+ border-color: var(--stldocs-color-hairline-shade);
378
+ }
436
379
  }
437
- }
438
380
 
439
- .stldocs-dropdown-menu.open {
440
- display: block;
441
- }
442
-
443
- .stldocs-dropdown-item {
444
- display: flex;
445
- align-items: center;
446
- justify-content: space-between;
447
- gap: 8px;
448
- padding: 6px 10px;
449
- cursor: pointer;
450
- height: 32px;
451
-
452
- div {
381
+ .stldocs-dropdown-trigger-content {
453
382
  display: flex;
454
383
  align-items: center;
455
384
  gap: 8px;
456
385
  }
457
386
 
458
- .lucide-check {
459
- height: var(--stlodcs-font-size-body);
460
- width: var(--stlodcs-font-size-body);
461
- display: none;
387
+ .stldocs-dropdown-chevron {
388
+ margin-right: calc(-1 * var(--sl-button-icon-offset));
389
+ padding: 0;
390
+ opacity: 0.25;
462
391
  }
463
392
 
464
- .stldocs-icon {
465
- width: 16px;
393
+ .stldocs-dropdown-chevron svg path {
394
+ stroke: var(--stldocs-color-text-secondary);
466
395
  }
467
396
 
468
- &.stldocs-dropdown-item-link {
397
+ .stldocs-dropdown-menu {
398
+ position: absolute;
399
+ right: 0;
400
+ bottom: 100%;
401
+ z-index: var(--stldocs-z-index-theme-select);
402
+ background: var(--stldocs-color-bg);
403
+ border: 1px solid var(--stldocs-color-hairline);
404
+ border-radius: var(--stldocs-button-border-radius);
405
+ margin-bottom: 4px;
469
406
  padding: 0;
470
- height: unset;
471
- gap: 0;
407
+ width: 100%;
408
+ min-width: 100px;
409
+ overflow: hidden;
410
+ display: none;
411
+ box-shadow: 0px 4px 4px -2px #00000014;
412
+
413
+ &.below {
414
+ margin-bottom: unset;
415
+ bottom: unset;
416
+ top: 100%;
417
+ margin-top: 4px;
418
+ }
419
+ }
420
+
421
+ .stldocs-dropdown-menu.open {
422
+ display: block;
423
+ }
424
+
425
+ .stldocs-dropdown-item {
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: space-between;
429
+ gap: 8px;
430
+ padding: 6px 10px;
431
+ cursor: pointer;
432
+ height: 32px;
472
433
 
473
- a {
434
+ div {
474
435
  display: flex;
475
436
  align-items: center;
476
- justify-content: space-between;
477
437
  gap: 8px;
478
- padding: 6px 10px;
479
- cursor: pointer;
480
- height: 32px;
481
- width: 100%;
482
- text-decoration: none;
483
- color: inherit;
438
+ }
439
+
440
+ .lucide-check {
441
+ height: var(--stlodcs-font-size-body);
442
+ width: var(--stlodcs-font-size-body);
443
+ display: none;
444
+ }
445
+
446
+ .stldocs-icon {
447
+ width: 16px;
448
+ }
449
+
450
+ &.stldocs-dropdown-item-link {
451
+ padding: 0;
452
+ height: unset;
453
+ gap: 0;
454
+
455
+ a {
456
+ display: flex;
457
+ align-items: center;
458
+ justify-content: space-between;
459
+ gap: 8px;
460
+ padding: 6px 10px;
461
+ cursor: pointer;
462
+ height: 32px;
463
+ width: 100%;
464
+ text-decoration: none;
465
+ color: inherit;
466
+ }
484
467
  }
485
468
  }
486
- }
487
469
 
488
- .stldocs-dropdown-item:hover {
489
- background-color: var(--stldocs-color-bg-inline-code);
490
- }
470
+ .stldocs-dropdown-item:hover {
471
+ background-color: var(--stldocs-color-bg-inline-code);
472
+ }
491
473
 
492
- .stldocs-dropdown-item.selected {
493
- .lucide-check {
494
- display: inline;
474
+ .stldocs-dropdown-item.selected {
475
+ .lucide-check {
476
+ display: inline;
477
+ }
495
478
  }
496
- }
497
479
 
498
- @media (min-width: 50rem) {
499
- .stldocs-dropdown-menu {
500
- margin-bottom: unset;
501
- bottom: unset;
502
- top: 100%;
503
- margin-top: 4px;
480
+ @media (min-width: 50rem) {
481
+ .stldocs-dropdown-menu {
482
+ margin-bottom: unset;
483
+ bottom: unset;
484
+ top: 100%;
485
+ margin-top: 4px;
486
+ }
504
487
  }
505
488
  }
506
- }
507
489
 
508
- /* Intentionally not using the stldocs-root selector here, as buttons are sometimes outside the stldocs-root. */
509
- .stldocs-button {
510
- border-radius: var(--stldocs-button-border-radius);
511
- display: flex;
512
- padding: var(--stldocs-button-padding-y) var(--stldocs-button-padding-x);
513
- justify-content: center;
514
- align-items: center;
515
- height: var(--stldocs-button-size);
516
- cursor: pointer;
517
- text-decoration: none;
518
- text-wrap: nowrap;
519
- font-weight: 500;
520
- line-height: 150%;
521
- font-size: var(--sl-text-sm);
522
-
523
- span {
524
- padding-left: var(--sl-button-icon-offset);
525
- padding-right: var(--sl-button-icon-offset);
490
+ /* Intentionally not using the stldocs-root selector here, as buttons are sometimes outside the stldocs-root. */
491
+ .stldocs-button {
492
+ border-radius: var(--stldocs-button-border-radius);
493
+ display: flex;
494
+ padding: var(--stldocs-button-padding-y) var(--stldocs-button-padding-x);
495
+ justify-content: center;
496
+ align-items: center;
497
+ height: var(--stldocs-button-size);
498
+ cursor: pointer;
499
+ text-decoration: none;
500
+ text-wrap: nowrap;
501
+ font-weight: 500;
502
+ line-height: 150%;
526
503
  font-size: var(--sl-text-sm);
504
+
505
+ span {
506
+ padding-left: var(--sl-button-icon-offset);
507
+ padding-right: var(--sl-button-icon-offset);
508
+ font-size: var(--sl-text-sm);
509
+ }
510
+
511
+ &.stldocs-button-icon {
512
+ > svg {
513
+ margin: 0;
514
+ }
515
+ }
527
516
  }
528
517
 
529
- &.stldocs-button-icon {
518
+ .stldocs-button-icon {
530
519
  > svg {
531
520
  margin: 0;
532
521
  }
533
522
  }
534
- }
535
523
 
536
- .stldocs-button-icon {
537
- > svg {
538
- margin: 0;
524
+ .stldocs-button-primary {
525
+ background-color: var(--stldocs-color-text);
526
+ color: var(--stldocs-color-text-invert);
539
527
  }
540
- }
541
-
542
- .stldocs-button-primary {
543
- background-color: var(--stldocs-color-text);
544
- color: var(--stldocs-color-text-invert);
545
- }
546
528
 
547
- .stldocs-button-secondary {
548
- background-color: var(--stldocs-color-bg-ui);
549
- border: 1px solid var(--stldocs-color-hairline);
550
- border-radius: var(--stldocs-button-border-radius);
551
- font-weight: 400;
529
+ .stldocs-button-secondary {
530
+ background-color: var(--stldocs-color-bg-ui);
531
+ border: 1px solid var(--stldocs-color-hairline);
532
+ border-radius: var(--stldocs-button-border-radius);
533
+ font-weight: 400;
552
534
 
553
- &:hover {
554
- border-color: var(--stldocs-color-hairline-shade);
535
+ &:hover {
536
+ border-color: var(--stldocs-color-hairline-shade);
537
+ }
555
538
  }
556
- }
557
539
 
558
- .stldocs-button-tertiary {
559
- border: none;
560
- color: var(--stldocs-color-text-secondary);
561
- background-color: transparent;
562
- }
540
+ .stldocs-button-tertiary {
541
+ border: none;
542
+ color: var(--stldocs-color-text-secondary);
543
+ background-color: transparent;
544
+ }
563
545
 
564
- .stldocs-root .stldocs-expand-toggle {
565
- font-size: var(--stldocs-font-size-body);
566
- display: flex;
567
- flex-grow: 1;
568
- justify-content: flex-end;
569
- user-select: none;
546
+ .stldocs-root .stldocs-expand-toggle {
547
+ font-size: var(--stldocs-font-size-body);
548
+ display: flex;
549
+ flex-grow: 1;
550
+ justify-content: flex-end;
551
+ user-select: none;
570
552
 
571
- &[data-stldocs-property-toggle-expanded='false'] {
572
- .stldocs-expand-toggle-content:last-child {
573
- display: none;
553
+ &[data-stldocs-property-toggle-expanded='false'] {
554
+ .stldocs-expand-toggle-content:last-child {
555
+ display: none;
556
+ }
574
557
  }
575
- }
576
558
 
577
- &[data-stldocs-property-toggle-expanded='true'] {
578
- .stldocs-expand-toggle-content:first-child {
579
- display: none;
559
+ &[data-stldocs-property-toggle-expanded='true'] {
560
+ .stldocs-expand-toggle-content:first-child {
561
+ display: none;
562
+ }
580
563
  }
581
- }
582
564
 
583
- .stldocs-expand-toggle-content {
584
- cursor: pointer;
565
+ .stldocs-expand-toggle-content {
566
+ cursor: pointer;
585
567
 
586
- .stldocs-icon {
587
- vertical-align: middle;
568
+ .stldocs-icon {
569
+ vertical-align: middle;
570
+ }
588
571
  }
589
572
  }
590
573
  }