@fluentui/react-northstar
Version:
A themable React component library.
117 lines (115 loc) • 3.94 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.carouselNavigationItemStyles = void 0;
var _utils = require("../../../../utils");
var _CarouselNavigationItem = require("../../../../components/Carousel/CarouselNavigationItem");
var _colors = require("../../colors");
var _getIconFillOrOutlineStyles = require("../../getIconFillOrOutlineStyles");
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 = (0, _colors.getColorScheme)(v.colorScheme, null, primary);
return Object.assign({
color: 'inherit',
display: 'block',
cursor: 'pointer',
whiteSpace: 'nowrap'
}, iconOnly && {
border: (0, _utils.pxToRem)(2) + " solid transparent"
}, vertical ? {
padding: v.verticalItemPadding
} : {
padding: v.horizontalPadding
}, iconOnly && {
margin: (0, _utils.pxToRem)(1),
padding: (0, _utils.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
}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
})), {
// focus styles
':focus-visible': Object.assign({}, iconOnly && Object.assign({
borderRadius: '50%'
}, thumbnails && {
borderRadius: '0'
}, {
borderColor: v.iconOnlyColorActive
}, (0, _getIconFillOrOutlineStyles.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["& ." + _CarouselNavigationItem.carouselNavigationItemSlotClassNames.indicator] = {
background: v.indicatorBackgroundColor
}, _Object$assign), iconOnly && (0, _getIconFillOrOutlineStyles.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: (0, _utils.pxToRem)(-4),
marginBottom: (0, _utils.pxToRem)(-4),
display: 'inline-block'
}, p.thumbnails && Object.assign({
width: (0, _utils.pxToRem)(60)
}, !p.active && {
opacity: 0.4
}), p.vertical && {
width: 'max-content',
minWidth: (0, _utils.pxToRem)(46 - widthAdjust),
maxWidth: (0, _utils.pxToRem)(262 - widthAdjust),
marginRight: (0, _utils.pxToRem)(16)
});
},
indicator: function indicator(_ref3) {
var p = _ref3.props,
v = _ref3.variables;
return Object.assign({
borderRadius: '50%',
width: (0, _utils.pxToRem)(7),
height: (0, _utils.pxToRem)(7),
background: v.indicatorBackgroundColor
}, p.active && {
background: v.indicatorActiveBackgroundColor
}, p.hasContent && {
marginRight: (0, _utils.pxToRem)(10)
}, !p.iconOnly && {
// reduce margins so text has the dominant influence on the vertical height
marginTop: 0,
marginBottom: (0, _utils.pxToRem)(-8),
verticalAlign: 'top'
});
}
};
exports.carouselNavigationItemStyles = carouselNavigationItemStyles;
//# sourceMappingURL=carouselNavigationItemStyles.js.map