@fluentui/react-northstar
Version:
A themable React component library.
47 lines (46 loc) • 1.6 kB
JavaScript
import { pxToRem } from '../../../../utils';
import { getColorScheme } from '../../colors';
export var carouselNavigationStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var iconOnly = p.iconOnly,
primary = p.primary,
vertical = p.vertical,
thumbnails = p.thumbnails;
var colors = getColorScheme(v.colorScheme, null, primary);
var siteVariables = theme.siteVariables;
return Object.assign({
display: 'flex',
minHeight: pxToRem(24),
margin: 0,
padding: 0,
color: v.color,
backgroundColor: v.backgroundColor || 'inherit',
listStyleType: 'none',
justifyContent: 'center',
position: 'relative',
zIndex: 2
}, !vertical && thumbnails && {
justifyContent: 'start',
transform: "translateX(" + pxToRem(v.width / 2 - v.thumbnailWidth / 2 - +p.activeIndex * v.thumbnailWidth) + ")",
transition: 'transform .5s ease'
}, iconOnly && {
alignItems: 'center'
}, vertical && Object.assign({
flexDirection: 'column',
backgroundColor: v.verticalBackgroundColor,
width: 'fit-content',
padding: pxToRem(8) + " 0"
}, iconOnly && {
display: 'inline-block',
width: 'auto'
}), !iconOnly && !vertical && {
// primary has hardcoded grey border color
border: v.borderWidth + " solid " + (primary ? v.primaryBorderColor : v.borderColor || colors.border),
borderRadius: siteVariables.borderRadiusMedium
});
}
};
//# sourceMappingURL=carouselNavigationStyles.js.map