@fluentui/react-northstar
Version:
A themable React component library.
52 lines (50 loc) • 1.78 kB
JavaScript
;
exports.__esModule = true;
exports.carouselNavigationStyles = void 0;
var _utils = require("../../../../utils");
var _colors = require("../../colors");
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 = (0, _colors.getColorScheme)(v.colorScheme, null, primary);
var siteVariables = theme.siteVariables;
return Object.assign({
display: 'flex',
minHeight: (0, _utils.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(" + (0, _utils.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: (0, _utils.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
});
}
};
exports.carouselNavigationStyles = carouselNavigationStyles;
//# sourceMappingURL=carouselNavigationStyles.js.map