@ebay/skin 19.3.0 → 19.5.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/alert-dialog/alert-dialog.css +96 -6
- package/dist/bundles/skin-default.css +308 -59
- package/dist/bundles/skin-full.css +308 -59
- package/dist/bundles/skin-headless.css +308 -59
- package/dist/ccd/ccd.css +16 -8
- package/dist/chips-combobox/chips-combobox.css +2 -4
- package/dist/combobox/combobox.css +1 -2
- package/dist/confirm-dialog/confirm-dialog.css +90 -13
- package/dist/date-textbox/date-textbox.css +1 -2
- package/dist/drawer-dialog/drawer-dialog.css +2 -2
- package/dist/file-preview-card/file-preview-card.css +3 -3
- package/dist/filter-input/filter-input.css +55 -0
- package/dist/filter-menu-button/filter-menu-button.css +1 -2
- package/dist/fullscreen-dialog/fullscreen-dialog.css +2 -2
- package/dist/infotip/infotip.css +1 -2
- package/dist/lightbox-dialog/lightbox-dialog.css +84 -19
- package/dist/listbox/listbox.css +1 -2
- package/dist/listbox-button/listbox-button.css +1 -2
- package/dist/menu/menu.css +1 -2
- package/dist/menu-button/menu-button.css +1 -2
- package/dist/mixins/_utility-mixins.scss +1 -1
- package/dist/number-input/number-input.css +48 -0
- package/dist/panel-dialog/panel-dialog.css +2 -2
- package/dist/section-notice/section-notice.css +8 -4
- package/dist/snackbar-dialog/snackbar-dialog.css +2 -2
- package/dist/svg/icon/icon-audio-high-20.svg +7 -0
- package/dist/svg/icon/icon-audio-high-24.svg +7 -0
- package/dist/svg/icon/icon-audio-off-20.svg +7 -0
- package/dist/svg/icon/icon-audio-off-24.svg +7 -0
- package/dist/svg/icon/icon-card-stack-64.svg +7 -0
- package/dist/svg/icon/icon-coupon-16.svg +7 -0
- package/dist/svg/icon/icon-coupon-24.svg +7 -0
- package/dist/svg/icon/icon-discount-16.svg +1 -1
- package/dist/svg/icon/icon-discount-24.svg +1 -1
- package/dist/svg/icon/icon-discount-auto-16.svg +7 -0
- package/dist/svg/icon/icon-discount-auto-24.svg +7 -0
- package/dist/svg/icon/icon-dollar-off-24.svg +7 -0
- package/dist/svg/icon/icon-feedback-error-16.svg +7 -0
- package/dist/svg/icon/icon-feedback-error-24.svg +7 -0
- package/dist/svg/icon/icon-hand-swipe-40.svg +7 -0
- package/dist/svg/icon/icon-package-error-24.svg +7 -0
- package/dist/svg/icon/icon-pause-20.svg +7 -0
- package/dist/svg/icon/icon-pencil-signed-24.svg +7 -0
- package/dist/svg/icon/icon-play-20.svg +5 -0
- package/dist/svg/icon/icon-psa-logo-16.svg +7 -0
- package/dist/svg/icon/icon-psa-logo-color-16-colored.svg +10 -0
- package/dist/svg/icon/icon-psa-vault-16.svg +7 -2
- package/dist/svg/icon/icon-psa-vault-24.svg +12 -0
- package/dist/svg/icon/icon-psa-vault-logo-16.svg +7 -0
- package/dist/svg/icon/icon-psa-vault-logo-color-16-colored.svg +14 -0
- package/dist/svg/icon/icon-refresh-20.svg +7 -0
- package/dist/svg/icon/icon-trading-card-edition-24.svg +7 -0
- package/dist/svg/icons.svg +249 -63
- package/dist/table/table.css +4 -0
- package/dist/textbox/textbox.css +1 -1
- package/dist/toast-dialog/toast-dialog.css +2 -2
- package/dist/tooltip/tooltip.css +1 -2
- package/dist/tourtip/tourtip.css +1 -2
- package/eslint.config.mjs +4 -4
- package/filter-input.browser.json +1 -0
- package/filter-input.css +1 -0
- package/filter-input.js +1 -0
- package/filter-input.mjs +1 -0
- package/index.browser.json +2 -0
- package/index.css +2 -0
- package/index.js +2 -0
- package/index.mjs +83 -81
- package/number-input.browser.json +1 -0
- package/number-input.css +1 -0
- package/number-input.js +1 -0
- package/number-input.mjs +1 -0
- package/package.json +49 -49
|
@@ -677,11 +677,11 @@ ul.accordion--large summary.details__summary{
|
|
|
677
677
|
|
|
678
678
|
.alert-dialog__window{
|
|
679
679
|
background-color:var(--dialog-window-background-color, var(--color-background-primary));
|
|
680
|
-
border-radius:var(--lightbox-border-radius, var(--border-radius-
|
|
680
|
+
border-radius:var(--lightbox-border-radius, var(--border-radius-100));
|
|
681
681
|
display:flex;
|
|
682
682
|
flex:1 0 auto;
|
|
683
683
|
flex-direction:column;
|
|
684
|
-
margin:auto
|
|
684
|
+
margin:auto;
|
|
685
685
|
margin-left:var(--spacing-200);
|
|
686
686
|
margin-right:var(--spacing-200);
|
|
687
687
|
max-height:90%;
|
|
@@ -723,6 +723,30 @@ ul.accordion--large summary.details__summary{
|
|
|
723
723
|
.alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
|
|
724
724
|
transition:opacity .16s ease-out;
|
|
725
725
|
}
|
|
726
|
+
.alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
|
|
727
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
728
|
+
}
|
|
729
|
+
.alert-dialog--hide .alert-dialog__window--fade{
|
|
730
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
731
|
+
}
|
|
732
|
+
.alert-dialog--hide .alert-dialog__window--animate{
|
|
733
|
+
transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
734
|
+
}
|
|
735
|
+
.alert-dialog--hide .alert-dialog__window--animate>*{
|
|
736
|
+
transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
|
|
737
|
+
}
|
|
738
|
+
.alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
|
|
739
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
740
|
+
}
|
|
741
|
+
.alert-dialog--show .alert-dialog__window--fade{
|
|
742
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
743
|
+
}
|
|
744
|
+
.alert-dialog--show .alert-dialog__window--animate{
|
|
745
|
+
transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
746
|
+
}
|
|
747
|
+
.alert-dialog--show .alert-dialog__window--animate>*{
|
|
748
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
|
|
749
|
+
}
|
|
726
750
|
|
|
727
751
|
.alert-dialog--hide.alert-dialog--hide,.alert-dialog--hide.alert-dialog--show-init,.alert-dialog--show-init.alert-dialog--hide,.alert-dialog--show-init.alert-dialog--show-init{
|
|
728
752
|
display:flex;
|
|
@@ -730,7 +754,7 @@ ul.accordion--large summary.details__summary{
|
|
|
730
754
|
.alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow,.alert-dialog--show-init.alert-dialog--mask-fade,.alert-dialog--show-init.alert-dialog--mask-fade-slow{
|
|
731
755
|
background-color:var(--dialog-scrim-color-hide);
|
|
732
756
|
}
|
|
733
|
-
.alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show-init .alert-dialog__window--fade{
|
|
757
|
+
.alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide .alert-dialog__window--animate>*,.alert-dialog--hide .alert-dialog__window--fade,.alert-dialog--show-init .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate>*,.alert-dialog--show-init .alert-dialog__window--fade{
|
|
734
758
|
opacity:0;
|
|
735
759
|
}
|
|
736
760
|
|
|
@@ -740,14 +764,45 @@ ul.accordion--large summary.details__summary{
|
|
|
740
764
|
.alert-dialog--hide-init.alert-dialog--mask-fade,.alert-dialog--hide-init.alert-dialog--mask-fade-slow,.alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
|
|
741
765
|
background-color:var(--dialog-scrim-color-show);
|
|
742
766
|
}
|
|
743
|
-
.alert-dialog--hide-init .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--fade{
|
|
767
|
+
.alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--hide-init .alert-dialog__window--animate>*,.alert-dialog--hide-init .alert-dialog__window--fade,.alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate>*,.alert-dialog--show .alert-dialog__window--fade{
|
|
744
768
|
opacity:1;
|
|
745
769
|
}
|
|
746
770
|
|
|
771
|
+
@media (prefers-reduced-motion){
|
|
772
|
+
.alert-dialog--hide.alert-dialog--mask-fade,.alert-dialog--hide.alert-dialog--mask-fade-slow{
|
|
773
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
|
|
774
|
+
}
|
|
775
|
+
.alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide .alert-dialog__window--fade{
|
|
776
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
|
|
777
|
+
}
|
|
778
|
+
.alert-dialog--hide .alert-dialog__window--animate>*{
|
|
779
|
+
transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
|
|
780
|
+
}
|
|
781
|
+
.alert-dialog--show.alert-dialog--mask-fade,.alert-dialog--show.alert-dialog--mask-fade-slow{
|
|
782
|
+
transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
|
|
783
|
+
}
|
|
784
|
+
.alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--fade{
|
|
785
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
|
|
786
|
+
}
|
|
787
|
+
.alert-dialog--show .alert-dialog__window--animate>*{
|
|
788
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
.alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate{
|
|
792
|
+
transform:scale(1);
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
.alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate{
|
|
796
|
+
transform:scale(.75);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
@media (prefers-reduced-motion){
|
|
800
|
+
.alert-dialog--hide .alert-dialog__window--animate,.alert-dialog--hide-init .alert-dialog__window--animate,.alert-dialog--show .alert-dialog__window--animate,.alert-dialog--show-init .alert-dialog__window--animate{
|
|
801
|
+
transform:scale(1);
|
|
802
|
+
}
|
|
803
|
+
}
|
|
747
804
|
@media (min-width:768px){
|
|
748
805
|
.alert-dialog__window{
|
|
749
|
-
border-radius:var(--lightbox-border-radius, var(--border-radius-100));
|
|
750
|
-
margin:auto;
|
|
751
806
|
max-width:calc(88% - var(--spacing-400));
|
|
752
807
|
}
|
|
753
808
|
}
|
|
@@ -1729,14 +1784,19 @@ span.carousel,span.carousel__container{
|
|
|
1729
1784
|
.carousel--hidden-scrollbar .carousel__control--next{
|
|
1730
1785
|
right:0;
|
|
1731
1786
|
}
|
|
1787
|
+
@font-face{
|
|
1788
|
+
font-family:Reddit Sans Condensed Bold;
|
|
1789
|
+
src:url(https://ir.ebaystatic.com/cr/v/c01/Reddit_Sans_Condensed_Bold/RedditSansCondensed-Bold.ttf);
|
|
1790
|
+
}
|
|
1732
1791
|
.ccd{
|
|
1733
1792
|
display:inline-flex;
|
|
1793
|
+
font-family:Reddit Sans Condensed Bold,Market Sans,Arial,sans-serif;
|
|
1734
1794
|
gap:8px;
|
|
1735
1795
|
}
|
|
1736
1796
|
|
|
1737
1797
|
.ccd__charger-icon{
|
|
1738
|
-
height:
|
|
1739
|
-
width:
|
|
1798
|
+
height:57px;
|
|
1799
|
+
width:42px;
|
|
1740
1800
|
}
|
|
1741
1801
|
|
|
1742
1802
|
.ccd__description-figure{
|
|
@@ -1744,12 +1804,12 @@ span.carousel,span.carousel__container{
|
|
|
1744
1804
|
display:flex;
|
|
1745
1805
|
flex-direction:column;
|
|
1746
1806
|
justify-content:center;
|
|
1747
|
-
width:
|
|
1807
|
+
width:39px;
|
|
1748
1808
|
}
|
|
1749
1809
|
|
|
1750
1810
|
.ccd__top-icon{
|
|
1751
|
-
height:
|
|
1752
|
-
width:
|
|
1811
|
+
height:18px;
|
|
1812
|
+
width:27px;
|
|
1753
1813
|
}
|
|
1754
1814
|
|
|
1755
1815
|
.ccd__body{
|
|
@@ -1760,12 +1820,11 @@ span.carousel,span.carousel__container{
|
|
|
1760
1820
|
flex-direction:column;
|
|
1761
1821
|
font-size:.4375rem;
|
|
1762
1822
|
font-weight:var(--font-weight-bold);
|
|
1763
|
-
|
|
1764
|
-
height:53px;
|
|
1823
|
+
height:37px;
|
|
1765
1824
|
justify-content:center;
|
|
1766
1825
|
overflow:hidden;
|
|
1767
1826
|
text-align:center;
|
|
1768
|
-
width:
|
|
1827
|
+
width:39px;
|
|
1769
1828
|
}
|
|
1770
1829
|
.calendar{
|
|
1771
1830
|
color:var(--calendar-color-token, var(--color-foreground-primary));
|
|
@@ -2120,10 +2179,8 @@ button.chip__button>svg{
|
|
|
2120
2179
|
border:1px solid var(--color-stroke-default);
|
|
2121
2180
|
border-radius:var(--border-radius-50);
|
|
2122
2181
|
display:inline-block;
|
|
2123
|
-
padding-
|
|
2124
|
-
padding-inline
|
|
2125
|
-
padding-inline-start:var(--spacing-100);
|
|
2126
|
-
padding-top:var(--spacing-100);
|
|
2182
|
+
padding-block:var(--spacing-100);
|
|
2183
|
+
padding-inline:var(--spacing-100) var(--spacing-200);
|
|
2127
2184
|
position:relative;
|
|
2128
2185
|
}
|
|
2129
2186
|
|
|
@@ -2496,11 +2553,11 @@ span.combobox{
|
|
|
2496
2553
|
|
|
2497
2554
|
.confirm-dialog__window{
|
|
2498
2555
|
background-color:var(--dialog-window-background-color, var(--color-background-primary));
|
|
2499
|
-
border-radius:var(--lightbox-border-radius, var(--border-radius-
|
|
2556
|
+
border-radius:var(--lightbox-border-radius, var(--border-radius-100));
|
|
2500
2557
|
display:flex;
|
|
2501
2558
|
flex:1 0 auto;
|
|
2502
2559
|
flex-direction:column;
|
|
2503
|
-
margin:auto
|
|
2560
|
+
margin:auto;
|
|
2504
2561
|
margin-left:var(--spacing-200);
|
|
2505
2562
|
margin-right:var(--spacing-200);
|
|
2506
2563
|
max-height:90%;
|
|
@@ -2536,15 +2593,29 @@ span.combobox{
|
|
|
2536
2593
|
a.confirm-dialog__confirm,button.confirm-dialog__confirm{
|
|
2537
2594
|
margin-left:var(--spacing-100);
|
|
2538
2595
|
}
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
transition:background-color .16s ease-out;
|
|
2596
|
+
.confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
|
|
2597
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
2542
2598
|
}
|
|
2543
|
-
.confirm-dialog--hide.confirm-
|
|
2544
|
-
transition:
|
|
2599
|
+
.confirm-dialog--hide .confirm-dialog__window--fade{
|
|
2600
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
2545
2601
|
}
|
|
2546
|
-
.confirm-dialog--hide .confirm-dialog__window--
|
|
2547
|
-
transition:opacity
|
|
2602
|
+
.confirm-dialog--hide .confirm-dialog__window--animate{
|
|
2603
|
+
transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
2604
|
+
}
|
|
2605
|
+
.confirm-dialog--hide .confirm-dialog__window--animate>*{
|
|
2606
|
+
transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
|
|
2607
|
+
}
|
|
2608
|
+
.confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
|
|
2609
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
2610
|
+
}
|
|
2611
|
+
.confirm-dialog--show .confirm-dialog__window--fade{
|
|
2612
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
2613
|
+
}
|
|
2614
|
+
.confirm-dialog--show .confirm-dialog__window--animate{
|
|
2615
|
+
transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
2616
|
+
}
|
|
2617
|
+
.confirm-dialog--show .confirm-dialog__window--animate>*{
|
|
2618
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
|
|
2548
2619
|
}
|
|
2549
2620
|
|
|
2550
2621
|
.confirm-dialog--hide.confirm-dialog--hide,.confirm-dialog--hide.confirm-dialog--show-init,.confirm-dialog--show-init.confirm-dialog--hide,.confirm-dialog--show-init.confirm-dialog--show-init{
|
|
@@ -2553,7 +2624,7 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
|
|
|
2553
2624
|
.confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow,.confirm-dialog--show-init.confirm-dialog--mask-fade,.confirm-dialog--show-init.confirm-dialog--mask-fade-slow{
|
|
2554
2625
|
background-color:var(--dialog-scrim-color-hide);
|
|
2555
2626
|
}
|
|
2556
|
-
.confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show-init .confirm-dialog__window--fade{
|
|
2627
|
+
.confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide .confirm-dialog__window--animate>*,.confirm-dialog--hide .confirm-dialog__window--fade,.confirm-dialog--show-init .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate>*,.confirm-dialog--show-init .confirm-dialog__window--fade{
|
|
2557
2628
|
opacity:0;
|
|
2558
2629
|
}
|
|
2559
2630
|
|
|
@@ -2563,14 +2634,45 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
|
|
|
2563
2634
|
.confirm-dialog--hide-init.confirm-dialog--mask-fade,.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,.confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
|
|
2564
2635
|
background-color:var(--dialog-scrim-color-show);
|
|
2565
2636
|
}
|
|
2566
|
-
.confirm-dialog--hide-init .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--fade{
|
|
2637
|
+
.confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--hide-init .confirm-dialog__window--animate>*,.confirm-dialog--hide-init .confirm-dialog__window--fade,.confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate>*,.confirm-dialog--show .confirm-dialog__window--fade{
|
|
2567
2638
|
opacity:1;
|
|
2568
2639
|
}
|
|
2569
2640
|
|
|
2641
|
+
@media (prefers-reduced-motion){
|
|
2642
|
+
.confirm-dialog--hide.confirm-dialog--mask-fade,.confirm-dialog--hide.confirm-dialog--mask-fade-slow{
|
|
2643
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
|
|
2644
|
+
}
|
|
2645
|
+
.confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide .confirm-dialog__window--fade{
|
|
2646
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
|
|
2647
|
+
}
|
|
2648
|
+
.confirm-dialog--hide .confirm-dialog__window--animate>*{
|
|
2649
|
+
transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
|
|
2650
|
+
}
|
|
2651
|
+
.confirm-dialog--show.confirm-dialog--mask-fade,.confirm-dialog--show.confirm-dialog--mask-fade-slow{
|
|
2652
|
+
transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
|
|
2653
|
+
}
|
|
2654
|
+
.confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--fade{
|
|
2655
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
|
|
2656
|
+
}
|
|
2657
|
+
.confirm-dialog--show .confirm-dialog__window--animate>*{
|
|
2658
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
|
|
2659
|
+
}
|
|
2660
|
+
}
|
|
2661
|
+
.confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate{
|
|
2662
|
+
transform:scale(1);
|
|
2663
|
+
}
|
|
2664
|
+
|
|
2665
|
+
.confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate{
|
|
2666
|
+
transform:scale(.75);
|
|
2667
|
+
}
|
|
2668
|
+
|
|
2669
|
+
@media (prefers-reduced-motion){
|
|
2670
|
+
.confirm-dialog--hide .confirm-dialog__window--animate,.confirm-dialog--hide-init .confirm-dialog__window--animate,.confirm-dialog--show .confirm-dialog__window--animate,.confirm-dialog--show-init .confirm-dialog__window--animate{
|
|
2671
|
+
transform:scale(1);
|
|
2672
|
+
}
|
|
2673
|
+
}
|
|
2570
2674
|
@media (min-width:768px){
|
|
2571
2675
|
.confirm-dialog__window{
|
|
2572
|
-
border-radius:var(--lightbox-border-radius, var(--border-radius-100));
|
|
2573
|
-
margin:auto;
|
|
2574
2676
|
max-width:calc(88% - var(--spacing-400));
|
|
2575
2677
|
}
|
|
2576
2678
|
}
|
|
@@ -3475,7 +3577,7 @@ img.file-preview-card__asset,video.file-preview-card__asset{
|
|
|
3475
3577
|
|
|
3476
3578
|
.file-preview-card__see-more{
|
|
3477
3579
|
aspect-ratio:1/1;
|
|
3478
|
-
background-color:
|
|
3580
|
+
background-color:rgb(var(--file-preview-card-see-more-background-color-rgb, var(--color-background-strong-rgb)), .5);
|
|
3479
3581
|
border:none;
|
|
3480
3582
|
border-radius:50%;
|
|
3481
3583
|
color:var(--file-preview-card-see-more-color, var(--color-foreground-on-strong));
|
|
@@ -3496,11 +3598,11 @@ img.file-preview-card__asset,video.file-preview-card__asset{
|
|
|
3496
3598
|
}
|
|
3497
3599
|
|
|
3498
3600
|
.file-preview-card__see-more:focus-visible,.file-preview-card__see-more:hover{
|
|
3499
|
-
background-color:
|
|
3601
|
+
background-color:rgb(var(--file-preview-card-see-more-interactive-background-color-rgb, var(--color-state-secondary-hover-rgb)), .5);
|
|
3500
3602
|
}
|
|
3501
3603
|
|
|
3502
3604
|
.file-preview-card__see-more:active{
|
|
3503
|
-
background-color:
|
|
3605
|
+
background-color:rgb(var(--file-preview-card-see-more-interactive-active-background-color-rgb, var(--color-state-secondary-active-rgb)), .5);
|
|
3504
3606
|
}
|
|
3505
3607
|
|
|
3506
3608
|
.file-preview-card__footer{
|
|
@@ -3774,6 +3876,60 @@ a.filter-link--selected:not([href]):hover,a.filter-link--selected[aria-disabled=
|
|
|
3774
3876
|
a.filter-link:focus:not(:focus-visible),button.filter-button:focus:not(:focus-visible){
|
|
3775
3877
|
outline:none;
|
|
3776
3878
|
}
|
|
3879
|
+
|
|
3880
|
+
.filter-input{
|
|
3881
|
+
display:inline-block;
|
|
3882
|
+
width:100%;
|
|
3883
|
+
}
|
|
3884
|
+
|
|
3885
|
+
.filter-input__clear-btn{
|
|
3886
|
+
display:none;
|
|
3887
|
+
}
|
|
3888
|
+
|
|
3889
|
+
.filter-input .textbox{
|
|
3890
|
+
border-radius:var(--border-radius-150);
|
|
3891
|
+
max-width:480px;
|
|
3892
|
+
min-width:200px;
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3895
|
+
.filter-input .textbox__control{
|
|
3896
|
+
height:40px;
|
|
3897
|
+
}
|
|
3898
|
+
|
|
3899
|
+
.filter-input .textbox__control:not(:placeholder-shown)~.filter-input__clear-btn{
|
|
3900
|
+
display:block;
|
|
3901
|
+
}
|
|
3902
|
+
|
|
3903
|
+
.filter-input .textbox__control::-webkit-search-cancel-button{
|
|
3904
|
+
-webkit-appearance:none;
|
|
3905
|
+
display:none;
|
|
3906
|
+
}
|
|
3907
|
+
|
|
3908
|
+
.filter-input .textbox button.icon-btn.icon-btn--transparent.icon-btn--small{
|
|
3909
|
+
min-width:32px;
|
|
3910
|
+
}
|
|
3911
|
+
|
|
3912
|
+
.filter-input .textbox .icon-btn:last-child{
|
|
3913
|
+
flex-shrink:0;
|
|
3914
|
+
margin-inline-end:var(--spacing-50);
|
|
3915
|
+
margin-inline-start:0;
|
|
3916
|
+
}
|
|
3917
|
+
|
|
3918
|
+
.filter-input--small .textbox .icon-btn:last-child{
|
|
3919
|
+
margin-inline-end:0;
|
|
3920
|
+
}
|
|
3921
|
+
|
|
3922
|
+
.filter-input--large .textbox .icon-btn:last-child{
|
|
3923
|
+
margin-inline-end:var(--spacing-100);
|
|
3924
|
+
}
|
|
3925
|
+
|
|
3926
|
+
.filter-input--small .textbox__control{
|
|
3927
|
+
height:32px;
|
|
3928
|
+
}
|
|
3929
|
+
|
|
3930
|
+
.filter-input--large .textbox__control{
|
|
3931
|
+
height:48px;
|
|
3932
|
+
}
|
|
3777
3933
|
.filter-menu,.filter-menu-form{
|
|
3778
3934
|
background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
|
|
3779
3935
|
min-width:144px;
|
|
@@ -7134,18 +7290,29 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7134
7290
|
.lightbox-dialog__title--center{
|
|
7135
7291
|
text-align:center;
|
|
7136
7292
|
}
|
|
7137
|
-
|
|
7138
|
-
|
|
7139
|
-
transition:background-color .16s ease-out;
|
|
7293
|
+
.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
|
|
7294
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
7140
7295
|
}
|
|
7141
|
-
.lightbox-dialog--hide.lightbox-
|
|
7142
|
-
transition:
|
|
7296
|
+
.lightbox-dialog--hide .lightbox-dialog__window--fade{
|
|
7297
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
7143
7298
|
}
|
|
7144
|
-
.lightbox-dialog--hide .lightbox-dialog__window--
|
|
7145
|
-
transition:opacity
|
|
7299
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate{
|
|
7300
|
+
transition:transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
7301
|
+
}
|
|
7302
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate>*{
|
|
7303
|
+
transition:opacity var(--motion-duration-short-2) var(--motion-easing-continuous);
|
|
7304
|
+
}
|
|
7305
|
+
.lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
|
|
7306
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
7146
7307
|
}
|
|
7147
|
-
.lightbox-dialog--
|
|
7148
|
-
transition:opacity
|
|
7308
|
+
.lightbox-dialog--show .lightbox-dialog__window--fade{
|
|
7309
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
7310
|
+
}
|
|
7311
|
+
.lightbox-dialog--show .lightbox-dialog__window--animate{
|
|
7312
|
+
transition:transform var(--motion-duration-medium-3) var(--motion-easing-standard), opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
7313
|
+
}
|
|
7314
|
+
.lightbox-dialog--show .lightbox-dialog__window--animate>*{
|
|
7315
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) var(--motion-duration-short-3);
|
|
7149
7316
|
}
|
|
7150
7317
|
|
|
7151
7318
|
.lightbox-dialog--hide.lightbox-dialog--hide,.lightbox-dialog--hide.lightbox-dialog--show-init,.lightbox-dialog--show-init.lightbox-dialog--hide,.lightbox-dialog--show-init.lightbox-dialog--show-init{
|
|
@@ -7154,12 +7321,8 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7154
7321
|
.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show-init.lightbox-dialog--mask-fade,.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow{
|
|
7155
7322
|
background-color:var(--dialog-scrim-color-hide);
|
|
7156
7323
|
}
|
|
7157
|
-
.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
|
|
7158
|
-
opacity:0;
|
|
7159
|
-
}
|
|
7160
|
-
.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
|
|
7324
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide .lightbox-dialog__window--animate>*,.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate>*,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
|
|
7161
7325
|
opacity:0;
|
|
7162
|
-
transform:translateY(100%);
|
|
7163
7326
|
}
|
|
7164
7327
|
|
|
7165
7328
|
.lightbox-dialog--hide-init.lightbox-dialog--hide-init,.lightbox-dialog--hide-init.lightbox-dialog--show,.lightbox-dialog--show.lightbox-dialog--hide-init,.lightbox-dialog--show.lightbox-dialog--show{
|
|
@@ -7168,13 +7331,37 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7168
7331
|
.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
|
|
7169
7332
|
background-color:var(--dialog-scrim-color-show);
|
|
7170
7333
|
}
|
|
7171
|
-
.lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
|
|
7334
|
+
.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--hide-init .lightbox-dialog__window--animate>*,.lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate>*,.lightbox-dialog--show .lightbox-dialog__window--fade{
|
|
7172
7335
|
opacity:1;
|
|
7173
7336
|
}
|
|
7337
|
+
|
|
7338
|
+
@media (prefers-reduced-motion){
|
|
7339
|
+
.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow{
|
|
7340
|
+
transition:background-color var(--motion-duration-short-3) var(--motion-easing-soft-exit);
|
|
7341
|
+
}
|
|
7342
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide .lightbox-dialog__window--fade{
|
|
7343
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-soft-exit);
|
|
7344
|
+
}
|
|
7345
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate>*{
|
|
7346
|
+
transition:opacity var(--motion-duration-short-2) var(--motion-soft-exit);
|
|
7347
|
+
}
|
|
7348
|
+
.lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
|
|
7349
|
+
transition:background-color var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
|
|
7350
|
+
}
|
|
7351
|
+
.lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--fade{
|
|
7352
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter);
|
|
7353
|
+
}
|
|
7354
|
+
.lightbox-dialog--show .lightbox-dialog__window--animate>*{
|
|
7355
|
+
transition:opacity var(--motion-duration-medium-2) var(--motion-easing-soft-enter) var(--motion-duration-short-3);
|
|
7356
|
+
}
|
|
7357
|
+
}
|
|
7174
7358
|
.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
|
|
7175
|
-
opacity:1;
|
|
7176
7359
|
transform:translateY(0);
|
|
7177
7360
|
}
|
|
7361
|
+
|
|
7362
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
|
|
7363
|
+
transform:translateY(100%);
|
|
7364
|
+
}
|
|
7178
7365
|
.lightbox-dialog__handle:after{
|
|
7179
7366
|
background-color:var(--dialog-handle-color, var(--color-stroke-default));
|
|
7180
7367
|
border-radius:3px;
|
|
@@ -7227,8 +7414,16 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7227
7414
|
margin-left:var(--spacing-100);
|
|
7228
7415
|
margin-top:0;
|
|
7229
7416
|
}
|
|
7417
|
+
.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
|
|
7418
|
+
transform:scale(1);
|
|
7419
|
+
}
|
|
7420
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
|
|
7421
|
+
transform:scale(.75);
|
|
7422
|
+
}
|
|
7423
|
+
}
|
|
7424
|
+
@media (min-width:512px) and (prefers-reduced-motion){
|
|
7230
7425
|
.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
|
|
7231
|
-
transform:
|
|
7426
|
+
transform:scale(1);
|
|
7232
7427
|
}
|
|
7233
7428
|
}
|
|
7234
7429
|
@media (min-width:768px){
|
|
@@ -7666,6 +7861,53 @@ span.listbox-button__value{
|
|
|
7666
7861
|
margin-left:3px;
|
|
7667
7862
|
margin-right:0;
|
|
7668
7863
|
}
|
|
7864
|
+
.number-input .textbox{
|
|
7865
|
+
background:transparent;
|
|
7866
|
+
}
|
|
7867
|
+
|
|
7868
|
+
.number-input label:first-child{
|
|
7869
|
+
flex-grow:1;
|
|
7870
|
+
padding-left:var(--spacing-200);
|
|
7871
|
+
}
|
|
7872
|
+
|
|
7873
|
+
.number-input label:first-child~input.textbox__control{
|
|
7874
|
+
flex-grow:0;
|
|
7875
|
+
}
|
|
7876
|
+
|
|
7877
|
+
.icon-btn.number-input__delete{
|
|
7878
|
+
display:none;
|
|
7879
|
+
margin-inline-end:calc(var(--spacing-100)*-1);
|
|
7880
|
+
order:-1;
|
|
7881
|
+
padding-inline-start:var(--spacing-200);
|
|
7882
|
+
}
|
|
7883
|
+
|
|
7884
|
+
.number-input--show-delete .number-input__delete{
|
|
7885
|
+
display:block;
|
|
7886
|
+
}
|
|
7887
|
+
|
|
7888
|
+
.number-input--show-delete .number-input__decrement{
|
|
7889
|
+
display:none;
|
|
7890
|
+
}
|
|
7891
|
+
|
|
7892
|
+
.number-input .textbox .textbox__control{
|
|
7893
|
+
font-weight:700;
|
|
7894
|
+
text-align:center;
|
|
7895
|
+
width:48px;
|
|
7896
|
+
}
|
|
7897
|
+
.number-input .textbox .textbox__control::-webkit-inner-spin-button,.number-input .textbox .textbox__control::-webkit-outer-spin-button{
|
|
7898
|
+
-webkit-appearance:none;
|
|
7899
|
+
margin:0;
|
|
7900
|
+
}
|
|
7901
|
+
.number-input .textbox .textbox__control[type=number]{
|
|
7902
|
+
-moz-appearance:textfield;
|
|
7903
|
+
-webkit-appearance:textfield;
|
|
7904
|
+
appearance:textfield;
|
|
7905
|
+
}
|
|
7906
|
+
|
|
7907
|
+
.number-input .textbox .icon-btn:not(:disabled) svg{
|
|
7908
|
+
color:var(--color-foreground-primary);
|
|
7909
|
+
fill:currentColor;
|
|
7910
|
+
}
|
|
7669
7911
|
.fake-menu__items,.menu__items{
|
|
7670
7912
|
background-color:var(--menu-background-color, var(--color-background-primary));
|
|
7671
7913
|
cursor:default;
|
|
@@ -9305,7 +9547,7 @@ span[role=region].section-notice{
|
|
|
9305
9547
|
margin-inline-end:var(--spacing-200);
|
|
9306
9548
|
}
|
|
9307
9549
|
|
|
9308
|
-
.section-notice__header+.section-notice__main{
|
|
9550
|
+
.section-notice__header+.section-notice__main,.section-notice__header~.section-notice__cta{
|
|
9309
9551
|
grid-column:2;
|
|
9310
9552
|
}
|
|
9311
9553
|
|
|
@@ -9322,10 +9564,10 @@ span[role=region].section-notice{
|
|
|
9322
9564
|
}
|
|
9323
9565
|
|
|
9324
9566
|
p.section-notice__cta{
|
|
9325
|
-
grid-column:
|
|
9567
|
+
grid-column:1 / 3;
|
|
9326
9568
|
grid-row:2;
|
|
9327
9569
|
justify-self:flex-start;
|
|
9328
|
-
margin-
|
|
9570
|
+
margin-bottom:0;
|
|
9329
9571
|
margin-top:var(--spacing-200);
|
|
9330
9572
|
}
|
|
9331
9573
|
.section-notice__main .section-notice__title~p{
|
|
@@ -9339,10 +9581,13 @@ p.section-notice__cta{
|
|
|
9339
9581
|
grid-column:4;
|
|
9340
9582
|
grid-row:1;
|
|
9341
9583
|
justify-self:flex-end;
|
|
9342
|
-
margin-
|
|
9584
|
+
margin-right:var(--spacing-200);
|
|
9343
9585
|
margin-top:0;
|
|
9344
9586
|
padding-right:var(--spacing-200);
|
|
9345
9587
|
}
|
|
9588
|
+
.section-notice__header~.section-notice__cta{
|
|
9589
|
+
grid-column:4;
|
|
9590
|
+
}
|
|
9346
9591
|
.section-notice__footer{
|
|
9347
9592
|
padding-left:var(--spacing-200);
|
|
9348
9593
|
}
|
|
@@ -10163,6 +10408,10 @@ span.switch__control:focus:not(:focus-visible){
|
|
|
10163
10408
|
padding:16px;
|
|
10164
10409
|
}
|
|
10165
10410
|
|
|
10411
|
+
.table--frozen-header{
|
|
10412
|
+
max-height:90vh;
|
|
10413
|
+
}
|
|
10414
|
+
|
|
10166
10415
|
.table--frozen-header thead{
|
|
10167
10416
|
position:sticky;
|
|
10168
10417
|
top:0;
|
|
@@ -10575,11 +10824,11 @@ input.textbox__control{
|
|
|
10575
10824
|
display:inline-flex;
|
|
10576
10825
|
height:1lh;
|
|
10577
10826
|
pointer-events:none;
|
|
10578
|
-
width:14px;
|
|
10579
10827
|
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
10580
10828
|
}
|
|
10581
10829
|
|
|
10582
10830
|
.textbox>span:first-child,.textbox>svg:first-child{
|
|
10831
|
+
flex-shrink:0;
|
|
10583
10832
|
margin-inline-start:var(--spacing-200);
|
|
10584
10833
|
}
|
|
10585
10834
|
|
|
@@ -10603,8 +10852,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
|
|
|
10603
10852
|
width:100%;
|
|
10604
10853
|
}
|
|
10605
10854
|
:root{
|
|
10606
|
-
--dialog-scrim-color-hide:
|
|
10607
|
-
--dialog-scrim-color-show:
|
|
10855
|
+
--dialog-scrim-color-hide:rgb(17, 24, 32, 0);
|
|
10856
|
+
--dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
|
|
10608
10857
|
--dialog-lightbox-max-width:616px;
|
|
10609
10858
|
}
|
|
10610
10859
|
.toast-dialog{
|
|
@@ -11705,7 +11954,7 @@ button.tooltip__close{
|
|
|
11705
11954
|
}
|
|
11706
11955
|
}
|
|
11707
11956
|
:root{
|
|
11708
|
-
--bubble-shadow:0 2px 7px
|
|
11957
|
+
--bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
|
|
11709
11958
|
}
|
|
11710
11959
|
.tourtip{
|
|
11711
11960
|
position:relative;
|