@agilemotion/oui-react-js 1.8.36 → 1.8.37

package/dist/assets/jss/components/cardBodyStyle.jsx

@@ -0,0 +1,56 @@
+import {
+    whiteColor,
+    hexToRgb
+} from "../rootStyle";
+
+const cardBodyStyle = {
+    cardBody: {
+        padding: "0.9375rem 20px",
+        flex: "1 1 auto",
+        WebkitBoxFlex: "1",
+        position: "relative"
+    },
+    cardBodyBackground: {
+        position: "relative",
+        zIndex: "2",
+        minHeight: "280px",
+        paddingTop: "40px",
+        paddingBottom: "40px",
+        maxWidth: "440px",
+        margin: "0 auto"
+    },
+    cardBodyPlain: {
+        paddingLeft: "5px",
+        paddingRight: "5px"
+    },
+    cardBodyFormHorizontal: {
+        paddingLeft: "15px",
+        paddingRight: "15px",
+        "& form": {
+            margin: "0"
+        }
+    },
+    cardPricing: {
+        padding: "15px!important",
+        margin: "0px!important"
+    },
+    cardSignup: {
+        padding: "0px 30px 0px 30px"
+    },
+    cardBodyColor: {
+        borderRadius: "6px",
+        "& h1,& h2,& h3": {
+            "& small": {
+                color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
+            }
+        }
+    },
+    cardBodyProfile: {
+        marginTop: "15px"
+    },
+    cardBodyCalendar: {
+        padding: "0px !important"
+    }
+};
+
+export default cardBodyStyle;

package/dist/assets/jss/components/cardFooterStyle.jsx

@@ -0,0 +1,56 @@
+import {
+    grayColor
+} from "../rootStyle";
+
+const cardFooterStyle = {
+    cardFooter: {
+        padding: "0",
+        paddingTop: "10px",
+        margin: "0 15px 10px",
+        borderRadius: "0",
+        justifyContent: "space-between",
+        alignItems: "center",
+        display: "flex",
+        backgroundColor: "transparent",
+        border: "0"
+    },
+    cardFooterProfile: {
+        marginTop: "-15px"
+    },
+    cardFooterPlain: {
+        paddingLeft: "5px",
+        paddingRight: "5px",
+        backgroundColor: "transparent"
+    },
+    cardFooterPricing: {
+        zIndex: "2"
+    },
+    cardFooterTestimonial: {
+        display: "block"
+    },
+    cardFooterStats: {
+        borderTop: "1px solid" + grayColor[8],
+        marginTop: "20px",
+        "& svg": {
+            position: "relative",
+            top: "4px",
+            marginRight: "3px",
+            marginLeft: "3px",
+            width: "16px",
+            height: "16px"
+        },
+        "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+            position: "relative",
+            top: "4px",
+            marginRight: "3px",
+            marginLeft: "3px",
+            fontSize: "16px",
+            lineHeight: "16px"
+        }
+    },
+    cardFooterChart: {
+        borderTop: "1px solid" + grayColor[8]
+    }
+};
+
+export default cardFooterStyle;

package/dist/assets/jss/components/cardHeaderStyle.jsx

@@ -0,0 +1,169 @@
+import {
+    warningCardHeader,
+    successCardHeader,
+    dangerCardHeader,
+    infoCardHeader,
+    primaryCardHeader,
+    roseCardHeader,
+    whiteColor,
+    blackColor,
+    hexToRgb
+} from "../rootStyle";
+
+const cardHeaderStyle = {
+    cardHeader: {
+        padding: "0.75rem 1.25rem",
+        marginBottom: "0",
+        borderBottom: "none",
+        background: "transparent",
+        zIndex: "3 !important",
+        "&$cardHeaderPlain,&$cardHeaderImage,&$cardHeaderContact,&$cardHeaderSignup,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
+            margin: "0 15px",
+            padding: "0",
+            position: "relative",
+            color: whiteColor
+        },
+        "&:first-child": {
+            borderRadius: "calc(.25rem - 1px) calc(.25rem - 1px) 0 0"
+        },
+        "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
+            "&:not($cardHeaderIcon):not($cardHeaderImage):not($cardHeaderText)": {
+                borderRadius: "3px",
+                marginTop: "-20px",
+                padding: "15px"
+            }
+        },
+        "&$cardHeaderStats svg": {
+            fontSize: "36px",
+            lineHeight: "56px",
+            textAlign: "center",
+            width: "36px",
+            height: "36px",
+            margin: "10px 10px 4px"
+        },
+        "&$cardHeaderStats .fab,&$cardHeaderStats .fas,&$cardHeaderStats .far,&$cardHeaderStats .fal,&$cardHeaderStats .material-icons": {
+            fontSize: "36px",
+            lineHeight: "56px",
+            width: "56px",
+            height: "56px",
+            textAlign: "center",
+            overflow: "unset",
+            marginBottom: "1px"
+        },
+        "&$cardHeaderStats$cardHeaderIcon": {
+            textAlign: "right"
+        },
+        "&$cardHeaderImage": {
+            marginLeft: "15px",
+            marginRight: "15px",
+            marginTop: "-30px",
+            borderRadius: "6px"
+        },
+        "&$cardHeaderText": {
+            display: "inline-block"
+        }
+    },
+    cardHeaderPlain: {
+        marginLeft: "0px",
+        marginRight: "0px",
+        "&$cardHeaderImage": {
+            margin: "0 !important"
+        }
+    },
+    cardHeaderImage: {
+        position: "relative",
+        padding: "0",
+        zIndex: "1",
+        "& img": {
+            width: "100%",
+            borderRadius: "6px",
+            pointerEvents: "none",
+            boxShadow: "0 5px 15px -8px rgba(" +
+                hexToRgb(blackColor) +
+                ", 0.24), 0 8px 10px -5px rgba(" +
+                hexToRgb(blackColor) +
+                ", 0.2)"
+        },
+        "& a": {
+            display: "block"
+        }
+    },
+    cardHeaderContact: {
+        margin: "0 15px",
+        marginTop: "-20px"
+    },
+    cardHeaderSignup: {
+        marginLeft: "20px",
+        marginRight: "20px",
+        marginTop: "-40px",
+        padding: "20px 0",
+        width: "100%",
+        marginBottom: "15px"
+    },
+    cardHeaderStats: {
+        "& $cardHeaderIcon": {
+            textAlign: "right"
+        },
+        "& h1,& h2,& h3,& h4,& h5,& h6": {
+            margin: "0 !important"
+        }
+    },
+    cardHeaderIcon: {
+        "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
+            background: "transparent",
+            boxShadow: "none"
+        },
+        "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+            width: "33px",
+            height: "33px",
+            textAlign: "center",
+            lineHeight: "33px"
+        },
+        "& svg": {
+            width: "24px",
+            height: "24px",
+            textAlign: "center",
+            lineHeight: "33px",
+            margin: "5px 4px 0px"
+        }
+    },
+    cardHeaderText: {},
+    warningCardHeader: {
+        color: whiteColor,
+        "&:not($cardHeaderText):not($cardHeaderIcon)": {
+            ...warningCardHeader
+        }
+    },
+    successCardHeader: {
+        color: whiteColor,
+        "&:not($cardHeaderText):not($cardHeaderIcon)": {
+            ...successCardHeader
+        }
+    },
+    dangerCardHeader: {
+        color: whiteColor,
+        "&:not($cardHeaderText):not($cardHeaderIcon)": {
+            ...dangerCardHeader
+        }
+    },
+    infoCardHeader: {
+        color: whiteColor,
+        "&:not($cardHeaderText):not($cardHeaderIcon)": {
+            ...infoCardHeader
+        }
+    },
+    primaryCardHeader: {
+        color: whiteColor,
+        "&:not($cardHeaderText):not($cardHeaderIcon)": {
+            ...primaryCardHeader
+        }
+    },
+    roseCardHeader: {
+        color: whiteColor,
+        "&:not($cardHeaderText):not($cardHeaderIcon)": {
+            ...roseCardHeader
+        }
+    }
+};
+
+export default cardHeaderStyle;

package/dist/assets/jss/components/cardIconStyle.jsx

@@ -0,0 +1,30 @@
+import {
+    warningCardHeader,
+    successCardHeader,
+    dangerCardHeader,
+    infoCardHeader,
+    primaryCardHeader,
+    roseCardHeader,
+    grayColor
+} from "../rootStyle";
+
+const cardIconStyle = {
+    cardIcon: {
+        "&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader": {
+            borderRadius: "3px",
+            backgroundColor: grayColor[0],
+            padding: "15px",
+            marginTop: "-20px",
+            marginRight: "15px",
+            float: "left"
+        }
+    },
+    warningCardHeader,
+    successCardHeader,
+    dangerCardHeader,
+    infoCardHeader,
+    primaryCardHeader,
+    roseCardHeader
+};
+
+export default cardIconStyle;

package/dist/assets/jss/components/cardStyle.jsx

@@ -0,0 +1,179 @@
+import {
+    primaryColor,
+    infoColor,
+    successColor,
+    dangerColor,
+    warningColor,
+    roseColor,
+    whiteColor,
+    blackColor,
+    grayColor,
+    hexToRgb
+} from "../rootStyle";
+
+const cardStyle = {
+    card: {
+        border: "0",
+        marginBottom: "30px",
+        marginTop: "30px",
+        borderRadius: "6px",
+        color: "rgba(" + hexToRgb(blackColor) + ", 0.87)",
+        background: whiteColor,
+        width: "100%",
+        boxShadow: "0 1px 4px 0 rgba(" + hexToRgb(blackColor) + ", 0.14)",
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        minWidth: "0",
+        wordWrap: "break-word",
+        fontSize: ".875rem"
+    },
+    cardPlain: {
+        background: "transparent",
+        boxShadow: "none"
+    },
+    cardProfile: {
+        marginTop: "30px",
+        textAlign: "center"
+    },
+    cardBlog: {
+        marginTop: "60px"
+    },
+    cardRaised: {
+        boxShadow: "0 16px 38px -12px rgba(" +
+            hexToRgb(blackColor) +
+            ", 0.56), 0 4px 25px 0px rgba(" +
+            hexToRgb(blackColor) +
+            ", 0.12), 0 8px 10px -5px rgba(" +
+            hexToRgb(blackColor) +
+            ", 0.2)"
+    },
+    cardBackground: {
+        backgroundPosition: "center center",
+        backgroundSize: "cover",
+        textAlign: "center",
+        "&:after": {
+            position: "absolute",
+            zIndex: "1",
+            width: "100%",
+            height: "100%",
+            display: "block",
+            left: "0",
+            top: "0",
+            content: '""',
+            backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.56)",
+            borderRadius: "6px"
+        },
+        "& small": {
+            color: "rgba(" + hexToRgb(whiteColor) + ", 0.7) !important"
+        }
+    },
+    cardPricing: {
+        textAlign: "center",
+        "&:after": {
+            backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.7) !important"
+        },
+        "& ul": {
+            listStyle: "none",
+            padding: 0,
+            maxWidth: "240px",
+            margin: "10px auto"
+        },
+        "& ul li": {
+            color: grayColor[0],
+            textAlign: "center",
+            padding: "12px 0px",
+            borderBottom: "1px solid rgba(" + hexToRgb(grayColor[0]) + ",0.3)"
+        },
+        "& ul li:last-child": {
+            border: 0
+        },
+        "& ul li b": {
+            color: grayColor[2]
+        },
+        "& h1": {
+            marginTop: "30px"
+        },
+        "& h1 small": {
+            display: "inline-flex",
+            height: 0,
+            fontSize: "18px"
+        },
+        "& h1 small:first-child": {
+            position: "relative",
+            top: "-17px",
+            fontSize: "26px"
+        },
+        "& ul li svg, & ul li .fab,& ul li .fas,& ul li .far,& ul li .fal,& ul li .material-icons": {
+            position: "relative",
+            top: "7px"
+        }
+    },
+    cardPricingColor: {
+        "& ul li": {
+            color: whiteColor,
+            borderColor: "rgba(" + hexToRgb(whiteColor) + ",0.3)",
+            "& b, & svg,& .fab,& .fas,& .far,& .fal,& .material-icons": {
+                color: whiteColor,
+                fontWeight: "700"
+            }
+        }
+    },
+    cardProduct: {
+        marginTop: "30px"
+    },
+    primary: {
+        background: "linear-gradient(60deg," + primaryColor[1] + "," + primaryColor[4] + ")",
+        "& h1 small": {
+            color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
+        },
+        color: whiteColor
+    },
+    info: {
+        background: "linear-gradient(60deg," + infoColor[1] + "," + infoColor[4] + ")",
+        "& h1 small": {
+            color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
+        },
+        color: whiteColor
+    },
+    success: {
+        background: "linear-gradient(60deg," + successColor[1] + "," + successColor[4] + ")",
+        "& h1 small": {
+            color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
+        },
+        color: whiteColor
+    },
+    warning: {
+        background: "linear-gradient(60deg," + warningColor[1] + "," + warningColor[4] + ")",
+        "& h1 small": {
+            color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
+        },
+        color: whiteColor
+    },
+    danger: {
+        background: "linear-gradient(60deg," + dangerColor[1] + "," + dangerColor[4] + ")",
+        "& h1 small": {
+            color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
+        },
+        color: whiteColor
+    },
+    rose: {
+        background: "linear-gradient(60deg," + roseColor[1] + "," + roseColor[4] + ")",
+        "& h1 small": {
+            color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)"
+        },
+        color: whiteColor
+    },
+    cardChart: {
+        "& p": {
+            marginTop: "0px",
+            paddingTop: "0px"
+        }
+    },
+    cardLogin: {
+        transform: "translate3d(" + hexToRgb(blackColor) + ")",
+        transition: "all 300ms linear"
+    }
+};
+
+export default cardStyle;

package/dist/assets/jss/components/cardTextStyle.jsx

@@ -0,0 +1,29 @@
+import {
+    warningCardHeader,
+    successCardHeader,
+    dangerCardHeader,
+    infoCardHeader,
+    primaryCardHeader,
+    roseCardHeader,
+    grayColor
+} from "../rootStyle";
+
+const cardTextStyle = {
+    cardText: {
+        float: "none",
+        display: "inline-block",
+        marginRight: "0",
+        borderRadius: "3px",
+        backgroundColor: grayColor[0],
+        padding: "15px",
+        marginTop: "-20px"
+    },
+    warningCardHeader,
+    successCardHeader,
+    dangerCardHeader,
+    infoCardHeader,
+    primaryCardHeader,
+    roseCardHeader
+};
+
+export default cardTextStyle;