@fluentui/react-northstar
Version:
A themable React component library.
112 lines (111 loc) • 3.52 kB
JavaScript
import { pxToRem } from '../../../../utils';
import { carouselNavigationItemSlotClassNames } from '../../../../components/Carousel/CarouselNavigationItem';
import { getColorScheme } from '../../colors';
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
export var carouselNavigationItemStyles = {
root: function root(_ref) {
var _Object$assign;
var p = _ref.props,
v = _ref.variables;
var active = p.active,
iconOnly = p.iconOnly,
primary = p.primary,
vertical = p.vertical,
thumbnails = p.thumbnails,
disableClickableNav = p.disableClickableNav;
var colors = getColorScheme(v.colorScheme, null, primary);
return Object.assign({
color: 'inherit',
display: 'block',
cursor: 'pointer',
whiteSpace: 'nowrap'
}, iconOnly && {
border: pxToRem(2) + " solid transparent"
}, vertical ? {
padding: v.verticalItemPadding
} : {
padding: v.horizontalPadding
}, iconOnly && {
margin: pxToRem(1),
padding: pxToRem(5),
// padding works this way to get the border to only be 30x30px on focus which is the current design
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}, active && iconOnly && Object.assign({
color: v.iconOnlyColorActive
}, getIconFillOrOutlineStyles({
outline: false
})), {
// focus styles
':focus-visible': Object.assign({}, iconOnly && Object.assign({
borderRadius: '50%'
}, thumbnails && {
borderRadius: '0'
}, {
borderColor: v.iconOnlyColorActive
}, getIconFillOrOutlineStyles({
outline: false
})))
}, iconOnly && primary && {
color: 'inherit',
borderColor: v.borderColorActive || colors.borderActive
}, disableClickableNav && {
cursor: 'default'
}, {
':focus': {
outline: 0
},
// hover styles
':hover': Object.assign((_Object$assign = {
color: 'inherit'
}, _Object$assign["& ." + carouselNavigationItemSlotClassNames.indicator] = {
background: v.indicatorBackgroundColor
}, _Object$assign), iconOnly && getIconFillOrOutlineStyles({
outline: false
}), primary && iconOnly && {
color: 'inherit'
})
});
},
content: function content(_ref2) {
var p = _ref2.props;
var widthAdjust = p.hasIndicator ? 26 : 0;
return Object.assign({
whiteSpace: 'normal',
lineHeight: 1.5,
marginTop: pxToRem(-4),
marginBottom: pxToRem(-4),
display: 'inline-block'
}, p.thumbnails && Object.assign({
width: pxToRem(60)
}, !p.active && {
opacity: 0.4
}), p.vertical && {
width: 'max-content',
minWidth: pxToRem(46 - widthAdjust),
maxWidth: pxToRem(262 - widthAdjust),
marginRight: pxToRem(16)
});
},
indicator: function indicator(_ref3) {
var p = _ref3.props,
v = _ref3.variables;
return Object.assign({
borderRadius: '50%',
width: pxToRem(7),
height: pxToRem(7),
background: v.indicatorBackgroundColor
}, p.active && {
background: v.indicatorActiveBackgroundColor
}, p.hasContent && {
marginRight: pxToRem(10)
}, !p.iconOnly && {
// reduce margins so text has the dominant influence on the vertical height
marginTop: 0,
marginBottom: pxToRem(-8),
verticalAlign: 'top'
});
}
};
//# sourceMappingURL=carouselNavigationItemStyles.js.map