@fluentui/react-northstar
Version:
A themable React component library.
92 lines (90 loc) • 3.31 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.carouselPaddleStyles = void 0;
var _CarouselPaddle = require("../../../../components/Carousel/CarouselPaddle");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _getIconFillOrOutlineStyles = require("../../getIconFillOrOutlineStyles");
var _paddleIndicatorUrl = require("./paddleIndicatorUrl");
var _durations = require("../../animations/durations");
var _utils = require("../../../../utils");
var getIndicatorStyles = function getIndicatorStyles(color, next, size) {
return {
width: size,
height: size,
backgroundImage: (0, _paddleIndicatorUrl.paddleIndicatorUrl)(color, next),
backgroundRepeat: 'no-repeat'
};
};
var carouselPaddleStyles = {
root: function root(_ref) {
var _Object$assign;
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var siteVariables = theme.siteVariables;
var borderWidth = siteVariables.borderWidth;
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: {
borderRadius: v.focusBorderRadius,
borderWidth: v.focusBorderWidth,
focusInnerBorderColor: v.focusInnerBorderColor,
focusOuterBorderColor: v.focusOuterBorderColor,
zIndexes: {
foreground: v.focusBorderZIndex
}
},
borderPadding: borderWidth
});
return Object.assign({
height: v.paddleHeight,
minWidth: v.paddleHeight,
color: v.paddleColor,
backgroundColor: v.paddleBackgroundColor,
borderRadius: v.paddleBorderRadius,
border: 0,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
verticalAlign: 'middle',
cursor: 'pointer',
marginBottom: (0, _utils.pxToRem)(40),
outline: 0,
padding: 0,
transition: _durations.faster,
zIndex: 1
}, p.hidden && {
visibility: 'hidden'
}, p.disableClickableNav && {
cursor: 'default'
}, {
':hover': Object.assign({}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
}), (_Object$assign = {}, _Object$assign["& ." + _CarouselPaddle.carouselPaddleSlotClassNames.content] = Object.assign({}, getIndicatorStyles(v.paddleColor, p.next, v.paddleIndicatorSize)), _Object$assign.background = v.paddleBackgroundColorHover, _Object$assign)),
':active': {
transition: _durations.ultraFast,
backgroundColor: v.paddleBackgroundColorActive
},
':focus': borderFocusStyles[':focus'],
':focus-visible': Object.assign({}, borderFocusStyles[':focus-visible'])
}, p.disabled && {
cursor: 'default',
color: v.paddleColorDisabled,
pointerEvents: 'none',
':hover': {
color: v.paddleColorDisabled
},
backgroundColor: v.paddleBackgroundColorDisabled
});
},
content: function content(_ref2) {
var p = _ref2.props,
v = _ref2.variables,
rtl = _ref2.rtl;
return Object.assign({}, getIndicatorStyles(p.disabled ? v.paddleColorDisabled : v.paddleColor, p.next, v.paddleIndicatorSize), rtl && {
transform: 'scaleX(-1)'
});
}
};
exports.carouselPaddleStyles = carouselPaddleStyles;
//# sourceMappingURL=carouselPaddleStyles.js.map