1 | export const manifest = {
|
2 | name: 'sidebar',
|
3 | slots: [
|
4 | {
|
5 | description: 'Slot for default sidebar content',
|
6 | name: 'default'
|
7 | }
|
8 | ],
|
9 | events: [
|
10 | {
|
11 | description: 'Event emitted for setting the modelValue',
|
12 | name: 'update:modelValue'
|
13 | }
|
14 | ],
|
15 | props: [
|
16 | {
|
17 | name: 'ariaLabel',
|
18 | type: [
|
19 | 'String'
|
20 | ],
|
21 | default: 'Sidebar',
|
22 | description: 'The aria-label of the sidebar'
|
23 | },
|
24 | {
|
25 | name: 'collapseOnItemClick',
|
26 | type: [
|
27 | 'Boolean'
|
28 | ],
|
29 | default: 'true',
|
30 | description: 'Determines if the sidebar should close when clicking a sidebar item'
|
31 | },
|
32 | {
|
33 | name: 'collapseOnClickOutside',
|
34 | type: [
|
35 | 'Boolean'
|
36 | ],
|
37 | default: 'true',
|
38 | description: 'Determines if the sidebar should close when clicking outside, on the overlay'
|
39 | },
|
40 | {
|
41 | name: 'collapsePosition',
|
42 | type: [
|
43 | 'fixed',
|
44 | 'absolute',
|
45 | 'relative'
|
46 | ],
|
47 | default: 'absolute',
|
48 | description: 'The collapse position of the sidebar'
|
49 | },
|
50 | {
|
51 | name: 'color',
|
52 | type: [
|
53 | 'light',
|
54 | 'dark'
|
55 | ],
|
56 | default: 'light',
|
57 | description: 'The color variant of the sidebar'
|
58 | },
|
59 | {
|
60 | name: 'placement',
|
61 | type: [
|
62 | 'left',
|
63 | 'right'
|
64 | ],
|
65 | default: 'left',
|
66 | description: 'The placement of the sidebar'
|
67 | },
|
68 | {
|
69 | name: 'size',
|
70 | type: [
|
71 | 'sm',
|
72 | 'md',
|
73 | 'lg'
|
74 | ],
|
75 | default: 'md',
|
76 | description: 'The size variant of the navbar'
|
77 | }
|
78 | ],
|
79 | css: {
|
80 | selector: '.sidebar-wrapper',
|
81 | defaults: {
|
82 | size: 'md',
|
83 | color: 'light'
|
84 | },
|
85 | variables: [
|
86 | {
|
87 | name: 'background',
|
88 | type: 'color',
|
89 | value: 'color(\'light\')',
|
90 | description: 'The background of the sidebar component'
|
91 | },
|
92 | {
|
93 | name: 'border-top-color',
|
94 | type: 'color',
|
95 | value: 'color(\'light-60\')',
|
96 | description: 'The border top color of the sidebar component'
|
97 | },
|
98 | {
|
99 | name: 'border-right-color',
|
100 | type: 'color',
|
101 | value: 'color(\'light-60\')',
|
102 | description: 'The border right color of the sidebar component'
|
103 | },
|
104 | {
|
105 | name: 'border-bottom-color',
|
106 | type: 'color',
|
107 | value: 'color(\'light-60\')',
|
108 | description: 'The border bottom color of the sidebar component'
|
109 | },
|
110 | {
|
111 | name: 'border-left-color',
|
112 | type: 'color',
|
113 | value: 'color(\'light-60\')',
|
114 | description: 'The border left color of the sidebar component'
|
115 | },
|
116 | {
|
117 | name: 'border-color',
|
118 | type: '',
|
119 | value: 'var(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)',
|
120 | description: 'The border color of the sidebar component'
|
121 | },
|
122 | {
|
123 | name: 'border-style',
|
124 | type: '',
|
125 | value: 'var(--border-style)',
|
126 | description: 'The border style of the sidebar component'
|
127 | },
|
128 | {
|
129 | name: 'border-top-width',
|
130 | type: '',
|
131 | value: 'var(--border-top-width)',
|
132 | description: 'The border top width of the sidebar component'
|
133 | },
|
134 | {
|
135 | name: 'border-right-width',
|
136 | type: '',
|
137 | value: 'var(--border-right-width)',
|
138 | description: 'The border right width of the sidebar component'
|
139 | },
|
140 | {
|
141 | name: 'border-bottom-width',
|
142 | type: '',
|
143 | value: 'var(--border-bottom-width)',
|
144 | description: 'The border bottom width of the sidebar component'
|
145 | },
|
146 | {
|
147 | name: 'border-left-width',
|
148 | type: '',
|
149 | value: 'var(--border-left-width)',
|
150 | description: 'The border left width of the sidebar component'
|
151 | },
|
152 | {
|
153 | name: 'border-width',
|
154 | type: '',
|
155 | value: 'var(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)',
|
156 | description: 'The border width of the sidebar component'
|
157 | },
|
158 | {
|
159 | name: 'border-top-left-radius',
|
160 | type: 'size',
|
161 | value: 'var(--border-top-left-radius)',
|
162 | description: 'The border top left radius of the sidebar component'
|
163 | },
|
164 | {
|
165 | name: 'border-top-right-radius',
|
166 | type: 'size',
|
167 | value: 'var(--border-top-right-radius)',
|
168 | description: 'The border top right radius of the sidebar component'
|
169 | },
|
170 | {
|
171 | name: 'border-bottom-right-radius',
|
172 | type: 'size',
|
173 | value: 'var(--border-bottom-right-radius)',
|
174 | description: 'The border bottom right radius of the sidebar component'
|
175 | },
|
176 | {
|
177 | name: 'border-bottom-left-radius',
|
178 | type: 'size',
|
179 | value: 'var(--border-bottom-left-radius)',
|
180 | description: 'The border bottom left radius of the sidebar component'
|
181 | },
|
182 | {
|
183 | name: 'border-radius',
|
184 | type: '',
|
185 | value: 'var(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)',
|
186 | description: 'The border radius of the sidebar component'
|
187 | },
|
188 | {
|
189 | name: 'box-shadow-offset-x',
|
190 | type: '',
|
191 | value: 'var(--box-shadow-offset-x)',
|
192 | description: 'The box shadow horizontal offset of the sidebar component'
|
193 | },
|
194 | {
|
195 | name: 'box-shadow-offset-y',
|
196 | type: '',
|
197 | value: 'var(--box-shadow-offset-y)',
|
198 | description: 'The box shadow vertical offset of the sidebar component'
|
199 | },
|
200 | {
|
201 | name: 'box-shadow-blur-radius',
|
202 | type: '',
|
203 | value: 'var(--box-shadow-blur-radius)',
|
204 | description: 'The box shadow blur radius of the sidebar component'
|
205 | },
|
206 | {
|
207 | name: 'box-shadow-spread-radius',
|
208 | type: '',
|
209 | value: 'var(--box-shadow-spread-radius)',
|
210 | description: 'The box shadow spread radius of the sidebar component'
|
211 | },
|
212 | {
|
213 | name: 'box-shadow-color',
|
214 | type: '',
|
215 | value: 'var(--box-shadow-color)',
|
216 | description: 'The box shadow spread radius of the sidebar component'
|
217 | },
|
218 | {
|
219 | name: 'box-shadow',
|
220 | type: '',
|
221 | value: 'var(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)',
|
222 | description: 'The box shadow of the sidebar component'
|
223 | },
|
224 | {
|
225 | name: 'color',
|
226 | type: 'color',
|
227 | value: 'contrast-color($color-light)',
|
228 | description: 'The color of the sidebar component'
|
229 | },
|
230 | {
|
231 | name: 'font-size',
|
232 | type: 'size',
|
233 | value: 'font-size()',
|
234 | description: 'The font size of the sidebar component'
|
235 | },
|
236 | {
|
237 | name: 'padding-top',
|
238 | type: 'size',
|
239 | value: 'var(--padding-top)',
|
240 | description: 'The padding top of the sidebar component'
|
241 | },
|
242 | {
|
243 | name: 'padding-right',
|
244 | type: 'size',
|
245 | value: 'var(--padding-right)',
|
246 | description: 'The padding right of the sidebar component'
|
247 | },
|
248 | {
|
249 | name: 'padding-bottom',
|
250 | type: 'size',
|
251 | value: 'var(--padding-bottom)',
|
252 | description: 'The padding bottom of the sidebar component'
|
253 | },
|
254 | {
|
255 | name: 'padding-left',
|
256 | type: 'size',
|
257 | value: 'var(--padding-left)',
|
258 | description: 'The padding left of the sidebar component'
|
259 | },
|
260 | {
|
261 | name: 'padding',
|
262 | type: '',
|
263 | value: 'var(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)',
|
264 | description: 'The padding of the sidebar component'
|
265 | },
|
266 | {
|
267 | name: 'width',
|
268 | type: 'size',
|
269 | value: '14rem',
|
270 | description: 'The width of the sidebar component'
|
271 | },
|
272 | {
|
273 | name: 'z-index',
|
274 | type: '',
|
275 | value: 'z-index(\'fixed\')',
|
276 | description: 'The z-index of the sidebar component'
|
277 | },
|
278 | {
|
279 | name: 'item--color',
|
280 | type: 'color',
|
281 | value: 'contrast-color($color-light)',
|
282 | description: 'The color of the sidebar component item'
|
283 | },
|
284 | {
|
285 | name: 'item--color--hover',
|
286 | type: 'color',
|
287 | value: 'contrast-color($color-light)',
|
288 | description: 'The color of the sidebar component item when hovered'
|
289 | },
|
290 | {
|
291 | name: 'item--background',
|
292 | type: 'color',
|
293 | value: 'color(\'light\')',
|
294 | description: 'The background of the sidebar component item'
|
295 | },
|
296 | {
|
297 | name: 'item--background--hover',
|
298 | type: 'color',
|
299 | value: 'color(\'light-55\')',
|
300 | description: 'The background of the sidebar component item when hovered or focused'
|
301 | },
|
302 | {
|
303 | name: 'item--border-top-left-radius',
|
304 | type: '',
|
305 | value: 'var(----border-top-left-radius)',
|
306 | description: 'The border top left radius of the sidebar component item'
|
307 | },
|
308 | {
|
309 | name: 'item--border-top-right-radius',
|
310 | type: '',
|
311 | value: 'var(----border-top-right-radius)',
|
312 | description: 'The border top right radius of the sidebar component item'
|
313 | },
|
314 | {
|
315 | name: 'item--border-bottom-right-radius',
|
316 | type: '',
|
317 | value: 'var(----border-bottom-right-radius)',
|
318 | description: 'The border bottom right radius of the sidebar component item'
|
319 | },
|
320 | {
|
321 | name: 'item--border-bottom-left-radius',
|
322 | type: '',
|
323 | value: 'var(----border-bottom-left-radius)',
|
324 | description: 'The border bottom left radius of the sidebar component item'
|
325 | },
|
326 | {
|
327 | name: 'item--border-radius',
|
328 | type: '',
|
329 | value: 'var(----item--border-top-left-radius) var(----item--border-top-right-radius) var(----item--border-bottom-right-radius) var(----item--border-bottom-left-radius)',
|
330 | description: 'The border radius of the sidebar component item'
|
331 | },
|
332 | {
|
333 | name: 'item--padding-top',
|
334 | type: 'size',
|
335 | value: 'calc(var(--padding-top) / 2)',
|
336 | description: 'The padding top of the sidebar component item'
|
337 | },
|
338 | {
|
339 | name: 'item--padding-right',
|
340 | type: 'size',
|
341 | value: 'var(--padding-right)',
|
342 | description: 'The padding right of the sidebar component item'
|
343 | },
|
344 | {
|
345 | name: 'item--padding-bottom',
|
346 | type: 'size',
|
347 | value: 'calc(var(--padding-bottom) / 2)',
|
348 | description: 'The padding bottom of the sidebar component item'
|
349 | },
|
350 | {
|
351 | name: 'item--padding-left',
|
352 | type: 'size',
|
353 | value: 'var(--padding-left)',
|
354 | description: 'The padding left of the sidebar component item'
|
355 | },
|
356 | {
|
357 | name: 'item--padding',
|
358 | type: '',
|
359 | value: 'var(----item--padding-top) var(----item--padding-right) var(----item--padding-bottom) var(----item--padding-left)',
|
360 | description: 'The padding of the sidebar component item'
|
361 | },
|
362 | {
|
363 | name: 'overlay--background',
|
364 | type: '',
|
365 | value: 'rgba(0, 0, 0, 0.5)',
|
366 | description: 'The background of the sidebar component overlay'
|
367 | }
|
368 | ],
|
369 | variants: [
|
370 | {
|
371 | name: 'light',
|
372 | type: 'variant',
|
373 | description: 'Variables for the light color variant',
|
374 | variables: [
|
375 | {
|
376 | name: 'background',
|
377 | type: '',
|
378 | value: 'color(\'light\')',
|
379 | description: 'The background of the sidebar component, for the light color variant'
|
380 | },
|
381 | {
|
382 | name: 'border-top-color',
|
383 | type: '',
|
384 | value: 'color(\'light-60\')',
|
385 | description: 'The border top color of the sidebar component, for the light color variant'
|
386 | },
|
387 | {
|
388 | name: 'border-right-color',
|
389 | type: '',
|
390 | value: 'color(\'light-60\')',
|
391 | description: 'The border right color of the sidebar component, for the light color variant'
|
392 | },
|
393 | {
|
394 | name: 'border-bottom-color',
|
395 | type: '',
|
396 | value: 'color(\'light-60\')',
|
397 | description: 'The border bottom color of the sidebar component, for the light color variant'
|
398 | },
|
399 | {
|
400 | name: 'border-left-color',
|
401 | type: '',
|
402 | value: 'color(\'light-60\')',
|
403 | description: 'The border left color of the sidebar component, for the light color variant'
|
404 | },
|
405 | {
|
406 | name: 'color',
|
407 | type: '',
|
408 | value: 'contrast-color($color-light)',
|
409 | description: 'The color of the sidebar component, for the light color variant'
|
410 | },
|
411 | {
|
412 | name: 'item--color',
|
413 | type: '',
|
414 | value: 'contrast-color($color-light)',
|
415 | description: 'The color of the sidebar component item, for the light color variant'
|
416 | },
|
417 | {
|
418 | name: 'item--color--hover',
|
419 | type: '',
|
420 | value: 'contrast-color($color-light)',
|
421 | description: 'The color of the sidebar component item when hovered, for the light color variant'
|
422 | },
|
423 | {
|
424 | name: 'item--background',
|
425 | type: '',
|
426 | value: 'color(\'light\')',
|
427 | description: 'The background of the sidebar component item, for the light color variant'
|
428 | },
|
429 | {
|
430 | name: 'item--background--hover',
|
431 | type: '',
|
432 | value: 'color(\'light-55\')',
|
433 | description: 'The background of the sidebar component item when hovered or focused, for the light color variant'
|
434 | }
|
435 | ]
|
436 | },
|
437 | {
|
438 | name: 'dark',
|
439 | type: 'variant',
|
440 | description: 'Variables for the dark color variant',
|
441 | variables: [
|
442 | {
|
443 | name: 'background',
|
444 | type: '',
|
445 | value: 'color(\'dark\')',
|
446 | description: 'The background of the sidebar component, for the dark color variant'
|
447 | },
|
448 | {
|
449 | name: 'border-top-color',
|
450 | type: '',
|
451 | value: 'color(\'dark-40\')',
|
452 | description: 'The border top color of the sidebar component, for the dark color variant'
|
453 | },
|
454 | {
|
455 | name: 'border-right-color',
|
456 | type: '',
|
457 | value: 'color(\'dark-40\')',
|
458 | description: 'The border right color of the sidebar component, for the dark color variant'
|
459 | },
|
460 | {
|
461 | name: 'border-bottom-color',
|
462 | type: '',
|
463 | value: 'color(\'dark-40\')',
|
464 | description: 'The border bottom color of the sidebar component, for the dark color variant'
|
465 | },
|
466 | {
|
467 | name: 'border-left-color',
|
468 | type: '',
|
469 | value: 'color(\'dark-40\')',
|
470 | description: 'The border left color of the sidebar component, for the dark color variant'
|
471 | },
|
472 | {
|
473 | name: 'color',
|
474 | type: '',
|
475 | value: 'contrast-color($color-dark)',
|
476 | description: 'The color of the sidebar component, for the dark color variant'
|
477 | },
|
478 | {
|
479 | name: 'item--color',
|
480 | type: '',
|
481 | value: 'contrast-color($color-dark)',
|
482 | description: 'The color of the sidebar component item, for the dark color variant'
|
483 | },
|
484 | {
|
485 | name: 'item--color--hover',
|
486 | type: '',
|
487 | value: 'contrast-color($color-dark)',
|
488 | description: 'The color of the sidebar component item when hovered, for the dark color variant'
|
489 | },
|
490 | {
|
491 | name: 'item--background',
|
492 | type: '',
|
493 | value: 'color(\'dark\')',
|
494 | description: 'The background of the sidebar component item, for the dark color variant'
|
495 | },
|
496 | {
|
497 | name: 'item--background--hover',
|
498 | type: '',
|
499 | value: 'color(\'dark-45\')',
|
500 | description: 'The background of the sidebar component item when hovered or focused, for the dark color variant'
|
501 | }
|
502 | ]
|
503 | },
|
504 | {
|
505 | name: 'sm',
|
506 | type: 'variant',
|
507 | description: 'Variables for the sm size variant',
|
508 | variables: [
|
509 | {
|
510 | name: 'border-top-left-radius',
|
511 | type: '',
|
512 | value: 'calc(#{var(--border-top-left-radius)} * #{size-multiplier(\'sm\')})',
|
513 | description: 'The border top left radius of the sidebar component, for the sm size variant'
|
514 | },
|
515 | {
|
516 | name: 'border-top-right-radius',
|
517 | type: '',
|
518 | value: 'calc(#{var(--border-top-right-radius)} * #{size-multiplier(\'sm\')})',
|
519 | description: 'The border top right radius of the sidebar component, for the sm size variant'
|
520 | },
|
521 | {
|
522 | name: 'border-bottom-right-radius',
|
523 | type: '',
|
524 | value: 'calc(#{var(--border-bottom-right-radius)} * #{size-multiplier(\'sm\')})',
|
525 | description: 'The border bottom right radius of the sidebar component, for the sm size variant'
|
526 | },
|
527 | {
|
528 | name: 'border-bottom-left-radius',
|
529 | type: '',
|
530 | value: 'calc(#{var(--border-bottom-left-radius)} * #{size-multiplier(\'sm\')})',
|
531 | description: 'The border bottom left radius of the sidebar component, for the sm size variant'
|
532 | },
|
533 | {
|
534 | name: 'font-size',
|
535 | type: '',
|
536 | value: 'calc(#{font-size()} * #{size-multiplier(\'sm\')})',
|
537 | description: 'The font size of the sidebar component, for the sm size variant'
|
538 | },
|
539 | {
|
540 | name: 'padding-top',
|
541 | type: '',
|
542 | value: 'calc(#{var(--padding-top)} * #{size-multiplier(\'sm\')})',
|
543 | description: 'The padding top of the sidebar component, for the sm size variant'
|
544 | },
|
545 | {
|
546 | name: 'padding-right',
|
547 | type: '',
|
548 | value: 'calc(#{var(--padding-right)} * #{size-multiplier(\'sm\')})',
|
549 | description: 'The padding right of the sidebar component, for the sm size variant'
|
550 | },
|
551 | {
|
552 | name: 'padding-bottom',
|
553 | type: '',
|
554 | value: 'calc(#{var(--padding-bottom)} * #{size-multiplier(\'sm\')})',
|
555 | description: 'The padding bottom of the sidebar component, for the sm size variant'
|
556 | },
|
557 | {
|
558 | name: 'padding-left',
|
559 | type: '',
|
560 | value: 'calc(#{var(--padding-left)} * #{size-multiplier(\'sm\')})',
|
561 | description: 'The padding left of the sidebar component, for the sm size variant'
|
562 | },
|
563 | {
|
564 | name: 'width',
|
565 | type: '',
|
566 | value: 'calc(#{14rem} * #{size-multiplier(\'sm\')})',
|
567 | description: 'The width of the sidebar component, for the sm size variant'
|
568 | },
|
569 | {
|
570 | name: 'item--padding-top',
|
571 | type: '',
|
572 | value: 'calc(#{calc(var(--padding-top) / 2)} * #{size-multiplier(\'sm\')})',
|
573 | description: 'The padding top of the sidebar component item, for the sm size variant'
|
574 | },
|
575 | {
|
576 | name: 'item--padding-right',
|
577 | type: '',
|
578 | value: 'calc(#{var(--padding-right)} * #{size-multiplier(\'sm\')})',
|
579 | description: 'The padding right of the sidebar component item, for the sm size variant'
|
580 | },
|
581 | {
|
582 | name: 'item--padding-bottom',
|
583 | type: '',
|
584 | value: 'calc(#{calc(var(--padding-bottom) / 2)} * #{size-multiplier(\'sm\')})',
|
585 | description: 'The padding bottom of the sidebar component item, for the sm size variant'
|
586 | },
|
587 | {
|
588 | name: 'item--padding-left',
|
589 | type: '',
|
590 | value: 'calc(#{var(--padding-left)} * #{size-multiplier(\'sm\')})',
|
591 | description: 'The padding left of the sidebar component item, for the sm size variant'
|
592 | }
|
593 | ]
|
594 | },
|
595 | {
|
596 | name: 'md',
|
597 | type: 'variant',
|
598 | description: 'Variables for the md size variant',
|
599 | variables: [
|
600 | {
|
601 | name: 'border-top-left-radius',
|
602 | type: '',
|
603 | value: 'calc(#{var(--border-top-left-radius)} * #{size-multiplier(\'md\')})',
|
604 | description: 'The border top left radius of the sidebar component, for the md size variant'
|
605 | },
|
606 | {
|
607 | name: 'border-top-right-radius',
|
608 | type: '',
|
609 | value: 'calc(#{var(--border-top-right-radius)} * #{size-multiplier(\'md\')})',
|
610 | description: 'The border top right radius of the sidebar component, for the md size variant'
|
611 | },
|
612 | {
|
613 | name: 'border-bottom-right-radius',
|
614 | type: '',
|
615 | value: 'calc(#{var(--border-bottom-right-radius)} * #{size-multiplier(\'md\')})',
|
616 | description: 'The border bottom right radius of the sidebar component, for the md size variant'
|
617 | },
|
618 | {
|
619 | name: 'border-bottom-left-radius',
|
620 | type: '',
|
621 | value: 'calc(#{var(--border-bottom-left-radius)} * #{size-multiplier(\'md\')})',
|
622 | description: 'The border bottom left radius of the sidebar component, for the md size variant'
|
623 | },
|
624 | {
|
625 | name: 'font-size',
|
626 | type: '',
|
627 | value: 'calc(#{font-size()} * #{size-multiplier(\'md\')})',
|
628 | description: 'The font size of the sidebar component, for the md size variant'
|
629 | },
|
630 | {
|
631 | name: 'padding-top',
|
632 | type: '',
|
633 | value: 'calc(#{var(--padding-top)} * #{size-multiplier(\'md\')})',
|
634 | description: 'The padding top of the sidebar component, for the md size variant'
|
635 | },
|
636 | {
|
637 | name: 'padding-right',
|
638 | type: '',
|
639 | value: 'calc(#{var(--padding-right)} * #{size-multiplier(\'md\')})',
|
640 | description: 'The padding right of the sidebar component, for the md size variant'
|
641 | },
|
642 | {
|
643 | name: 'padding-bottom',
|
644 | type: '',
|
645 | value: 'calc(#{var(--padding-bottom)} * #{size-multiplier(\'md\')})',
|
646 | description: 'The padding bottom of the sidebar component, for the md size variant'
|
647 | },
|
648 | {
|
649 | name: 'padding-left',
|
650 | type: '',
|
651 | value: 'calc(#{var(--padding-left)} * #{size-multiplier(\'md\')})',
|
652 | description: 'The padding left of the sidebar component, for the md size variant'
|
653 | },
|
654 | {
|
655 | name: 'width',
|
656 | type: '',
|
657 | value: 'calc(#{14rem} * #{size-multiplier(\'md\')})',
|
658 | description: 'The width of the sidebar component, for the md size variant'
|
659 | },
|
660 | {
|
661 | name: 'item--padding-top',
|
662 | type: '',
|
663 | value: 'calc(#{calc(var(--padding-top) / 2)} * #{size-multiplier(\'md\')})',
|
664 | description: 'The padding top of the sidebar component item, for the md size variant'
|
665 | },
|
666 | {
|
667 | name: 'item--padding-right',
|
668 | type: '',
|
669 | value: 'calc(#{var(--padding-right)} * #{size-multiplier(\'md\')})',
|
670 | description: 'The padding right of the sidebar component item, for the md size variant'
|
671 | },
|
672 | {
|
673 | name: 'item--padding-bottom',
|
674 | type: '',
|
675 | value: 'calc(#{calc(var(--padding-bottom) / 2)} * #{size-multiplier(\'md\')})',
|
676 | description: 'The padding bottom of the sidebar component item, for the md size variant'
|
677 | },
|
678 | {
|
679 | name: 'item--padding-left',
|
680 | type: '',
|
681 | value: 'calc(#{var(--padding-left)} * #{size-multiplier(\'md\')})',
|
682 | description: 'The padding left of the sidebar component item, for the md size variant'
|
683 | }
|
684 | ]
|
685 | },
|
686 | {
|
687 | name: 'lg',
|
688 | type: 'variant',
|
689 | description: 'Variables for the lg size variant',
|
690 | variables: [
|
691 | {
|
692 | name: 'border-top-left-radius',
|
693 | type: '',
|
694 | value: 'calc(#{var(--border-top-left-radius)} * #{size-multiplier(\'lg\')})',
|
695 | description: 'The border top left radius of the sidebar component, for the lg size variant'
|
696 | },
|
697 | {
|
698 | name: 'border-top-right-radius',
|
699 | type: '',
|
700 | value: 'calc(#{var(--border-top-right-radius)} * #{size-multiplier(\'lg\')})',
|
701 | description: 'The border top right radius of the sidebar component, for the lg size variant'
|
702 | },
|
703 | {
|
704 | name: 'border-bottom-right-radius',
|
705 | type: '',
|
706 | value: 'calc(#{var(--border-bottom-right-radius)} * #{size-multiplier(\'lg\')})',
|
707 | description: 'The border bottom right radius of the sidebar component, for the lg size variant'
|
708 | },
|
709 | {
|
710 | name: 'border-bottom-left-radius',
|
711 | type: '',
|
712 | value: 'calc(#{var(--border-bottom-left-radius)} * #{size-multiplier(\'lg\')})',
|
713 | description: 'The border bottom left radius of the sidebar component, for the lg size variant'
|
714 | },
|
715 | {
|
716 | name: 'font-size',
|
717 | type: '',
|
718 | value: 'calc(#{font-size()} * #{size-multiplier(\'lg\')})',
|
719 | description: 'The font size of the sidebar component, for the lg size variant'
|
720 | },
|
721 | {
|
722 | name: 'padding-top',
|
723 | type: '',
|
724 | value: 'calc(#{var(--padding-top)} * #{size-multiplier(\'lg\')})',
|
725 | description: 'The padding top of the sidebar component, for the lg size variant'
|
726 | },
|
727 | {
|
728 | name: 'padding-right',
|
729 | type: '',
|
730 | value: 'calc(#{var(--padding-right)} * #{size-multiplier(\'lg\')})',
|
731 | description: 'The padding right of the sidebar component, for the lg size variant'
|
732 | },
|
733 | {
|
734 | name: 'padding-bottom',
|
735 | type: '',
|
736 | value: 'calc(#{var(--padding-bottom)} * #{size-multiplier(\'lg\')})',
|
737 | description: 'The padding bottom of the sidebar component, for the lg size variant'
|
738 | },
|
739 | {
|
740 | name: 'padding-left',
|
741 | type: '',
|
742 | value: 'calc(#{var(--padding-left)} * #{size-multiplier(\'lg\')})',
|
743 | description: 'The padding left of the sidebar component, for the lg size variant'
|
744 | },
|
745 | {
|
746 | name: 'width',
|
747 | type: '',
|
748 | value: 'calc(#{14rem} * #{size-multiplier(\'lg\')})',
|
749 | description: 'The width of the sidebar component, for the lg size variant'
|
750 | },
|
751 | {
|
752 | name: 'item--padding-top',
|
753 | type: '',
|
754 | value: 'calc(#{calc(var(--padding-top) / 2)} * #{size-multiplier(\'lg\')})',
|
755 | description: 'The padding top of the sidebar component item, for the lg size variant'
|
756 | },
|
757 | {
|
758 | name: 'item--padding-right',
|
759 | type: '',
|
760 | value: 'calc(#{var(--padding-right)} * #{size-multiplier(\'lg\')})',
|
761 | description: 'The padding right of the sidebar component item, for the lg size variant'
|
762 | },
|
763 | {
|
764 | name: 'item--padding-bottom',
|
765 | type: '',
|
766 | value: 'calc(#{calc(var(--padding-bottom) / 2)} * #{size-multiplier(\'lg\')})',
|
767 | description: 'The padding bottom of the sidebar component item, for the lg size variant'
|
768 | },
|
769 | {
|
770 | name: 'item--padding-left',
|
771 | type: '',
|
772 | value: 'calc(#{var(--padding-left)} * #{size-multiplier(\'lg\')})',
|
773 | description: 'The padding left of the sidebar component item, for the lg size variant'
|
774 | }
|
775 | ]
|
776 | }
|
777 | ]
|
778 | }
|
779 | };
|
780 | export default manifest;
|
781 |
|
\ | No newline at end of file |