@blockscout/ui-toolkit 2.5.1 → 2.5.3
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/index.js
CHANGED
|
@@ -4342,6 +4342,14 @@ const g0 = B.forwardRef(
|
|
|
4342
4342
|
left: "100%",
|
|
4343
4343
|
transform: "translateX(-100%)"
|
|
4344
4344
|
}
|
|
4345
|
+
},
|
|
4346
|
+
skeletonShimmer: {
|
|
4347
|
+
from: {
|
|
4348
|
+
transform: "translateX(-100%)"
|
|
4349
|
+
},
|
|
4350
|
+
to: {
|
|
4351
|
+
transform: "translateX(100%)"
|
|
4352
|
+
}
|
|
4345
4353
|
}
|
|
4346
4354
|
}, T0 = {
|
|
4347
4355
|
none: { value: "0" },
|
|
@@ -7962,7 +7970,7 @@ const of = he({
|
|
|
7962
7970
|
borderWidth: "0px",
|
|
7963
7971
|
pointerEvents: "none",
|
|
7964
7972
|
userSelect: "none",
|
|
7965
|
-
"
|
|
7973
|
+
"& > *": {
|
|
7966
7974
|
visibility: "hidden"
|
|
7967
7975
|
}
|
|
7968
7976
|
}
|
|
@@ -7974,14 +7982,32 @@ const of = he({
|
|
|
7974
7982
|
animationDuration: "var(--duration, 1.2s)"
|
|
7975
7983
|
},
|
|
7976
7984
|
shine: {
|
|
7985
|
+
opacity: 0.5,
|
|
7977
7986
|
"--animate-from": "100%",
|
|
7978
7987
|
"--animate-to": "-100%",
|
|
7979
7988
|
"--start-color": "colors.skeleton.bg.start",
|
|
7980
7989
|
"--end-color": "colors.skeleton.bg.end",
|
|
7981
|
-
|
|
7982
|
-
|
|
7983
|
-
|
|
7984
|
-
animation: "
|
|
7990
|
+
position: "relative",
|
|
7991
|
+
overflow: "hidden",
|
|
7992
|
+
backgroundColor: "var(--start-color)",
|
|
7993
|
+
animation: "none",
|
|
7994
|
+
"&::after": {
|
|
7995
|
+
content: '""',
|
|
7996
|
+
position: "absolute",
|
|
7997
|
+
inset: "0",
|
|
7998
|
+
left: "0",
|
|
7999
|
+
width: "100%",
|
|
8000
|
+
pointerEvents: "none",
|
|
8001
|
+
willChange: "transform",
|
|
8002
|
+
transform: "translateX(-100%)",
|
|
8003
|
+
backgroundImage: "linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)",
|
|
8004
|
+
animation: "skeletonShimmer var(--duration, 2s) linear infinite"
|
|
8005
|
+
},
|
|
8006
|
+
_motionReduce: {
|
|
8007
|
+
"&::after": {
|
|
8008
|
+
animation: "none"
|
|
8009
|
+
}
|
|
8010
|
+
}
|
|
7985
8011
|
},
|
|
7986
8012
|
none: {
|
|
7987
8013
|
animation: "none"
|
|
@@ -724,7 +724,7 @@ export declare const recipes: {
|
|
|
724
724
|
borderWidth: "0px";
|
|
725
725
|
pointerEvents: "none";
|
|
726
726
|
userSelect: "none";
|
|
727
|
-
'
|
|
727
|
+
'& > *': {
|
|
728
728
|
visibility: "hidden";
|
|
729
729
|
};
|
|
730
730
|
};
|
|
@@ -736,14 +736,32 @@ export declare const recipes: {
|
|
|
736
736
|
animationDuration: "var(--duration, 1.2s)";
|
|
737
737
|
};
|
|
738
738
|
shine: {
|
|
739
|
+
opacity: number;
|
|
739
740
|
'--animate-from': "100%";
|
|
740
741
|
'--animate-to': "-100%";
|
|
741
742
|
'--start-color': "colors.skeleton.bg.start";
|
|
742
743
|
'--end-color': "colors.skeleton.bg.end";
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
animation: "
|
|
744
|
+
position: "relative";
|
|
745
|
+
overflow: "hidden";
|
|
746
|
+
backgroundColor: "var(--start-color)";
|
|
747
|
+
animation: "none";
|
|
748
|
+
'&::after': {
|
|
749
|
+
content: "\"\"";
|
|
750
|
+
position: "absolute";
|
|
751
|
+
inset: "0";
|
|
752
|
+
left: "0";
|
|
753
|
+
width: "100%";
|
|
754
|
+
pointerEvents: "none";
|
|
755
|
+
willChange: "transform";
|
|
756
|
+
transform: "translateX(-100%)";
|
|
757
|
+
backgroundImage: "linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)";
|
|
758
|
+
animation: "skeletonShimmer var(--duration, 2s) linear infinite";
|
|
759
|
+
};
|
|
760
|
+
_motionReduce: {
|
|
761
|
+
'&::after': {
|
|
762
|
+
animation: "none";
|
|
763
|
+
};
|
|
764
|
+
};
|
|
747
765
|
};
|
|
748
766
|
none: {
|
|
749
767
|
animation: "none";
|
|
@@ -12,7 +12,7 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
|
|
|
12
12
|
borderWidth: "0px";
|
|
13
13
|
pointerEvents: "none";
|
|
14
14
|
userSelect: "none";
|
|
15
|
-
'
|
|
15
|
+
'& > *': {
|
|
16
16
|
visibility: "hidden";
|
|
17
17
|
};
|
|
18
18
|
};
|
|
@@ -24,14 +24,32 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
|
|
|
24
24
|
animationDuration: "var(--duration, 1.2s)";
|
|
25
25
|
};
|
|
26
26
|
shine: {
|
|
27
|
+
opacity: number;
|
|
27
28
|
'--animate-from': "100%";
|
|
28
29
|
'--animate-to': "-100%";
|
|
29
30
|
'--start-color': "colors.skeleton.bg.start";
|
|
30
31
|
'--end-color': "colors.skeleton.bg.end";
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
animation: "
|
|
32
|
+
position: "relative";
|
|
33
|
+
overflow: "hidden";
|
|
34
|
+
backgroundColor: "var(--start-color)";
|
|
35
|
+
animation: "none";
|
|
36
|
+
'&::after': {
|
|
37
|
+
content: "\"\"";
|
|
38
|
+
position: "absolute";
|
|
39
|
+
inset: "0";
|
|
40
|
+
left: "0";
|
|
41
|
+
width: "100%";
|
|
42
|
+
pointerEvents: "none";
|
|
43
|
+
willChange: "transform";
|
|
44
|
+
transform: "translateX(-100%)";
|
|
45
|
+
backgroundImage: "linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)";
|
|
46
|
+
animation: "skeletonShimmer var(--duration, 2s) linear infinite";
|
|
47
|
+
};
|
|
48
|
+
_motionReduce: {
|
|
49
|
+
'&::after': {
|
|
50
|
+
animation: "none";
|
|
51
|
+
};
|
|
52
|
+
};
|
|
35
53
|
};
|
|
36
54
|
none: {
|
|
37
55
|
animation: "none";
|
package/package.json
CHANGED