@semcore/skeleton 5.42.2 → 5.42.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/CHANGELOG.md +6 -0
- package/lib/cjs/Charts/Area.js +12 -10
- package/lib/cjs/Charts/Area.js.map +1 -1
- package/lib/cjs/Charts/Bar.js +12 -10
- package/lib/cjs/Charts/Bar.js.map +1 -1
- package/lib/cjs/Charts/Bubble.js +12 -10
- package/lib/cjs/Charts/Bubble.js.map +1 -1
- package/lib/cjs/Charts/CompactHorizontalBar.js +12 -10
- package/lib/cjs/Charts/CompactHorizontalBar.js.map +1 -1
- package/lib/cjs/Charts/Donut.js +12 -10
- package/lib/cjs/Charts/Donut.js.map +1 -1
- package/lib/cjs/Charts/Histogram.js +12 -10
- package/lib/cjs/Charts/Histogram.js.map +1 -1
- package/lib/cjs/Charts/Line.js +12 -10
- package/lib/cjs/Charts/Line.js.map +1 -1
- package/lib/cjs/Charts/RadialTree.js +12 -10
- package/lib/cjs/Charts/RadialTree.js.map +1 -1
- package/lib/cjs/Charts/ScatterPlot.js +12 -10
- package/lib/cjs/Charts/ScatterPlot.js.map +1 -1
- package/lib/cjs/Charts/Venn.js +12 -10
- package/lib/cjs/Charts/Venn.js.map +1 -1
- package/lib/cjs/Skeleton.js +11 -9
- package/lib/cjs/Skeleton.js.map +1 -1
- package/lib/es6/Charts/Area.js +12 -10
- package/lib/es6/Charts/Area.js.map +1 -1
- package/lib/es6/Charts/Bar.js +12 -10
- package/lib/es6/Charts/Bar.js.map +1 -1
- package/lib/es6/Charts/Bubble.js +12 -10
- package/lib/es6/Charts/Bubble.js.map +1 -1
- package/lib/es6/Charts/CompactHorizontalBar.js +12 -10
- package/lib/es6/Charts/CompactHorizontalBar.js.map +1 -1
- package/lib/es6/Charts/Donut.js +12 -10
- package/lib/es6/Charts/Donut.js.map +1 -1
- package/lib/es6/Charts/Histogram.js +12 -10
- package/lib/es6/Charts/Histogram.js.map +1 -1
- package/lib/es6/Charts/Line.js +12 -10
- package/lib/es6/Charts/Line.js.map +1 -1
- package/lib/es6/Charts/RadialTree.js +12 -10
- package/lib/es6/Charts/RadialTree.js.map +1 -1
- package/lib/es6/Charts/ScatterPlot.js +12 -10
- package/lib/es6/Charts/ScatterPlot.js.map +1 -1
- package/lib/es6/Charts/Venn.js +12 -10
- package/lib/es6/Charts/Venn.js.map +1 -1
- package/lib/es6/Skeleton.js +11 -9
- package/lib/es6/Skeleton.js.map +1 -1
- package/lib/esm/Charts/Area.mjs +39 -31
- package/lib/esm/Charts/Bar.mjs +43 -34
- package/lib/esm/Charts/Bubble.mjs +34 -28
- package/lib/esm/Charts/CompactHorizontalBar.mjs +34 -28
- package/lib/esm/Charts/Donut.mjs +43 -34
- package/lib/esm/Charts/Histogram.mjs +43 -34
- package/lib/esm/Charts/Line.mjs +39 -31
- package/lib/esm/Charts/RadialTree.mjs +34 -28
- package/lib/esm/Charts/ScatterPlot.mjs +34 -28
- package/lib/esm/Charts/Venn.mjs +34 -28
- package/lib/esm/Skeleton.mjs +141 -114
- package/lib/esm/index.mjs +22 -22
- package/lib/esm/style/chart.shadow.css +17 -0
- package/lib/esm/style/skeleton.shadow.css +39 -0
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
- package/lib/esm/translations/de.json.mjs +5 -4
- package/lib/esm/translations/en.json.mjs +5 -4
- package/lib/esm/translations/es.json.mjs +5 -4
- package/lib/esm/translations/fr.json.mjs +5 -4
- package/lib/esm/translations/it.json.mjs +5 -4
- package/lib/esm/translations/ja.json.mjs +5 -4
- package/lib/esm/translations/ko.json.mjs +5 -4
- package/lib/esm/translations/nl.json.mjs +5 -4
- package/lib/esm/translations/pl.json.mjs +5 -4
- package/lib/esm/translations/pt.json.mjs +5 -4
- package/lib/esm/translations/sv.json.mjs +5 -4
- package/lib/esm/translations/tr.json.mjs +5 -4
- package/lib/esm/translations/vi.json.mjs +5 -4
- package/lib/esm/translations/zh.json.mjs +5 -4
- package/package.json +3 -3
package/lib/esm/Skeleton.mjs
CHANGED
|
@@ -1,153 +1,180 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import { sstyled
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { Box
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import { localizedMessages
|
|
18
|
-
var
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
4
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
5
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
6
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
11
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
12
|
+
import React from "react";
|
|
13
|
+
import { Box } from "@semcore/flex-box";
|
|
14
|
+
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
15
|
+
import canUseDOM from "@semcore/utils/lib/canUseDOM";
|
|
16
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
17
|
+
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
18
|
+
var _excluded = ["y", "x", "amount", "width", "styles", "forwardRef"];
|
|
19
|
+
/*!__reshadow-styles__:"./style/skeleton.shadow.css"*/
|
|
20
|
+
var style = (
|
|
19
21
|
/*__reshadow_css_start__*/
|
|
20
|
-
(
|
|
22
|
+
(sstyled.insert(
|
|
21
23
|
/*__inner_css_start__*/
|
|
22
|
-
"@keyframes
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
"@keyframes pulse_13d8e{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_13d8e_gg_{animation-name:pulse_13d8e;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_13d8e);will-change:opacity}.___SSkeletonSVG_13d8e_gg_._theme_invert_13d8e_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_13d8e_gg_._theme_dark_13d8e_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_13d8e_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_13d8e_gg_{animation-name:none}}",
|
|
25
|
+
/*__inner_css_end__*/
|
|
26
|
+
"13d8e_gg_"
|
|
27
|
+
), /*__reshadow_css_end__*/
|
|
28
|
+
{
|
|
29
|
+
"__SSkeleton": "___SSkeleton_13d8e_gg_",
|
|
30
|
+
"--durationAnim": "--durationAnim_13d8e",
|
|
31
|
+
"@pulse": "pulse_13d8e",
|
|
32
|
+
"__SSkeletonSVG": "___SSkeletonSVG_13d8e_gg_",
|
|
33
|
+
"_theme_invert": "_theme_invert_13d8e_gg_",
|
|
34
|
+
"_theme_dark": "_theme_dark_13d8e_gg_",
|
|
35
|
+
"__SText": "___SText_13d8e_gg_"
|
|
32
36
|
})
|
|
33
|
-
)
|
|
37
|
+
);
|
|
38
|
+
var MAP_COLOR_THEME = {
|
|
34
39
|
dark: "rgba(255, 255, 255, 0.3)",
|
|
35
40
|
invert: "rgba(224, 225, 233, 0.8)"
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
};
|
|
42
|
+
var SkeletonRoot = /* @__PURE__ */ function(_Component) {
|
|
43
|
+
_inherits(SkeletonRoot2, _Component);
|
|
44
|
+
var _super = _createSuper(SkeletonRoot2);
|
|
45
|
+
function SkeletonRoot2() {
|
|
46
|
+
_classCallCheck(this, SkeletonRoot2);
|
|
47
|
+
return _super.apply(this, arguments);
|
|
41
48
|
}
|
|
42
|
-
|
|
49
|
+
_createClass(SkeletonRoot2, [{
|
|
43
50
|
key: "render",
|
|
44
|
-
value: function() {
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
},
|
|
51
|
+
value: function render() {
|
|
52
|
+
var _ref = this.asProps, _ref3;
|
|
53
|
+
var SSkeleton = Box;
|
|
54
|
+
var _this$asProps = this.asProps;
|
|
55
|
+
_this$asProps.Children;
|
|
56
|
+
var styles = _this$asProps.styles, duration = _this$asProps.duration, hidden = _this$asProps.hidden, getI18nText = _this$asProps.getI18nText;
|
|
57
|
+
_this$asProps.tag;
|
|
58
|
+
if (hidden) return null;
|
|
59
|
+
return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSkeleton, _ref3.cn("SSkeleton", _objectSpread({}, assignProps({
|
|
60
|
+
"durationAnim": "".concat(duration, "ms"),
|
|
61
|
+
"role": "img",
|
|
62
|
+
"aria-label": getI18nText("loading")
|
|
63
|
+
}, _ref))));
|
|
53
64
|
}
|
|
54
|
-
}])
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
65
|
+
}]);
|
|
66
|
+
return SkeletonRoot2;
|
|
67
|
+
}(Component);
|
|
68
|
+
_defineProperty(SkeletonRoot, "displayName", "Skeleton");
|
|
69
|
+
_defineProperty(SkeletonRoot, "style", style);
|
|
70
|
+
_defineProperty(SkeletonRoot, "enhance", [i18nEnhance(localizedMessages)]);
|
|
71
|
+
_defineProperty(SkeletonRoot, "defaultProps", {
|
|
60
72
|
width: "100%",
|
|
61
73
|
height: "100%",
|
|
62
74
|
duration: 2e3
|
|
63
75
|
});
|
|
64
|
-
var
|
|
65
|
-
|
|
66
|
-
var
|
|
67
|
-
function
|
|
68
|
-
var
|
|
69
|
-
|
|
76
|
+
var SkeletonSVG = /* @__PURE__ */ function(_Component2) {
|
|
77
|
+
_inherits(SkeletonSVG2, _Component2);
|
|
78
|
+
var _super2 = _createSuper(SkeletonSVG2);
|
|
79
|
+
function SkeletonSVG2(props) {
|
|
80
|
+
var _this;
|
|
81
|
+
_classCallCheck(this, SkeletonSVG2);
|
|
82
|
+
_this = _super2.call(this, props);
|
|
83
|
+
_defineProperty(_assertThisInitialized(_this), "svgRef", /* @__PURE__ */ React.createRef());
|
|
84
|
+
if (canUseDOM() && props.observeParentSize) {
|
|
85
|
+
_this.observer = new ResizeObserver(_this.handleResize.bind(_assertThisInitialized(_this)));
|
|
86
|
+
}
|
|
87
|
+
return _this;
|
|
70
88
|
}
|
|
71
|
-
|
|
89
|
+
_createClass(SkeletonSVG2, [{
|
|
72
90
|
key: "componentDidMount",
|
|
73
|
-
value: function() {
|
|
74
|
-
var
|
|
75
|
-
(
|
|
91
|
+
value: function componentDidMount() {
|
|
92
|
+
var _this$observer, _this$svgRef$current;
|
|
93
|
+
(_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.observe((_this$svgRef$current = this.svgRef.current) === null || _this$svgRef$current === void 0 ? void 0 : _this$svgRef$current.parentElement);
|
|
76
94
|
}
|
|
77
95
|
}, {
|
|
78
96
|
key: "componentWillUnmount",
|
|
79
|
-
value: function() {
|
|
80
|
-
var
|
|
81
|
-
(
|
|
97
|
+
value: function componentWillUnmount() {
|
|
98
|
+
var _this$observer2;
|
|
99
|
+
(_this$observer2 = this.observer) === null || _this$observer2 === void 0 ? void 0 : _this$observer2.disconnect();
|
|
82
100
|
}
|
|
83
101
|
}, {
|
|
84
102
|
key: "handleResize",
|
|
85
|
-
value: function(
|
|
86
|
-
var
|
|
87
|
-
|
|
103
|
+
value: function handleResize(data) {
|
|
104
|
+
var target = data[0].target;
|
|
105
|
+
var svg = this.svgRef.current;
|
|
106
|
+
if (target && svg) {
|
|
107
|
+
svg.setAttribute("width", "100%");
|
|
108
|
+
}
|
|
88
109
|
}
|
|
89
110
|
}, {
|
|
90
111
|
key: "setContext",
|
|
91
|
-
value: function() {
|
|
92
|
-
var
|
|
112
|
+
value: function setContext() {
|
|
113
|
+
var theme = this.asProps.theme;
|
|
93
114
|
return {
|
|
94
|
-
gradientUrl:
|
|
115
|
+
gradientUrl: MAP_COLOR_THEME[theme]
|
|
95
116
|
};
|
|
96
117
|
}
|
|
97
118
|
}, {
|
|
98
119
|
key: "render",
|
|
99
|
-
value: function() {
|
|
100
|
-
var
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}), /* @__PURE__ */
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
120
|
+
value: function render() {
|
|
121
|
+
var _ref2 = this.asProps, _ref4;
|
|
122
|
+
var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, uid = _this$asProps2.uid, theme = _this$asProps2.theme, duration = _this$asProps2.duration;
|
|
123
|
+
var SSkeletonSVG = Skeleton;
|
|
124
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSkeletonSVG, _ref4.cn("SSkeletonSVG", _objectSpread({}, assignProps({
|
|
125
|
+
"tag": "svg",
|
|
126
|
+
"ref": this.svgRef,
|
|
127
|
+
"preserveAspectRatio": "none",
|
|
128
|
+
"theme": theme,
|
|
129
|
+
"durationAnim": "".concat(duration, "ms")
|
|
130
|
+
}, _ref2))), /* @__PURE__ */ React.createElement("defs", _ref4.cn("defs", {}), /* @__PURE__ */ React.createElement("mask", _ref4.cn("mask", {
|
|
131
|
+
"id": uid
|
|
132
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})))), /* @__PURE__ */ React.createElement("rect", _ref4.cn("rect", {
|
|
133
|
+
"x": "0",
|
|
134
|
+
"y": "0",
|
|
135
|
+
"width": "100%",
|
|
136
|
+
"height": "100%",
|
|
137
|
+
"mask": "url(#".concat(uid, ")")
|
|
115
138
|
})));
|
|
116
139
|
}
|
|
117
|
-
}])
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
140
|
+
}]);
|
|
141
|
+
return SkeletonSVG2;
|
|
142
|
+
}(Component);
|
|
143
|
+
_defineProperty(SkeletonSVG, "displayName", "SkeletonSVG");
|
|
144
|
+
_defineProperty(SkeletonSVG, "enhance", [uniqueIDEnhancement()]);
|
|
145
|
+
_defineProperty(SkeletonSVG, "style", style);
|
|
146
|
+
_defineProperty(SkeletonSVG, "defaultProps", {
|
|
123
147
|
theme: "invert",
|
|
124
148
|
duration: 2e3
|
|
125
149
|
});
|
|
126
|
-
function
|
|
127
|
-
var
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
150
|
+
function Text(props) {
|
|
151
|
+
var SText = Box;
|
|
152
|
+
var _props$y = props.y, y = _props$y === void 0 ? 0 : _props$y, _props$x = props.x, x = _props$x === void 0 ? 0 : _props$x, _props$amount = props.amount, amount = _props$amount === void 0 ? 1 : _props$amount, _props$width = props.width, width = _props$width === void 0 ? "100%" : _props$width, styles = props.styles, forwardRef = props.forwardRef, other = _objectWithoutProperties(props, _excluded);
|
|
153
|
+
var amountLine = Number(amount);
|
|
154
|
+
var renderRect = function renderRect2(props2) {
|
|
155
|
+
var _ref5;
|
|
156
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", _objectSpread({
|
|
157
|
+
"tag": "rect",
|
|
158
|
+
"rx": "4",
|
|
159
|
+
"ry": "4",
|
|
160
|
+
"height": "8"
|
|
161
|
+
}, props2)));
|
|
135
162
|
};
|
|
136
|
-
return /* @__PURE__ */
|
|
137
|
-
return
|
|
138
|
-
key:
|
|
139
|
-
y:
|
|
140
|
-
x
|
|
141
|
-
ref:
|
|
142
|
-
width
|
|
143
|
-
},
|
|
163
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, _toConsumableArray(Array(amountLine)).map(function(el, index) {
|
|
164
|
+
return renderRect(_objectSpread({
|
|
165
|
+
key: index,
|
|
166
|
+
y: y || 20 * index,
|
|
167
|
+
x,
|
|
168
|
+
ref: forwardRef,
|
|
169
|
+
width
|
|
170
|
+
}, other));
|
|
144
171
|
}));
|
|
145
172
|
}
|
|
146
|
-
var
|
|
147
|
-
const
|
|
148
|
-
Text
|
|
173
|
+
var Skeleton = createComponent(SkeletonRoot);
|
|
174
|
+
const Skeleton$1 = createComponent(SkeletonSVG, {
|
|
175
|
+
Text
|
|
149
176
|
});
|
|
150
177
|
export {
|
|
151
|
-
|
|
152
|
-
|
|
178
|
+
Skeleton,
|
|
179
|
+
Skeleton$1 as default
|
|
153
180
|
};
|
package/lib/esm/index.mjs
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { default as
|
|
3
|
-
import { default as
|
|
4
|
-
import { default as
|
|
5
|
-
import { default as
|
|
6
|
-
import { default as
|
|
7
|
-
import { default as
|
|
8
|
-
import { default as
|
|
9
|
-
import { default as
|
|
10
|
-
import { default as
|
|
11
|
-
import { default as
|
|
1
|
+
import { default as default2 } from "./Skeleton.mjs";
|
|
2
|
+
import { default as default3 } from "./Charts/Histogram.mjs";
|
|
3
|
+
import { default as default4 } from "./Charts/Donut.mjs";
|
|
4
|
+
import { default as default5 } from "./Charts/Bar.mjs";
|
|
5
|
+
import { default as default6 } from "./Charts/CompactHorizontalBar.mjs";
|
|
6
|
+
import { default as default7 } from "./Charts/Area.mjs";
|
|
7
|
+
import { default as default8 } from "./Charts/Line.mjs";
|
|
8
|
+
import { default as default9 } from "./Charts/Venn.mjs";
|
|
9
|
+
import { default as default10 } from "./Charts/ScatterPlot.mjs";
|
|
10
|
+
import { default as default11 } from "./Charts/Bubble.mjs";
|
|
11
|
+
import { default as default12 } from "./Charts/RadialTree.mjs";
|
|
12
12
|
export {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
default7 as AreaChartSkeleton,
|
|
14
|
+
default5 as BarChartSkeleton,
|
|
15
|
+
default11 as BubbleChartSkeleton,
|
|
16
|
+
default6 as CompactHorizontalBarChartSkeleton,
|
|
17
|
+
default4 as DonutChartSkeleton,
|
|
18
|
+
default3 as HistogramChartSkeleton,
|
|
19
|
+
default8 as LineChartSkeleton,
|
|
20
|
+
default12 as RadialTreeChartSkeleton,
|
|
21
|
+
default10 as ScatterPlotChartSkeleton,
|
|
22
|
+
default9 as VennChartSkeleton,
|
|
23
|
+
default2 as default
|
|
24
24
|
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
SChartSkeleton {
|
|
2
|
+
height: 200px;
|
|
3
|
+
width: 100%;
|
|
4
|
+
background-image: var(--bgPattern);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
SChartSkeleton[bgPosition] {
|
|
8
|
+
background-position: var(--bgPosition);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
SChartSkeleton[bgSize] {
|
|
12
|
+
background-size: var(--bgSize);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
SChartSkeleton[bgRepeat] {
|
|
16
|
+
background-repeat: var(--bgRepeat);
|
|
17
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
SSkeleton {
|
|
2
|
+
animation-name: pulse;
|
|
3
|
+
animation-iteration-count: infinite;
|
|
4
|
+
animation-timing-function: ease-in-out;
|
|
5
|
+
animation-duration: var(--durationAnim);
|
|
6
|
+
will-change: opacity;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@keyframes pulse {
|
|
10
|
+
0% {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
50% {
|
|
15
|
+
opacity: 0.4;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
100% {
|
|
19
|
+
opacity: 1;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
SSkeletonSVG[theme='invert'] {
|
|
24
|
+
fill: var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
SSkeletonSVG[theme='dark'] {
|
|
28
|
+
fill: var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3));
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
SText {
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@media (prefers-reduced-motion) {
|
|
36
|
+
SSkeleton {
|
|
37
|
+
animation-name: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
var
|
|
16
|
-
de
|
|
17
|
-
en
|
|
18
|
-
es
|
|
19
|
-
fr
|
|
20
|
-
it
|
|
21
|
-
ja
|
|
22
|
-
ko
|
|
23
|
-
nl
|
|
24
|
-
pt
|
|
25
|
-
tr
|
|
26
|
-
vi
|
|
27
|
-
zh
|
|
28
|
-
pl
|
|
29
|
-
sv
|
|
1
|
+
import de from "./de.json.mjs";
|
|
2
|
+
import en from "./en.json.mjs";
|
|
3
|
+
import es from "./es.json.mjs";
|
|
4
|
+
import fr from "./fr.json.mjs";
|
|
5
|
+
import it from "./it.json.mjs";
|
|
6
|
+
import ja from "./ja.json.mjs";
|
|
7
|
+
import ko from "./ko.json.mjs";
|
|
8
|
+
import nl from "./nl.json.mjs";
|
|
9
|
+
import pt from "./pt.json.mjs";
|
|
10
|
+
import tr from "./tr.json.mjs";
|
|
11
|
+
import vi from "./vi.json.mjs";
|
|
12
|
+
import zh from "./zh.json.mjs";
|
|
13
|
+
import pl from "./pl.json.mjs";
|
|
14
|
+
import sv from "./sv.json.mjs";
|
|
15
|
+
var localizedMessages = {
|
|
16
|
+
de,
|
|
17
|
+
en,
|
|
18
|
+
es,
|
|
19
|
+
fr,
|
|
20
|
+
it,
|
|
21
|
+
ja,
|
|
22
|
+
ko,
|
|
23
|
+
nl,
|
|
24
|
+
pt,
|
|
25
|
+
tr,
|
|
26
|
+
vi,
|
|
27
|
+
zh,
|
|
28
|
+
pl,
|
|
29
|
+
sv
|
|
30
30
|
};
|
|
31
31
|
export {
|
|
32
|
-
|
|
32
|
+
localizedMessages
|
|
33
33
|
};
|