@selfcommunity/react-theme-default 0.2.1-alpha.4 → 0.3.0-alpha.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/lib/cjs/components/SCEventMediaWidget.d.ts +120 -0
- package/lib/cjs/components/SCEventMediaWidget.js +115 -0
- package/lib/cjs/index.d.ts +119 -3
- package/lib/cjs/index.js +3 -1
- package/lib/esm/components/SCEventMediaWidget.d.ts +120 -0
- package/lib/esm/components/SCEventMediaWidget.js +113 -0
- package/lib/esm/index.d.ts +119 -3
- package/lib/esm/index.js +3 -1
- package/lib/umd/react-theme-default.js +2 -2
- package/package.json +4 -4
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
declare const Component: {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
root: ({ theme, showPadding }: {
|
|
4
|
+
theme: any;
|
|
5
|
+
showPadding: any;
|
|
6
|
+
}) => {
|
|
7
|
+
'& .SCEventMediaWidget-header': {
|
|
8
|
+
padding: any;
|
|
9
|
+
};
|
|
10
|
+
'& .SCEventMediaWidget-content': {
|
|
11
|
+
padding: any;
|
|
12
|
+
'& .SCEventMediaWidget-grid': {
|
|
13
|
+
display: string;
|
|
14
|
+
gap: string;
|
|
15
|
+
gridTemplateColumns: string;
|
|
16
|
+
'& > .SCEventMediaWidget-media': {
|
|
17
|
+
position: string;
|
|
18
|
+
width: string;
|
|
19
|
+
paddingBottom: string;
|
|
20
|
+
backgroundSize: string;
|
|
21
|
+
cursor: string;
|
|
22
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
23
|
+
position: string;
|
|
24
|
+
inset: number;
|
|
25
|
+
backgroundColor: string;
|
|
26
|
+
opacity: number;
|
|
27
|
+
};
|
|
28
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
29
|
+
position: string;
|
|
30
|
+
top: string;
|
|
31
|
+
left: string;
|
|
32
|
+
transform: string;
|
|
33
|
+
color: any;
|
|
34
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
35
|
+
fontSize: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
'& .SCEventMediaWidget-actions': {
|
|
42
|
+
padding: any;
|
|
43
|
+
justifyContent: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
skeletonRoot: ({}: {}) => {
|
|
47
|
+
'& .SCEventMediaWidget-grid': {
|
|
48
|
+
display: string;
|
|
49
|
+
gap: string;
|
|
50
|
+
gridTemplateColumns: string;
|
|
51
|
+
'& > .SCEventMediaWidget-media': {
|
|
52
|
+
paddingBottom: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
dialogRoot: ({ theme }: {
|
|
57
|
+
theme: any;
|
|
58
|
+
}) => {
|
|
59
|
+
'& .SCEventMediaWidget-grid': {
|
|
60
|
+
display: string;
|
|
61
|
+
gap: string;
|
|
62
|
+
gridTemplateColumns: string;
|
|
63
|
+
'& > .SCEventMediaWidget-media': {
|
|
64
|
+
paddingBottom: string;
|
|
65
|
+
};
|
|
66
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
67
|
+
position: string;
|
|
68
|
+
width: string;
|
|
69
|
+
paddingBottom: string;
|
|
70
|
+
backgroundSize: string;
|
|
71
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
72
|
+
position: string;
|
|
73
|
+
top: number;
|
|
74
|
+
width: string;
|
|
75
|
+
height: string;
|
|
76
|
+
backgroundColor: any;
|
|
77
|
+
opacity: number;
|
|
78
|
+
flexDirection: string;
|
|
79
|
+
justifyContent: string;
|
|
80
|
+
alignItems: string;
|
|
81
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
82
|
+
padding: number;
|
|
83
|
+
minWidth: string;
|
|
84
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
85
|
+
color: any;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
triggerRoot: ({ isSquare }: {
|
|
93
|
+
isSquare: any;
|
|
94
|
+
}) => {
|
|
95
|
+
padding: 0;
|
|
96
|
+
borderRadius: 0;
|
|
97
|
+
backgroundColor: string;
|
|
98
|
+
'&:hover': {
|
|
99
|
+
backgroundColor: string;
|
|
100
|
+
};
|
|
101
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
102
|
+
position: string;
|
|
103
|
+
width: string;
|
|
104
|
+
padding: string;
|
|
105
|
+
paddingBottom: string;
|
|
106
|
+
flexDirection: string;
|
|
107
|
+
gap: string;
|
|
108
|
+
alignItems: string;
|
|
109
|
+
justifyContent: string;
|
|
110
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
111
|
+
position: string;
|
|
112
|
+
top: string;
|
|
113
|
+
transform: string;
|
|
114
|
+
fontSize: string;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
export default Component;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const Component = {
|
|
4
|
+
styleOverrides: {
|
|
5
|
+
root: ({ theme, showPadding }) => ({
|
|
6
|
+
'& .SCEventMediaWidget-header': {
|
|
7
|
+
padding: showPadding ? theme.spacing('10px', 2) : theme.spacing(2)
|
|
8
|
+
},
|
|
9
|
+
'& .SCEventMediaWidget-content': {
|
|
10
|
+
padding: theme.spacing(2),
|
|
11
|
+
'& .SCEventMediaWidget-grid': {
|
|
12
|
+
display: 'grid',
|
|
13
|
+
gap: '5px',
|
|
14
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
15
|
+
'& > .SCEventMediaWidget-media': {
|
|
16
|
+
position: 'relative',
|
|
17
|
+
width: '100%',
|
|
18
|
+
paddingBottom: '100%',
|
|
19
|
+
backgroundSize: 'cover',
|
|
20
|
+
cursor: 'pointer',
|
|
21
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
22
|
+
position: 'absolute',
|
|
23
|
+
inset: 0,
|
|
24
|
+
backgroundColor: 'rgba(102, 102, 102, 0.2)',
|
|
25
|
+
opacity: 0.8
|
|
26
|
+
},
|
|
27
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
28
|
+
position: 'absolute',
|
|
29
|
+
top: '50%',
|
|
30
|
+
left: '50%',
|
|
31
|
+
transform: 'translate(-50%, -50%)',
|
|
32
|
+
color: theme.palette.common.white,
|
|
33
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
34
|
+
fontSize: '200%'
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
'& .SCEventMediaWidget-actions': {
|
|
41
|
+
padding: theme.spacing(0, 2, '10px'),
|
|
42
|
+
justifyContent: 'center'
|
|
43
|
+
}
|
|
44
|
+
}),
|
|
45
|
+
skeletonRoot: ({}) => ({
|
|
46
|
+
'& .SCEventMediaWidget-grid': {
|
|
47
|
+
display: 'grid',
|
|
48
|
+
gap: '5px',
|
|
49
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
50
|
+
'& > .SCEventMediaWidget-media': {
|
|
51
|
+
paddingBottom: '100%'
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}),
|
|
55
|
+
dialogRoot: ({ theme }) => ({
|
|
56
|
+
'& .SCEventMediaWidget-grid': {
|
|
57
|
+
display: 'grid',
|
|
58
|
+
gap: '5px',
|
|
59
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
60
|
+
'& > .SCEventMediaWidget-media': {
|
|
61
|
+
paddingBottom: '100%'
|
|
62
|
+
},
|
|
63
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
64
|
+
position: 'relative',
|
|
65
|
+
width: '100%',
|
|
66
|
+
paddingBottom: '100%',
|
|
67
|
+
backgroundSize: 'cover',
|
|
68
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
69
|
+
position: 'absolute',
|
|
70
|
+
top: 0,
|
|
71
|
+
width: '100%',
|
|
72
|
+
height: '30px',
|
|
73
|
+
backgroundColor: theme.palette.common.black,
|
|
74
|
+
opacity: 0.6,
|
|
75
|
+
flexDirection: 'row',
|
|
76
|
+
justifyContent: 'flex-end',
|
|
77
|
+
alignItems: 'center',
|
|
78
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
79
|
+
padding: 0,
|
|
80
|
+
minWidth: '50px',
|
|
81
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
82
|
+
color: theme.palette.common.white
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}),
|
|
89
|
+
triggerRoot: ({ isSquare }) => ({
|
|
90
|
+
padding: isSquare && 0,
|
|
91
|
+
borderRadius: isSquare && 0,
|
|
92
|
+
backgroundColor: isSquare && 'rgba(112, 112, 112, 0.04)',
|
|
93
|
+
'&:hover': {
|
|
94
|
+
backgroundColor: isSquare && 'rgba(0, 0, 0, 0.04)'
|
|
95
|
+
},
|
|
96
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
97
|
+
position: isSquare && 'relative',
|
|
98
|
+
width: isSquare && '100%',
|
|
99
|
+
padding: isSquare && '10px 60px',
|
|
100
|
+
paddingBottom: isSquare && '100%',
|
|
101
|
+
flexDirection: 'row',
|
|
102
|
+
gap: '5px',
|
|
103
|
+
alignItems: 'center',
|
|
104
|
+
justifyContent: isSquare ? 'center' : 'flex-end',
|
|
105
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
106
|
+
position: isSquare && 'absolute',
|
|
107
|
+
top: isSquare && '50%',
|
|
108
|
+
transform: isSquare && 'translateY(-50%)',
|
|
109
|
+
fontSize: 'inherit'
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
})
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
exports.default = Component;
|
package/lib/cjs/index.d.ts
CHANGED
|
@@ -4905,9 +4905,6 @@ declare const theme: {
|
|
|
4905
4905
|
width: string;
|
|
4906
4906
|
'& .SCNotification-username': {
|
|
4907
4907
|
fontWeight: number;
|
|
4908
|
-
/**
|
|
4909
|
-
* Export default theme
|
|
4910
|
-
*/
|
|
4911
4908
|
'&:hover': {
|
|
4912
4909
|
textDecoration: string;
|
|
4913
4910
|
};
|
|
@@ -8206,6 +8203,125 @@ declare const theme: {
|
|
|
8206
8203
|
};
|
|
8207
8204
|
};
|
|
8208
8205
|
};
|
|
8206
|
+
SCEventMediaWidget: {
|
|
8207
|
+
styleOverrides: {
|
|
8208
|
+
root: ({ theme, showPadding }: {
|
|
8209
|
+
theme: any;
|
|
8210
|
+
showPadding: any;
|
|
8211
|
+
}) => {
|
|
8212
|
+
'& .SCEventMediaWidget-header': {
|
|
8213
|
+
padding: any;
|
|
8214
|
+
};
|
|
8215
|
+
'& .SCEventMediaWidget-content': {
|
|
8216
|
+
padding: any;
|
|
8217
|
+
'& .SCEventMediaWidget-grid': {
|
|
8218
|
+
display: string;
|
|
8219
|
+
gap: string;
|
|
8220
|
+
gridTemplateColumns: string;
|
|
8221
|
+
'& > .SCEventMediaWidget-media': {
|
|
8222
|
+
position: string;
|
|
8223
|
+
width: string;
|
|
8224
|
+
paddingBottom: string;
|
|
8225
|
+
backgroundSize: string;
|
|
8226
|
+
cursor: string;
|
|
8227
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
8228
|
+
position: string;
|
|
8229
|
+
inset: number;
|
|
8230
|
+
backgroundColor: string;
|
|
8231
|
+
opacity: number;
|
|
8232
|
+
};
|
|
8233
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
8234
|
+
position: string;
|
|
8235
|
+
top: string;
|
|
8236
|
+
left: string;
|
|
8237
|
+
transform: string;
|
|
8238
|
+
color: any;
|
|
8239
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
8240
|
+
fontSize: string;
|
|
8241
|
+
};
|
|
8242
|
+
};
|
|
8243
|
+
};
|
|
8244
|
+
};
|
|
8245
|
+
};
|
|
8246
|
+
'& .SCEventMediaWidget-actions': {
|
|
8247
|
+
padding: any;
|
|
8248
|
+
justifyContent: string;
|
|
8249
|
+
};
|
|
8250
|
+
};
|
|
8251
|
+
skeletonRoot: ({}: {}) => {
|
|
8252
|
+
'& .SCEventMediaWidget-grid': {
|
|
8253
|
+
display: string;
|
|
8254
|
+
gap: string;
|
|
8255
|
+
gridTemplateColumns: string;
|
|
8256
|
+
'& > .SCEventMediaWidget-media': {
|
|
8257
|
+
paddingBottom: string;
|
|
8258
|
+
};
|
|
8259
|
+
};
|
|
8260
|
+
};
|
|
8261
|
+
dialogRoot: ({ theme }: {
|
|
8262
|
+
theme: any;
|
|
8263
|
+
}) => {
|
|
8264
|
+
'& .SCEventMediaWidget-grid': {
|
|
8265
|
+
display: string;
|
|
8266
|
+
gap: string;
|
|
8267
|
+
gridTemplateColumns: string;
|
|
8268
|
+
'& > .SCEventMediaWidget-media': {
|
|
8269
|
+
paddingBottom: string;
|
|
8270
|
+
};
|
|
8271
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
8272
|
+
position: string;
|
|
8273
|
+
width: string;
|
|
8274
|
+
paddingBottom: string;
|
|
8275
|
+
backgroundSize: string;
|
|
8276
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
8277
|
+
position: string;
|
|
8278
|
+
top: number;
|
|
8279
|
+
width: string;
|
|
8280
|
+
height: string;
|
|
8281
|
+
backgroundColor: any;
|
|
8282
|
+
opacity: number;
|
|
8283
|
+
flexDirection: string;
|
|
8284
|
+
justifyContent: string;
|
|
8285
|
+
alignItems: string;
|
|
8286
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
8287
|
+
padding: number;
|
|
8288
|
+
minWidth: string;
|
|
8289
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
8290
|
+
color: any;
|
|
8291
|
+
};
|
|
8292
|
+
};
|
|
8293
|
+
};
|
|
8294
|
+
};
|
|
8295
|
+
};
|
|
8296
|
+
};
|
|
8297
|
+
triggerRoot: ({ isSquare }: {
|
|
8298
|
+
isSquare: any;
|
|
8299
|
+
}) => {
|
|
8300
|
+
padding: 0;
|
|
8301
|
+
borderRadius: 0;
|
|
8302
|
+
backgroundColor: string;
|
|
8303
|
+
'&:hover': {
|
|
8304
|
+
backgroundColor: string;
|
|
8305
|
+
};
|
|
8306
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
8307
|
+
position: string;
|
|
8308
|
+
width: string;
|
|
8309
|
+
padding: string;
|
|
8310
|
+
paddingBottom: string;
|
|
8311
|
+
flexDirection: string;
|
|
8312
|
+
gap: string;
|
|
8313
|
+
alignItems: string;
|
|
8314
|
+
justifyContent: string;
|
|
8315
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
8316
|
+
position: string;
|
|
8317
|
+
top: string;
|
|
8318
|
+
transform: string;
|
|
8319
|
+
fontSize: string;
|
|
8320
|
+
};
|
|
8321
|
+
};
|
|
8322
|
+
};
|
|
8323
|
+
};
|
|
8324
|
+
};
|
|
8209
8325
|
};
|
|
8210
8326
|
selfcommunity: {
|
|
8211
8327
|
user: {
|
package/lib/cjs/index.js
CHANGED
|
@@ -72,6 +72,7 @@ const SCEventInfoDetails_1 = tslib_1.__importDefault(require("./components/SCEve
|
|
|
72
72
|
const SCEventInfoWidget_1 = tslib_1.__importDefault(require("./components/SCEventInfoWidget"));
|
|
73
73
|
const SCEventInviteButton_1 = tslib_1.__importDefault(require("./components/SCEventInviteButton"));
|
|
74
74
|
const SCEventLocationWidget_1 = tslib_1.__importDefault(require("./components/SCEventLocationWidget"));
|
|
75
|
+
const SCEventMediaWidget_1 = tslib_1.__importDefault(require("./components/SCEventMediaWidget"));
|
|
75
76
|
const SCEventMembersWidget_1 = tslib_1.__importDefault(require("./components/SCEventMembersWidget"));
|
|
76
77
|
const SCEventParticipantsButton_1 = tslib_1.__importDefault(require("./components/SCEventParticipantsButton"));
|
|
77
78
|
const SCEvents_1 = tslib_1.__importDefault(require("./components/SCEvents"));
|
|
@@ -387,7 +388,8 @@ const theme = {
|
|
|
387
388
|
SCRelatedEventsWidget: SCRelatedEventsWidget_1.default,
|
|
388
389
|
SCVoteAudienceButton: SCVoteAudienceButton_1.default,
|
|
389
390
|
SCVoteButton: SCVoteButton_1.default,
|
|
390
|
-
SCWidget: SCWidget_1.default
|
|
391
|
+
SCWidget: SCWidget_1.default,
|
|
392
|
+
SCEventMediaWidget: SCEventMediaWidget_1.default
|
|
391
393
|
},
|
|
392
394
|
selfcommunity: {
|
|
393
395
|
user: {
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
declare const Component: {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
root: ({ theme, showPadding }: {
|
|
4
|
+
theme: any;
|
|
5
|
+
showPadding: any;
|
|
6
|
+
}) => {
|
|
7
|
+
'& .SCEventMediaWidget-header': {
|
|
8
|
+
padding: any;
|
|
9
|
+
};
|
|
10
|
+
'& .SCEventMediaWidget-content': {
|
|
11
|
+
padding: any;
|
|
12
|
+
'& .SCEventMediaWidget-grid': {
|
|
13
|
+
display: string;
|
|
14
|
+
gap: string;
|
|
15
|
+
gridTemplateColumns: string;
|
|
16
|
+
'& > .SCEventMediaWidget-media': {
|
|
17
|
+
position: string;
|
|
18
|
+
width: string;
|
|
19
|
+
paddingBottom: string;
|
|
20
|
+
backgroundSize: string;
|
|
21
|
+
cursor: string;
|
|
22
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
23
|
+
position: string;
|
|
24
|
+
inset: number;
|
|
25
|
+
backgroundColor: string;
|
|
26
|
+
opacity: number;
|
|
27
|
+
};
|
|
28
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
29
|
+
position: string;
|
|
30
|
+
top: string;
|
|
31
|
+
left: string;
|
|
32
|
+
transform: string;
|
|
33
|
+
color: any;
|
|
34
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
35
|
+
fontSize: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
'& .SCEventMediaWidget-actions': {
|
|
42
|
+
padding: any;
|
|
43
|
+
justifyContent: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
skeletonRoot: ({}: {}) => {
|
|
47
|
+
'& .SCEventMediaWidget-grid': {
|
|
48
|
+
display: string;
|
|
49
|
+
gap: string;
|
|
50
|
+
gridTemplateColumns: string;
|
|
51
|
+
'& > .SCEventMediaWidget-media': {
|
|
52
|
+
paddingBottom: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
dialogRoot: ({ theme }: {
|
|
57
|
+
theme: any;
|
|
58
|
+
}) => {
|
|
59
|
+
'& .SCEventMediaWidget-grid': {
|
|
60
|
+
display: string;
|
|
61
|
+
gap: string;
|
|
62
|
+
gridTemplateColumns: string;
|
|
63
|
+
'& > .SCEventMediaWidget-media': {
|
|
64
|
+
paddingBottom: string;
|
|
65
|
+
};
|
|
66
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
67
|
+
position: string;
|
|
68
|
+
width: string;
|
|
69
|
+
paddingBottom: string;
|
|
70
|
+
backgroundSize: string;
|
|
71
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
72
|
+
position: string;
|
|
73
|
+
top: number;
|
|
74
|
+
width: string;
|
|
75
|
+
height: string;
|
|
76
|
+
backgroundColor: any;
|
|
77
|
+
opacity: number;
|
|
78
|
+
flexDirection: string;
|
|
79
|
+
justifyContent: string;
|
|
80
|
+
alignItems: string;
|
|
81
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
82
|
+
padding: number;
|
|
83
|
+
minWidth: string;
|
|
84
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
85
|
+
color: any;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
triggerRoot: ({ isSquare }: {
|
|
93
|
+
isSquare: any;
|
|
94
|
+
}) => {
|
|
95
|
+
padding: 0;
|
|
96
|
+
borderRadius: 0;
|
|
97
|
+
backgroundColor: string;
|
|
98
|
+
'&:hover': {
|
|
99
|
+
backgroundColor: string;
|
|
100
|
+
};
|
|
101
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
102
|
+
position: string;
|
|
103
|
+
width: string;
|
|
104
|
+
padding: string;
|
|
105
|
+
paddingBottom: string;
|
|
106
|
+
flexDirection: string;
|
|
107
|
+
gap: string;
|
|
108
|
+
alignItems: string;
|
|
109
|
+
justifyContent: string;
|
|
110
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
111
|
+
position: string;
|
|
112
|
+
top: string;
|
|
113
|
+
transform: string;
|
|
114
|
+
fontSize: string;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
export default Component;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
const Component = {
|
|
2
|
+
styleOverrides: {
|
|
3
|
+
root: ({ theme, showPadding }) => ({
|
|
4
|
+
'& .SCEventMediaWidget-header': {
|
|
5
|
+
padding: showPadding ? theme.spacing('10px', 2) : theme.spacing(2)
|
|
6
|
+
},
|
|
7
|
+
'& .SCEventMediaWidget-content': {
|
|
8
|
+
padding: theme.spacing(2),
|
|
9
|
+
'& .SCEventMediaWidget-grid': {
|
|
10
|
+
display: 'grid',
|
|
11
|
+
gap: '5px',
|
|
12
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
13
|
+
'& > .SCEventMediaWidget-media': {
|
|
14
|
+
position: 'relative',
|
|
15
|
+
width: '100%',
|
|
16
|
+
paddingBottom: '100%',
|
|
17
|
+
backgroundSize: 'cover',
|
|
18
|
+
cursor: 'pointer',
|
|
19
|
+
'& > .SCEventMediaWidget-media-layer': {
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
inset: 0,
|
|
22
|
+
backgroundColor: 'rgba(102, 102, 102, 0.2)',
|
|
23
|
+
opacity: 0.8
|
|
24
|
+
},
|
|
25
|
+
'& > .SCEventMediaWidget-count-hidden-media-wrapper': {
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
top: '50%',
|
|
28
|
+
left: '50%',
|
|
29
|
+
transform: 'translate(-50%, -50%)',
|
|
30
|
+
color: theme.palette.common.white,
|
|
31
|
+
'& > .SCEventMediaWidget-count-hidden-media': {
|
|
32
|
+
fontSize: '200%'
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
'& .SCEventMediaWidget-actions': {
|
|
39
|
+
padding: theme.spacing(0, 2, '10px'),
|
|
40
|
+
justifyContent: 'center'
|
|
41
|
+
}
|
|
42
|
+
}),
|
|
43
|
+
skeletonRoot: ({}) => ({
|
|
44
|
+
'& .SCEventMediaWidget-grid': {
|
|
45
|
+
display: 'grid',
|
|
46
|
+
gap: '5px',
|
|
47
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
48
|
+
'& > .SCEventMediaWidget-media': {
|
|
49
|
+
paddingBottom: '100%'
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}),
|
|
53
|
+
dialogRoot: ({ theme }) => ({
|
|
54
|
+
'& .SCEventMediaWidget-grid': {
|
|
55
|
+
display: 'grid',
|
|
56
|
+
gap: '5px',
|
|
57
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
58
|
+
'& > .SCEventMediaWidget-media': {
|
|
59
|
+
paddingBottom: '100%'
|
|
60
|
+
},
|
|
61
|
+
'& > .SCEventMediaWidget-dialog-media-wrapper': {
|
|
62
|
+
position: 'relative',
|
|
63
|
+
width: '100%',
|
|
64
|
+
paddingBottom: '100%',
|
|
65
|
+
backgroundSize: 'cover',
|
|
66
|
+
'& > .SCEventMediaWidget-dialog-button-wrapper': {
|
|
67
|
+
position: 'absolute',
|
|
68
|
+
top: 0,
|
|
69
|
+
width: '100%',
|
|
70
|
+
height: '30px',
|
|
71
|
+
backgroundColor: theme.palette.common.black,
|
|
72
|
+
opacity: 0.6,
|
|
73
|
+
flexDirection: 'row',
|
|
74
|
+
justifyContent: 'flex-end',
|
|
75
|
+
alignItems: 'center',
|
|
76
|
+
'& > .SCEventMediaWidget-dialog-loading-button': {
|
|
77
|
+
padding: 0,
|
|
78
|
+
minWidth: '50px',
|
|
79
|
+
'& > .MuiLoadingButton-loadingIndicatorCenter': {
|
|
80
|
+
color: theme.palette.common.white
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}),
|
|
87
|
+
triggerRoot: ({ isSquare }) => ({
|
|
88
|
+
padding: isSquare && 0,
|
|
89
|
+
borderRadius: isSquare && 0,
|
|
90
|
+
backgroundColor: isSquare && 'rgba(112, 112, 112, 0.04)',
|
|
91
|
+
'&:hover': {
|
|
92
|
+
backgroundColor: isSquare && 'rgba(0, 0, 0, 0.04)'
|
|
93
|
+
},
|
|
94
|
+
'& > .SCEventMediaWidget-trigger-content': {
|
|
95
|
+
position: isSquare && 'relative',
|
|
96
|
+
width: isSquare && '100%',
|
|
97
|
+
padding: isSquare && '10px 60px',
|
|
98
|
+
paddingBottom: isSquare && '100%',
|
|
99
|
+
flexDirection: 'row',
|
|
100
|
+
gap: '5px',
|
|
101
|
+
alignItems: 'center',
|
|
102
|
+
justifyContent: isSquare ? 'center' : 'flex-end',
|
|
103
|
+
'& > .SCEventMediaWidget-trigger-icon': {
|
|
104
|
+
position: isSquare && 'absolute',
|
|
105
|
+
top: isSquare && '50%',
|
|
106
|
+
transform: isSquare && 'translateY(-50%)',
|
|
107
|
+
fontSize: 'inherit'
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
})
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
export default Component;
|