@wulperstudio/cms/organisms/Drawer/styled.js

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { styled, keyframes } from '@mui/material';
var LeftToRight = keyframes({
  '0%': {
    transform: 'translateX(-100%)'
  },
  '100%': {
    transform: 'translateX(0%)'
  }
});
var RightToLeft = keyframes({
  '0%': {
    transform: 'translateX(100%)'
  },
  '100%': {
    transform: 'translateX(0%)'
  }
});
export var Container = styled('div')({
  overflowY: 'auto',
  height: '100%',
  maxHeight: '100%',
  padding: '0px 15px 15px 15px',
  '& > *': {
    margin: '0px 0px 0px 0px'
  },
  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '2rem',
    borderRadius: '10px'
  },
  '&::-webkit-scrollbar-track': {
    backgroundColor: 'transparent'
  },
  '&::-webkit-scrollbar-thumb': {
    borderRadius: '10px',
    backgroundColor: '#f6f7fc'
  }
});
export var ButtonContainer = styled('div', {
  shouldForwardProp: function shouldForwardProp(props) {
    return props !== 'footerDirection';
  }
})(function (props) {
  return {
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: props.footerDirection || 'row',
    gap: '10px',
    alignItems: 'center',
    margin: 0,
    padding: '16px'
  };
});
export var IconButtonOutlined = styled('div', {
  shouldForwardProp: function shouldForwardProp(props) {
    return props !== 'colorBorder';
  }
})(function (_ref) {
  var _ref$colorBorder = _ref.colorBorder,
    colorBorder = _ref$colorBorder === void 0 ? '#54D3AD' : _ref$colorBorder;
  return {
    borderRadius: '10px',
    border: "1px solid ".concat(colorBorder),
    minHeight: '50px',
    padding: '0px 10px',
    display: 'flex',
    alignItems: 'center'
  };
});

// export const Grid = styled('div')`
//   display: grid;
//   grid-template-columns: 1fr;
//   // grid-template-rows: 1fr auto;
//   grid-auto-rows: max-content;
//   height: 100%;
//   max-height: 100%;
//   row-gap: 5px;
//   overflow-y: auto;
// `;

export var MoreInfo = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'background' && prop !== 'moreInfo' && prop !== 'headerOff' && prop !== 'responsiveMoreInfo' && prop !== 'position';
  }
})(function (_ref2) {
  var theme = _ref2.theme,
    background = _ref2.background,
    moreInfo = _ref2.moreInfo,
    headerOff = _ref2.headerOff,
    responsiveMoreInfo = _ref2.responsiveMoreInfo,
    position = _ref2.position;
  if (moreInfo === 'fixed' || moreInfo === 'float') {
    return _defineProperty({
      display: 'grid',
      gridTemplateRows: 'auto 1fr auto',
      width: '375px',
      borderRadius: moreInfo === 'float' ? '10px' : '0px',
      boxShadow: moreInfo === 'float' ? 'rgb(0 0 0 / 9%) 0px 3px 12px' : 'none',
      height: '100%',
      overflowY: 'hidden',
      overflowX: 'hidden',
      maxWidth: '100%',
      maxHeight: '100%',
      position: 'relative',
      backgroundColor: background
    }, theme.breakpoints.down('sm'), {
      position: 'fixed',
      top: '0',
      bottom: '0',
      left: '0',
      right: '0',
      borderRadius: '0',
      maxWidth: '100%',
      width: 'auto',
      zIndex: 999,
      marginLeft: '0px',
      height: '100%'
    });
  }
  if (moreInfo === 'hover') {
    return {
      display: 'grid',
      gridTemplateRows: 'auto 1fr auto',
      position: 'fixed',
      width: '375px',
      height: '100%',
      right: 0,
      left: position === 'left' ? 0 : undefined,
      top: 0,
      background: background,
      boxShadow: 'rgba(0, 0, 0, 0.09) 0px 3px 12px',
      zIndex: 999,
      animation: position === 'left' ? "".concat(LeftToRight, " 0.8s ease") : "".concat(RightToLeft, " 0.8s ease")
    };
  }
  if (headerOff) {
    return {
      display: 'flex',
      zIndex: 9999,
      background: 'rgb(6, 5, 69)',
      alignItems: 'flex-end',
      flexDirection: 'column',
      justifyContent: 'flex-start',
      width: '30px',
      '&:hover': {
        width: '230px',
        position: 'absolute',
        right: 0,
        bottom: 0,
        top: 0
      }
    };
  }
  if (responsiveMoreInfo) {
    return {
      width: '100%',
      height: '100vh',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      position: 'absolute',
      zIndex: 99999,
      display: 'block !important',
      backgroundColor: '#fff',
      '& .button-responsive': {
        position: 'fixed',
        backgroundColor: '#fff',
        right: 0,
        left: 0,
        bottom: 0
      }
    };
  }
  return {
    display: 'none',
    backgroundColor: background
  };
});