@fluentui/react-northstar
Version:
A themable React component library.
72 lines (70 loc) • 2.78 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.attachmentStyles = void 0;
var _reactIconsNorthstar = require("@fluentui/react-icons-northstar");
var _Attachment = require("../../../../components/Attachment/Attachment");
var _AttachmentAction = require("../../../../components/Attachment/AttachmentAction");
var _utils = require("../../../../utils");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
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 = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables,
borderRadius: v.borderRadius
});
return Object.assign({
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
width: '100%',
maxWidth: (0, _utils.pxToRem)(440),
minHeight: (0, _utils.pxToRem)(48),
padding: v.padding,
marginBottom: (0, _utils.pxToRem)(2),
marginRight: (0, _utils.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["& ." + _Attachment.attachmentProgressContainerClassName] = (_ref2 = {
borderBottomLeftRadius: v.borderRadius,
borderBottomRightRadius: v.borderRadius,
bottom: 0,
height: v.progressHeight,
left: 0,
overflow: 'hidden',
position: 'absolute',
right: 0
}, _ref2["& ." + _Attachment.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["& ." + _AttachmentAction.attachmentActionClassName] = {
color: v.focusColor
}, _Object$assign2["& ." + _reactIconsNorthstar.svgIconClassName] = {
color: v.focusColor
}, _Object$assign2)),
':hover': (_hover = {
backgroundColor: v.backgroundColorHover,
color: v.textColorHover
}, _hover["& ." + _AttachmentAction.attachmentActionClassName] = {
color: v.textColorHover
}, _hover["& ." + _reactIconsNorthstar.svgIconClassName] = {
color: v.textColorHover
}, _hover)
});
}
};
exports.attachmentStyles = attachmentStyles;
//# sourceMappingURL=attachmentStyles.js.map