@box/blueprint-web 14.34.1 → 14.36.0
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.
- package/dist/lib-esm/index.css +357 -117
- package/dist/lib-esm/primitives/base-button/base-button.js +4 -3
- package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
- package/dist/lib-esm/primitives/base-button/types.d.ts +7 -2
- package/dist/lib-esm/primitives/base-button/utils.js +5 -2
- package/dist/lib-esm/toolbar/index.d.ts +12 -1
- package/dist/lib-esm/toolbar/index.js +13 -0
- package/dist/lib-esm/toolbar/toolbar-input.d.ts +2 -0
- package/dist/lib-esm/toolbar/toolbar-input.js +36 -0
- package/dist/lib-esm/toolbar/toolbar-link.d.ts +2 -0
- package/dist/lib-esm/toolbar/toolbar-link.js +29 -0
- package/dist/lib-esm/toolbar/toolbar.module.js +1 -1
- package/dist/lib-esm/toolbar/types.d.ts +21 -1
- package/dist/lib-esm/trigger-button/trigger-button.d.ts +1 -1
- package/package.json +3 -3
package/dist/lib-esm/index.css
CHANGED
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
}
|
|
356
356
|
}
|
|
357
357
|
|
|
358
|
-
.bp_base_button_module_button--
|
|
358
|
+
.bp_base_button_module_button--31640[data-modern=true]{
|
|
359
359
|
--button-border-radius:var(--bp-radius-10);
|
|
360
360
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
361
361
|
font-size:var(--bp-font-size-05);
|
|
@@ -364,10 +364,10 @@
|
|
|
364
364
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
365
365
|
line-height:var(--bp-font-line-height-04);
|
|
366
366
|
}
|
|
367
|
-
.bp_base_button_module_button--
|
|
367
|
+
.bp_base_button_module_button--31640[data-modern=true]:not(:disabled)[data-focus-visible]{
|
|
368
368
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
|
|
369
369
|
}
|
|
370
|
-
.bp_base_button_module_button--
|
|
370
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_primary--31640{
|
|
371
371
|
--button-color:var(--bp-text-text-on-dark);
|
|
372
372
|
--button-background:var(--bp-surface-surface-brand);
|
|
373
373
|
--button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
|
|
@@ -376,7 +376,7 @@
|
|
|
376
376
|
--button-active-background:var(--bp-surface-surface-brand-pressed);
|
|
377
377
|
--button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
|
|
378
378
|
}
|
|
379
|
-
.bp_base_button_module_button--
|
|
379
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_secondary--31640{
|
|
380
380
|
--button-color:var(--bp-text-text-on-light);
|
|
381
381
|
--button-background:var(--bp-surface-cta-surface-secondary);
|
|
382
382
|
--button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
|
|
@@ -386,14 +386,14 @@
|
|
|
386
386
|
--button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
|
|
387
387
|
--button-backdrop-filter:blur(16px);
|
|
388
388
|
}
|
|
389
|
-
.bp_base_button_module_button--
|
|
389
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_tertiary--31640{
|
|
390
390
|
--button-color:var(--bp-text-cta-link);
|
|
391
391
|
--button-background:var(--bp-surface-cta-surface-tertiary);
|
|
392
392
|
--button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
|
|
393
393
|
--button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
|
|
394
394
|
--button-backdrop-filter:blur(16px);
|
|
395
395
|
}
|
|
396
|
-
.bp_base_button_module_button--
|
|
396
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640{
|
|
397
397
|
--button-color:var(--bp-text-cta-link-secondary);
|
|
398
398
|
--button-background:var(--bp-surface-cta-surface-quaternary);
|
|
399
399
|
--button-border:var(--bp-border-01) solid #0000;
|
|
@@ -401,7 +401,7 @@
|
|
|
401
401
|
--button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
|
|
402
402
|
--button-backdrop-filter:blur(16px);
|
|
403
403
|
}
|
|
404
|
-
.bp_base_button_module_button--
|
|
404
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_tertiary-destructive--31640{
|
|
405
405
|
--button-color:var(--bp-text-text-destructive-on-light);
|
|
406
406
|
--button-background:var(--bp-surface-cta-destructive-surface-tertiary);
|
|
407
407
|
--button-border:var(--bp-border-01) solid #0000;
|
|
@@ -409,7 +409,7 @@
|
|
|
409
409
|
--button-active-background:var(--bp-surface-cta-destructive-surface-tertiary-pressed);
|
|
410
410
|
--button-backdrop-filter:blur(16px);
|
|
411
411
|
}
|
|
412
|
-
.bp_base_button_module_button--
|
|
412
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_destructive--31640{
|
|
413
413
|
--button-color:var(--bp-text-text-on-dark);
|
|
414
414
|
--button-background:var(--bp-surface-cta-destructive-surface-primary);
|
|
415
415
|
--button-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary);
|
|
@@ -418,7 +418,7 @@
|
|
|
418
418
|
--button-active-background:var(--bp-surface-cta-destructive-surface-primary-pressed);
|
|
419
419
|
--button-active-border:var(--bp-border-01) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
|
|
420
420
|
}
|
|
421
|
-
.bp_base_button_module_button--
|
|
421
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_outline--31640{
|
|
422
422
|
--button-color:var(--bp-text-text-on-light);
|
|
423
423
|
--button-background:var(--bp-surface-cta-surface-secondary);
|
|
424
424
|
--button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
|
|
@@ -428,48 +428,73 @@
|
|
|
428
428
|
--button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
|
|
429
429
|
--button-backdrop-filter:blur(16px);
|
|
430
430
|
}
|
|
431
|
-
.bp_base_button_module_button--
|
|
431
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640{
|
|
432
432
|
--button-small-gap:var(--bp-space-010);
|
|
433
433
|
--button-small-min-height:var(--bp-size-080);
|
|
434
434
|
--button-small-padding:0 var(--bp-size-030);
|
|
435
435
|
}
|
|
436
|
-
.bp_base_button_module_button--
|
|
436
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isIconButton--31640{
|
|
437
437
|
--icon-button-small-width:var(--bp-size-080);
|
|
438
438
|
--icon-button-small-height:var(--bp-size-080);
|
|
439
439
|
--icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
|
|
440
440
|
}
|
|
441
|
-
.bp_base_button_module_button--
|
|
441
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
|
|
442
442
|
--button-small-padding:0 0.625rem 0 var(--bp-space-030);
|
|
443
443
|
}
|
|
444
|
-
.bp_base_button_module_button--
|
|
444
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
|
|
445
445
|
--button-small-padding:0 var(--bp-space-030) 0 0.625rem;
|
|
446
446
|
}
|
|
447
|
-
.bp_base_button_module_button--
|
|
447
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
448
448
|
--button-small-padding:0 0.625rem 0 0.625rem;
|
|
449
449
|
}
|
|
450
|
-
.bp_base_button_module_button--
|
|
450
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640{
|
|
451
|
+
--button-x-small-gap:var(--bp-space-010);
|
|
452
|
+
--button-x-small-min-height:var(--bp-size-060);
|
|
453
|
+
--button-x-small-padding:var(--bp-space-005) var(--bp-space-020);
|
|
454
|
+
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
455
|
+
font-size:var(--bp-font-size-04);
|
|
456
|
+
font-style:normal;
|
|
457
|
+
font-weight:var(--bp-font-weight-semibold);
|
|
458
|
+
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
459
|
+
line-height:var(--bp-font-line-height-04);
|
|
460
|
+
}
|
|
461
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isIconButton--31640{
|
|
462
|
+
--icon-button-x-small-width:var(--bp-size-060);
|
|
463
|
+
--icon-button-x-small-height:var(--bp-size-060);
|
|
464
|
+
--icon-button-x-small-padding:0 calc((var(--bp-size-060) - var(--bp-size-040))/2);
|
|
465
|
+
}
|
|
466
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
|
|
467
|
+
--button-x-small-padding:var(--bp-space-005) 0.375rem var(--bp-space-005) var(--bp-space-020);
|
|
468
|
+
}
|
|
469
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
|
|
470
|
+
--button-x-small-padding:var(--bp-space-005) var(--bp-space-020) var(--bp-space-005) 0.375rem;
|
|
471
|
+
}
|
|
472
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
473
|
+
--button-x-small-padding:var(--bp-space-005) 0.375rem;
|
|
474
|
+
}
|
|
475
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640{
|
|
451
476
|
--button-large-gap:var(--bp-space-020);
|
|
452
477
|
--button-large-min-height:var(--bp-size-100);
|
|
453
478
|
--button-large-padding:0 var(--bp-size-040);
|
|
454
479
|
--button-large-font-size:var(--body-large-bold-font-size);
|
|
455
480
|
--button-large-line-height:var(--body-large-bold-line-height);
|
|
456
481
|
}
|
|
457
|
-
.bp_base_button_module_button--
|
|
482
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isIconButton--31640{
|
|
458
483
|
--icon-button-large-width:var(--bp-size-100);
|
|
459
484
|
--icon-button-large-height:var(--bp-size-100);
|
|
460
485
|
--icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
|
|
461
486
|
}
|
|
462
|
-
.bp_base_button_module_button--
|
|
487
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconEndButton--31640{
|
|
463
488
|
--button-large-padding:0 0.875rem 0 var(--bp-space-040);
|
|
464
489
|
}
|
|
465
|
-
.bp_base_button_module_button--
|
|
490
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconStartButton--31640{
|
|
466
491
|
--button-large-padding:0 var(--bp-space-040) 0 0.875rem;
|
|
467
492
|
}
|
|
468
|
-
.bp_base_button_module_button--
|
|
493
|
+
.bp_base_button_module_button--31640[data-modern=true].bp_base_button_module_large--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
469
494
|
--button-large-padding:0 0.875rem 0 0.875rem;
|
|
470
495
|
}
|
|
471
496
|
|
|
472
|
-
.bp_base_button_module_button--
|
|
497
|
+
.bp_base_button_module_button--31640[data-modern=false]{
|
|
473
498
|
--button-border-radius:var(--radius-2);
|
|
474
499
|
font-family:var(--body-default-bold-font-family);
|
|
475
500
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -479,10 +504,10 @@
|
|
|
479
504
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
480
505
|
text-transform:var(--body-default-bold-text-case);
|
|
481
506
|
}
|
|
482
|
-
.bp_base_button_module_button--
|
|
507
|
+
.bp_base_button_module_button--31640[data-modern=false]:not(:disabled)[data-focus-visible]{
|
|
483
508
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
484
509
|
}
|
|
485
|
-
.bp_base_button_module_button--
|
|
510
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_primary--31640{
|
|
486
511
|
--button-color:var(--text-text-brand-on-color);
|
|
487
512
|
--button-background:var(--surface-surface-brand);
|
|
488
513
|
--button-border:var(--border-1) solid var(--surface-surface-brand);
|
|
@@ -491,7 +516,7 @@
|
|
|
491
516
|
--button-active-background:var(--surface-surface-brand-pressed);
|
|
492
517
|
--button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
|
|
493
518
|
}
|
|
494
|
-
.bp_base_button_module_button--
|
|
519
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_secondary--31640{
|
|
495
520
|
--button-color:var(--text-text-on-light);
|
|
496
521
|
--button-background:var(--surface-cta-surface-secondary);
|
|
497
522
|
--button-border:var(--border-1) solid var(--border-cta-border-secondary);
|
|
@@ -501,7 +526,7 @@
|
|
|
501
526
|
--button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
|
|
502
527
|
--button-backdrop-filter:none;
|
|
503
528
|
}
|
|
504
|
-
.bp_base_button_module_button--
|
|
529
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_tertiary--31640{
|
|
505
530
|
--button-color:var(--text-cta-link);
|
|
506
531
|
--button-background:#0000;
|
|
507
532
|
--button-border:var(--border-1) solid #0000;
|
|
@@ -509,7 +534,7 @@
|
|
|
509
534
|
--button-active-background:var(--surface-cta-surface-tertiary-pressed);
|
|
510
535
|
--button-backdrop-filter:none;
|
|
511
536
|
}
|
|
512
|
-
.bp_base_button_module_button--
|
|
537
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640{
|
|
513
538
|
--button-color:var(--text-cta-link-secondary);
|
|
514
539
|
--button-background:var(--bp-surface-cta-surface-quaternary);
|
|
515
540
|
--button-border:var(--border-1) solid #0000;
|
|
@@ -517,7 +542,7 @@
|
|
|
517
542
|
--button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
|
|
518
543
|
--button-backdrop-filter:none;
|
|
519
544
|
}
|
|
520
|
-
.bp_base_button_module_button--
|
|
545
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_tertiary-destructive--31640{
|
|
521
546
|
--button-color:var(--text-text-destructive-on-light);
|
|
522
547
|
--button-background:#0000;
|
|
523
548
|
--button-border:var(--border-1) solid #0000;
|
|
@@ -525,7 +550,7 @@
|
|
|
525
550
|
--button-active-background:var(--surface-cta-destructive-surface-tertiary-pressed);
|
|
526
551
|
--button-backdrop-filter:none;
|
|
527
552
|
}
|
|
528
|
-
.bp_base_button_module_button--
|
|
553
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_destructive--31640{
|
|
529
554
|
--button-color:var(--text-text-on-dark);
|
|
530
555
|
--button-background:var(--bp-surface-cta-destructive-surface-primary);
|
|
531
556
|
--button-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary);
|
|
@@ -535,7 +560,7 @@
|
|
|
535
560
|
--button-active-border:var(--border-1) solid var(--bp-surface-cta-destructive-surface-primary-pressed);
|
|
536
561
|
--button-backdrop-filter:none;
|
|
537
562
|
}
|
|
538
|
-
.bp_base_button_module_button--
|
|
563
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_outline--31640{
|
|
539
564
|
--button-color:var(--text-text-on-light);
|
|
540
565
|
--button-background:var(--surface-cta-surface-outline);
|
|
541
566
|
--button-border:var(--border-1) solid var(--border-cta-border-outline);
|
|
@@ -545,57 +570,82 @@
|
|
|
545
570
|
--button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
|
|
546
571
|
--button-backdrop-filter:none;
|
|
547
572
|
}
|
|
548
|
-
.bp_base_button_module_button--
|
|
573
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640{
|
|
549
574
|
--button-small-gap:var(--space-1);
|
|
550
575
|
--button-small-min-height:var(--size-8);
|
|
551
576
|
--button-small-padding:0 var(--space-4);
|
|
552
577
|
}
|
|
553
|
-
.bp_base_button_module_button--
|
|
578
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isIconButton--31640{
|
|
554
579
|
--icon-button-small-width:var(--size-8);
|
|
555
580
|
--icon-button-small-height:var(--size-8);
|
|
556
581
|
--icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
|
|
557
582
|
}
|
|
558
|
-
.bp_base_button_module_button--
|
|
583
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
|
|
559
584
|
--button-small-padding:0 var(--space-3);
|
|
560
585
|
}
|
|
561
|
-
.bp_base_button_module_button--
|
|
586
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
|
|
562
587
|
--button-small-padding:0 var(--space-3) 0 0.625rem;
|
|
563
588
|
}
|
|
564
|
-
.bp_base_button_module_button--
|
|
589
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
565
590
|
--button-small-padding:0 var(--space-3) 0 var(--space-3);
|
|
566
591
|
}
|
|
567
|
-
.bp_base_button_module_button--
|
|
592
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640{
|
|
593
|
+
--button-x-small-gap:var(--space-1);
|
|
594
|
+
--button-x-small-min-height:var(--size-6);
|
|
595
|
+
--button-x-small-padding:var(--space-05) var(--space-2);
|
|
596
|
+
--button-x-small-font-size:var(--caption-bold-font-size);
|
|
597
|
+
--button-x-small-line-height:var(--caption-bold-line-height);
|
|
598
|
+
--button-x-small-font-weight:var(--caption-bold-font-weight);
|
|
599
|
+
font-size:var(--button-x-small-font-size);
|
|
600
|
+
font-weight:var(--button-x-small-font-weight);
|
|
601
|
+
line-height:var(--button-x-small-line-height);
|
|
602
|
+
}
|
|
603
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isIconButton--31640{
|
|
604
|
+
--icon-button-x-small-width:var(--size-6);
|
|
605
|
+
--icon-button-x-small-height:var(--size-6);
|
|
606
|
+
--icon-button-x-small-padding:0 calc((var(--size-6) - var(--space-4))/2);
|
|
607
|
+
}
|
|
608
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconEndButton--31640{
|
|
609
|
+
--button-x-small-padding:var(--space-05) 0.375rem var(--space-05) var(--space-2);
|
|
610
|
+
}
|
|
611
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconStartButton--31640{
|
|
612
|
+
--button-x-small-padding:var(--space-05) var(--space-2) var(--space-05) 0.375rem;
|
|
613
|
+
}
|
|
614
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
615
|
+
--button-x-small-padding:var(--space-05) 0.375rem;
|
|
616
|
+
}
|
|
617
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640{
|
|
568
618
|
--button-large-gap:var(--space-2);
|
|
569
619
|
--button-large-min-height:var(--size-10);
|
|
570
620
|
--button-large-padding:0 var(--space-4);
|
|
571
621
|
--button-large-font-size:var(--body-default-bold-font-size);
|
|
572
622
|
--button-large-line-height:var(--body-default-bold-line-height);
|
|
573
623
|
}
|
|
574
|
-
.bp_base_button_module_button--
|
|
624
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isIconButton--31640{
|
|
575
625
|
--icon-button-large-width:var(--size-10);
|
|
576
626
|
--icon-button-large-height:var(--size-10);
|
|
577
627
|
--icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
|
|
578
628
|
}
|
|
579
|
-
.bp_base_button_module_button--
|
|
629
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconEndButton--31640{
|
|
580
630
|
--button-large-padding:0 var(--space-4);
|
|
581
631
|
}
|
|
582
|
-
.bp_base_button_module_button--
|
|
632
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconStartButton--31640{
|
|
583
633
|
--button-large-padding:0 var(--space-4) 0 0.875rem;
|
|
584
634
|
}
|
|
585
|
-
.bp_base_button_module_button--
|
|
635
|
+
.bp_base_button_module_button--31640[data-modern=false].bp_base_button_module_large--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
586
636
|
--button-large-padding:0 var(--space-4) 0 var(--space-4);
|
|
587
637
|
}
|
|
588
638
|
|
|
589
|
-
.bp_base_button_module_button--
|
|
639
|
+
.bp_base_button_module_button--31640[data-bp-animated=true]{
|
|
590
640
|
transition-duration:var(--bp-duration-short);
|
|
591
641
|
transition-property:background;
|
|
592
642
|
transition-timing-function:var(--bp-curve-small-off);
|
|
593
643
|
}
|
|
594
|
-
.bp_base_button_module_button--
|
|
644
|
+
.bp_base_button_module_button--31640[data-bp-animated=true]:active,.bp_base_button_module_button--31640[data-bp-animated=true]:hover{
|
|
595
645
|
transition-timing-function:var(--bp-curve-small-on);
|
|
596
646
|
}
|
|
597
647
|
|
|
598
|
-
.bp_base_button_module_button--
|
|
648
|
+
.bp_base_button_module_button--31640{
|
|
599
649
|
border-radius:var(--button-border-radius);
|
|
600
650
|
cursor:pointer;
|
|
601
651
|
justify-content:center;
|
|
@@ -604,137 +654,151 @@
|
|
|
604
654
|
user-select:none;
|
|
605
655
|
white-space:nowrap;
|
|
606
656
|
}
|
|
607
|
-
.bp_base_button_module_button--
|
|
657
|
+
.bp_base_button_module_button--31640,.bp_base_button_module_button--31640 .bp_base_button_module_icon--31640{
|
|
608
658
|
align-items:center;
|
|
609
659
|
display:flex;
|
|
610
660
|
}
|
|
611
|
-
.bp_base_button_module_button--
|
|
661
|
+
.bp_base_button_module_button--31640:disabled{
|
|
612
662
|
opacity:.3;
|
|
613
663
|
}
|
|
614
|
-
.bp_base_button_module_button--
|
|
664
|
+
.bp_base_button_module_button--31640.bp_base_button_module_primary--31640{
|
|
615
665
|
background:var(--button-background);
|
|
616
666
|
border:var(--button-border);
|
|
617
667
|
color:var(--button-color);
|
|
618
668
|
}
|
|
619
|
-
.bp_base_button_module_button--
|
|
669
|
+
.bp_base_button_module_button--31640.bp_base_button_module_primary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_primary--31640:not(:disabled)[data-focus-visible]{
|
|
620
670
|
background:var(--button-focus-or-hover-background);
|
|
621
671
|
border:var(--button-focus-or-hover-border);
|
|
622
672
|
}
|
|
623
|
-
.bp_base_button_module_button--
|
|
673
|
+
.bp_base_button_module_button--31640.bp_base_button_module_primary--31640:not(:disabled):active{
|
|
624
674
|
background:var(--button-active-background);
|
|
625
675
|
border:var(--button-active-border);
|
|
626
676
|
}
|
|
627
|
-
.bp_base_button_module_button--
|
|
677
|
+
.bp_base_button_module_button--31640.bp_base_button_module_secondary--31640{
|
|
628
678
|
backdrop-filter:var(--button-backdrop-filter);
|
|
629
679
|
background:var(--button-background);
|
|
630
680
|
border:var(--button-border);
|
|
631
681
|
color:var(--button-color);
|
|
632
682
|
}
|
|
633
|
-
.bp_base_button_module_button--
|
|
683
|
+
.bp_base_button_module_button--31640.bp_base_button_module_secondary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_secondary--31640:not(:disabled)[data-focus-visible]{
|
|
634
684
|
background:var(--button-focus-or-hover-background);
|
|
635
685
|
border:var(--button-focus-or-hover-border);
|
|
636
686
|
}
|
|
637
|
-
.bp_base_button_module_button--
|
|
687
|
+
.bp_base_button_module_button--31640.bp_base_button_module_secondary--31640:not(:disabled):active{
|
|
638
688
|
background:var(--button-active-background);
|
|
639
689
|
border:var(--button-active-border);
|
|
640
690
|
}
|
|
641
|
-
.bp_base_button_module_button--
|
|
691
|
+
.bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640{
|
|
642
692
|
backdrop-filter:var(--button-backdrop-filter);
|
|
643
693
|
background:var(--button-background);
|
|
644
694
|
border:var(--button-border);
|
|
645
695
|
color:var(--button-color);
|
|
646
696
|
}
|
|
647
|
-
.bp_base_button_module_button--
|
|
697
|
+
.bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640:not(:disabled)[data-focus-visible]{
|
|
648
698
|
background:var(--button-focus-or-hover-background);
|
|
649
699
|
}
|
|
650
|
-
.bp_base_button_module_button--
|
|
700
|
+
.bp_base_button_module_button--31640.bp_base_button_module_tertiary-destructive--31640:not(:disabled):active{
|
|
651
701
|
background:var(--button-active-background);
|
|
652
702
|
}
|
|
653
|
-
.bp_base_button_module_button--
|
|
703
|
+
.bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640{
|
|
654
704
|
backdrop-filter:var(--button-backdrop-filter);
|
|
655
705
|
background:var(--button-background);
|
|
656
706
|
border:var(--button-border);
|
|
657
707
|
color:var(--button-color);
|
|
658
708
|
}
|
|
659
|
-
.bp_base_button_module_button--
|
|
709
|
+
.bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640:not(:disabled)[data-focus-visible]{
|
|
660
710
|
background:var(--button-focus-or-hover-background);
|
|
661
711
|
}
|
|
662
|
-
.bp_base_button_module_button--
|
|
712
|
+
.bp_base_button_module_button--31640.bp_base_button_module_tertiary--31640:not(:disabled):active{
|
|
663
713
|
background:var(--button-active-background);
|
|
664
714
|
}
|
|
665
|
-
.bp_base_button_module_button--
|
|
715
|
+
.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640{
|
|
666
716
|
backdrop-filter:var(--button-backdrop-filter);
|
|
667
717
|
background:var(--button-background);
|
|
668
718
|
border:var(--button-border);
|
|
669
719
|
color:var(--button-color);
|
|
670
720
|
}
|
|
671
|
-
.bp_base_button_module_button--
|
|
721
|
+
.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640:not(:disabled)[data-focus-visible]{
|
|
672
722
|
background:var(--button-focus-or-hover-background);
|
|
673
723
|
}
|
|
674
|
-
.bp_base_button_module_button--
|
|
724
|
+
.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640:not(:disabled):active{
|
|
675
725
|
background:var(--button-active-background);
|
|
676
726
|
}
|
|
677
|
-
.bp_base_button_module_button--
|
|
727
|
+
.bp_base_button_module_button--31640.bp_base_button_module_destructive--31640{
|
|
678
728
|
background:var(--button-background);
|
|
679
729
|
border:var(--button-border);
|
|
680
730
|
color:var(--button-color);
|
|
681
731
|
}
|
|
682
|
-
.bp_base_button_module_button--
|
|
732
|
+
.bp_base_button_module_button--31640.bp_base_button_module_destructive--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_destructive--31640:not(:disabled)[data-focus-visible]{
|
|
683
733
|
background:var(--button-focus-or-hover-background);
|
|
684
734
|
border:var(--button-focus-or-hover-border);
|
|
685
735
|
}
|
|
686
|
-
.bp_base_button_module_button--
|
|
736
|
+
.bp_base_button_module_button--31640.bp_base_button_module_destructive--31640:not(:disabled):active{
|
|
687
737
|
background:var(--button-active-background);
|
|
688
738
|
border:var(--button-active-border);
|
|
689
739
|
}
|
|
690
|
-
.bp_base_button_module_button--
|
|
740
|
+
.bp_base_button_module_button--31640.bp_base_button_module_outline--31640{
|
|
691
741
|
backdrop-filter:var(--button-backdrop-filter);
|
|
692
742
|
background:var(--button-background);
|
|
693
743
|
border:var(--button-border);
|
|
694
744
|
color:var(--button-color);
|
|
695
745
|
}
|
|
696
|
-
.bp_base_button_module_button--
|
|
746
|
+
.bp_base_button_module_button--31640.bp_base_button_module_outline--31640:not(:disabled):hover,.bp_base_button_module_button--31640.bp_base_button_module_outline--31640:not(:disabled)[data-focus-visible]{
|
|
697
747
|
background:var(--button-focus-or-hover-background);
|
|
698
748
|
border:var(--button-focus-or-hover-border);
|
|
699
749
|
}
|
|
700
|
-
.bp_base_button_module_button--
|
|
750
|
+
.bp_base_button_module_button--31640.bp_base_button_module_outline--31640:not(:disabled):active{
|
|
701
751
|
background:var(--button-active-background);
|
|
702
752
|
border:var(--button-active-border);
|
|
703
753
|
}
|
|
704
|
-
.bp_base_button_module_button--
|
|
754
|
+
.bp_base_button_module_button--31640.bp_base_button_module_small--31640{
|
|
705
755
|
gap:var(--button-small-gap);
|
|
706
756
|
min-height:var(--button-small-min-height);
|
|
707
757
|
padding:var(--button-small-padding);
|
|
708
758
|
}
|
|
709
|
-
.bp_base_button_module_button--
|
|
759
|
+
.bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isIconButton--31640{
|
|
710
760
|
height:var(--icon-button-small-height);
|
|
711
761
|
min-height:unset;
|
|
712
762
|
padding:var(--icon-button-small-padding);
|
|
713
763
|
width:var(--icon-button-small-width);
|
|
714
764
|
}
|
|
715
|
-
.bp_base_button_module_button--
|
|
765
|
+
.bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconEndButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isTextWithIconStartButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
716
766
|
padding:var(--button-small-padding);
|
|
717
767
|
}
|
|
718
|
-
.bp_base_button_module_button--
|
|
768
|
+
.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640{
|
|
769
|
+
gap:var(--button-x-small-gap);
|
|
770
|
+
min-height:var(--button-x-small-min-height);
|
|
771
|
+
padding:var(--button-x-small-padding);
|
|
772
|
+
}
|
|
773
|
+
.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isIconButton--31640{
|
|
774
|
+
height:var(--icon-button-x-small-height);
|
|
775
|
+
min-height:unset;
|
|
776
|
+
padding:var(--icon-button-x-small-padding);
|
|
777
|
+
width:var(--icon-button-x-small-width);
|
|
778
|
+
}
|
|
779
|
+
.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconEndButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithIconStartButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_quaternary--31640.bp_base_button_module_x-small--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
780
|
+
padding:var(--button-x-small-padding);
|
|
781
|
+
}
|
|
782
|
+
.bp_base_button_module_button--31640.bp_base_button_module_large--31640{
|
|
719
783
|
font-size:var(--button-large-font-size);
|
|
720
784
|
gap:var(--button-large-gap);
|
|
721
785
|
line-height:var(--button-large-line-height);
|
|
722
786
|
min-height:var(--button-large-min-height);
|
|
723
787
|
padding:var(--button-large-padding);
|
|
724
788
|
}
|
|
725
|
-
.bp_base_button_module_button--
|
|
789
|
+
.bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isIconButton--31640{
|
|
726
790
|
height:var(--icon-button-large-height);
|
|
727
791
|
padding:var(--icon-button-large-padding);
|
|
728
792
|
width:var(--icon-button-large-width);
|
|
729
793
|
}
|
|
730
|
-
.bp_base_button_module_button--
|
|
794
|
+
.bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconEndButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isTextWithIconStartButton--31640,.bp_base_button_module_button--31640.bp_base_button_module_large--31640.bp_base_button_module_isTextWithStartAndEndIconButton--31640{
|
|
731
795
|
padding:var(--button-large-padding);
|
|
732
796
|
}
|
|
733
|
-
.bp_base_button_module_button--
|
|
797
|
+
.bp_base_button_module_button--31640.bp_base_button_module_hide--31640{
|
|
734
798
|
pointer-events:none;
|
|
735
799
|
position:relative;
|
|
736
800
|
}
|
|
737
|
-
.bp_base_button_module_button--
|
|
801
|
+
.bp_base_button_module_button--31640.bp_base_button_module_hide--31640 span{
|
|
738
802
|
color:#0000;
|
|
739
803
|
opacity:0;
|
|
740
804
|
}
|
|
@@ -13350,11 +13414,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13350
13414
|
.bp_time_picker_module_timePicker--41158 .bp_time_picker_module_inlineError--41158{
|
|
13351
13415
|
margin-block-start:var(--time-picker-inline-error-margin-top);
|
|
13352
13416
|
}
|
|
13353
|
-
.bp_toolbar_module_dropdownIndicator--
|
|
13417
|
+
.bp_toolbar_module_dropdownIndicator--c54d6.bp_toolbar_module_invertCaret--c54d6{
|
|
13354
13418
|
transform:rotate(.5turn);
|
|
13355
13419
|
}
|
|
13356
13420
|
|
|
13357
|
-
.bp_toolbar_module_toolbarRoot--
|
|
13421
|
+
.bp_toolbar_module_toolbarRoot--c54d6[data-modern=false]{
|
|
13358
13422
|
--toolbar-root-gap:var(--space-1);
|
|
13359
13423
|
--toolbar-root-padding:calc(var(--space-1) - var(--border-1));
|
|
13360
13424
|
--toolbar-root-background:var(--surface-surface);
|
|
@@ -13368,9 +13432,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13368
13432
|
--toolbar-separator-height:var(--size-6);
|
|
13369
13433
|
--toolbar-separator-background:var(--border-divider-border);
|
|
13370
13434
|
--toolbar-separator-border-radius:var(--radius-2);
|
|
13435
|
+
--toolbar-link-color:var(--text-cta-link);
|
|
13436
|
+
--toolbar-link-hover-color:var(--text-cta-link-hover);
|
|
13437
|
+
--toolbar-link-padding-inline:var(--space-2);
|
|
13438
|
+
--toolbar-link-max-width:400px;
|
|
13371
13439
|
}
|
|
13372
13440
|
|
|
13373
|
-
.bp_toolbar_module_toolbarRoot--
|
|
13441
|
+
.bp_toolbar_module_toolbarRoot--c54d6[data-modern=true]{
|
|
13374
13442
|
--box-shadow:0 4px 12px 0 #0000001a;
|
|
13375
13443
|
--toolbar-root-gap:var(--bp-space-010);
|
|
13376
13444
|
--toolbar-root-padding:var(--bp-space-010);
|
|
@@ -13386,12 +13454,16 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13386
13454
|
--toolbar-separator-background:var(--bp-border-divider-border);
|
|
13387
13455
|
--toolbar-separator-border-radius:var(--bp-radius-03);
|
|
13388
13456
|
--toolbar-toggle-group-gap:var(--bp-space-010);
|
|
13457
|
+
--toolbar-link-color:var(--bp-text-cta-link);
|
|
13458
|
+
--toolbar-link-hover-color:var(--bp-text-cta-link-hover);
|
|
13459
|
+
--toolbar-link-padding-inline:var(--bp-space-020);
|
|
13460
|
+
--toolbar-link-max-width:400px;
|
|
13389
13461
|
}
|
|
13390
|
-
.bp_toolbar_module_toolbarRoot--
|
|
13462
|
+
.bp_toolbar_module_toolbarRoot--c54d6[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--c54d6{
|
|
13391
13463
|
--toolbar-root-padding:0;
|
|
13392
13464
|
}
|
|
13393
13465
|
|
|
13394
|
-
.bp_toolbar_module_toolbarItem--
|
|
13466
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=false]{
|
|
13395
13467
|
--toolbar-item-min-width:var(--size-8);
|
|
13396
13468
|
--toolbar-item-min-height:var(--size-8);
|
|
13397
13469
|
--toolbar-item-text-indent:var(--space-1);
|
|
@@ -13402,7 +13474,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13402
13474
|
--toolbar-item-off-hover-background:var(--surface-toggle-surface-hover);
|
|
13403
13475
|
--toolbar-item-off-hover-border:var(--border-1) solid var(--surface-toggle-surface-hover);
|
|
13404
13476
|
--toolbar-item-focus-outline:var(--outline-focus-on-light);
|
|
13405
|
-
--toolbar-item-disabled-opacity
|
|
13477
|
+
--toolbar-item-disabled-opacity:0.3;
|
|
13406
13478
|
--toolbar-toggle-on-pressed-border:none;
|
|
13407
13479
|
--toolbar-toggle-on-pressed-background:var(--surface-toggle-surface-pressed);
|
|
13408
13480
|
--toolbar-toggle-icon-fill:var(--icon-icon-on-dark);
|
|
@@ -13425,9 +13497,9 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13425
13497
|
--toolbar-text-toggle-checked-hover-border-color:var(--border-toggletext-border-on-hover);
|
|
13426
13498
|
--toolbar-text-toggle-checked-active-background:var(--surface-toggletext-surface-on-pressed);
|
|
13427
13499
|
--toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
|
|
13428
|
-
--trigger-button-hover-opacity
|
|
13500
|
+
--trigger-button-hover-opacity:0.7;
|
|
13429
13501
|
}
|
|
13430
|
-
.bp_toolbar_module_toolbarItem--
|
|
13502
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarButton--c54d6,.bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--c54d6{
|
|
13431
13503
|
font-family:var(--body-default-font-family);
|
|
13432
13504
|
font-size:var(--body-default-font-size);
|
|
13433
13505
|
font-weight:var(--body-default-font-weight);
|
|
@@ -13436,8 +13508,17 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13436
13508
|
text-decoration:var(--body-default-text-decoration);
|
|
13437
13509
|
text-transform:var(--body-default-text-case);
|
|
13438
13510
|
}
|
|
13511
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarLink--c54d6{
|
|
13512
|
+
font-family:var(--body-default-bold-font-family);
|
|
13513
|
+
font-size:var(--body-default-bold-font-size);
|
|
13514
|
+
font-weight:var(--body-default-bold-font-weight);
|
|
13515
|
+
letter-spacing:var(--body-default-bold-letter-spacing);
|
|
13516
|
+
line-height:var(--body-default-bold-line-height);
|
|
13517
|
+
text-decoration:var(--body-default-bold-text-decoration);
|
|
13518
|
+
text-transform:var(--body-default-bold-text-case);
|
|
13519
|
+
}
|
|
13439
13520
|
|
|
13440
|
-
.bp_toolbar_module_toolbarItem--
|
|
13521
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true]{
|
|
13441
13522
|
--toolbar-item-min-width:var(--bp-size-080);
|
|
13442
13523
|
--toolbar-item-min-height:var(--bp-size-080);
|
|
13443
13524
|
--toolbar-item-text-indent:var(--bp-space-010);
|
|
@@ -13448,7 +13529,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13448
13529
|
--toolbar-item-off-hover-background:var(--bp-surface-toggle-surface-hover);
|
|
13449
13530
|
--toolbar-item-off-hover-border:var(--bp-border-01) solid var(--bp-surface-toggle-surface-hover);
|
|
13450
13531
|
--toolbar-item-focus-outline:var(--bp-outline-focus-on-light);
|
|
13451
|
-
--toolbar-item-disabled-opacity
|
|
13532
|
+
--toolbar-item-disabled-opacity:0.3;
|
|
13452
13533
|
--toolbar-toggle-on-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
|
|
13453
13534
|
--toolbar-toggle-on-pressed-background:var(--bp-surface-toggle-surface-on);
|
|
13454
13535
|
--toolbar-toggle-icon-fill:var(--bp-icon-icon-blue);
|
|
@@ -13471,30 +13552,30 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13471
13552
|
--toolbar-text-toggle-checked-hover-border-color:var(--bp-border-toggle-text-border-on-hover);
|
|
13472
13553
|
--toolbar-text-toggle-checked-active-background:var(--bp-surface-toggle-text-surface-on-pressed);
|
|
13473
13554
|
--toolbar-text-toggle-checked-active-border-color:var(--bp-border-toggle-text-border-on-pressed);
|
|
13474
|
-
--trigger-button-hover-opacity
|
|
13475
|
-
--trigger-button-active-opacity
|
|
13555
|
+
--trigger-button-hover-opacity:0.65;
|
|
13556
|
+
--trigger-button-active-opacity:0.8;
|
|
13476
13557
|
}
|
|
13477
|
-
.bp_toolbar_module_toolbarItem--
|
|
13558
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true]:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-active]{
|
|
13478
13559
|
background:var(--bp-surface-toggle-surface-off-pressed);
|
|
13479
13560
|
border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
|
|
13480
13561
|
}
|
|
13481
|
-
.bp_toolbar_module_toolbarItem--
|
|
13562
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on][data-active]{
|
|
13482
13563
|
background:var(--bp-surface-toggle-surface-on-pressed);
|
|
13483
13564
|
border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
|
|
13484
13565
|
}
|
|
13485
|
-
.bp_toolbar_module_toolbarItem--
|
|
13566
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--c54d6{
|
|
13486
13567
|
transform:rotate(1turn);
|
|
13487
13568
|
}
|
|
13488
|
-
.bp_toolbar_module_toolbarItem--
|
|
13569
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-active]{
|
|
13489
13570
|
background-color:var(--toolbar-button-color);
|
|
13490
13571
|
opacity:var(--trigger-button-active-opacity);
|
|
13491
13572
|
}
|
|
13492
|
-
.bp_toolbar_module_toolbarItem--
|
|
13573
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on]:hover{
|
|
13493
13574
|
background-color:var(--toolbar-button-color);
|
|
13494
13575
|
border-color:var(--toolbar-button-color);
|
|
13495
13576
|
opacity:var(--trigger-button-hover-opacity);
|
|
13496
13577
|
}
|
|
13497
|
-
.bp_toolbar_module_toolbarItem--
|
|
13578
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarButton--c54d6,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--c54d6{
|
|
13498
13579
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
13499
13580
|
font-size:var(--bp-font-size-07);
|
|
13500
13581
|
font-style:normal;
|
|
@@ -13502,16 +13583,24 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13502
13583
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
13503
13584
|
line-height:var(--bp-font-line-height-05);
|
|
13504
13585
|
}
|
|
13586
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarLink--c54d6{
|
|
13587
|
+
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
13588
|
+
font-size:var(--bp-font-size-05);
|
|
13589
|
+
font-style:normal;
|
|
13590
|
+
font-weight:var(--bp-font-weight-bold);
|
|
13591
|
+
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
13592
|
+
line-height:var(--bp-font-line-height-04);
|
|
13593
|
+
}
|
|
13505
13594
|
|
|
13506
|
-
.bp_toolbar_module_toggleGroup--
|
|
13595
|
+
.bp_toolbar_module_toggleGroup--c54d6[data-modern=false]{
|
|
13507
13596
|
--toolbar-toggle-group-gap:var(--space-1);
|
|
13508
13597
|
}
|
|
13509
13598
|
|
|
13510
|
-
.bp_toolbar_module_toggleGroup--
|
|
13599
|
+
.bp_toolbar_module_toggleGroup--c54d6[data-modern=true]{
|
|
13511
13600
|
--toolbar-toggle-group-gap:var(--bp-space-010);
|
|
13512
13601
|
}
|
|
13513
13602
|
|
|
13514
|
-
.bp_toolbar_module_toolbarRoot--
|
|
13603
|
+
.bp_toolbar_module_toolbarRoot--c54d6{
|
|
13515
13604
|
align-items:center;
|
|
13516
13605
|
background:var(--toolbar-root-background);
|
|
13517
13606
|
border:var(--toolbar-root-border);
|
|
@@ -13522,23 +13611,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13522
13611
|
padding:var(--toolbar-root-padding);
|
|
13523
13612
|
}
|
|
13524
13613
|
|
|
13525
|
-
.bp_toolbar_module_scrollButtonWrapper--
|
|
13614
|
+
.bp_toolbar_module_scrollButtonWrapper--c54d6{
|
|
13526
13615
|
align-items:center;
|
|
13527
13616
|
display:flex;
|
|
13528
13617
|
gap:var(--toolbar-scroll-button-gap);
|
|
13529
13618
|
}
|
|
13530
|
-
.bp_toolbar_module_scrollButtonWrapper--
|
|
13619
|
+
.bp_toolbar_module_scrollButtonWrapper--c54d6.bp_toolbar_module_hidden--c54d6{
|
|
13531
13620
|
display:none;
|
|
13532
13621
|
}
|
|
13533
13622
|
|
|
13534
|
-
.bp_toolbar_module_scrollableChildrenWrapper--
|
|
13623
|
+
.bp_toolbar_module_scrollableChildrenWrapper--c54d6{
|
|
13535
13624
|
-ms-overflow-style:none;
|
|
13536
13625
|
scrollbar-width:none;
|
|
13537
13626
|
}
|
|
13538
|
-
.bp_toolbar_module_scrollableChildrenWrapper--
|
|
13627
|
+
.bp_toolbar_module_scrollableChildrenWrapper--c54d6::-webkit-scrollbar{
|
|
13539
13628
|
display:none;
|
|
13540
13629
|
}
|
|
13541
|
-
.bp_toolbar_module_scrollableChildrenWrapper--
|
|
13630
|
+
.bp_toolbar_module_scrollableChildrenWrapper--c54d6{
|
|
13542
13631
|
align-items:center;
|
|
13543
13632
|
display:flex;
|
|
13544
13633
|
flex-grow:1;
|
|
@@ -13549,23 +13638,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13549
13638
|
scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
|
|
13550
13639
|
white-space:nowrap;
|
|
13551
13640
|
}
|
|
13552
|
-
.bp_toolbar_module_scrollableChildrenWrapper--
|
|
13641
|
+
.bp_toolbar_module_scrollableChildrenWrapper--c54d6 > *{
|
|
13553
13642
|
flex:none;
|
|
13554
13643
|
}
|
|
13555
13644
|
|
|
13556
|
-
.bp_toolbar_module_separator--
|
|
13645
|
+
.bp_toolbar_module_separator--c54d6{
|
|
13557
13646
|
background-color:var(--toolbar-separator-background);
|
|
13558
13647
|
border-radius:var(--toolbar-separator-border-radius);
|
|
13559
13648
|
height:var(--toolbar-separator-height);
|
|
13560
13649
|
width:1px;
|
|
13561
13650
|
}
|
|
13562
13651
|
|
|
13563
|
-
.bp_toolbar_module_toggleGroup--
|
|
13652
|
+
.bp_toolbar_module_toggleGroup--c54d6{
|
|
13564
13653
|
display:flex;
|
|
13565
13654
|
gap:var(--toolbar-toggle-group-gap);
|
|
13566
13655
|
}
|
|
13567
13656
|
|
|
13568
|
-
.bp_toolbar_module_toolbarItem--
|
|
13657
|
+
.bp_toolbar_module_toolbarItem--c54d6{
|
|
13569
13658
|
align-items:center;
|
|
13570
13659
|
background:var(--toolbar-button-color, var(--toolbar-item-background));
|
|
13571
13660
|
border:var(--toolbar-item-border);
|
|
@@ -13583,41 +13672,41 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13583
13672
|
-webkit-user-select:none;
|
|
13584
13673
|
user-select:none;
|
|
13585
13674
|
}
|
|
13586
|
-
.bp_toolbar_module_toolbarItem--
|
|
13675
|
+
.bp_toolbar_module_toolbarItem--c54d6[data-disabled]{
|
|
13587
13676
|
background:var(--toolbar-item-background);
|
|
13588
13677
|
opacity:var(--toolbar-item-disabled-opacity);
|
|
13589
13678
|
pointer-events:none;
|
|
13590
13679
|
}
|
|
13591
|
-
.bp_toolbar_module_toolbarItem--
|
|
13680
|
+
.bp_toolbar_module_toolbarItem--c54d6:not([data-disabled]):focus-visible{
|
|
13592
13681
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--toolbar-item-focus-outline);
|
|
13593
13682
|
}
|
|
13594
|
-
.bp_toolbar_module_toolbarItem--
|
|
13683
|
+
.bp_toolbar_module_toolbarItem--c54d6:not([data-disabled]):hover{
|
|
13595
13684
|
background:var(--toolbar-button-color, var(--toolbar-item-off-hover-background));
|
|
13596
13685
|
border:var(--toolbar-item-off-hover-border);
|
|
13597
13686
|
}
|
|
13598
13687
|
|
|
13599
|
-
.bp_toolbar_module_toolbarToggle--
|
|
13688
|
+
.bp_toolbar_module_toolbarToggle--c54d6[data-state=on]{
|
|
13600
13689
|
background:var(--toolbar-toggle-on-pressed-background);
|
|
13601
13690
|
border:var(--toolbar-toggle-on-pressed-border);
|
|
13602
13691
|
}
|
|
13603
|
-
.bp_toolbar_module_toolbarToggle--
|
|
13692
|
+
.bp_toolbar_module_toolbarToggle--c54d6[data-state=on] svg *{
|
|
13604
13693
|
fill:var(--toolbar-toggle-icon-fill);
|
|
13605
13694
|
}
|
|
13606
|
-
.bp_toolbar_module_toolbarToggle--
|
|
13695
|
+
.bp_toolbar_module_toolbarToggle--c54d6[data-state=on]:not([data-disabled]):hover{
|
|
13607
13696
|
background:var(--toolbar-toggle-on-hover-background);
|
|
13608
13697
|
border:var(--toolbar-toggle-on-hover-border);
|
|
13609
13698
|
}
|
|
13610
13699
|
|
|
13611
|
-
.bp_toolbar_module_triggerButtonSelectedWithColor--
|
|
13700
|
+
.bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on] .bp_toolbar_module_dropdownIndicator--c54d6 path{
|
|
13612
13701
|
fill:var(--icon-icon-on-light);
|
|
13613
13702
|
}
|
|
13614
|
-
.bp_toolbar_module_triggerButtonSelectedWithColor--
|
|
13703
|
+
.bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on]:hover{
|
|
13615
13704
|
background-color:var(--toolbar-button-color);
|
|
13616
13705
|
border-color:var(--toolbar-button-color);
|
|
13617
13706
|
opacity:var(--trigger-button-hover-opacity);
|
|
13618
13707
|
}
|
|
13619
13708
|
|
|
13620
|
-
.bp_toolbar_module_toolbarIcon--
|
|
13709
|
+
.bp_toolbar_module_toolbarIcon--c54d6{
|
|
13621
13710
|
align-items:center;
|
|
13622
13711
|
display:flex;
|
|
13623
13712
|
height:var(--toolbar-icon-height);
|
|
@@ -13625,31 +13714,182 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
13625
13714
|
width:var(--toolbar-icon-width);
|
|
13626
13715
|
}
|
|
13627
13716
|
|
|
13628
|
-
.
|
|
13717
|
+
.bp_toolbar_module_toolbarLink--c54d6{
|
|
13718
|
+
color:var(--toolbar-link-color);
|
|
13719
|
+
max-width:var(--toolbar-link-max-width);
|
|
13720
|
+
padding-inline:var(--toolbar-link-padding-inline);
|
|
13721
|
+
text-decoration:none;
|
|
13722
|
+
text-indent:unset;
|
|
13723
|
+
}
|
|
13724
|
+
|
|
13725
|
+
.bp_toolbar_module_toolbarLinkText--c54d6{
|
|
13726
|
+
display:block;
|
|
13727
|
+
min-width:0;
|
|
13728
|
+
overflow:hidden;
|
|
13729
|
+
text-overflow:ellipsis;
|
|
13730
|
+
white-space:nowrap;
|
|
13731
|
+
}
|
|
13732
|
+
|
|
13733
|
+
.bp_toolbar_module_toolbarInputContainer--c54d6{
|
|
13734
|
+
align-items:center;
|
|
13735
|
+
display:flex;
|
|
13736
|
+
flex:1 1 0;
|
|
13737
|
+
min-width:0;
|
|
13738
|
+
position:relative;
|
|
13739
|
+
}
|
|
13740
|
+
|
|
13741
|
+
.bp_toolbar_module_toolbarInputContainer--c54d6:has(.bp_toolbar_module_toolbarInput--c54d6[data-modern=false]){
|
|
13742
|
+
--toolbar-input-height:var(--size-8);
|
|
13743
|
+
--toolbar-input-padding-block:var(--space-2);
|
|
13744
|
+
--toolbar-input-padding-inline:var(--space-3);
|
|
13745
|
+
--toolbar-input-gap:var(--space-2);
|
|
13746
|
+
--toolbar-input-background:var(--surface-input-surface);
|
|
13747
|
+
--toolbar-input-border-width:var(--border-1);
|
|
13748
|
+
--toolbar-input-border-color:var(--border-input-border);
|
|
13749
|
+
--toolbar-input-border-color-focus:var(--border-input-border-focus);
|
|
13750
|
+
--toolbar-input-border-radius:var(--radius-4);
|
|
13751
|
+
--toolbar-input-box-shadow:var(--innershadow-1);
|
|
13752
|
+
--toolbar-input-color:var(--text-text-on-light);
|
|
13753
|
+
--toolbar-input-placeholder-color:var(--text-text-on-light-secondary);
|
|
13754
|
+
--toolbar-input-focus-border-width:var(--border-2);
|
|
13755
|
+
--toolbar-input-disabled-color:var(--text-text-on-light);
|
|
13756
|
+
--toolbar-input-disabled-background:var(--surface-input-surface);
|
|
13757
|
+
--toolbar-input-disabled-border-color:var(--border-input-border);
|
|
13758
|
+
--toolbar-input-hover-border-color:var(--border-input-border-hover);
|
|
13759
|
+
--toolbar-input-error-border-color:var(--border-input-border-error);
|
|
13760
|
+
--toolbar-input-error-border-width:var(--border-2);
|
|
13761
|
+
--toolbar-input-icon-size:var(--size-5);
|
|
13762
|
+
--toolbar-input-icon-padding:var(--space-2);
|
|
13763
|
+
--toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
|
|
13764
|
+
}
|
|
13765
|
+
|
|
13766
|
+
.bp_toolbar_module_toolbarInputContainer--c54d6:has(.bp_toolbar_module_toolbarInput--c54d6[data-modern=true]){
|
|
13767
|
+
--toolbar-input-height:var(--bp-size-080);
|
|
13768
|
+
--toolbar-input-padding-block:var(--bp-space-020);
|
|
13769
|
+
--toolbar-input-padding-inline:var(--bp-space-030);
|
|
13770
|
+
--toolbar-input-gap:var(--bp-space-020);
|
|
13771
|
+
--toolbar-input-background:var(--bp-surface-input-surface);
|
|
13772
|
+
--toolbar-input-border-width:var(--bp-border-01);
|
|
13773
|
+
--toolbar-input-border-color:var(--bp-border-input-border);
|
|
13774
|
+
--toolbar-input-border-color-focus:var(--bp-border-input-border-focus);
|
|
13775
|
+
--toolbar-input-border-radius:var(--bp-radius-12);
|
|
13776
|
+
--toolbar-input-box-shadow:var(--innershadow-1);
|
|
13777
|
+
--toolbar-input-color:var(--bp-text-text-on-light);
|
|
13778
|
+
--toolbar-input-placeholder-color:var(--bp-text-text-on-light-secondary);
|
|
13779
|
+
--toolbar-input-focus-border-width:var(--bp-border-02);
|
|
13780
|
+
--toolbar-input-disabled-color:var(--bp-text-text-on-light);
|
|
13781
|
+
--toolbar-input-disabled-background:var(--bp-surface-input-surface);
|
|
13782
|
+
--toolbar-input-disabled-border-color:var(--bp-border-input-border);
|
|
13783
|
+
--toolbar-input-hover-border-color:var(--bp-border-input-border-hover);
|
|
13784
|
+
--toolbar-input-error-border-color:var(--bp-border-input-border-error);
|
|
13785
|
+
--toolbar-input-error-border-width:var(--bp-border-02);
|
|
13786
|
+
--toolbar-input-icon-size:var(--bp-size-050);
|
|
13787
|
+
--toolbar-input-icon-padding:var(--bp-space-020);
|
|
13788
|
+
--toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
|
|
13789
|
+
}
|
|
13790
|
+
|
|
13791
|
+
.bp_toolbar_module_toolbarInput--c54d6{
|
|
13792
|
+
background:var(--toolbar-input-background);
|
|
13793
|
+
border:var(--toolbar-input-border-width) solid var(--toolbar-input-border-color);
|
|
13794
|
+
border-radius:var(--toolbar-input-border-radius);
|
|
13795
|
+
box-shadow:var(--toolbar-input-box-shadow);
|
|
13796
|
+
box-sizing:border-box;
|
|
13797
|
+
color:var(--toolbar-input-color);
|
|
13798
|
+
gap:var(--toolbar-input-gap);
|
|
13799
|
+
height:var(--toolbar-input-height);
|
|
13800
|
+
min-width:0;
|
|
13801
|
+
outline:none;
|
|
13802
|
+
padding-block:var(--toolbar-input-padding-block);
|
|
13803
|
+
padding-inline:var(--toolbar-input-padding-inline);
|
|
13804
|
+
width:100%;
|
|
13805
|
+
}
|
|
13806
|
+
.bp_toolbar_module_toolbarInput--c54d6[data-modern=false]{
|
|
13807
|
+
font-family:var(--body-default-font-family);
|
|
13808
|
+
font-size:var(--body-default-font-size);
|
|
13809
|
+
font-weight:var(--body-default-font-weight);
|
|
13810
|
+
letter-spacing:var(--body-default-letter-spacing);
|
|
13811
|
+
line-height:var(--body-default-line-height);
|
|
13812
|
+
text-decoration:var(--body-default-text-decoration);
|
|
13813
|
+
text-transform:var(--body-default-text-case);
|
|
13814
|
+
}
|
|
13815
|
+
.bp_toolbar_module_toolbarInput--c54d6[data-modern=true]{
|
|
13816
|
+
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
13817
|
+
font-size:var(--bp-font-size-07);
|
|
13818
|
+
font-style:normal;
|
|
13819
|
+
font-weight:var(--bp-font-weight-regular);
|
|
13820
|
+
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
13821
|
+
line-height:var(--bp-font-line-height-05);
|
|
13822
|
+
}
|
|
13823
|
+
.bp_toolbar_module_toolbarInput--c54d6::placeholder{
|
|
13824
|
+
color:var(--toolbar-input-placeholder-color);
|
|
13825
|
+
opacity:1;
|
|
13826
|
+
}
|
|
13827
|
+
.bp_toolbar_module_toolbarInput--c54d6:focus-visible{
|
|
13828
|
+
--toolbar-input-border-offset:calc(var(--toolbar-input-focus-border-width) - var(--toolbar-input-border-width));
|
|
13829
|
+
border:var(--toolbar-input-focus-border-width) solid var(--toolbar-input-border-color-focus);
|
|
13830
|
+
padding-inline-start:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-border-offset));
|
|
13831
|
+
}
|
|
13832
|
+
.bp_toolbar_module_toolbarInput--c54d6:disabled{
|
|
13833
|
+
background:var(--toolbar-input-disabled-background);
|
|
13834
|
+
border-color:var(--toolbar-input-disabled-border-color);
|
|
13835
|
+
box-shadow:var(--toolbar-input-box-shadow);
|
|
13836
|
+
color:var(--toolbar-input-disabled-color);
|
|
13837
|
+
cursor:default;
|
|
13838
|
+
opacity:.5;
|
|
13839
|
+
}
|
|
13840
|
+
.bp_toolbar_module_toolbarInput--c54d6:has(+ .bp_toolbar_module_toolbarInputErrorIcon--c54d6){
|
|
13841
|
+
padding-inline-end:var(--toolbar-input-icon-end-pad);
|
|
13842
|
+
}
|
|
13843
|
+
.bp_toolbar_module_toolbarInput--c54d6:hover:not(:disabled, :focus-visible, .bp_toolbar_module_toolbarInputError--c54d6){
|
|
13844
|
+
border-color:var(--toolbar-input-hover-border-color);
|
|
13845
|
+
}
|
|
13846
|
+
|
|
13847
|
+
.bp_toolbar_module_toolbarInput--c54d6.bp_toolbar_module_toolbarInputError--c54d6{
|
|
13848
|
+
--toolbar-input-error-border-offset:calc(var(--toolbar-input-error-border-width) - var(--toolbar-input-border-width));
|
|
13849
|
+
border:var(--toolbar-input-error-border-width) solid var(--toolbar-input-error-border-color);
|
|
13850
|
+
padding-inline:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-error-border-offset)) calc(var(--toolbar-input-icon-end-pad) - var(--toolbar-input-error-border-offset));
|
|
13851
|
+
}
|
|
13852
|
+
|
|
13853
|
+
.bp_toolbar_module_toolbarInputErrorIcon--c54d6{
|
|
13854
|
+
color:var(--toolbar-input-error-border-color);
|
|
13855
|
+
height:var(--toolbar-input-icon-size);
|
|
13856
|
+
inset-inline-end:var(--toolbar-input-icon-padding);
|
|
13857
|
+
pointer-events:none;
|
|
13858
|
+
position:absolute;
|
|
13859
|
+
top:50%;
|
|
13860
|
+
transform:translateY(-50%);
|
|
13861
|
+
width:var(--toolbar-input-icon-size);
|
|
13862
|
+
}
|
|
13863
|
+
|
|
13864
|
+
.bp_toolbar_module_toolbarInputErrorIconHidden--c54d6{
|
|
13865
|
+
visibility:hidden;
|
|
13866
|
+
}
|
|
13867
|
+
|
|
13868
|
+
.bp_toolbar_module_toolbarTextToggleItem--c54d6{
|
|
13629
13869
|
border:var(--toolbar-text-toggle-off-border);
|
|
13630
13870
|
color:var(--toolbar-text-toggle-color);
|
|
13631
13871
|
padding-inline:var(--toolbar-text-toggle-padding-inline);
|
|
13632
13872
|
text-indent:unset;
|
|
13633
13873
|
white-space:nowrap;
|
|
13634
13874
|
}
|
|
13635
|
-
.bp_toolbar_module_toolbarTextToggleItem--
|
|
13875
|
+
.bp_toolbar_module_toolbarTextToggleItem--c54d6:hover{
|
|
13636
13876
|
background:var(--toolbar-text-toggle-hover-background);
|
|
13637
13877
|
border-color:var(--toolbar-text-toggle-hover-border-color);
|
|
13638
13878
|
}
|
|
13639
|
-
.bp_toolbar_module_toolbarTextToggleItem--
|
|
13879
|
+
.bp_toolbar_module_toolbarTextToggleItem--c54d6:active{
|
|
13640
13880
|
background:var(--toolbar-text-toggle-active-background);
|
|
13641
13881
|
border-color:var(--toolbar-text-toggle-active-border-color);
|
|
13642
13882
|
}
|
|
13643
|
-
.bp_toolbar_module_toolbarTextToggleItem--
|
|
13883
|
+
.bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]{
|
|
13644
13884
|
background:var(--toolbar-text-toggle-checked-background);
|
|
13645
13885
|
border:var(--toolbar-text-toggle-checked-border);
|
|
13646
13886
|
color:var(--toolbar-text-toggle-checked-color);
|
|
13647
13887
|
}
|
|
13648
|
-
.bp_toolbar_module_toolbarTextToggleItem--
|
|
13888
|
+
.bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]:hover{
|
|
13649
13889
|
background:var(--toolbar-text-toggle-checked-hover-background);
|
|
13650
13890
|
border-color:var(--toolbar-text-toggle-checked-hover-border-color);
|
|
13651
13891
|
}
|
|
13652
|
-
.bp_toolbar_module_toolbarTextToggleItem--
|
|
13892
|
+
.bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]:active{
|
|
13653
13893
|
background:var(--toolbar-text-toggle-checked-active-background);
|
|
13654
13894
|
border-color:var(--toolbar-text-toggle-checked-active-border-color);
|
|
13655
13895
|
}
|
|
@@ -34,6 +34,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
34
34
|
'aria-label': ariaLabel,
|
|
35
35
|
...rest
|
|
36
36
|
} = getButtonOptions(props);
|
|
37
|
+
const effectiveSize = size === 'x-small' && variant !== 'quaternary' ? 'small' : size;
|
|
37
38
|
const {
|
|
38
39
|
enableModernizedComponents
|
|
39
40
|
} = useBlueprintModernization();
|
|
@@ -46,15 +47,15 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
46
47
|
const context = useMemo(() => ({
|
|
47
48
|
ariaLabel,
|
|
48
49
|
loading,
|
|
49
|
-
size,
|
|
50
|
+
size: effectiveSize,
|
|
50
51
|
variant,
|
|
51
52
|
buttonType
|
|
52
|
-
}), [ariaLabel, loading,
|
|
53
|
+
}), [ariaLabel, loading, effectiveSize, variant, buttonType]);
|
|
53
54
|
return jsx(Button, {
|
|
54
55
|
...rest,
|
|
55
56
|
ref: useForkRef(ref, forwardedRef),
|
|
56
57
|
"aria-label": loading ? undefined : ariaLabel,
|
|
57
|
-
className: getButtonClassName(variant,
|
|
58
|
+
className: getButtonClassName(variant, effectiveSize, buttonType, loading, className),
|
|
58
59
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
59
60
|
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
60
61
|
children: jsxs(BaseButtonContext.Provider, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"button":"bp_base_button_module_button--
|
|
2
|
+
var styles = {"button":"bp_base_button_module_button--31640","primary":"bp_base_button_module_primary--31640","secondary":"bp_base_button_module_secondary--31640","tertiary":"bp_base_button_module_tertiary--31640","quaternary":"bp_base_button_module_quaternary--31640","tertiary-destructive":"bp_base_button_module_tertiary-destructive--31640","destructive":"bp_base_button_module_destructive--31640","outline":"bp_base_button_module_outline--31640","small":"bp_base_button_module_small--31640","isIconButton":"bp_base_button_module_isIconButton--31640","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--31640","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--31640","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--31640","x-small":"bp_base_button_module_x-small--31640","large":"bp_base_button_module_large--31640","icon":"bp_base_button_module_icon--31640","hide":"bp_base_button_module_hide--31640"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -10,8 +10,13 @@ export interface Loading {
|
|
|
10
10
|
export interface BaseButtonInterface extends AriakitButtonProps {
|
|
11
11
|
/** The visual style of the button. */
|
|
12
12
|
variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiary-destructive' | 'destructive' | 'quaternary' | 'outline';
|
|
13
|
-
/**
|
|
14
|
-
|
|
13
|
+
/**
|
|
14
|
+
* The size of the button.
|
|
15
|
+
*
|
|
16
|
+
* Note: `'x-small'` is only valid with `variant='quaternary'`. When used with any other
|
|
17
|
+
* variant, BaseButton falls back to `'small'`.
|
|
18
|
+
*/
|
|
19
|
+
size?: 'x-small' | 'small' | 'large';
|
|
15
20
|
}
|
|
16
21
|
export type BaseButtonProps = BaseButtonInterface & RequireAllOrNone<Loading, keyof Loading>;
|
|
17
22
|
export type BaseButtonPropsAll = BaseButtonInterface & Required<Loading>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconIconOnLight, TextCtaLinkSecondary, IconIconOnDark, TextTextDestructiveOnLight, TextCtaLink,
|
|
1
|
+
import { IconIconOnLight, TextCtaLinkSecondary, IconIconOnDark, TextTextDestructiveOnLight, TextCtaLink, bpSize040, Size4, bpSize050, Size5, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
2
2
|
import { Children, isValidElement } from 'react';
|
|
3
3
|
|
|
4
4
|
function getButtonTypeFromChildren(children, baseButtonIcon, baseButtonLabel) {
|
|
@@ -22,8 +22,11 @@ function getButtonTypeFromChildren(children, baseButtonIcon, baseButtonLabel) {
|
|
|
22
22
|
}
|
|
23
23
|
const getIconSize = (buttonSize, isIconButton, enableModernizedComponents = false) => {
|
|
24
24
|
const isLarge = buttonSize === 'large';
|
|
25
|
+
const isXSmall = buttonSize === 'x-small';
|
|
25
26
|
let size;
|
|
26
|
-
if (
|
|
27
|
+
if (isXSmall) {
|
|
28
|
+
size = enableModernizedComponents ? bpSize040 : Size4;
|
|
29
|
+
} else if (enableModernizedComponents && isIconButton) {
|
|
27
30
|
size = isLarge ? bpSize050 : bpSize040;
|
|
28
31
|
} else if (enableModernizedComponents && !isIconButton) {
|
|
29
32
|
size = isLarge ? bpSize050 : bpSize040;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
|
|
1
|
+
export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
|
|
4
4
|
* @example
|
|
@@ -9,6 +9,9 @@ export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type
|
|
|
9
9
|
* </Toolbar.ToggleGroup>
|
|
10
10
|
* <Toolbar.Separator />
|
|
11
11
|
*
|
|
12
|
+
* <Toolbar.Link href="https://box.com">box.com</Toolbar.Link>
|
|
13
|
+
* <Toolbar.Separator />
|
|
14
|
+
*
|
|
12
15
|
* <Toolbar.Button>
|
|
13
16
|
* share
|
|
14
17
|
* </Toolbar.Button>
|
|
@@ -48,10 +51,18 @@ export declare const Toolbar: {
|
|
|
48
51
|
* A button item.
|
|
49
52
|
*/
|
|
50
53
|
Button: import("react").ForwardRefExoticComponent<import("./types").ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
54
|
+
/**
|
|
55
|
+
* A text input field.
|
|
56
|
+
*/
|
|
57
|
+
Input: import("react").ForwardRefExoticComponent<import("./types").ToolbarInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
51
58
|
/**
|
|
52
59
|
* Component used to visually separate options in the Toolbar.
|
|
53
60
|
*/
|
|
54
61
|
Separator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toolbar").ToolbarSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
62
|
+
/**
|
|
63
|
+
* A link item.
|
|
64
|
+
*/
|
|
65
|
+
Link: import("react").ForwardRefExoticComponent<import("./types").ToolbarLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
55
66
|
/**
|
|
56
67
|
* Caret icon indicating dropdown.
|
|
57
68
|
*/
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ToolbarButton } from './toolbar-button.js';
|
|
2
2
|
import { ToolbarDropdownIndicator } from './toolbar-dropdown-indicator.js';
|
|
3
3
|
import { ToolbarIcon } from './toolbar-icon.js';
|
|
4
|
+
import { ToolbarInput } from './toolbar-input.js';
|
|
5
|
+
import { ToolbarLink } from './toolbar-link.js';
|
|
4
6
|
import { ToolbarRoot } from './toolbar-root.js';
|
|
5
7
|
import { ToolbarSeparator } from './toolbar-separator.js';
|
|
6
8
|
import { ToolbarToggleGroup } from './toolbar-toggle-group.js';
|
|
@@ -18,6 +20,9 @@ import { ToolbarTextToggleItem } from './toolbar-text-toggle-item.js';
|
|
|
18
20
|
* </Toolbar.ToggleGroup>
|
|
19
21
|
* <Toolbar.Separator />
|
|
20
22
|
*
|
|
23
|
+
* <Toolbar.Link href="https://box.com">box.com</Toolbar.Link>
|
|
24
|
+
* <Toolbar.Separator />
|
|
25
|
+
*
|
|
21
26
|
* <Toolbar.Button>
|
|
22
27
|
* share
|
|
23
28
|
* </Toolbar.Button>
|
|
@@ -57,10 +62,18 @@ const Toolbar = {
|
|
|
57
62
|
* A button item.
|
|
58
63
|
*/
|
|
59
64
|
Button: ToolbarButton,
|
|
65
|
+
/**
|
|
66
|
+
* A text input field.
|
|
67
|
+
*/
|
|
68
|
+
Input: ToolbarInput,
|
|
60
69
|
/**
|
|
61
70
|
* Component used to visually separate options in the Toolbar.
|
|
62
71
|
*/
|
|
63
72
|
Separator: ToolbarSeparator,
|
|
73
|
+
/**
|
|
74
|
+
* A link item.
|
|
75
|
+
*/
|
|
76
|
+
Link: ToolbarLink,
|
|
64
77
|
/**
|
|
65
78
|
* Caret icon indicating dropdown.
|
|
66
79
|
*/
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
|
+
import styles from './toolbar.module.js';
|
|
7
|
+
|
|
8
|
+
const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
9
|
+
const {
|
|
10
|
+
className,
|
|
11
|
+
error,
|
|
12
|
+
disabled,
|
|
13
|
+
...rest
|
|
14
|
+
} = props;
|
|
15
|
+
const {
|
|
16
|
+
enableModernizedComponents
|
|
17
|
+
} = useBlueprintModernization();
|
|
18
|
+
const showError = error && !disabled;
|
|
19
|
+
return jsxs("div", {
|
|
20
|
+
className: styles.toolbarInputContainer,
|
|
21
|
+
children: [jsx("input", {
|
|
22
|
+
...rest,
|
|
23
|
+
ref: forwardedRef,
|
|
24
|
+
className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
|
|
25
|
+
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
26
|
+
disabled: disabled,
|
|
27
|
+
"aria-invalid": showError || undefined
|
|
28
|
+
}), jsx(AlertCircle, {
|
|
29
|
+
"aria-hidden": "true",
|
|
30
|
+
className: clsx(styles.toolbarInputErrorIcon, !showError && styles.toolbarInputErrorIconHidden),
|
|
31
|
+
color: "currentColor"
|
|
32
|
+
})]
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
export { ToolbarInput };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
|
+
import styles from './toolbar.module.js';
|
|
7
|
+
|
|
8
|
+
const ToolbarLink = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
9
|
+
const {
|
|
10
|
+
children,
|
|
11
|
+
className,
|
|
12
|
+
...rest
|
|
13
|
+
} = props;
|
|
14
|
+
const {
|
|
15
|
+
enableModernizedComponents
|
|
16
|
+
} = useBlueprintModernization();
|
|
17
|
+
return jsx(ToolbarPrimitive.Link, {
|
|
18
|
+
...rest,
|
|
19
|
+
ref: forwardedRef,
|
|
20
|
+
className: clsx(styles.toolbarItem, styles.toolbarLink, className),
|
|
21
|
+
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
22
|
+
children: jsx("span", {
|
|
23
|
+
className: styles.toolbarLinkText,
|
|
24
|
+
children: children
|
|
25
|
+
})
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export { ToolbarLink };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--
|
|
2
|
+
var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--c54d6","invertCaret":"bp_toolbar_module_invertCaret--c54d6","toolbarRoot":"bp_toolbar_module_toolbarRoot--c54d6","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--c54d6","toolbarItem":"bp_toolbar_module_toolbarItem--c54d6","toolbarButton":"bp_toolbar_module_toolbarButton--c54d6","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--c54d6","toolbarLink":"bp_toolbar_module_toolbarLink--c54d6","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--c54d6","toggleGroup":"bp_toolbar_module_toggleGroup--c54d6","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--c54d6","hidden":"bp_toolbar_module_hidden--c54d6","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--c54d6","separator":"bp_toolbar_module_separator--c54d6","toolbarToggle":"bp_toolbar_module_toolbarToggle--c54d6","toolbarIcon":"bp_toolbar_module_toolbarIcon--c54d6","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--c54d6","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--c54d6","toolbarInput":"bp_toolbar_module_toolbarInput--c54d6","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--c54d6","toolbarInputError":"bp_toolbar_module_toolbarInputError--c54d6","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--c54d6"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
|
|
1
|
+
import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarLinkProps as ToolbarPrimitiveLinkProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
|
|
2
2
|
import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
|
|
3
3
|
interface ToolbarWithoutScrollProps {
|
|
4
4
|
scrollable?: false;
|
|
@@ -51,6 +51,26 @@ export interface ToolbarIconProps {
|
|
|
51
51
|
/** Icon rendered by the component. */
|
|
52
52
|
icon: React.FunctionComponent<React.PropsWithChildren<React.SVGProps<SVGSVGElement>>>;
|
|
53
53
|
}
|
|
54
|
+
export interface ToolbarInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
55
|
+
'aria-label': NonNullable<React.HTMLAttributes<HTMLInputElement>['aria-label']>;
|
|
56
|
+
/** Input type attribute.
|
|
57
|
+
* @default 'text'
|
|
58
|
+
*/
|
|
59
|
+
type?: 'text' | 'search' | 'url' | 'email' | 'tel';
|
|
60
|
+
/** Displays error styling with alert icon.
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
error?: boolean;
|
|
64
|
+
}
|
|
65
|
+
interface ToolbarLinkCSS extends CSSProperties {
|
|
66
|
+
/** Max width of the link before truncation with ellipsis.
|
|
67
|
+
* @default '400px'
|
|
68
|
+
*/
|
|
69
|
+
'--toolbar-link-max-width'?: string;
|
|
70
|
+
}
|
|
71
|
+
export interface ToolbarLinkProps extends Omit<ToolbarPrimitiveLinkProps, 'style'> {
|
|
72
|
+
style?: ToolbarLinkCSS;
|
|
73
|
+
}
|
|
54
74
|
export interface ToolbarDropdownIndicatorProps {
|
|
55
75
|
/** Direction in which by indicator is pointing.
|
|
56
76
|
* @default 'down'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type BaseButtonIconProps, type BaseButtonProps } from '../primitives/base-button';
|
|
2
|
-
export type TriggerButtonSize = 'extraSmall' | NonNullable<BaseButtonProps['size']>;
|
|
2
|
+
export type TriggerButtonSize = 'extraSmall' | Exclude<NonNullable<BaseButtonProps['size']>, 'x-small'>;
|
|
3
3
|
export type TriggerButtonProps = Omit<BaseButtonProps, 'size'> & {
|
|
4
4
|
/** Trigger button label */
|
|
5
5
|
label?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.36.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.120.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.120.2",
|
|
51
51
|
"@internationalized/date": "^3.12.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.19.
|
|
80
|
+
"@box/storybook-utils": "^0.19.17",
|
|
81
81
|
"@figma/code-connect": "1.4.4",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|