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

Wulper Studio Library Components CMS

import { Tab, Tabs, styled } from '@mui/material';
export var StyledTabs = styled(Tabs)(function () {
  return {
    '& ': {
      maxHeight: '56px',
      width: '100%',
      overflow: 'auto',
      columnGap: '10px',
      display: 'flex',
      flexDirection: 'row'
    },
    '& div ': {
      width: '100%'
    },
    '& .MuiTabs-indicator': {
      display: 'flex',
      justifyContent: 'center',
      backgroundColor: 'transparent',
      maxHeight: '5px',
      height: '5px'
    }
  };
});
export var WrapperTabsHeader = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'stickyTabs' && prop !== 'backgroundColor' && prop !== 'padding';
  }
})(function (_ref) {
  var backgroundColor = _ref.backgroundColor,
    stickyTabs = _ref.stickyTabs,
    padding = _ref.padding;
  return {
    width: '100%',
    overflow: 'auto',
    backgroundColor: backgroundColor,
    marginTop: '0px',
    marginBottom: '0px',
    padding: padding || '15px',
    position: stickyTabs ? 'sticky' : 'relative',
    top: stickyTabs ? 0 : 'unset',
    zIndex: stickyTabs ? 99 : 'unset',
    height: stickyTabs ? 'max-content' : 'undefined'
  };
});
export var StyledTab = styled(Tab, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'backgroundColor' && prop !== 'borderRadius' && prop !== 'backGroundColorSelected' && prop !== 'fontSize' && prop !== 'fontWeight' && prop !== 'expanded' && prop !== 'colorSelected' && prop !== 'textColor';
  }
})(function (_ref2) {
  var expanded = _ref2.expanded,
    backgroundColor = _ref2.backgroundColor,
    borderRadius = _ref2.borderRadius,
    backGroundColorSelected = _ref2.backGroundColorSelected,
    colorSelected = _ref2.colorSelected,
    fontSize = _ref2.fontSize,
    fontWeight = _ref2.fontWeight,
    theme = _ref2.theme;
  return Object.assign({
    textTransform: 'none',
    fontWeight: fontWeight || '600',
    fontSize: fontSize || '16px',
    fontFamily: theme.typography.fontFamily,
    color: theme.palette.text.primary,
    borderRadius: '15px',
    backgroundColor: backgroundColor || theme.palette.background.paper,
    padding: '5px 16px',
    maxHeight: '52px'
  }, expanded && {
    maxWidth: 'unset',
    flexGrow: 1
  }, {
    '&.Mui-selected': {
      backgroundColor: backGroundColorSelected || theme.palette.primary.main,
      color: colorSelected || theme.palette.background["default"],
      fontWeight: theme.typography.fontWeightMedium,
      borderRadius: borderRadius || '10px',
      '&:hover': {
        backgroundColor: backGroundColorSelected
      }
    }
  });
});
export var WrapperTabPanel = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'padding';
  }
})(function (_ref3) {
  var padding = _ref3.padding;
  return {
    width: '100%',
    height: 'auto',
    overflow: 'auto',
    padding: padding || '15px'
  };
});