@agilemotion/oui-react-js 1.6.0 → 1.6.2

package/dist/assets/jss/components/sidebarStyle.js

@@ -7,38 +7,42 @@ exports.default = void 0;
 
 var _rootStyle = require("../rootStyle");
 
-const sidebarStyle = theme => ({
-  drawerPaperRTL: {
-    [theme.breakpoints.up("md")]: {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var sidebarStyle = function sidebarStyle(theme) {
+  var _drawerPaperRTL, _objectSpread2;
+
+  return {
+    drawerPaperRTL: (_drawerPaperRTL = {}, _defineProperty(_drawerPaperRTL, theme.breakpoints.up("md"), {
       left: "auto !important",
       right: "0 !important"
-    },
-    [theme.breakpoints.down("sm")]: {
+    }), _defineProperty(_drawerPaperRTL, theme.breakpoints.down("sm"), {
       left: "0  !important",
       right: "auto !important"
-    }
-  },
-  drawerPaper: {
-    border: "none",
-    position: "fixed",
-    top: "0",
-    bottom: "0",
-    left: "0",
-    zIndex: "1032",
-    transitionProperty: "top, bottom, width",
-    transitionDuration: ".2s, .2s, .35s",
-    transitionTimingFunction: "linear, linear, ease",
-    // overflow: 'auto',
-    ..._rootStyle.boxShadow,
-    width: _rootStyle.drawerWidth,
-    [theme.breakpoints.up("md")]: {
+    }), _drawerPaperRTL),
+    drawerPaper: _objectSpread(_objectSpread({
+      border: "none",
+      position: "fixed",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      zIndex: "1032",
+      transitionProperty: "top, bottom, width",
+      transitionDuration: ".2s, .2s, .35s",
+      transitionTimingFunction: "linear, linear, ease"
+    }, _rootStyle.boxShadow), {}, (_objectSpread2 = {
+      width: _rootStyle.drawerWidth
+    }, _defineProperty(_objectSpread2, theme.breakpoints.up("md"), {
       width: _rootStyle.drawerWidth,
       position: "fixed",
       height: "100%"
-    },
-    [theme.breakpoints.down("sm")]: {
-      width: _rootStyle.drawerWidth,
-      ..._rootStyle.boxShadow,
+    }), _defineProperty(_objectSpread2, theme.breakpoints.down("sm"), _objectSpread(_objectSpread({
+      width: _rootStyle.drawerWidth
+    }, _rootStyle.boxShadow), {}, {
       position: "fixed",
       display: "block",
       top: "0",
@@ -52,10 +56,8 @@ const sidebarStyle = theme => ({
       textAlign: "left",
       paddingRight: "0px",
       paddingLeft: "0",
-      transform: "translate3d(".concat(_rootStyle.drawerWidth, "px, 0, 0)"),
-      ..._rootStyle.transition
-    },
-    "&:before,&:after": {
+      transform: "translate3d(".concat(_rootStyle.drawerWidth, "px, 0, 0)")
+    }, _rootStyle.transition)), _defineProperty(_objectSpread2, "&:before,&:after", {
       position: "absolute",
       zIndex: "3",
       width: "100%",
@@ -63,424 +65,422 @@ const sidebarStyle = theme => ({
       content: '""',
       display: "block",
       top: "0"
-    }
-  },
-  blackBackground: {
-    color: _rootStyle.whiteColor,
-    "&:after": {
-      background: _rootStyle.blackColor,
-      opacity: ".8"
-    }
-  },
-  blueBackground: {
-    color: _rootStyle.whiteColor,
-    "&:after": {
-      background: _rootStyle.infoColor[0],
-      opacity: ".93"
-    }
-  },
-  whiteBackground: {
-    color: _rootStyle.grayColor[2],
-    "&:after": {
-      background: _rootStyle.whiteColor,
-      opacity: ".93"
-    }
-  },
-  whiteAfter: {
-    "&:after": {
-      backgroundColor: "hsla(0,0%,71%,.3) !important"
-    }
-  },
-  drawerPaperMini: {
-    width: _rootStyle.drawerMiniWidth + "px!important"
-  },
-  logo: {
-    padding: "15px 0px",
-    margin: "0",
-    display: "block",
-    position: "relative",
-    zIndex: "4",
-    "&:after": {
-      content: '""',
+    }), _objectSpread2)),
+    blackBackground: {
+      color: _rootStyle.whiteColor,
+      "&:after": {
+        background: _rootStyle.blackColor,
+        opacity: ".8"
+      }
+    },
+    blueBackground: {
+      color: _rootStyle.whiteColor,
+      "&:after": {
+        background: _rootStyle.infoColor[0],
+        opacity: ".93"
+      }
+    },
+    whiteBackground: {
+      color: _rootStyle.grayColor[2],
+      "&:after": {
+        background: _rootStyle.whiteColor,
+        opacity: ".93"
+      }
+    },
+    whiteAfter: {
+      "&:after": {
+        backgroundColor: "hsla(0,0%,71%,.3) !important"
+      }
+    },
+    drawerPaperMini: {
+      width: _rootStyle.drawerMiniWidth + "px!important"
+    },
+    logo: {
+      padding: "15px 0px",
+      margin: "0",
+      display: "block",
+      position: "relative",
+      zIndex: "4",
+      "&:after": {
+        content: '""',
+        position: "absolute",
+        bottom: "0",
+        height: "1px",
+        right: "15px",
+        width: "calc(100% - 30px)",
+        backgroundColor: "hsla(0,0%,100%,.3)"
+      }
+    },
+    logoMini: {
+      transition: "all 300ms linear",
+      opacity: 1,
+      float: "left",
+      textAlign: "center",
+      width: "30px",
+      display: "inline-block",
+      maxHeight: "30px",
+      marginLeft: "22px",
+      marginRight: "18px",
+      marginTop: "7px",
+      color: "inherit"
+    },
+    logoMiniRTL: {
+      float: "right",
+      marginRight: "30px",
+      marginLeft: "26px"
+    },
+    logoNormal: _objectSpread(_objectSpread({}, _rootStyle.defaultFont), {}, {
+      transition: "all 300ms linear",
+      display: "block",
+      opacity: "1",
+      transform: "translate3d(0px, 0, 0)",
+      textTransform: "uppercase",
+      padding: "5px 0px",
+      fontSize: "18px",
+      whiteSpace: "nowrap",
+      fontWeight: "400",
+      lineHeight: "30px",
+      overflow: "hidden",
+      "&,&:hover,&:focus": {
+        color: "inherit"
+      }
+    }),
+    logoNormalRTL: {
+      textAlign: "right"
+    },
+    logoNormalSidebarMini: {
+      opacity: "0",
+      transform: "translate3d(-25px, 0, 0)"
+    },
+    logoNormalSidebarMiniRTL: {
+      transform: "translate3d(25px, 0, 0)"
+    },
+    img: {
+      width: "35px",
+      verticalAlign: "middle",
+      border: "0"
+    },
+    background: {
       position: "absolute",
-      bottom: "0",
-      height: "1px",
-      right: "15px",
-      width: "calc(100% - 30px)",
-      backgroundColor: "hsla(0,0%,100%,.3)"
-    }
-  },
-  logoMini: {
-    transition: "all 300ms linear",
-    opacity: 1,
-    float: "left",
-    textAlign: "center",
-    width: "30px",
-    display: "inline-block",
-    maxHeight: "30px",
-    marginLeft: "22px",
-    marginRight: "18px",
-    marginTop: "7px",
-    color: "inherit"
-  },
-  logoMiniRTL: {
-    float: "right",
-    marginRight: "30px",
-    marginLeft: "26px"
-  },
-  logoNormal: { ..._rootStyle.defaultFont,
-    transition: "all 300ms linear",
-    display: "block",
-    opacity: "1",
-    transform: "translate3d(0px, 0, 0)",
-    textTransform: "uppercase",
-    padding: "5px 0px",
-    fontSize: "18px",
-    whiteSpace: "nowrap",
-    fontWeight: "400",
-    lineHeight: "30px",
-    overflow: "hidden",
-    "&,&:hover,&:focus": {
+      zIndex: "1",
+      height: "100%",
+      width: "100%",
+      display: "block",
+      top: "0",
+      left: "0",
+      backgroundSize: "cover",
+      backgroundPosition: "center center",
+      transition: "all 300ms linear"
+    },
+    list: {
+      marginTop: "15px",
+      paddingLeft: "0",
+      paddingTop: "0",
+      paddingBottom: "0",
+      marginBottom: "0",
+      listStyle: "none",
+      color: "inherit",
+      "&:before,&:after": {
+        display: "table",
+        content: '" "'
+      },
+      "&:after": {
+        clear: "both"
+      }
+    },
+    item: {
+      color: "inherit",
+      position: "relative",
+      display: "block",
+      textDecoration: "none",
+      margin: "0",
+      padding: "0"
+    },
+    userItem: {
+      "&:last-child": {
+        paddingBottom: "0px"
+      }
+    },
+    itemLink: _objectSpread(_objectSpread({
+      paddingLeft: "10px",
+      paddingRight: "10px",
+      transition: "all 300ms linear",
+      margin: "10px 15px 0",
+      borderRadius: "3px",
+      position: "relative",
+      display: "block",
+      padding: "10px 15px",
+      backgroundColor: "transparent"
+    }, _rootStyle.defaultFont), {}, {
+      width: "auto",
+      "&:hover": {
+        outline: "none",
+        backgroundColor: "rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.grayColor[17]) + ", 0.2)",
+        boxShadow: "none"
+      },
+      "&,&:hover,&:focus": {
+        color: "inherit"
+      }
+    }),
+    itemIcon: {
+      color: "inherit",
+      width: "30px",
+      height: "24px",
+      float: "left",
+      position: "inherit",
+      top: "3px",
+      marginRight: "15px",
+      textAlign: "center",
+      verticalAlign: "middle",
+      opacity: "0.8"
+    },
+    itemIconRTL: {
+      float: "right",
+      marginLeft: "15px",
+      marginRight: "1px"
+    },
+    itemText: _objectSpread(_objectSpread({
       color: "inherit"
-    }
-  },
-  logoNormalRTL: {
-    textAlign: "right"
-  },
-  logoNormalSidebarMini: {
-    opacity: "0",
-    transform: "translate3d(-25px, 0, 0)"
-  },
-  logoNormalSidebarMiniRTL: {
-    transform: "translate3d(25px, 0, 0)"
-  },
-  img: {
-    width: "35px",
-    verticalAlign: "middle",
-    border: "0"
-  },
-  background: {
-    position: "absolute",
-    zIndex: "1",
-    height: "100%",
-    width: "100%",
-    display: "block",
-    top: "0",
-    left: "0",
-    backgroundSize: "cover",
-    backgroundPosition: "center center",
-    transition: "all 300ms linear"
-  },
-  list: {
-    marginTop: "15px",
-    paddingLeft: "0",
-    paddingTop: "0",
-    paddingBottom: "0",
-    marginBottom: "0",
-    listStyle: "none",
-    color: "inherit",
-    "&:before,&:after": {
-      display: "table",
-      content: '" "'
-    },
-    "&:after": {
-      clear: "both"
-    }
-  },
-  item: {
-    color: "inherit",
-    position: "relative",
-    display: "block",
-    textDecoration: "none",
-    margin: "0",
-    padding: "0"
-  },
-  userItem: {
-    "&:last-child": {
-      paddingBottom: "0px"
-    }
-  },
-  itemLink: {
-    paddingLeft: "10px",
-    paddingRight: "10px",
-    transition: "all 300ms linear",
-    margin: "10px 15px 0",
-    borderRadius: "3px",
-    position: "relative",
-    display: "block",
-    padding: "10px 15px",
-    backgroundColor: "transparent",
-    ..._rootStyle.defaultFont,
-    width: "auto",
-    "&:hover": {
+    }, _rootStyle.defaultFont), {}, {
+      margin: "0",
+      lineHeight: "30px",
+      fontSize: "14px",
+      transform: "translate3d(0px, 0, 0)",
+      opacity: "1",
+      transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
+      position: "relative",
+      display: "block",
+      height: "auto",
+      whiteSpace: "nowrap",
+      padding: "0 16px !important"
+    }),
+    userItemText: {
+      lineHeight: "22px"
+    },
+    itemTextRTL: {
+      marginRight: "45px",
+      textAlign: "right"
+    },
+    itemTextMini: {
+      transform: "translate3d(-25px, 0, 0)",
+      opacity: "0"
+    },
+    itemTextMiniRTL: {
+      transform: "translate3d(25px, 0, 0) !important"
+    },
+    collapseList: {
+      marginTop: "0",
+      "& $caret": {
+        marginTop: "8px"
+      }
+    },
+    collapseItem: {
+      position: "relative",
+      display: "block",
+      textDecoration: "none",
+      margin: "10px 0 0 0",
+      padding: "0"
+    },
+    collapseActive: {
       outline: "none",
       backgroundColor: "rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.grayColor[17]) + ", 0.2)",
       boxShadow: "none"
     },
-    "&,&:hover,&:focus": {
+    collapseItemLink: _objectSpread(_objectSpread({
+      transition: "all 300ms linear",
+      margin: "0 15px",
+      borderRadius: "3px",
+      position: "relative",
+      display: "block",
+      padding: "10px",
+      backgroundColor: "transparent"
+    }, _rootStyle.defaultFont), {}, {
+      width: "auto",
+      "&:hover": {
+        outline: "none",
+        backgroundColor: "rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.grayColor[17]) + ", 0.2)",
+        boxShadow: "none"
+      },
+      "&,&:hover,&:focus": {
+        color: "inherit"
+      }
+    }),
+    collapseItemMini: _objectSpread(_objectSpread({
       color: "inherit"
-    }
-  },
-  itemIcon: {
-    color: "inherit",
-    width: "30px",
-    height: "24px",
-    float: "left",
-    position: "inherit",
-    top: "3px",
-    marginRight: "15px",
-    textAlign: "center",
-    verticalAlign: "middle",
-    opacity: "0.8"
-  },
-  itemIconRTL: {
-    float: "right",
-    marginLeft: "15px",
-    marginRight: "1px"
-  },
-  itemText: {
-    color: "inherit",
-    ..._rootStyle.defaultFont,
-    margin: "0",
-    lineHeight: "30px",
-    fontSize: "14px",
-    transform: "translate3d(0px, 0, 0)",
-    opacity: "1",
-    transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
-    position: "relative",
-    display: "block",
-    height: "auto",
-    whiteSpace: "nowrap",
-    padding: "0 16px !important"
-  },
-  userItemText: {
-    lineHeight: "22px"
-  },
-  itemTextRTL: {
-    marginRight: "45px",
-    textAlign: "right"
-  },
-  itemTextMini: {
-    transform: "translate3d(-25px, 0, 0)",
-    opacity: "0"
-  },
-  itemTextMiniRTL: {
-    transform: "translate3d(25px, 0, 0) !important"
-  },
-  collapseList: {
-    marginTop: "0",
-    "& $caret": {
-      marginTop: "8px"
-    }
-  },
-  collapseItem: {
-    position: "relative",
-    display: "block",
-    textDecoration: "none",
-    margin: "10px 0 0 0",
-    padding: "0"
-  },
-  collapseActive: {
-    outline: "none",
-    backgroundColor: "rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.grayColor[17]) + ", 0.2)",
-    boxShadow: "none"
-  },
-  collapseItemLink: {
-    transition: "all 300ms linear",
-    margin: "0 15px",
-    borderRadius: "3px",
-    position: "relative",
-    display: "block",
-    padding: "10px",
-    backgroundColor: "transparent",
-    ..._rootStyle.defaultFont,
-    width: "auto",
-    "&:hover": {
-      outline: "none",
-      backgroundColor: "rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.grayColor[17]) + ", 0.2)",
-      boxShadow: "none"
+    }, _rootStyle.defaultFont), {}, {
+      textTransform: "uppercase",
+      width: "30px",
+      marginRight: "15px",
+      textAlign: "center",
+      letterSpacing: "1px",
+      position: "relative",
+      float: "left",
+      display: "inherit",
+      transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
+      fontSize: "14px"
+    }),
+    collapseItemMiniRTL: {
+      float: "right",
+      marginLeft: "30px",
+      marginRight: "1px"
     },
-    "&,&:hover,&:focus": {
+    collapseItemText: _objectSpread(_objectSpread({
       color: "inherit"
-    }
-  },
-  collapseItemMini: {
-    color: "inherit",
-    ..._rootStyle.defaultFont,
-    textTransform: "uppercase",
-    width: "30px",
-    marginRight: "15px",
-    textAlign: "center",
-    letterSpacing: "1px",
-    position: "relative",
-    float: "left",
-    display: "inherit",
-    transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
-    fontSize: "14px"
-  },
-  collapseItemMiniRTL: {
-    float: "right",
-    marginLeft: "30px",
-    marginRight: "1px"
-  },
-  collapseItemText: {
-    color: "inherit",
-    ..._rootStyle.defaultFont,
-    margin: "0",
-    position: "relative",
-    transform: "translateX(0px)",
-    opacity: "1",
-    whiteSpace: "nowrap",
-    display: "block",
-    transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
-    fontSize: "14px"
-  },
-  collapseItemTextRTL: {
-    textAlign: "right"
-  },
-  collapseItemTextMiniRTL: {
-    transform: "translate3d(25px, 0, 0) !important"
-  },
-  collapseItemTextMini: {
-    transform: "translate3d(-25px, 0, 0)",
-    opacity: "0"
-  },
-  caret: {
-    marginTop: "13px",
-    position: "absolute",
-    right: "18px",
-    transition: "all 150ms ease-in",
-    display: "inline-block",
-    width: "0",
-    height: "0",
-    marginLeft: "2px",
-    verticalAlign: "middle",
-    borderTop: "4px solid",
-    borderRight: "4px solid transparent",
-    borderLeft: "4px solid transparent"
-  },
-  userCaret: {
-    marginTop: "10px"
-  },
-  caretRTL: {
-    left: "11px",
-    right: "auto"
-  },
-  caretActive: {
-    transform: "rotate(-360deg)"
-  },
-  purple: {
-    "&,&:hover,&:focus": {
-      color: _rootStyle.whiteColor,
-      backgroundColor: _rootStyle.primaryColor[0],
-      ..._rootStyle.primaryBoxShadow
-    }
-  },
-  blue: {
-    "&,&:hover,&:focus": {
-      color: _rootStyle.whiteColor,
-      backgroundColor: _rootStyle.infoColor[0],
-      boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.infoColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.infoColor[0]) + ",.2)"
-    }
-  },
-  green: {
-    "&,&:hover,&:focus": {
-      color: _rootStyle.whiteColor,
-      backgroundColor: _rootStyle.successColor[0],
-      boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.successColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.successColor[0]) + ",.2)"
-    }
-  },
-  orange: {
-    "&,&:hover,&:focus": {
-      color: _rootStyle.whiteColor,
-      backgroundColor: _rootStyle.warningColor[0],
-      boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.warningColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.warningColor[0]) + ",.2)"
-    }
-  },
-  red: {
-    "&,&:hover,&:focus": {
-      color: _rootStyle.whiteColor,
-      backgroundColor: _rootStyle.dangerColor[0],
-      boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.dangerColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.dangerColor[0]) + ",.2)"
-    }
-  },
-  white: {
-    "&,&:hover,&:focus": {
-      color: _rootStyle.grayColor[2],
-      backgroundColor: _rootStyle.whiteColor,
-      boxShadow: "0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.14), 0 7px 10px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.grayColor[2]) + ",.4)"
-    }
-  },
-  rose: {
-    "&,&:hover,&:focus": {
-      color: _rootStyle.whiteColor,
-      backgroundColor: _rootStyle.roseColor[0],
-      boxShadow: "0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.14), 0 7px 10px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.roseColor[0]) + ",.4)"
-    }
-  },
-  sidebarWrapper: {
-    position: "relative",
-    height: "calc(100vh - 75px)",
-    overflow: "auto",
-    width: "260px",
-    zIndex: "4",
-    overflowScrolling: "touch",
-    transitionProperty: "top, bottom, width",
-    transitionDuration: ".2s, .2s, .35s",
-    transitionTimingFunction: "linear, linear, ease",
-    color: "inherit",
-    paddingBottom: "30px"
-  },
-  sidebarWrapperWithPerfectScrollbar: {
-    overflow: "hidden !important"
-  },
-  user: {
-    paddingBottom: "20px",
-    margin: "20px auto 0",
-    position: "relative",
-    "&:after": {
-      content: '""',
+    }, _rootStyle.defaultFont), {}, {
+      margin: "0",
+      position: "relative",
+      transform: "translateX(0px)",
+      opacity: "1",
+      whiteSpace: "nowrap",
+      display: "block",
+      transition: "transform 300ms ease 0s, opacity 300ms ease 0s",
+      fontSize: "14px"
+    }),
+    collapseItemTextRTL: {
+      textAlign: "right"
+    },
+    collapseItemTextMiniRTL: {
+      transform: "translate3d(25px, 0, 0) !important"
+    },
+    collapseItemTextMini: {
+      transform: "translate3d(-25px, 0, 0)",
+      opacity: "0"
+    },
+    caret: {
+      marginTop: "13px",
       position: "absolute",
-      bottom: "0",
-      right: "15px",
-      height: "1px",
-      width: "calc(100% - 30px)",
-      backgroundColor: "hsla(0,0%,100%,.3)"
-    }
-  },
-  photo: {
-    transition: "all 300ms linear",
-    width: "34px",
-    height: "34px",
-    overflow: "hidden",
-    float: "left",
-    zIndex: "5",
-    marginRight: "11px",
-    borderRadius: "50%",
-    marginLeft: "23px",
-    ..._rootStyle.boxShadow
-  },
-  photoRTL: {
-    float: "right",
-    marginLeft: "12px",
-    marginRight: "24px"
-  },
-  avatarImg: {
-    width: "100%",
-    verticalAlign: "middle",
-    border: "0"
-  },
-  userCollapseButton: {
-    margin: "0",
-    padding: "6px 15px",
-    "&:hover": {
-      background: "none"
+      right: "18px",
+      transition: "all 150ms ease-in",
+      display: "inline-block",
+      width: "0",
+      height: "0",
+      marginLeft: "2px",
+      verticalAlign: "middle",
+      borderTop: "4px solid",
+      borderRight: "4px solid transparent",
+      borderLeft: "4px solid transparent"
+    },
+    userCaret: {
+      marginTop: "10px"
+    },
+    caretRTL: {
+      left: "11px",
+      right: "auto"
+    },
+    caretActive: {
+      transform: "rotate(-360deg)"
+    },
+    purple: {
+      "&,&:hover,&:focus": _objectSpread({
+        color: _rootStyle.whiteColor,
+        backgroundColor: _rootStyle.primaryColor[0]
+      }, _rootStyle.primaryBoxShadow)
+    },
+    blue: {
+      "&,&:hover,&:focus": {
+        color: _rootStyle.whiteColor,
+        backgroundColor: _rootStyle.infoColor[0],
+        boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.infoColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.infoColor[0]) + ",.2)"
+      }
+    },
+    green: {
+      "&,&:hover,&:focus": {
+        color: _rootStyle.whiteColor,
+        backgroundColor: _rootStyle.successColor[0],
+        boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.successColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.successColor[0]) + ",.2)"
+      }
+    },
+    orange: {
+      "&,&:hover,&:focus": {
+        color: _rootStyle.whiteColor,
+        backgroundColor: _rootStyle.warningColor[0],
+        boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.warningColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.warningColor[0]) + ",.2)"
+      }
+    },
+    red: {
+      "&,&:hover,&:focus": {
+        color: _rootStyle.whiteColor,
+        backgroundColor: _rootStyle.dangerColor[0],
+        boxShadow: "0 12px 20px -10px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.dangerColor[0]) + ",.28), 0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.12), 0 7px 8px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.dangerColor[0]) + ",.2)"
+      }
+    },
+    white: {
+      "&,&:hover,&:focus": {
+        color: _rootStyle.grayColor[2],
+        backgroundColor: _rootStyle.whiteColor,
+        boxShadow: "0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.14), 0 7px 10px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.grayColor[2]) + ",.4)"
+      }
+    },
+    rose: {
+      "&,&:hover,&:focus": {
+        color: _rootStyle.whiteColor,
+        backgroundColor: _rootStyle.roseColor[0],
+        boxShadow: "0 4px 20px 0 rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ",.14), 0 7px 10px -5px rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.roseColor[0]) + ",.4)"
+      }
+    },
+    sidebarWrapper: {
+      position: "relative",
+      height: "calc(100vh - 75px)",
+      overflow: "auto",
+      width: "260px",
+      zIndex: "4",
+      overflowScrolling: "touch",
+      transitionProperty: "top, bottom, width",
+      transitionDuration: ".2s, .2s, .35s",
+      transitionTimingFunction: "linear, linear, ease",
+      color: "inherit",
+      paddingBottom: "30px"
+    },
+    sidebarWrapperWithPerfectScrollbar: {
+      overflow: "hidden !important"
+    },
+    user: {
+      paddingBottom: "20px",
+      margin: "20px auto 0",
+      position: "relative",
+      "&:after": {
+        content: '""',
+        position: "absolute",
+        bottom: "0",
+        right: "15px",
+        height: "1px",
+        width: "calc(100% - 30px)",
+        backgroundColor: "hsla(0,0%,100%,.3)"
+      }
+    },
+    photo: _objectSpread({
+      transition: "all 300ms linear",
+      width: "34px",
+      height: "34px",
+      overflow: "hidden",
+      float: "left",
+      zIndex: "5",
+      marginRight: "11px",
+      borderRadius: "50%",
+      marginLeft: "23px"
+    }, _rootStyle.boxShadow),
+    photoRTL: {
+      float: "right",
+      marginLeft: "12px",
+      marginRight: "24px"
+    },
+    avatarImg: {
+      width: "100%",
+      verticalAlign: "middle",
+      border: "0"
+    },
+    userCollapseButton: {
+      margin: "0",
+      padding: "6px 15px",
+      "&:hover": {
+        background: "none"
+      }
+    },
+    userCollapseLinks: {
+      marginTop: "-4px"
     }
-  },
-  userCollapseLinks: {
-    marginTop: "-4px"
-  }
-});
+  };
+};
 
 var _default = sidebarStyle;
 exports.default = _default;