@selfcommunity/react-theme-default 0.1.0-alpha.99 → 0.1.0

package/lib/esm/components/SCLoyaltyProgramDetailTemplate.js

@@ -0,0 +1,180 @@
+import { alpha } from '@mui/system';
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            [theme.breakpoints.down('sm')]: {
+                padding: theme.spacing(1)
+            },
+            boxShadow: 'none',
+            borderRadius: 0,
+            '& .SCLoyaltyProgramDetailTemplate-title': {
+                fontWeight: theme.typography.fontWeightBold,
+                fontSize: '1.286rem',
+                marginBottom: theme.spacing(5),
+                [theme.breakpoints.down('md')]: {
+                    textAlign: 'center'
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-section-title': {
+                fontWeight: theme.typography.fontWeightBold,
+                fontSize: '1.143rem',
+                marginBottom: theme.spacing(1)
+            },
+            '& .SCLoyaltyProgramDetailTemplate-section-info': {
+                marginBottom: theme.spacing(5),
+                [theme.breakpoints.down('md')]: {
+                    marginBottom: theme.spacing(3)
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-user-points': {
+                marginLeft: theme.spacing(2),
+                backgroundColor: theme.palette.secondary.main,
+                '& .MuiChip-label': {
+                    fontSize: '1rem',
+                    fontWeight: theme.typography.fontWeightBold,
+                    color: theme.palette.common.white,
+                    padding: theme.spacing(1, 2, 1, 2)
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-prize-section': {
+                '& .MuiGrid-item': {
+                    [theme.breakpoints.up('sm')]: {
+                        paddingLeft: theme.spacing(4),
+                        paddingRight: theme.spacing(2)
+                    },
+                    [theme.breakpoints.down('md')]: {
+                        marginBottom: theme.spacing(4)
+                    }
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-card': {
+                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.3)',
+                [theme.breakpoints.down('md')]: {
+                    borderRadius: 0
+                },
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%',
+                '& .SCLoyaltyProgramDetailTemplate-card-title': {
+                    fontWeight: theme.typography.fontWeightBold,
+                    fontSize: '1.143rem'
+                },
+                '& .MuiCardContent-root': {
+                    padding: theme.spacing(2),
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    '& .SCLoyaltyProgramDetailTemplate-card-content': {
+                        paddingTop: theme.spacing(1),
+                        maxHeight: theme.spacing(12.5),
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 4
+                    }
+                },
+                '& .MuiCardActions-root': {
+                    marginTop: 'auto',
+                    '& .MuiButtonBase-root': {
+                        '&:hover, &:active': {
+                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                        }
+                    }
+                },
+                '& .MuiCardMedia-root': {
+                    height: theme.spacing(17)
+                },
+                '& .SCLoyaltyProgramDetailTemplate-prize-points': {
+                    marginTop: theme.spacing(2),
+                    '& .MuiChip-root': {
+                        backgroundColor: theme.palette.secondary.main,
+                        '& .MuiChip-label': {
+                            fontSize: '1.143rem',
+                            fontWeight: theme.typography.fontWeightBold,
+                            color: theme.palette.common.white
+                        }
+                    },
+                    '& .SCLoyaltyProgramDetailTemplate-not-requestable': {
+                        backgroundColor: theme.palette.error.main
+                    }
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-points-list-root': {
+                marginTop: theme.spacing(1),
+                marginBottom: theme.spacing(5),
+                '& .MuiGrid-item': {
+                    paddingTop: theme.spacing(1),
+                    '& .SCLoyaltyProgramDetailTemplate-element': {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        marginBottom: theme.spacing(1)
+                    }
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-end-message': {
+                padding: theme.spacing(3, 2),
+                fontWeight: theme.typography.fontWeightBold,
+                textAlign: 'center',
+                '& .MuiButtonBase-root': {
+                    paddingLeft: theme.spacing(1)
+                }
+            }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            height: '100%',
+            '& .SCLoyaltyProgramDetailTemplate-title': {
+                display: 'flex',
+                marginBottom: theme.spacing(5),
+                alignItems: 'center',
+                [theme.breakpoints.down('md')]: {
+                    justifyContent: 'center'
+                },
+                '& .SCLoyaltyProgramDetailTemplate-chip': {
+                    marginLeft: theme.spacing(2),
+                    borderRadius: theme.shape.borderRadius
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-section-title': {
+                marginBottom: theme.spacing(2),
+                '& .SCLoyaltyProgramDetailTemplate-sub-title': {
+                    marginBottom: theme.spacing(4)
+                }
+            },
+            '& .SCLoyaltyProgramDetailTemplate-points-list': {
+                marginBottom: theme.spacing(5)
+            }
+        }),
+        prizeItemSkeletonRoot: ({ theme }) => ({
+            [theme.breakpoints.up('sm')]: {
+                width: theme.spacing(45),
+                height: theme.spacing(45),
+                marginTop: theme.spacing(3)
+            },
+            '& .MuiCard-root': {
+                [theme.breakpoints.down('md')]: {
+                    borderRadius: 0,
+                    height: '100%'
+                }
+            },
+            '& .MuiCardContent-root': {
+                justifyContent: 'center',
+                '& .SCLoyaltyProgramDetailTemplate-content': {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    marginTop: theme.spacing(2),
+                    paddingBottom: theme.spacing(8)
+                }
+            },
+            '& .MuiCardActions-root': {
+                justifyContent: 'center'
+            }
+        })
+    }
+};
+export default Component;

package/lib/esm/components/SCLoyaltyProgramWidget.d.ts

@@ -0,0 +1,52 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {
+            '& .MuiCardContent-root': {
+                padding: any;
+            };
+            '& .SCLoyaltyProgramWidget-title': {
+                fontWeight: any;
+                fontSize: string;
+            };
+            '& .SCLoyaltyProgramWidget-actions': {
+                display: string;
+                justifyContent: string;
+                padding: any;
+                '& .SCLoyaltyProgramWidget-points': {
+                    fontSize: string;
+                    fontWeight: any;
+                    textTransform: string;
+                    color: any;
+                    display: string;
+                    alignItems: string;
+                    '& .MuiChip-root': {
+                        color: any;
+                        borderRadius: any;
+                        backgroundColor: any;
+                        marginRight: any;
+                    };
+                };
+            };
+        };
+        skeletonRoot: ({ theme }: any) => {
+            '& .MuiCardContent-root': {
+                padding: any;
+            };
+            '& .SCLoyaltyProgramWidget-actions, .MuiCardActions-root': {
+                display: string;
+                justifyContent: string;
+                padding: any;
+                '& .SCLoyaltyProgramWidget-points': {
+                    display: string;
+                    justifyContent: string;
+                    alignItems: string;
+                };
+                '& .SCLoyaltyProgramWidget-chip': {
+                    borderRadius: any;
+                    marginRight: any;
+                };
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCLoyaltyProgramWidget.js

@@ -0,0 +1,52 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            '& .MuiCardContent-root': {
+                padding: theme.spacing(2)
+            },
+            '& .SCLoyaltyProgramWidget-title': {
+                fontWeight: theme.typography.fontWeightBold,
+                fontSize: '1.143rem'
+            },
+            '& .SCLoyaltyProgramWidget-actions': {
+                display: 'flex',
+                justifyContent: 'space-between',
+                padding: theme.spacing(0, 3, 2, 3),
+                '& .SCLoyaltyProgramWidget-points': {
+                    fontSize: '1rem',
+                    fontWeight: theme.typography.fontWeightBold,
+                    textTransform: 'uppercase',
+                    color: theme.palette.secondary.main,
+                    display: 'flex',
+                    alignItems: 'center',
+                    '& .MuiChip-root': {
+                        color: theme.palette.common.white,
+                        borderRadius: theme.shape.borderRadius,
+                        backgroundColor: theme.palette.secondary.main,
+                        marginRight: theme.spacing(1)
+                    }
+                }
+            }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            '& .MuiCardContent-root': {
+                padding: theme.spacing(2)
+            },
+            '& .SCLoyaltyProgramWidget-actions, .MuiCardActions-root': {
+                display: 'flex',
+                justifyContent: 'space-between',
+                padding: theme.spacing(0, 3, 2, 2),
+                '& .SCLoyaltyProgramWidget-points': {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                },
+                '& .SCLoyaltyProgramWidget-chip': {
+                    borderRadius: theme.shape.borderRadius,
+                    marginRight: theme.spacing(2)
+                }
+            }
+        })
+    }
+};
+export default Component;

package/lib/esm/components/SCMainFeedTemplate.d.ts

@@ -0,0 +1,9 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {};
+        skeletonRoot: ({ theme }: any) => {
+            marginTop: any;
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCMainFeedTemplate.js

@@ -0,0 +1,9 @@
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({}),
+        skeletonRoot: ({ theme }) => ({
+            marginTop: theme.spacing(2)
+        })
+    }
+};
+export default Component;

package/lib/esm/components/SCMediaFile.d.ts

@@ -0,0 +1,159 @@
+declare const Component: {
+    styleOverrides: {
+        displayRoot: ({ theme }: any) => {
+            [x: number]: {
+                minHeight: number;
+            };
+            textAlign: string;
+            margin: string;
+            width: string;
+            position: string;
+            '& .SCMediaFile-background': {
+                backgroundSize: string;
+                backgroundPosition: string;
+                backgroundRepeat: string;
+            };
+            '& .SCMediaFile-background-portrait': {
+                backgroundSize: string;
+                backgroundPosition: string;
+                backgroundRepeat: string;
+            };
+            '& .SCMediaFile-height-one': {
+                width: string;
+                paddingTop: string;
+            };
+            '& .SCMediaFile-height-half-one': {
+                paddingTop: string;
+            };
+            '& .SCMediaFile-height-two': {
+                width: string;
+                paddingTop: string;
+            };
+            '& .SCMediaFile-height-three': {
+                width: string;
+                paddingTop: string;
+            };
+            '& .SCMediaFile-cover': {
+                backgroundColor: string;
+                opacity: number;
+                position: string;
+                right: number;
+                top: number;
+                left: number;
+                bottom: number;
+            };
+            '& .SCMediaFile-cover-text': {
+                right: number;
+                left: number;
+                bottom: number;
+                color: string;
+                fontSize: string;
+                position: string;
+                top: string;
+                transform: string;
+                textAlign: string;
+                '& > p': {
+                    margin: number;
+                    position: string;
+                    top: string;
+                    left: string;
+                    transform: string;
+                };
+            };
+            '& .SCMediaFile-slide': {
+                height: number;
+                bottom: string;
+                overflow: string;
+                fontSize: string;
+                color: string;
+            };
+            '& .SCMediaFile-border': {
+                position: string;
+                border: string;
+                '&:hover > div': {
+                    bottom: number;
+                    height: string;
+                };
+                '&:hover > div.animate-text': {
+                    top: string;
+                };
+            };
+            '& .SCMediaFile-gallery': {
+                cursor: string;
+            };
+            '& .SCMediaFile-title .MuiTypography-root': {
+                color: string;
+                backgroundColor: any;
+                opacity: number;
+            };
+            '& .SCMediaFile-icon-file': {
+                fontSize: number;
+                position: string;
+                top: number;
+            };
+        };
+        lightboxRoot: ({ theme }: any) => {};
+        previewRoot: ({ theme }: any) => {
+            '& > div': {
+                display: string;
+                flexDirection: string;
+                flexWrap: string;
+                maxWidth: string;
+                overflow: string;
+                MsOverflowStyle: string;
+                scrollbarWidth: string;
+                '&::-webkit-scrollbar': {
+                    display: string;
+                };
+                '& .SCMediaFile-media': {
+                    backgroundSize: string;
+                    backgroundPosition: string;
+                    position: string;
+                    borderRadius: number;
+                    margin: any;
+                    width: number;
+                    height: number;
+                    flexBasis: number;
+                    flexGrow: number;
+                    flexShrink: number;
+                    '& .SCMediaFile-title': {
+                        position: string;
+                        left: any;
+                        top: any;
+                        borderRadius: any;
+                        background: string;
+                        color: any;
+                        fontSize: string;
+                        padding: any;
+                        maxWidth: number;
+                        textOverflow: string;
+                        overflow: string;
+                        whiteSpace: string;
+                    };
+                    '& .SCMediaFile-delete': {
+                        background: any;
+                        position: string;
+                        right: any;
+                        top: any;
+                    };
+                };
+                '&:has(> :last-child:nth-of-type(1)) .SCMediaFile-media': {
+                    width: string;
+                    flexBasis: string;
+                    height: number;
+                    margin: any;
+                    '& .SCMediaFile-title': {
+                        fontSize: string;
+                        maxWidth: number;
+                    };
+                };
+            };
+        };
+        triggerRoot: ({ theme }: any) => {};
+        triggerDrawerRoot: ({ theme }: any) => {
+            zIndex: number;
+        };
+        triggerMenuRoot: ({ theme }: any) => {};
+    };
+};
+export default Component;

package/lib/esm/components/SCMediaFile.js

@@ -0,0 +1,159 @@
+const Component = {
+    styleOverrides: {
+        displayRoot: ({ theme }) => ({
+            textAlign: 'center',
+            margin: 'auto',
+            width: '100%',
+            position: 'relative',
+            [theme.breakpoints.down('md')]: {
+                minHeight: 170
+            },
+            '& .SCMediaFile-background': {
+                backgroundSize: 'cover !important',
+                backgroundPosition: 'center !important',
+                backgroundRepeat: 'no-repeat !important'
+            },
+            '& .SCMediaFile-background-portrait': {
+                backgroundSize: 'contain !important',
+                backgroundPosition: 'center !important',
+                backgroundRepeat: 'no-repeat !important'
+            },
+            '& .SCMediaFile-height-one': {
+                width: '100%',
+                paddingTop: '99%'
+            },
+            '& .SCMediaFile-height-half-one': {
+                paddingTop: '50%'
+            },
+            '& .SCMediaFile-height-two': {
+                width: '50%',
+                paddingTop: '50%'
+            },
+            '& .SCMediaFile-height-three': {
+                width: '33.3333%',
+                paddingTop: '33.3333%'
+            },
+            '& .SCMediaFile-cover': {
+                backgroundColor: 'rgba(102,102,102,0.2)',
+                opacity: 0.8,
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                left: 0,
+                bottom: 0
+            },
+            '& .SCMediaFile-cover-text': {
+                right: 0,
+                left: 0,
+                bottom: 0,
+                color: '#FFF',
+                fontSize: '7%',
+                position: 'absolute',
+                top: '50%',
+                transform: 'translate(0%, -50%)',
+                textAlign: 'center',
+                '& > p': {
+                    margin: 0,
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)'
+                }
+            },
+            '& .SCMediaFile-slide': {
+                height: 0,
+                bottom: '100%',
+                overflow: 'hidden',
+                fontSize: '3%',
+                color: '#FFF'
+            },
+            '& .SCMediaFile-border': {
+                position: 'relative',
+                border: '2px solid #FFF',
+                '&:hover > div': {
+                    bottom: 0,
+                    height: 'auto'
+                },
+                '&:hover > div.animate-text': {
+                    top: '66%'
+                }
+            },
+            '& .SCMediaFile-gallery': {
+                cursor: 'pointer'
+            },
+            '& .SCMediaFile-title .MuiTypography-root': {
+                color: '#FFF',
+                backgroundColor: theme.palette.getContrastText('#FFF'),
+                opacity: 0.6
+            },
+            '& .SCMediaFile-icon-file': {
+                fontSize: 14,
+                position: 'relative',
+                top: 2
+            }
+        }),
+        lightboxRoot: ({ theme }) => ({}),
+        previewRoot: ({ theme }) => ({
+            '& > div': {
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'nowrap',
+                maxWidth: '100%',
+                overflow: 'auto',
+                'MsOverflowStyle': 'none',
+                scrollbarWidth: 'none',
+                '&::-webkit-scrollbar': {
+                    display: 'none'
+                },
+                '& .SCMediaFile-media': {
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    position: 'relative',
+                    borderRadius: theme.shape.borderRadius * 0.5,
+                    margin: theme.spacing(0.5),
+                    width: 120,
+                    height: 140,
+                    flexBasis: 120,
+                    flexGrow: 0,
+                    flexShrink: 0,
+                    '& .SCMediaFile-title': {
+                        position: 'absolute',
+                        left: theme.spacing(1),
+                        top: theme.spacing(1),
+                        borderRadius: theme.shape.borderRadius,
+                        background: '#33333380 0% 0% no-repeat padding-box',
+                        color: theme.palette.common.white,
+                        fontSize: '0.875rem',
+                        padding: theme.spacing(0.5, 1),
+                        maxWidth: 50,
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap'
+                    },
+                    '& .SCMediaFile-delete': {
+                        background: theme.palette.common.white,
+                        position: 'absolute',
+                        right: theme.spacing(0.5),
+                        top: theme.spacing(0.5)
+                    }
+                },
+                '&:has(> :last-child:nth-of-type(1)) .SCMediaFile-media': {
+                    width: '100%',
+                    flexBasis: '100%',
+                    height: 220,
+                    margin: theme.spacing(0.5, 0),
+                    '& .SCMediaFile-title': {
+                        fontSize: '1rem',
+                        maxWidth: 200
+                    }
+                }
+            }
+        }),
+        triggerRoot: ({ theme }) => ({}),
+        triggerDrawerRoot: ({ theme }) => ({
+            zIndex: 1300
+        }),
+        triggerMenuRoot: ({ theme }) => ({})
+    }
+};
+export default Component;