@fluentui/react-northstar
Version:
A themable React component library.
139 lines (137 loc) • 4.68 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.cardStyles = void 0;
var _CardExpandableBox = require("../../../../components/Card/CardExpandableBox");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var cardStyles = {
root: function root(_ref) {
var _ref2;
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var siteVariables = theme.siteVariables;
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables,
borderRadius: v.borderRadius
});
return Object.assign({
display: 'flex',
flexDirection: 'column',
position: 'relative',
padding: v.padding,
margin: v.margin,
width: v.width,
height: v.height,
borderWidth: v.borderWidth,
borderStyle: v.borderStyle,
borderColor: v.borderColor,
borderRadius: v.borderRadius,
backgroundColor: v.backgroundColor
}, p.ghost && {
backgroundColor: v.ghostBackgroundColor
}, p.inverted && {
backgroundColor: v.invertedBackgroundColor
}, p.selected && {
backgroundColor: v.selectedBackgroundColor
}, {
boxShadow: v.boxShadow
}, p.elevated && {
boxShadow: v.elevatedBoxShadow
}, {
':hover': Object.assign({
backgroundColor: v.backgroundColorHover
}, p.ghost && {
backgroundColor: v.ghostBackgroundColorHover
}, p.inverted && {
backgroundColor: v.invertedBackgroundColorHover
}, p.selected && {
backgroundColor: v.selectedBackgroundColorHover
}, {
borderColor: v.borderColorHover,
boxShadow: v.boxShadowHover
}, p.elevated && {
boxShadow: v.elevatedBoxShadowHover
})
}, borderFocusStyles, p.actionable && {
cursor: 'pointer',
':focus-visible': Object.assign({
backgroundColor: v.backgroundColorFocus
}, p.ghost && {
backgroundColor: v.ghostBackgroundColorFocus
}, p.inverted && {
backgroundColor: v.invertedBackgroundColorFocus
}, p.selected && {
backgroundColor: v.selectedBackgroundColorFocus
}, {
boxShadow: v.boxShadowFocus
}, p.elevated && {
boxShadow: v.elevatedBoxShadowFocus
}, borderFocusStyles[':focus-visible']),
':active': Object.assign({
backgroundColor: v.backgroundColorPressed
}, p.ghost && {
backgroundColor: v.ghostBackgroundColorPressed
}, p.inverted && {
backgroundColor: v.invertedBackgroundColorPressed
}, p.selected && {
backgroundColor: v.selectedBackgroundColorPressed
}, {
borderColor: v.borderColorPressed,
boxShadow: v.boxShadowPressed
}, p.elevated && {
boxShadow: v.elevatedBoxShadowPressed
})
}, p.size === 'small' && {
width: v.sizeSmallWidth,
height: v.sizeSmallHeight,
padding: v.sizeSmallPadding
}, p.size === 'large' && {
width: v.sizeLargeWidth,
height: v.sizeLargeHeight,
padding: v.sizeLargePadding
}, p.fluid && {
width: v.fluidWidth,
height: v.fluidHeight
}, p.horizontal && {
flexDirection: 'row'
}, p.compact && {
padding: v.compactPadding
}, p.centered && {
alignItems: 'center'
}, p.disabled && Object.assign({
cursor: 'not-allowed',
color: v.colorDisabled,
backgroundColor: v.backgroundColorDisabled,
borderColor: v.borderColorDisabled,
boxShadow: v.boxShadowDisabled
}, p.inverted && {
backgroundColor: v.invertedBackgroundColorDisabled
}, p.ghost && {
backgroundColor: v.ghostBackgroundColorDisabled
}, p.selected && {
backgroundColor: v.selectedBackgroundColorDisabled
}, {
':hover': {
boxShadow: v.boxShadowDisabled
},
':focus-visible': Object.assign({
boxShadow: v.boxShadowDisabled
}, borderFocusStyles[':focus-visible']),
':active': {
boxShadow: v.boxShadowDisabled
}
}), p.expandable && (_ref2 = {}, _ref2["& ." + _CardExpandableBox.cardExpandableBoxClassName] = {
maxHeight: v.expandableBoxStartMaxHeight,
transition: v.expandableBoxExpandTransition,
overflow: 'hidden'
}, _ref2["&:hover ." + _CardExpandableBox.cardExpandableBoxClassName] = {
maxHeight: v.expandableBoxEndMaxHeight,
transition: v.expandableBoxExpandTransition
}, _ref2["&:focus ." + _CardExpandableBox.cardExpandableBoxClassName] = {
maxHeight: v.expandableBoxEndMaxHeight,
transition: v.expandableBoxExpandTransition
}, _ref2));
}
};
exports.cardStyles = cardStyles;
//# sourceMappingURL=cardStyles.js.map