Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 37x 38x 83x 6x 48x 30x | import { Skeleton } from "@mui/material";
import { Box, Stack } from "@mui/material";
import { checkoutScrollbarStyles } from "@sections/PayBuilder/Checkout/helpers";
import { bgContainerStye } from "@pages/Login/components/LoginMainContainer";
import { styled } from "@theme/v2/Provider";
export const containerStyle = {
...bgContainerStye,
maxHeight: "100dvh",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
padding: "24px 32px",
"@media (max-width: 1339px)": {
padding: "12px 12px 0",
},
"@media (max-width: 600px)": {
padding: "47px 12px 24px 12px",
},
"@media (max-width: 900px)": {
height: "100dvh",
},
};
export const SignupContainer = styled(Box)(({ theme }) => ({
borderRadius: "20px",
background: theme.palette.surface?.["primary-transparent"],
paddingTop: "40px",
paddingBottom: "40px",
display: "flex",
gap: "32px",
flexDirection: "column",
width: 350,
[theme.breakpoints.up("md")]: {
width: 720,
},
}));
export const Container = styled(Stack)(({ theme }) => ({
height: "100vh",
width: "100%",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between",
overflow: "hidden",
padding: "32px 32px 48px 32px",
gap: "40px",
[theme.breakpoints.down("sm")]: {
padding: "20px 20px 48px 20px",
},
[theme.breakpoints.down("md")]: {
height: "100%",
overflowY: "auto",
...checkoutScrollbarStyles,
"&::-webkit-scrollbar": {
width: "8px",
backgroundColor: "transparent",
},
},
}));
export const CardContainer = styled(Box)(({ theme }) => ({
position: "relative",
borderRadius: "12px",
background: theme.palette.surface?.primary,
padding: "16px 24px 16px 16px",
flex: 1,
cursor: "pointer",
width: "100%",
display: "flex",
alignItems: "center",
gap: "12px",
[theme.breakpoints.down("md")]: {
flexDirection: "column",
alignItems: "flex-start",
},
}));
export const SkeletonContainer = styled(Box)(({ theme }) => ({
overflowY: "auto",
maxHeight: "50vh",
gap: "12px",
flexDirection: "column",
display: "flex",
scrollbarWidth: "none", // For Firefox
"&::-webkit-scrollbar": {
display: "none", // For Chrome, Safari, and Opera
},
}));
export const IconContainer = styled(Box)(({ theme }) => ({
width: 40,
height: 40,
opacity: 1,
borderRadius: "30px",
gap: "10px",
padding: "8px",
background: theme.palette.surface?.secondary,
}));
export const CustomSkeletonComponent = styled(Skeleton)(({ theme }) => ({
margin: "0px",
borderRadius: "12px",
bgcolor: theme.palette.surface?.primary,
height: "200px",
width: "100%",
[theme.breakpoints.down("sm")]: {
width: "95%",
},
}));
|