@fluentui/react-northstar
Version:
A themable React component library.
98 lines (96 loc) • 3.18 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.attachmentActionStyles = void 0;
var _getIconFillOrOutlineStyles = require("../../getIconFillOrOutlineStyles");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _utils = require("../../../../utils");
var _Loader = require("../../../../components/Loader/Loader");
var attachmentActionStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var siteVariables = theme.siteVariables;
var iconFilledStyles = (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
});
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables,
borderRadius: v.actionFocusBorderRadius
});
return Object.assign({
height: v.actionHeight,
maxWidth: v.actionMaxWidth,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
verticalAlign: 'middle',
cursor: 'pointer',
// text button defaults
color: v.actionColor,
// textColor
backgroundColor: 'transparent',
borderColor: 'transparent',
padding: 0
}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: true
}), {
':focus': Object.assign({
boxShadow: 'none'
}, borderFocusStyles[':focus']),
':focus-visible': Object.assign({}, iconFilledStyles, borderFocusStyles[':focus-visible'])
}, p.primary && {
color: v.actionPrimaryColor
}, p.disabled && {
cursor: 'default',
boxShadow: 'none',
pointerEvents: 'none',
color: v.actionColorDisabled,
backgroundColor: 'transparent',
':hover': {
color: v.actionColorDisabled
}
}, {
minWidth: v.actionHeight,
':hover': Object.assign({}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
}))
});
},
icon: function icon(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: v.actionIconSize,
height: v.actionIconSize
}, p.loading && {
margin: 0,
opacity: 0,
width: 0
}, p.hasContent && Object.assign({
margin: "0 " + (0, _utils.pxToRem)(10) + " 0 0"
}, p.iconPosition === 'after' && {
margin: "0 0 0 " + (0, _utils.pxToRem)(10)
}));
},
loader: function loader(_ref3) {
var _Object$assign;
var p = _ref3.props,
v = _ref3.variables;
return Object.assign((_Object$assign = {}, _Object$assign["& ." + _Loader.loaderSlotClassNames.indicator] = {
width: v.actionLoaderSize,
height: v.actionLoaderSize
}, _Object$assign["& ." + _Loader.loaderSlotClassNames.indicator + " > svg"] = {
width: v.actionLoaderSize,
height: v.actionLoaderSvgHeight
}, _Object$assign), p.hasContent && {
marginRight: (0, _utils.pxToRem)(4)
});
}
};
exports.attachmentActionStyles = attachmentActionStyles;
//# sourceMappingURL=attachmentActionStyles.js.map