@fluentui/react-northstar
Version:
A themable React component library.
87 lines (86 loc) • 3.07 kB
JavaScript
import { carouselPaddleSlotClassNames } from '../../../../components/Carousel/CarouselPaddle';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { paddleIndicatorUrl } from './paddleIndicatorUrl';
import { faster, ultraFast } from '../../animations/durations';
import { pxToRem } from '../../../../utils';
var getIndicatorStyles = function getIndicatorStyles(color, next, size) {
return {
width: size,
height: size,
backgroundImage: paddleIndicatorUrl(color, next),
backgroundRepeat: 'no-repeat'
};
};
export 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 = 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: pxToRem(40),
outline: 0,
padding: 0,
transition: faster,
zIndex: 1
}, p.hidden && {
visibility: 'hidden'
}, p.disableClickableNav && {
cursor: 'default'
}, {
':hover': Object.assign({}, getIconFillOrOutlineStyles({
outline: false
}), (_Object$assign = {}, _Object$assign["& ." + carouselPaddleSlotClassNames.content] = Object.assign({}, getIndicatorStyles(v.paddleColor, p.next, v.paddleIndicatorSize)), _Object$assign.background = v.paddleBackgroundColorHover, _Object$assign)),
':active': {
transition: 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)'
});
}
};
//# sourceMappingURL=carouselPaddleStyles.js.map