@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
56 lines • 2.32 kB
JavaScript
import { styled } from '@mui/material/styles';
import { includes } from 'ramda';
import { Tabs as MuiTabs, Tab as MuiTab } from '@mui/material';
const localTabsOverriddenProps = ['indicatorColor', 'color', 'colorGradient'];
const StyledTabs = styled(MuiTabs, { shouldForwardProp: prop => !includes(prop, localTabsOverriddenProps) })(({ theme, color, indicatorColor, colorGradient }) => {
const defaultFont = theme?.typography.defaultFont;
return {
...defaultFont,
'& .MuiTabs-indicator': {
borderRadius: '0.5rem',
backgroundColor: colorGradient
? theme?.palette[colorGradient]?.main
: color
? theme?.palette[color]?.main
: theme?.palette[indicatorColor]?.main
}
};
});
export const Tabs = StyledTabs;
const localTabOverriddenProps = ['color', 'capitalize', 'selectedColor', 'colorGradient'];
export const Tab = styled(MuiTab, { shouldForwardProp: prop => !includes(prop, localTabOverriddenProps) })(({ theme, color, colorGradient, selectedColor, capitalize }) => {
const defaultFont = theme?.typography.defaultFont;
return {
...defaultFont,
maxWidth: 'unset',
minWidth: 'unset',
minHeight: 'unset',
margin: 5,
fontWeight: theme?.typography.fontWeightBold,
...(!capitalize && {
textTransform: 'none'
}),
'&.MuiTab-root': {
color: colorGradient
? theme?.palette[colorGradient]?.main
: theme?.palette[color]?.main
},
'&.Mui-selected': {
transition: 'all 500ms linear 1ms',
marginBottom: 5,
borderRadius: Number(theme?.shape.borderRadius) * 1.5,
...(colorGradient
? {
background: theme?.palette.gradients[colorGradient],
color: theme?.palette[colorGradient]?.contrastText
}
: {
backgroundColor: color ? theme?.palette[color]?.main : 'transparent',
color: color
? theme?.palette[color]?.contrastText
: theme?.palette[selectedColor]?.main
})
}
};
});
//# sourceMappingURL=NavPillsStyles.js.map