@agilemotion/oui-react-js 1.8.36 → 1.8.38

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

@@ -0,0 +1,232 @@
+import {
+    defaultFont,
+    primaryColor,
+    primaryBoxShadow,
+    infoColor,
+    infoBoxShadow,
+    successColor,
+    successBoxShadow,
+    warningColor,
+    warningBoxShadow,
+    dangerColor,
+    dangerBoxShadow,
+    roseColor,
+    roseBoxShadow,
+    whiteColor,
+    blackColor,
+    grayColor,
+    hexToRgb
+} from "../rootStyle";
+
+const customDropdownStyle = theme => ({
+    popperClose: {
+        pointerEvents: "none",
+        display: "none !important"
+    },
+    popperNav: {
+        [theme.breakpoints.down("sm")]: {
+            position: "static !important",
+            left: "unset !important",
+            top: "unset !important",
+            transform: "none !important",
+            willChange: "unset !important",
+            "& > div": {
+                boxShadow: "none !important",
+                marginLeft: "0rem",
+                marginRight: "0rem",
+                transition: "none !important",
+                marginTop: "0px !important",
+                marginBottom: "0px !important",
+                padding: "0px !important",
+                backgroundColor: "transparent !important",
+                "& ul li": {
+                    color: whiteColor + " !important",
+                    margin: "10px 15px 0!important",
+                    padding: "10px 15px !important",
+                    "&:hover": {
+                        backgroundColor: "hsla(0,0%,78%,.2)",
+                        boxShadow: "none"
+                    }
+                }
+            }
+        }
+    },
+    manager: {
+        "& > div > button:first-child > span:first-child, & > div > a:first-child > span:first-child": {
+            width: "100%"
+        }
+    },
+    innerManager: {
+        "& > div > button,& > div > a": {
+            margin: "0px !important",
+            color: "inherit !important",
+            padding: "10px 20px !important",
+            "& > span:first-child": {
+                width: "100%",
+                justifyContent: "flex-start"
+            }
+        }
+    },
+    target: {
+        "& > button:first-child > span:first-child, & > a:first-child > span:first-child": {
+            display: "inline-block"
+        },
+        "& $caret": {
+            marginLeft: "0px"
+        }
+    },
+    dropdown: {
+        borderRadius: "3px",
+        border: "0",
+        boxShadow: "0 2px 5px 0 rgba(" + hexToRgb(blackColor) + ", 0.26)",
+        top: "100%",
+        zIndex: "1000",
+        minWidth: "160px",
+        padding: "5px 0",
+        margin: "2px 0 0",
+        fontSize: "14px",
+        textAlign: "left",
+        listStyle: "none",
+        backgroundColor: whiteColor,
+        backgroundClip: "padding-box"
+    },
+    menuList: {
+        padding: "0"
+    },
+    popperResponsive: {
+        zIndex: "1200",
+        [theme.breakpoints.down("sm")]: {
+            zIndex: "1640",
+            position: "static",
+            float: "none",
+            width: "auto",
+            marginTop: "0",
+            backgroundColor: "transparent",
+            border: "0",
+            boxShadow: "none",
+            color: "black"
+        }
+    },
+    dropdownItem: {
+        ...defaultFont,
+        fontSize: "13px",
+        padding: "10px 20px",
+        margin: "0 5px",
+        borderRadius: "2px",
+        position: "relative",
+        transition: "all 150ms linear",
+        display: "block",
+        clear: "both",
+        fontWeight: "400",
+        height: "100%",
+        color: grayColor[7],
+        whiteSpace: "nowrap",
+        minHeight: "unset"
+    },
+    darkHover: {
+        "&:hover": {
+            boxShadow: "0 4px 20px 0px rgba(" +
+                hexToRgb(blackColor) +
+                ", 0.14), 0 7px 10px -5px rgba(" +
+                hexToRgb(grayColor[16]) +
+                ", 0.4)",
+            backgroundColor: grayColor[16],
+            color: whiteColor
+        }
+    },
+    primaryHover: {
+        "&:hover": {
+            backgroundColor: primaryColor[0],
+            color: whiteColor,
+            ...primaryBoxShadow
+        }
+    },
+    infoHover: {
+        "&:hover": {
+            backgroundColor: infoColor[0],
+            color: whiteColor,
+            ...infoBoxShadow
+        }
+    },
+    successHover: {
+        "&:hover": {
+            backgroundColor: successColor[0],
+            color: whiteColor,
+            ...successBoxShadow
+        }
+    },
+    warningHover: {
+        "&:hover": {
+            backgroundColor: warningColor[0],
+            color: whiteColor,
+            ...warningBoxShadow
+        }
+    },
+    dangerHover: {
+        "&:hover": {
+            backgroundColor: dangerColor[0],
+            color: whiteColor,
+            ...dangerBoxShadow
+        }
+    },
+    roseHover: {
+        "&:hover": {
+            backgroundColor: roseColor[0],
+            color: whiteColor,
+            ...roseBoxShadow
+        }
+    },
+    dropdownItemRTL: {
+        textAlign: "right"
+    },
+    dropdownDividerItem: {
+        margin: "5px 0",
+        backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.12)",
+        height: "1px",
+        overflow: "hidden"
+    },
+    buttonIcon: {
+        width: "20px",
+        height: "20px"
+    },
+    caret: {
+        transition: "all 150ms ease-in",
+        display: "inline-block",
+        width: "0",
+        height: "0",
+        marginLeft: "4px",
+        verticalAlign: "middle",
+        borderTop: "4px solid",
+        borderRight: "4px solid transparent",
+        borderLeft: "4px solid transparent"
+    },
+    caretActive: {
+        transform: "rotate(-360deg)"
+    },
+    caretDropup: {
+        transform: "rotate(-360deg)"
+    },
+    caretRTL: {
+        marginRight: "4px"
+    },
+    dropdownHeader: {
+        display: "block",
+        padding: "0.1875rem 1.25rem",
+        fontSize: "0.75rem",
+        lineHeight: "1.428571",
+        color: grayColor[1],
+        whiteSpace: "nowrap",
+        fontWeight: "inherit",
+        marginTop: "10px",
+        minHeight: "unset",
+        "&:hover,&:focus": {
+            backgroundColor: "transparent",
+            cursor: "auto"
+        }
+    },
+    noLiPadding: {
+        padding: "0"
+    }
+});
+
+export default customDropdownStyle;

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

@@ -0,0 +1,95 @@
+import {
+    primaryColor,
+    dangerColor,
+    successColor,
+    defaultFont,
+    whiteColor,
+    grayColor
+} from "../rootStyle";
+
+const customInputStyle = {
+    disabled: {
+        "&:before": {
+            borderColor: "transparent !important"
+        }
+    },
+    underline: {
+        "&:hover:not($disabled):before,&:before": {
+            borderColor: grayColor[4] + "!important",
+            borderWidth: "1px !important"
+        },
+        "&:after": {
+            borderColor: primaryColor[0]
+        },
+        "& + p": {
+            fontWeight: "300"
+        }
+    },
+    underlineError: {
+        "&:after": {
+            borderColor: dangerColor[0]
+        }
+    },
+    underlineSuccess: {
+        "&:after": {
+            borderColor: successColor[0]
+        }
+    },
+    labelRoot: {
+        ...defaultFont,
+        color: grayColor[3] + " !important",
+        fontWeight: "400",
+        fontSize: "14px",
+        lineHeight: "1.42857",
+        top: "10px",
+        letterSpacing: "unset",
+        "& + $underline": {
+            marginTop: "0px"
+        }
+    },
+    labelRootError: {
+        color: dangerColor[0] + " !important"
+    },
+    labelRootSuccess: {
+        color: successColor[0] + " !important"
+    },
+    formControl: {
+        margin: "0 0 17px 0",
+        paddingTop: "27px",
+        position: "relative",
+        verticalAlign: "unset",
+        "& svg,& .fab,& .far,& .fal,& .fas,& .material-icons": {
+            color: grayColor[14]
+        }
+    },
+    whiteUnderline: {
+        "&:hover:not($disabled):before,&:before": {
+            backgroundColor: whiteColor
+        },
+        "&:after": {
+            backgroundColor: whiteColor
+        }
+    },
+    input: {
+        color: grayColor[14],
+        height: "unset",
+        "&,&::placeholder": {
+            fontSize: "14px",
+            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontWeight: "400",
+            lineHeight: "1.42857",
+            opacity: "1"
+        },
+        "&::placeholder": {
+            color: grayColor[3]
+        }
+    },
+    whiteInput: {
+        "&,&::placeholder": {
+            color: whiteColor,
+            opacity: "1"
+        }
+    }
+};
+
+export default customInputStyle;

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

@@ -0,0 +1,124 @@
+import {
+  primaryColor,
+  whiteColor,
+  primaryBoxShadow,
+  defaultFont,
+  blackColor,
+  grayColor,
+  hexToRgb
+} from "../rootStyle";
+
+const dropdownStyle = theme => ({
+  buttonLink: {
+    [theme.breakpoints.down("md")]: {
+      display: "flex",
+      marginLeft: "30px",
+      width: "auto"
+    }
+  },
+  links: {
+    width: "20px",
+    height: "20px",
+    zIndex: "4",
+    [theme.breakpoints.down("md")]: {
+      display: "block",
+      width: "30px",
+      height: "30px",
+      color: grayColor[9],
+      marginRight: "15px"
+    }
+  },
+  linkText: {
+    zIndex: "4",
+    ...defaultFont,
+    fontSize: "14px"
+  },
+  popperClose: {
+    pointerEvents: "none"
+  },
+  popperResponsive: {
+    [theme.breakpoints.down("md")]: {
+      zIndex: "1640",
+      position: "static",
+      float: "none",
+      width: "auto",
+      marginTop: "0",
+      backgroundColor: "transparent",
+      border: "0",
+      WebkitBoxShadow: "none",
+      boxShadow: "none",
+      color: "black"
+    }
+  },
+  popperNav: {
+    [theme.breakpoints.down("sm")]: {
+      position: "static !important",
+      left: "unset !important",
+      top: "unset !important",
+      transform: "none !important",
+      willChange: "unset !important",
+      "& > div": {
+        boxShadow: "none !important",
+        marginLeft: "0rem",
+        marginRight: "0rem",
+        transition: "none !important",
+        marginTop: "0px !important",
+        marginBottom: "0px !important",
+        padding: "0px !important",
+        backgroundColor: "transparent !important",
+        "& ul li": {
+          color: whiteColor + " !important",
+          margin: "10px 15px 0!important",
+          padding: "10px 15px !important",
+          "&:hover": {
+            backgroundColor: "hsla(0,0%,78%,.2)",
+            boxShadow: "none"
+          }
+        }
+      }
+    }
+  },
+  dropdown: {
+    borderRadius: "3px",
+    border: "0",
+    boxShadow: "0 2px 5px 0 rgba(" + hexToRgb(blackColor) + ", 0.26)",
+    top: "100%",
+    zIndex: "1000",
+    minWidth: "160px",
+    padding: "5px 0",
+    margin: "2px 0 0",
+    fontSize: "14px",
+    textAlign: "left",
+    listStyle: "none",
+    backgroundColor: whiteColor,
+    WebkitBackgroundClip: "padding-box",
+    backgroundClip: "padding-box"
+  },
+  dropdownItem: {
+    ...defaultFont,
+    fontSize: "13px",
+    padding: "10px 20px",
+    margin: "0 5px",
+    borderRadius: "2px",
+    WebkitTransition: "all 150ms linear",
+    MozTransition: "all 150ms linear",
+    OTransition: "all 150ms linear",
+    MsTransition: "all 150ms linear",
+    transition: "all 150ms linear",
+    display: "block",
+    clear: "both",
+    fontWeight: "400",
+    lineHeight: "1.42857143",
+    color: grayColor[8],
+    whiteSpace: "nowrap",
+    height: "unset",
+    minHeight: "unset",
+    "&:hover": {
+      backgroundColor: primaryColor[0],
+      color: whiteColor,
+      ...primaryBoxShadow
+    }
+  }
+});
+
+export default dropdownStyle;

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

@@ -0,0 +1,64 @@
+import {
+    defaultFont,
+    container,
+    containerFluid,
+    primaryColor,
+    whiteColor,
+    grayColor
+} from "../rootStyle";
+
+const footerStyle = {
+    block: {},
+    left: {
+        float: "left !important"
+    },
+    right: {
+        margin: "0",
+        fontSize: "14px",
+        float: "right !important",
+        padding: "15px",
+        paddingRight: "70px"
+    },
+    footer: {
+        bottom: "0",
+        padding: "15px 0",
+        ...defaultFont,
+        zIndex: 4
+    },
+    wrapper: {
+        display: "inline-block",
+        textAlign: '-webkit-center',
+        width: '100%'
+    },
+    container: {
+        zIndex: 3,
+        ...container,
+        position: "relative"
+    },
+    containerFluid: {
+        zIndex: 3,
+        ...containerFluid,
+        position: "relative"
+    },
+    a: {
+        color: primaryColor[0],
+        textDecoration: "none",
+        backgroundColor: "transparent"
+    },
+    list: {
+        marginBottom: "0",
+        padding: "0",
+        marginTop: "0"
+    },
+    inlineBlock: {
+        display: "inline-block",
+        padding: "0",
+        width: "auto"
+    },
+    whiteColor: {
+        "&,&:hover,&:focus": {
+            color: whiteColor
+        }
+    }
+};
+export default footerStyle;

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

@@ -0,0 +1,113 @@
+import {
+  defaultFont,
+  dangerColor,
+  whiteColor
+} from "../rootStyle";
+
+import dropdownStyle from "./dropdownStyle";
+
+const headerLinksStyle = theme => ({
+  ...dropdownStyle(theme),
+  search: {
+    "& > div": {
+      marginTop: "0"
+    },
+    [theme.breakpoints.down("sm")]: {
+      margin: "10px 15px !important",
+      float: "none !important",
+      paddingTop: "1px",
+      paddingBottom: "1px",
+      padding: "0!important",
+      width: "60%",
+      marginTop: "40px",
+      "& input": {
+        color: whiteColor
+      }
+    }
+  },
+  linkText: {
+    zIndex: "4",
+    ...defaultFont,
+    fontSize: "14px",
+    margin: "0px"
+  },
+  buttonLink: {
+    [theme.breakpoints.down("sm")]: {
+      display: "flex",
+      margin: "10px 15px 0",
+      width: "-webkit-fill-available",
+      "& svg": {
+        width: "24px",
+        height: "30px",
+        marginRight: "15px",
+        marginLeft: "-15px"
+      },
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+        fontSize: "24px",
+        lineHeight: "30px",
+        width: "24px",
+        height: "30px",
+        marginRight: "15px",
+        marginLeft: "-15px"
+      },
+      "& > span": {
+        justifyContent: "flex-start",
+        width: "100%"
+      }
+    }
+  },
+  searchButton: {
+    [theme.breakpoints.down("sm")]: {
+      top: "-50px !important",
+      marginRight: "22px",
+      float: "right"
+    }
+  },
+  margin: {
+    zIndex: "4",
+    margin: "0"
+  },
+  searchIcon: {
+    width: "17px",
+    zIndex: "4"
+  },
+  notifications: {
+    zIndex: "4",
+    [theme.breakpoints.up("md")]: {
+      position: "absolute",
+      top: "2px",
+      border: "1px solid " + whiteColor,
+      right: "4px",
+      fontSize: "9px",
+      background: dangerColor[0],
+      color: whiteColor,
+      minWidth: "16px",
+      height: "16px",
+      borderRadius: "10px",
+      textAlign: "center",
+      lineHeight: "16px",
+      verticalAlign: "middle",
+      display: "block"
+    },
+    [theme.breakpoints.down("sm")]: {
+      ...defaultFont,
+      fontSize: "14px",
+      marginRight: "8px"
+    }
+  },
+  manager: {
+    [theme.breakpoints.down("sm")]: {
+      width: "100%"
+    },
+    display: "inline-block"
+  },
+  searchWrapper: {
+    [theme.breakpoints.down("sm")]: {
+      width: "-webkit-fill-available",
+      margin: "10px 15px 0"
+    },
+    display: "inline-block"
+  }
+});
+
+export default headerLinksStyle;

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

@@ -0,0 +1,82 @@
+import {
+  container,
+  defaultFont,
+  primaryColor,
+  defaultBoxShadow,
+  infoColor,
+  successColor,
+  warningColor,
+  dangerColor,
+  whiteColor,
+  grayColor
+} from "../rootStyle";
+
+const headerStyle = () => ({
+  appBar: {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    borderBottom: "0",
+    marginBottom: "0",
+    position: "absolute",
+    width: "100%",
+    paddingTop: "10px",
+    zIndex: "1029",
+    color: grayColor[7],
+    border: "0",
+    borderRadius: "3px",
+    padding: "10px 0",
+    transition: "all 150ms ease 0s",
+    minHeight: "50px",
+    display: "block"
+  },
+  container: {
+    ...container,
+    minHeight: "50px"
+  },
+  flex: {
+    flex: 1
+  },
+  title: {
+    ...defaultFont,
+    letterSpacing: "unset",
+    lineHeight: "30px",
+    fontSize: "18px",
+    borderRadius: "3px",
+    textTransform: "none",
+    color: "inherit",
+    margin: "0",
+    "&:hover,&:focus": {
+      background: "transparent"
+    }
+  },
+  appResponsive: {
+    top: "8px"
+  },
+  primary: {
+    backgroundColor: primaryColor[0],
+    color: whiteColor,
+    ...defaultBoxShadow
+  },
+  info: {
+    backgroundColor: infoColor[0],
+    color: whiteColor,
+    ...defaultBoxShadow
+  },
+  success: {
+    backgroundColor: successColor[0],
+    color: whiteColor,
+    ...defaultBoxShadow
+  },
+  warning: {
+    backgroundColor: warningColor[0],
+    color: whiteColor,
+    ...defaultBoxShadow
+  },
+  danger: {
+    backgroundColor: dangerColor[0],
+    color: whiteColor,
+    ...defaultBoxShadow
+  }
+});
+
+export default headerStyle;