@arcblock/ux 2.9.19 → 2.9.21
Sign up to get free protection for your applications and to get access to all the features.
- package/es/Colors/themes/temp.js +21 -8
- package/es/LoadingMask/index.js +102 -0
- package/lib/Colors/themes/temp.js +21 -8
- package/lib/LoadingMask/index.js +109 -0
- package/package.json +9 -5
- package/src/Colors/themes/temp.js +25 -7
- package/src/LoadingMask/index.jsx +100 -0
package/es/Colors/themes/temp.js
CHANGED
|
@@ -1,26 +1,39 @@
|
|
|
1
1
|
const colors = {
|
|
2
|
-
lineStep: 'rgba(18, 22, 24, 0.06)',
|
|
3
|
-
lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
|
|
4
|
-
lineBorderBase: 'rgba(18, 22, 24, 0.06)',
|
|
5
|
-
borderBase: 'rgba(18, 22, 24, 0.06)',
|
|
6
2
|
textMuted: 'rgba(18, 22, 24, 0.36)',
|
|
7
3
|
textSubtitle: 'rgba(18, 22, 24, 0.6)',
|
|
8
4
|
textBase: 'rgba(18, 22, 24, 1)',
|
|
9
5
|
textPrimaryBase: 'rgba(18, 22, 24, 1)',
|
|
10
|
-
surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
|
|
11
|
-
surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
|
|
12
|
-
surfaceSuccess: 'rgba(13, 202, 134, 1)',
|
|
13
6
|
primaryBase: 'rgba(19, 125, 250, 1)',
|
|
14
7
|
primary100: 'rgba(19, 125, 250, 1)',
|
|
15
8
|
gray6: 'rgba(17, 22, 24, 0.06)',
|
|
9
|
+
// surface
|
|
10
|
+
surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
|
|
11
|
+
surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
|
|
12
|
+
surfaceSuccess: 'rgba(13, 202, 134, 1)',
|
|
13
|
+
// background
|
|
16
14
|
backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
|
|
17
15
|
backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
|
|
18
16
|
backgroundsBgField: 'rgba(249, 250, 251, 1)',
|
|
17
|
+
backgroundsBgSubtile: 'rgba(249, 250, 251, 1)',
|
|
18
|
+
backgroundsBgSubtileHover: 'rgba(243, 244, 246, 1)',
|
|
19
|
+
// foreground
|
|
19
20
|
foregroundsFgBase: 'rgba(3, 7, 18, 1)',
|
|
20
21
|
foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
|
|
22
|
+
foregroundsFgMuted: 'rgba(156, 163, 175, 1)',
|
|
23
|
+
foregroundsFgInteractiveTransparent: 'rgba(59, 130, 246, 0)',
|
|
24
|
+
foregroundsFgInteractive: 'rgba(59, 130, 246, 1)',
|
|
25
|
+
// border
|
|
21
26
|
strokeBorderBase: 'rgba(229, 231, 235, 1)',
|
|
22
27
|
strokeBorderStrong: 'rgba(209, 213, 219, 1)',
|
|
28
|
+
lineStep: 'rgba(18, 22, 24, 0.06)',
|
|
29
|
+
lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
|
|
30
|
+
lineBorderBase: 'rgba(18, 22, 24, 0.06)',
|
|
31
|
+
borderBase: 'rgba(18, 22, 24, 0.06)',
|
|
32
|
+
// button
|
|
23
33
|
buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
|
|
24
|
-
buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)'
|
|
34
|
+
buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
|
|
35
|
+
buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
|
|
36
|
+
buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
|
|
37
|
+
buttonsButtonDanger: 'rgba(225, 29, 72, 1)'
|
|
25
38
|
};
|
|
26
39
|
export default colors;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { Box } from '@mui/material';
|
|
3
|
+
import { temp as colors } from '../Colors';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
export default function LoadingMask({
|
|
7
|
+
size,
|
|
8
|
+
padding,
|
|
9
|
+
borderWidth,
|
|
10
|
+
borderRadius,
|
|
11
|
+
duration,
|
|
12
|
+
children
|
|
13
|
+
}) {
|
|
14
|
+
const finialSize = size;
|
|
15
|
+
const finialRadius = borderRadius ?? finialSize / 8;
|
|
16
|
+
const finialBorderWidth = borderWidth ?? finialSize / 32;
|
|
17
|
+
const finialPadding = padding ?? finialSize * 0.2 - finialBorderWidth;
|
|
18
|
+
const finialDuration = duration ?? 2.5;
|
|
19
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
20
|
+
sx: {
|
|
21
|
+
display: 'inline-flex',
|
|
22
|
+
justifyContent: 'center',
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
width: finialSize,
|
|
25
|
+
height: finialSize,
|
|
26
|
+
position: 'relative'
|
|
27
|
+
},
|
|
28
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
|
29
|
+
sx: {
|
|
30
|
+
pointerEvents: 'none',
|
|
31
|
+
position: 'absolute',
|
|
32
|
+
top: 0,
|
|
33
|
+
left: 0,
|
|
34
|
+
right: 0,
|
|
35
|
+
bottom: 0,
|
|
36
|
+
display: 'flex',
|
|
37
|
+
justifyContent: 'center',
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
width: finialSize,
|
|
40
|
+
height: finialSize,
|
|
41
|
+
overflow: 'hidden',
|
|
42
|
+
borderRadius: `${finialRadius}px`,
|
|
43
|
+
backgroundColor: colors.strokeBorderBase,
|
|
44
|
+
'&::before,&::after': {
|
|
45
|
+
content: '""',
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
top: 0,
|
|
48
|
+
bottom: 0,
|
|
49
|
+
left: 0,
|
|
50
|
+
right: 0,
|
|
51
|
+
pointerEvents: 'none'
|
|
52
|
+
},
|
|
53
|
+
'&::after': {
|
|
54
|
+
left: finialBorderWidth,
|
|
55
|
+
right: finialBorderWidth,
|
|
56
|
+
top: finialBorderWidth,
|
|
57
|
+
bottom: finialBorderWidth,
|
|
58
|
+
backgroundColor: 'white',
|
|
59
|
+
borderRadius: `${finialRadius - finialBorderWidth}px`
|
|
60
|
+
},
|
|
61
|
+
'&::before': {
|
|
62
|
+
background: `conic-gradient(from 45deg, ${colors.foregroundsFgInteractiveTransparent} 0%, ${colors.foregroundsFgInteractiveTransparent} 50%, ${colors.foregroundsFgInteractive} 90%, ${colors.foregroundsFgInteractive} 100%)`,
|
|
63
|
+
transform: 'scale(100)',
|
|
64
|
+
animation: `rotate ${finialDuration}s linear infinite`,
|
|
65
|
+
'@keyframes rotate': {
|
|
66
|
+
'0%': {
|
|
67
|
+
transform: 'scale(100) rotate(0deg)'
|
|
68
|
+
},
|
|
69
|
+
'100%': {
|
|
70
|
+
transform: 'scale(100) rotate(360deg)'
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}), /*#__PURE__*/_jsx(Box, {
|
|
76
|
+
sx: {
|
|
77
|
+
position: 'relative',
|
|
78
|
+
display: 'flex',
|
|
79
|
+
justifyContent: 'center',
|
|
80
|
+
alignItems: 'center',
|
|
81
|
+
width: finialSize - finialPadding - finialBorderWidth,
|
|
82
|
+
height: finialSize - finialPadding - finialBorderWidth
|
|
83
|
+
},
|
|
84
|
+
children: children
|
|
85
|
+
})]
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
LoadingMask.propTypes = {
|
|
89
|
+
size: PropTypes.number,
|
|
90
|
+
padding: PropTypes.number,
|
|
91
|
+
borderRadius: PropTypes.number,
|
|
92
|
+
borderWidth: PropTypes.number,
|
|
93
|
+
duration: PropTypes.number,
|
|
94
|
+
children: PropTypes.node.isRequired
|
|
95
|
+
};
|
|
96
|
+
LoadingMask.defaultProps = {
|
|
97
|
+
size: 64,
|
|
98
|
+
padding: undefined,
|
|
99
|
+
borderWidth: undefined,
|
|
100
|
+
duration: undefined,
|
|
101
|
+
borderRadius: undefined
|
|
102
|
+
};
|
|
@@ -5,28 +5,41 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
const colors = {
|
|
8
|
-
lineStep: 'rgba(18, 22, 24, 0.06)',
|
|
9
|
-
lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
|
|
10
|
-
lineBorderBase: 'rgba(18, 22, 24, 0.06)',
|
|
11
|
-
borderBase: 'rgba(18, 22, 24, 0.06)',
|
|
12
8
|
textMuted: 'rgba(18, 22, 24, 0.36)',
|
|
13
9
|
textSubtitle: 'rgba(18, 22, 24, 0.6)',
|
|
14
10
|
textBase: 'rgba(18, 22, 24, 1)',
|
|
15
11
|
textPrimaryBase: 'rgba(18, 22, 24, 1)',
|
|
16
|
-
surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
|
|
17
|
-
surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
|
|
18
|
-
surfaceSuccess: 'rgba(13, 202, 134, 1)',
|
|
19
12
|
primaryBase: 'rgba(19, 125, 250, 1)',
|
|
20
13
|
primary100: 'rgba(19, 125, 250, 1)',
|
|
21
14
|
gray6: 'rgba(17, 22, 24, 0.06)',
|
|
15
|
+
// surface
|
|
16
|
+
surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
|
|
17
|
+
surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
|
|
18
|
+
surfaceSuccess: 'rgba(13, 202, 134, 1)',
|
|
19
|
+
// background
|
|
22
20
|
backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
|
|
23
21
|
backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
|
|
24
22
|
backgroundsBgField: 'rgba(249, 250, 251, 1)',
|
|
23
|
+
backgroundsBgSubtile: 'rgba(249, 250, 251, 1)',
|
|
24
|
+
backgroundsBgSubtileHover: 'rgba(243, 244, 246, 1)',
|
|
25
|
+
// foreground
|
|
25
26
|
foregroundsFgBase: 'rgba(3, 7, 18, 1)',
|
|
26
27
|
foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
|
|
28
|
+
foregroundsFgMuted: 'rgba(156, 163, 175, 1)',
|
|
29
|
+
foregroundsFgInteractiveTransparent: 'rgba(59, 130, 246, 0)',
|
|
30
|
+
foregroundsFgInteractive: 'rgba(59, 130, 246, 1)',
|
|
31
|
+
// border
|
|
27
32
|
strokeBorderBase: 'rgba(229, 231, 235, 1)',
|
|
28
33
|
strokeBorderStrong: 'rgba(209, 213, 219, 1)',
|
|
34
|
+
lineStep: 'rgba(18, 22, 24, 0.06)',
|
|
35
|
+
lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
|
|
36
|
+
lineBorderBase: 'rgba(18, 22, 24, 0.06)',
|
|
37
|
+
borderBase: 'rgba(18, 22, 24, 0.06)',
|
|
38
|
+
// button
|
|
29
39
|
buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
|
|
30
|
-
buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)'
|
|
40
|
+
buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
|
|
41
|
+
buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
|
|
42
|
+
buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
|
|
43
|
+
buttonsButtonDanger: 'rgba(225, 29, 72, 1)'
|
|
31
44
|
};
|
|
32
45
|
var _default = exports.default = colors;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = LoadingMask;
|
|
7
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _material = require("@mui/material");
|
|
9
|
+
var _Colors = require("../Colors");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
function LoadingMask(_ref) {
|
|
13
|
+
let {
|
|
14
|
+
size,
|
|
15
|
+
padding,
|
|
16
|
+
borderWidth,
|
|
17
|
+
borderRadius,
|
|
18
|
+
duration,
|
|
19
|
+
children
|
|
20
|
+
} = _ref;
|
|
21
|
+
const finialSize = size;
|
|
22
|
+
const finialRadius = borderRadius !== null && borderRadius !== void 0 ? borderRadius : finialSize / 8;
|
|
23
|
+
const finialBorderWidth = borderWidth !== null && borderWidth !== void 0 ? borderWidth : finialSize / 32;
|
|
24
|
+
const finialPadding = padding !== null && padding !== void 0 ? padding : finialSize * 0.2 - finialBorderWidth;
|
|
25
|
+
const finialDuration = duration !== null && duration !== void 0 ? duration : 2.5;
|
|
26
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
|
|
27
|
+
sx: {
|
|
28
|
+
display: 'inline-flex',
|
|
29
|
+
justifyContent: 'center',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
width: finialSize,
|
|
32
|
+
height: finialSize,
|
|
33
|
+
position: 'relative'
|
|
34
|
+
},
|
|
35
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
36
|
+
sx: {
|
|
37
|
+
pointerEvents: 'none',
|
|
38
|
+
position: 'absolute',
|
|
39
|
+
top: 0,
|
|
40
|
+
left: 0,
|
|
41
|
+
right: 0,
|
|
42
|
+
bottom: 0,
|
|
43
|
+
display: 'flex',
|
|
44
|
+
justifyContent: 'center',
|
|
45
|
+
alignItems: 'center',
|
|
46
|
+
width: finialSize,
|
|
47
|
+
height: finialSize,
|
|
48
|
+
overflow: 'hidden',
|
|
49
|
+
borderRadius: "".concat(finialRadius, "px"),
|
|
50
|
+
backgroundColor: _Colors.temp.strokeBorderBase,
|
|
51
|
+
'&::before,&::after': {
|
|
52
|
+
content: '""',
|
|
53
|
+
position: 'absolute',
|
|
54
|
+
top: 0,
|
|
55
|
+
bottom: 0,
|
|
56
|
+
left: 0,
|
|
57
|
+
right: 0,
|
|
58
|
+
pointerEvents: 'none'
|
|
59
|
+
},
|
|
60
|
+
'&::after': {
|
|
61
|
+
left: finialBorderWidth,
|
|
62
|
+
right: finialBorderWidth,
|
|
63
|
+
top: finialBorderWidth,
|
|
64
|
+
bottom: finialBorderWidth,
|
|
65
|
+
backgroundColor: 'white',
|
|
66
|
+
borderRadius: "".concat(finialRadius - finialBorderWidth, "px")
|
|
67
|
+
},
|
|
68
|
+
'&::before': {
|
|
69
|
+
background: "conic-gradient(from 45deg, ".concat(_Colors.temp.foregroundsFgInteractiveTransparent, " 0%, ").concat(_Colors.temp.foregroundsFgInteractiveTransparent, " 50%, ").concat(_Colors.temp.foregroundsFgInteractive, " 90%, ").concat(_Colors.temp.foregroundsFgInteractive, " 100%)"),
|
|
70
|
+
transform: 'scale(100)',
|
|
71
|
+
animation: "rotate ".concat(finialDuration, "s linear infinite"),
|
|
72
|
+
'@keyframes rotate': {
|
|
73
|
+
'0%': {
|
|
74
|
+
transform: 'scale(100) rotate(0deg)'
|
|
75
|
+
},
|
|
76
|
+
'100%': {
|
|
77
|
+
transform: 'scale(100) rotate(360deg)'
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
83
|
+
sx: {
|
|
84
|
+
position: 'relative',
|
|
85
|
+
display: 'flex',
|
|
86
|
+
justifyContent: 'center',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
width: finialSize - finialPadding - finialBorderWidth,
|
|
89
|
+
height: finialSize - finialPadding - finialBorderWidth
|
|
90
|
+
},
|
|
91
|
+
children: children
|
|
92
|
+
})]
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
LoadingMask.propTypes = {
|
|
96
|
+
size: _propTypes.default.number,
|
|
97
|
+
padding: _propTypes.default.number,
|
|
98
|
+
borderRadius: _propTypes.default.number,
|
|
99
|
+
borderWidth: _propTypes.default.number,
|
|
100
|
+
duration: _propTypes.default.number,
|
|
101
|
+
children: _propTypes.default.node.isRequired
|
|
102
|
+
};
|
|
103
|
+
LoadingMask.defaultProps = {
|
|
104
|
+
size: 64,
|
|
105
|
+
padding: undefined,
|
|
106
|
+
borderWidth: undefined,
|
|
107
|
+
duration: undefined,
|
|
108
|
+
borderRadius: undefined
|
|
109
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.21",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -195,6 +195,10 @@
|
|
|
195
195
|
"import": "./es/Layout/index.js",
|
|
196
196
|
"require": "./lib/Layout/index.js"
|
|
197
197
|
},
|
|
198
|
+
"./lib/LoadingMask": {
|
|
199
|
+
"import": "./es/LoadingMask/index.js",
|
|
200
|
+
"require": "./lib/LoadingMask/index.js"
|
|
201
|
+
},
|
|
198
202
|
"./lib/Logo": {
|
|
199
203
|
"import": "./es/Logo/index.js",
|
|
200
204
|
"require": "./lib/Logo/index.js"
|
|
@@ -344,12 +348,12 @@
|
|
|
344
348
|
"peerDependencies": {
|
|
345
349
|
"react": ">=18.1.0"
|
|
346
350
|
},
|
|
347
|
-
"gitHead": "
|
|
351
|
+
"gitHead": "800e32d5197a96b1b0a7dcf08f0bf11132c301e9",
|
|
348
352
|
"dependencies": {
|
|
349
353
|
"@arcblock/did-motif": "^1.1.13",
|
|
350
|
-
"@arcblock/icons": "^2.9.
|
|
351
|
-
"@arcblock/nft-display": "^2.9.
|
|
352
|
-
"@arcblock/react-hooks": "^2.9.
|
|
354
|
+
"@arcblock/icons": "^2.9.21",
|
|
355
|
+
"@arcblock/nft-display": "^2.9.21",
|
|
356
|
+
"@arcblock/react-hooks": "^2.9.21",
|
|
353
357
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
354
358
|
"@emotion/react": "^11.10.4",
|
|
355
359
|
"@emotion/styled": "^11.10.4",
|
|
@@ -1,27 +1,45 @@
|
|
|
1
1
|
const colors = {
|
|
2
|
-
lineStep: 'rgba(18, 22, 24, 0.06)',
|
|
3
|
-
lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
|
|
4
|
-
lineBorderBase: 'rgba(18, 22, 24, 0.06)',
|
|
5
|
-
borderBase: 'rgba(18, 22, 24, 0.06)',
|
|
6
2
|
textMuted: 'rgba(18, 22, 24, 0.36)',
|
|
7
3
|
textSubtitle: 'rgba(18, 22, 24, 0.6)',
|
|
8
4
|
textBase: 'rgba(18, 22, 24, 1)',
|
|
9
5
|
textPrimaryBase: 'rgba(18, 22, 24, 1)',
|
|
10
|
-
surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
|
|
11
|
-
surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
|
|
12
|
-
surfaceSuccess: 'rgba(13, 202, 134, 1)',
|
|
13
6
|
primaryBase: 'rgba(19, 125, 250, 1)',
|
|
14
7
|
primary100: 'rgba(19, 125, 250, 1)',
|
|
15
8
|
gray6: 'rgba(17, 22, 24, 0.06)',
|
|
9
|
+
|
|
10
|
+
// surface
|
|
11
|
+
surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
|
|
12
|
+
surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
|
|
13
|
+
surfaceSuccess: 'rgba(13, 202, 134, 1)',
|
|
14
|
+
|
|
15
|
+
// background
|
|
16
16
|
backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
|
|
17
17
|
backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
|
|
18
18
|
backgroundsBgField: 'rgba(249, 250, 251, 1)',
|
|
19
|
+
backgroundsBgSubtile: 'rgba(249, 250, 251, 1)',
|
|
20
|
+
backgroundsBgSubtileHover: 'rgba(243, 244, 246, 1)',
|
|
21
|
+
|
|
22
|
+
// foreground
|
|
19
23
|
foregroundsFgBase: 'rgba(3, 7, 18, 1)',
|
|
20
24
|
foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
|
|
25
|
+
foregroundsFgMuted: 'rgba(156, 163, 175, 1)',
|
|
26
|
+
foregroundsFgInteractiveTransparent: 'rgba(59, 130, 246, 0)',
|
|
27
|
+
foregroundsFgInteractive: 'rgba(59, 130, 246, 1)',
|
|
28
|
+
|
|
29
|
+
// border
|
|
21
30
|
strokeBorderBase: 'rgba(229, 231, 235, 1)',
|
|
22
31
|
strokeBorderStrong: 'rgba(209, 213, 219, 1)',
|
|
32
|
+
lineStep: 'rgba(18, 22, 24, 0.06)',
|
|
33
|
+
lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
|
|
34
|
+
lineBorderBase: 'rgba(18, 22, 24, 0.06)',
|
|
35
|
+
borderBase: 'rgba(18, 22, 24, 0.06)',
|
|
36
|
+
|
|
37
|
+
// button
|
|
23
38
|
buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
|
|
24
39
|
buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
|
|
40
|
+
buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
|
|
41
|
+
buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
|
|
42
|
+
buttonsButtonDanger: 'rgba(225, 29, 72, 1)',
|
|
25
43
|
};
|
|
26
44
|
|
|
27
45
|
export default colors;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { Box } from '@mui/material';
|
|
3
|
+
|
|
4
|
+
import { temp as colors } from '../Colors';
|
|
5
|
+
|
|
6
|
+
export default function LoadingMask({ size, padding, borderWidth, borderRadius, duration, children }) {
|
|
7
|
+
const finialSize = size;
|
|
8
|
+
const finialRadius = borderRadius ?? finialSize / 8;
|
|
9
|
+
const finialBorderWidth = borderWidth ?? finialSize / 32;
|
|
10
|
+
const finialPadding = padding ?? finialSize * 0.2 - finialBorderWidth;
|
|
11
|
+
const finialDuration = duration ?? 2.5;
|
|
12
|
+
return (
|
|
13
|
+
<Box
|
|
14
|
+
sx={{
|
|
15
|
+
display: 'inline-flex',
|
|
16
|
+
justifyContent: 'center',
|
|
17
|
+
alignItems: 'center',
|
|
18
|
+
width: finialSize,
|
|
19
|
+
height: finialSize,
|
|
20
|
+
position: 'relative',
|
|
21
|
+
}}>
|
|
22
|
+
<Box
|
|
23
|
+
sx={{
|
|
24
|
+
pointerEvents: 'none',
|
|
25
|
+
position: 'absolute',
|
|
26
|
+
top: 0,
|
|
27
|
+
left: 0,
|
|
28
|
+
right: 0,
|
|
29
|
+
bottom: 0,
|
|
30
|
+
display: 'flex',
|
|
31
|
+
justifyContent: 'center',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
width: finialSize,
|
|
34
|
+
height: finialSize,
|
|
35
|
+
overflow: 'hidden',
|
|
36
|
+
borderRadius: `${finialRadius}px`,
|
|
37
|
+
backgroundColor: colors.strokeBorderBase,
|
|
38
|
+
'&::before,&::after': {
|
|
39
|
+
content: '""',
|
|
40
|
+
position: 'absolute',
|
|
41
|
+
top: 0,
|
|
42
|
+
bottom: 0,
|
|
43
|
+
left: 0,
|
|
44
|
+
right: 0,
|
|
45
|
+
pointerEvents: 'none',
|
|
46
|
+
},
|
|
47
|
+
'&::after': {
|
|
48
|
+
left: finialBorderWidth,
|
|
49
|
+
right: finialBorderWidth,
|
|
50
|
+
top: finialBorderWidth,
|
|
51
|
+
bottom: finialBorderWidth,
|
|
52
|
+
backgroundColor: 'white',
|
|
53
|
+
borderRadius: `${finialRadius - finialBorderWidth}px`,
|
|
54
|
+
},
|
|
55
|
+
'&::before': {
|
|
56
|
+
background: `conic-gradient(from 45deg, ${colors.foregroundsFgInteractiveTransparent} 0%, ${colors.foregroundsFgInteractiveTransparent} 50%, ${colors.foregroundsFgInteractive} 90%, ${colors.foregroundsFgInteractive} 100%)`,
|
|
57
|
+
transform: 'scale(100)',
|
|
58
|
+
animation: `rotate ${finialDuration}s linear infinite`,
|
|
59
|
+
'@keyframes rotate': {
|
|
60
|
+
'0%': {
|
|
61
|
+
transform: 'scale(100) rotate(0deg)',
|
|
62
|
+
},
|
|
63
|
+
'100%': {
|
|
64
|
+
transform: 'scale(100) rotate(360deg)',
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
}}
|
|
69
|
+
/>
|
|
70
|
+
<Box
|
|
71
|
+
sx={{
|
|
72
|
+
position: 'relative',
|
|
73
|
+
display: 'flex',
|
|
74
|
+
justifyContent: 'center',
|
|
75
|
+
alignItems: 'center',
|
|
76
|
+
width: finialSize - finialPadding - finialBorderWidth,
|
|
77
|
+
height: finialSize - finialPadding - finialBorderWidth,
|
|
78
|
+
}}>
|
|
79
|
+
{children}
|
|
80
|
+
</Box>
|
|
81
|
+
</Box>
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
LoadingMask.propTypes = {
|
|
86
|
+
size: PropTypes.number,
|
|
87
|
+
padding: PropTypes.number,
|
|
88
|
+
borderRadius: PropTypes.number,
|
|
89
|
+
borderWidth: PropTypes.number,
|
|
90
|
+
duration: PropTypes.number,
|
|
91
|
+
children: PropTypes.node.isRequired,
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
LoadingMask.defaultProps = {
|
|
95
|
+
size: 64,
|
|
96
|
+
padding: undefined,
|
|
97
|
+
borderWidth: undefined,
|
|
98
|
+
duration: undefined,
|
|
99
|
+
borderRadius: undefined,
|
|
100
|
+
};
|