@ebay/skin 19.4.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 +94 -4
- package/dist/bundles/skin-default.css +281 -37
- package/dist/bundles/skin-full.css +281 -37
- package/dist/bundles/skin-headless.css +281 -37
- package/dist/confirm-dialog/confirm-dialog.css +88 -11
- package/dist/filter-input/filter-input.css +55 -0
- package/dist/lightbox-dialog/lightbox-dialog.css +82 -17
- package/dist/number-input/number-input.css +48 -0
- package/dist/table/table.css +4 -0
- package/dist/textbox/textbox.css +1 -1
- 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 +2 -0
- 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 -50
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
--dialog-window-background-color,
|
|
27
27
|
var(--color-background-primary)
|
|
28
28
|
);
|
|
29
|
-
border-radius: var(--lightbox-border-radius, var(--border-radius-
|
|
29
|
+
border-radius: var(--lightbox-border-radius, var(--border-radius-100));
|
|
30
30
|
display: flex;
|
|
31
31
|
flex: 1 0 auto;
|
|
32
32
|
flex-direction: column;
|
|
33
|
-
margin: auto
|
|
33
|
+
margin: auto;
|
|
34
34
|
margin-left: var(--spacing-200);
|
|
35
35
|
margin-right: var(--spacing-200);
|
|
36
36
|
max-height: 90%;
|
|
@@ -75,6 +75,42 @@
|
|
|
75
75
|
.alert-dialog--show .alert-dialog__window--fade {
|
|
76
76
|
transition: opacity 0.16s ease-out;
|
|
77
77
|
}
|
|
78
|
+
.alert-dialog--hide.alert-dialog--mask-fade,
|
|
79
|
+
.alert-dialog--hide.alert-dialog--mask-fade-slow {
|
|
80
|
+
transition: background-color var(--motion-duration-short-3)
|
|
81
|
+
var(--motion-easing-continuous);
|
|
82
|
+
}
|
|
83
|
+
.alert-dialog--hide .alert-dialog__window--fade {
|
|
84
|
+
transition: opacity var(--motion-duration-short-3)
|
|
85
|
+
var(--motion-easing-continuous);
|
|
86
|
+
}
|
|
87
|
+
.alert-dialog--hide .alert-dialog__window--animate {
|
|
88
|
+
transition:
|
|
89
|
+
transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),
|
|
90
|
+
opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
91
|
+
}
|
|
92
|
+
.alert-dialog--hide .alert-dialog__window--animate > * {
|
|
93
|
+
transition: opacity var(--motion-duration-short-2)
|
|
94
|
+
var(--motion-easing-continuous);
|
|
95
|
+
}
|
|
96
|
+
.alert-dialog--show.alert-dialog--mask-fade,
|
|
97
|
+
.alert-dialog--show.alert-dialog--mask-fade-slow {
|
|
98
|
+
transition: background-color var(--motion-duration-short-3)
|
|
99
|
+
var(--motion-easing-continuous);
|
|
100
|
+
}
|
|
101
|
+
.alert-dialog--show .alert-dialog__window--fade {
|
|
102
|
+
transition: opacity var(--motion-duration-short-3)
|
|
103
|
+
var(--motion-easing-continuous);
|
|
104
|
+
}
|
|
105
|
+
.alert-dialog--show .alert-dialog__window--animate {
|
|
106
|
+
transition:
|
|
107
|
+
transform var(--motion-duration-medium-3) var(--motion-easing-standard),
|
|
108
|
+
opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
109
|
+
}
|
|
110
|
+
.alert-dialog--show .alert-dialog__window--animate > * {
|
|
111
|
+
transition: opacity var(--motion-duration-medium-2)
|
|
112
|
+
var(--motion-easing-continuous) var(--motion-duration-short-3);
|
|
113
|
+
}
|
|
78
114
|
|
|
79
115
|
.alert-dialog--hide.alert-dialog--hide,
|
|
80
116
|
.alert-dialog--hide.alert-dialog--show-init,
|
|
@@ -88,7 +124,11 @@
|
|
|
88
124
|
.alert-dialog--show-init.alert-dialog--mask-fade-slow {
|
|
89
125
|
background-color: var(--dialog-scrim-color-hide);
|
|
90
126
|
}
|
|
127
|
+
.alert-dialog--hide .alert-dialog__window--animate,
|
|
128
|
+
.alert-dialog--hide .alert-dialog__window--animate > *,
|
|
91
129
|
.alert-dialog--hide .alert-dialog__window--fade,
|
|
130
|
+
.alert-dialog--show-init .alert-dialog__window--animate,
|
|
131
|
+
.alert-dialog--show-init .alert-dialog__window--animate > *,
|
|
92
132
|
.alert-dialog--show-init .alert-dialog__window--fade {
|
|
93
133
|
opacity: 0;
|
|
94
134
|
}
|
|
@@ -105,15 +145,65 @@
|
|
|
105
145
|
.alert-dialog--show.alert-dialog--mask-fade-slow {
|
|
106
146
|
background-color: var(--dialog-scrim-color-show);
|
|
107
147
|
}
|
|
148
|
+
.alert-dialog--hide-init .alert-dialog__window--animate,
|
|
149
|
+
.alert-dialog--hide-init .alert-dialog__window--animate > *,
|
|
108
150
|
.alert-dialog--hide-init .alert-dialog__window--fade,
|
|
151
|
+
.alert-dialog--show .alert-dialog__window--animate,
|
|
152
|
+
.alert-dialog--show .alert-dialog__window--animate > *,
|
|
109
153
|
.alert-dialog--show .alert-dialog__window--fade {
|
|
110
154
|
opacity: 1;
|
|
111
155
|
}
|
|
112
156
|
|
|
157
|
+
@media (prefers-reduced-motion) {
|
|
158
|
+
.alert-dialog--hide.alert-dialog--mask-fade,
|
|
159
|
+
.alert-dialog--hide.alert-dialog--mask-fade-slow {
|
|
160
|
+
transition: background-color var(--motion-duration-short-3)
|
|
161
|
+
var(--motion-easing-soft-exit);
|
|
162
|
+
}
|
|
163
|
+
.alert-dialog--hide .alert-dialog__window--animate,
|
|
164
|
+
.alert-dialog--hide .alert-dialog__window--fade {
|
|
165
|
+
transition: opacity var(--motion-duration-short-3)
|
|
166
|
+
var(--motion-easing-soft-exit);
|
|
167
|
+
}
|
|
168
|
+
.alert-dialog--hide .alert-dialog__window--animate > * {
|
|
169
|
+
transition: opacity var(--motion-duration-short-2)
|
|
170
|
+
var(--motion-soft-exit);
|
|
171
|
+
}
|
|
172
|
+
.alert-dialog--show.alert-dialog--mask-fade,
|
|
173
|
+
.alert-dialog--show.alert-dialog--mask-fade-slow {
|
|
174
|
+
transition: background-color var(--motion-duration-medium-2)
|
|
175
|
+
var(--motion-easing-soft-enter);
|
|
176
|
+
}
|
|
177
|
+
.alert-dialog--show .alert-dialog__window--animate,
|
|
178
|
+
.alert-dialog--show .alert-dialog__window--fade {
|
|
179
|
+
transition: opacity var(--motion-duration-medium-2)
|
|
180
|
+
var(--motion-easing-soft-enter);
|
|
181
|
+
}
|
|
182
|
+
.alert-dialog--show .alert-dialog__window--animate > * {
|
|
183
|
+
transition: opacity var(--motion-duration-medium-2)
|
|
184
|
+
var(--motion-easing-soft-enter) var(--motion-duration-short-3);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
.alert-dialog--hide-init .alert-dialog__window--animate,
|
|
188
|
+
.alert-dialog--show .alert-dialog__window--animate {
|
|
189
|
+
transform: scale(1);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.alert-dialog--hide .alert-dialog__window--animate,
|
|
193
|
+
.alert-dialog--show-init .alert-dialog__window--animate {
|
|
194
|
+
transform: scale(0.75);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@media (prefers-reduced-motion) {
|
|
198
|
+
.alert-dialog--hide .alert-dialog__window--animate,
|
|
199
|
+
.alert-dialog--hide-init .alert-dialog__window--animate,
|
|
200
|
+
.alert-dialog--show .alert-dialog__window--animate,
|
|
201
|
+
.alert-dialog--show-init .alert-dialog__window--animate {
|
|
202
|
+
transform: scale(1);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
113
205
|
@media (min-width: 768px) {
|
|
114
206
|
.alert-dialog__window {
|
|
115
|
-
border-radius: var(--lightbox-border-radius, var(--border-radius-100));
|
|
116
|
-
margin: auto;
|
|
117
207
|
max-width: calc(88% - var(--spacing-400));
|
|
118
208
|
}
|
|
119
209
|
}
|
|
@@ -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
|
}
|
|
@@ -2498,11 +2553,11 @@ span.combobox{
|
|
|
2498
2553
|
|
|
2499
2554
|
.confirm-dialog__window{
|
|
2500
2555
|
background-color:var(--dialog-window-background-color, var(--color-background-primary));
|
|
2501
|
-
border-radius:var(--lightbox-border-radius, var(--border-radius-
|
|
2556
|
+
border-radius:var(--lightbox-border-radius, var(--border-radius-100));
|
|
2502
2557
|
display:flex;
|
|
2503
2558
|
flex:1 0 auto;
|
|
2504
2559
|
flex-direction:column;
|
|
2505
|
-
margin:auto
|
|
2560
|
+
margin:auto;
|
|
2506
2561
|
margin-left:var(--spacing-200);
|
|
2507
2562
|
margin-right:var(--spacing-200);
|
|
2508
2563
|
max-height:90%;
|
|
@@ -2538,15 +2593,29 @@ span.combobox{
|
|
|
2538
2593
|
a.confirm-dialog__confirm,button.confirm-dialog__confirm{
|
|
2539
2594
|
margin-left:var(--spacing-100);
|
|
2540
2595
|
}
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
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);
|
|
2544
2598
|
}
|
|
2545
|
-
.confirm-dialog--hide.confirm-
|
|
2546
|
-
transition:
|
|
2599
|
+
.confirm-dialog--hide .confirm-dialog__window--fade{
|
|
2600
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
2547
2601
|
}
|
|
2548
|
-
.confirm-dialog--hide .confirm-dialog__window--
|
|
2549
|
-
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);
|
|
2550
2619
|
}
|
|
2551
2620
|
|
|
2552
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{
|
|
@@ -2555,7 +2624,7 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
|
|
|
2555
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{
|
|
2556
2625
|
background-color:var(--dialog-scrim-color-hide);
|
|
2557
2626
|
}
|
|
2558
|
-
.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{
|
|
2559
2628
|
opacity:0;
|
|
2560
2629
|
}
|
|
2561
2630
|
|
|
@@ -2565,14 +2634,45 @@ a.confirm-dialog__confirm,button.confirm-dialog__confirm{
|
|
|
2565
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{
|
|
2566
2635
|
background-color:var(--dialog-scrim-color-show);
|
|
2567
2636
|
}
|
|
2568
|
-
.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{
|
|
2569
2638
|
opacity:1;
|
|
2570
2639
|
}
|
|
2571
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
|
+
}
|
|
2572
2674
|
@media (min-width:768px){
|
|
2573
2675
|
.confirm-dialog__window{
|
|
2574
|
-
border-radius:var(--lightbox-border-radius, var(--border-radius-100));
|
|
2575
|
-
margin:auto;
|
|
2576
2676
|
max-width:calc(88% - var(--spacing-400));
|
|
2577
2677
|
}
|
|
2578
2678
|
}
|
|
@@ -3776,6 +3876,60 @@ a.filter-link--selected:not([href]):hover,a.filter-link--selected[aria-disabled=
|
|
|
3776
3876
|
a.filter-link:focus:not(:focus-visible),button.filter-button:focus:not(:focus-visible){
|
|
3777
3877
|
outline:none;
|
|
3778
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
|
+
}
|
|
3779
3933
|
.filter-menu,.filter-menu-form{
|
|
3780
3934
|
background-color:var(--filter-menu-item-background-color, var(--color-background-primary));
|
|
3781
3935
|
min-width:144px;
|
|
@@ -7136,18 +7290,29 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7136
7290
|
.lightbox-dialog__title--center{
|
|
7137
7291
|
text-align:center;
|
|
7138
7292
|
}
|
|
7139
|
-
|
|
7140
|
-
|
|
7141
|
-
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);
|
|
7142
7295
|
}
|
|
7143
|
-
.lightbox-dialog--hide.lightbox-
|
|
7144
|
-
transition:
|
|
7296
|
+
.lightbox-dialog--hide .lightbox-dialog__window--fade{
|
|
7297
|
+
transition:opacity var(--motion-duration-short-3) var(--motion-easing-continuous);
|
|
7145
7298
|
}
|
|
7146
|
-
.lightbox-dialog--hide .lightbox-dialog__window--
|
|
7147
|
-
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);
|
|
7148
7307
|
}
|
|
7149
|
-
.lightbox-dialog--
|
|
7150
|
-
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);
|
|
7151
7316
|
}
|
|
7152
7317
|
|
|
7153
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{
|
|
@@ -7156,12 +7321,8 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7156
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{
|
|
7157
7322
|
background-color:var(--dialog-scrim-color-hide);
|
|
7158
7323
|
}
|
|
7159
|
-
.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
|
|
7160
|
-
opacity:0;
|
|
7161
|
-
}
|
|
7162
|
-
.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{
|
|
7163
7325
|
opacity:0;
|
|
7164
|
-
transform:translateY(100%);
|
|
7165
7326
|
}
|
|
7166
7327
|
|
|
7167
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{
|
|
@@ -7170,13 +7331,37 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7170
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{
|
|
7171
7332
|
background-color:var(--dialog-scrim-color-show);
|
|
7172
7333
|
}
|
|
7173
|
-
.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{
|
|
7174
7335
|
opacity:1;
|
|
7175
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
|
+
}
|
|
7176
7358
|
.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
|
|
7177
|
-
opacity:1;
|
|
7178
7359
|
transform:translateY(0);
|
|
7179
7360
|
}
|
|
7361
|
+
|
|
7362
|
+
.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
|
|
7363
|
+
transform:translateY(100%);
|
|
7364
|
+
}
|
|
7180
7365
|
.lightbox-dialog__handle:after{
|
|
7181
7366
|
background-color:var(--dialog-handle-color, var(--color-stroke-default));
|
|
7182
7367
|
border-radius:3px;
|
|
@@ -7229,8 +7414,16 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
7229
7414
|
margin-left:var(--spacing-100);
|
|
7230
7415
|
margin-top:0;
|
|
7231
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){
|
|
7232
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{
|
|
7233
|
-
transform:
|
|
7426
|
+
transform:scale(1);
|
|
7234
7427
|
}
|
|
7235
7428
|
}
|
|
7236
7429
|
@media (min-width:768px){
|
|
@@ -7668,6 +7861,53 @@ span.listbox-button__value{
|
|
|
7668
7861
|
margin-left:3px;
|
|
7669
7862
|
margin-right:0;
|
|
7670
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
|
+
}
|
|
7671
7911
|
.fake-menu__items,.menu__items{
|
|
7672
7912
|
background-color:var(--menu-background-color, var(--color-background-primary));
|
|
7673
7913
|
cursor:default;
|
|
@@ -10168,6 +10408,10 @@ span.switch__control:focus:not(:focus-visible){
|
|
|
10168
10408
|
padding:16px;
|
|
10169
10409
|
}
|
|
10170
10410
|
|
|
10411
|
+
.table--frozen-header{
|
|
10412
|
+
max-height:90vh;
|
|
10413
|
+
}
|
|
10414
|
+
|
|
10171
10415
|
.table--frozen-header thead{
|
|
10172
10416
|
position:sticky;
|
|
10173
10417
|
top:0;
|
|
@@ -10580,11 +10824,11 @@ input.textbox__control{
|
|
|
10580
10824
|
display:inline-flex;
|
|
10581
10825
|
height:1lh;
|
|
10582
10826
|
pointer-events:none;
|
|
10583
|
-
width:14px;
|
|
10584
10827
|
fill:var(--textbox-icon-color, var(--color-foreground-secondary));
|
|
10585
10828
|
}
|
|
10586
10829
|
|
|
10587
10830
|
.textbox>span:first-child,.textbox>svg:first-child{
|
|
10831
|
+
flex-shrink:0;
|
|
10588
10832
|
margin-inline-start:var(--spacing-200);
|
|
10589
10833
|
}
|
|
10590
10834
|
|