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

Wulper Studio Library Components CMS

import { styled } from '@mui/material';
export var WrapperBottomBar = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'backgroundColor' && prop !== 'isDivider';
  }
})(function (_ref) {
  var backgroundColor = _ref.backgroundColor,
    isDivider = _ref.isDivider,
    theme = _ref.theme;
  return Object.assign({
    width: '100%',
    height: 60,
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: backgroundColor,
    position: 'relative',
    zIndex: 1000,
    padding: '0px 10px'
  }, isDivider && {
    borderTop: "1px solid ".concat(theme.palette.divider)
  });
});
export var WrapperOption = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'active' && prop !== 'isTextEnabled' && prop !== 'activeColor';
  }
})(function (_ref2) {
  var active = _ref2.active,
    isTextEnabled = _ref2.isTextEnabled,
    activeColor = _ref2.activeColor;
  return {
    color: active ? activeColor : '#B2BEDA',
    padding: isTextEnabled ? '5px 10px' : '13px 20px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.04)',
      borderRadius: 5
    }
  };
});
export var Text = styled('p', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'active' && prop !== 'activeColor';
  }
})(function (_ref3) {
  var active = _ref3.active,
    activeColor = _ref3.activeColor;
  return {
    padding: 0,
    margin: 0,
    color: active ? activeColor : '#B2BEDA',
    fontSize: '12px',
    fontWeight: 500
  };
});
export var CenterButton = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'foregroundColor' && prop !== 'floatIconColor';
  }
})(function (_ref4) {
  var floatIconColor = _ref4.floatIconColor;
  return {
    minWidth: 50,
    minHeight: 50,
    backgroundColor: floatIconColor,
    borderRadius: '50%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    color: 'white',
    cursor: 'pointer'
  };
});
export var WrapperCenterButton = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'foregroundColor' && prop !== 'borderVariant';
  }
})(function (_ref5) {
  var foregroundColor = _ref5.foregroundColor,
    borderVariant = _ref5.borderVariant;
  return Object.assign({}, borderVariant === 'none' && {
    background: "linear-gradient(0deg, ".concat(foregroundColor, " 0%, transparent 0%)")
  }, borderVariant === 'middle' && {
    background: "linear-gradient(0deg, ".concat(foregroundColor, " 49%, transparent 50%)")
  }, borderVariant === 'contained' && {
    background: "linear-gradient(0deg, ".concat(foregroundColor, " 100%, transparent 0%)")
  }, {
    borderRadius: '50%',
    padding: 5,
    position: 'relative',
    top: -10
    // bottom: '50%',
    // transform: 'translate(-50%, -50%)',
    // [theme.breakpoints.down('md')]: {
    //   position: 'unset',
    //   top: 'unset',
    //   bottom: 'unset',
    //   transform: 'unset',
    // },
  });
});