@fluentui/react-northstar
Version:
A themable React component library.
67 lines (66 loc) • 2.55 kB
JavaScript
import { svgIconClassName } from '@fluentui/react-icons-northstar';
import { attachmentProgressBarClassName, attachmentProgressContainerClassName } from '../../../../components/Attachment/Attachment';
import { attachmentActionClassName } from '../../../../components/Attachment/AttachmentAction';
import { pxToRem } from '../../../../utils';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
export var attachmentStyles = {
root: function root(_ref) {
var _ref2, _Object$assign, _Object$assign2, _hover;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var borderFocusStyles = getBorderFocusStyles({
variables: siteVariables,
borderRadius: v.borderRadius
});
return Object.assign({
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
width: '100%',
maxWidth: pxToRem(440),
minHeight: pxToRem(48),
padding: v.padding,
marginBottom: pxToRem(2),
marginRight: pxToRem(2),
background: v.backgroundColor,
color: v.textColor,
boxShadow: v.boxShadow,
border: siteVariables.borderWidth + " solid " + v.borderColor,
borderRadius: v.borderRadius
}, borderFocusStyles, (_Object$assign = {}, _Object$assign["& ." + attachmentProgressContainerClassName] = (_ref2 = {
borderBottomLeftRadius: v.borderRadius,
borderBottomRightRadius: v.borderRadius,
bottom: 0,
height: v.progressHeight,
left: 0,
overflow: 'hidden',
position: 'absolute',
right: 0
}, _ref2["& ." + attachmentProgressBarClassName] = {
background: v.progressColor,
height: '100%',
maxWidth: '100%',
transition: 'width 0.2s'
}, _ref2), _Object$assign), p.actionable && {
cursor: 'pointer',
':focus-visible': Object.assign({}, borderFocusStyles[':focus-visible'], (_Object$assign2 = {
backgroundColor: v.focusBackgroundColor,
color: v.focusColor
}, _Object$assign2["& ." + attachmentActionClassName] = {
color: v.focusColor
}, _Object$assign2["& ." + svgIconClassName] = {
color: v.focusColor
}, _Object$assign2)),
':hover': (_hover = {
backgroundColor: v.backgroundColorHover,
color: v.textColorHover
}, _hover["& ." + attachmentActionClassName] = {
color: v.textColorHover
}, _hover["& ." + svgIconClassName] = {
color: v.textColorHover
}, _hover)
});
}
};
//# sourceMappingURL=attachmentStyles.js.map