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

Wulper Studio Library Components CMS

import { Tabs, styled, Tab } from '@mui/material';
export var StyledTabs = styled(Tabs, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'indicator' && prop !== 'fullWidth';
  }
})(function (_ref) {
  var fullWidth = _ref.fullWidth,
    indicator = _ref.indicator,
    theme = _ref.theme;
  return Object.assign({
    '& ': {
      // minHeight: '50px',
      // width: '100%',
      // maxWidth: '100%',
      // overflowX: 'auto',
    },
    '& div ': {
      display: 'flex',
      gap: '10px',
      '& *': {
        flexGrow: fullWidth ? 1 : 0
      }
    },
    '& .MuiTabs-indicator': {
      backgroundColor: 'transparent',
      minHeight: '5px',
      borderRadius: '5px',
      maxWidth: 70
    }
  }, indicator && {
    '& .MuiTabs-indicator': {
      backgroundColor: theme.palette.primary.main,
      minHeight: '3px',
      marginTop: theme.spacing(1)
    }
  });
});
export var StyledTab = styled(Tab, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'borderRadius' && prop !== 'backgroundColor' && prop !== 'backgroundColorSelected' && prop !== 'colorSelected' && prop !== 'fullWidth';
  }
})(function (_ref2) {
  var theme = _ref2.theme,
    color = _ref2.color,
    border = _ref2.border,
    borderRadius = _ref2.borderRadius,
    backgroundColor = _ref2.backgroundColor,
    backgroundColorSelected = _ref2.backgroundColorSelected,
    colorSelected = _ref2.colorSelected;
  return {
    textTransform: 'none',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: '14px',
    fontFamily: theme.typography.fontFamily,
    color: color || '#4EE1C1',
    border: border || '1px solid #4EE1C1',
    borderRadius: borderRadius || '15px',
    backgroundColor: backgroundColor || '#F7F8FD',
    padding: '0px 16px',
    minHeight: '44px',
    '&.Mui-selected': {
      backgroundColor: backgroundColorSelected || ' #4EE1C1',
      color: colorSelected || '#fff',
      fontWeight: theme.typography.fontWeightMedium
    }
  };
});