@fluentui/react
Version:
Reusable React components for building web experiences.
92 lines • 4.1 kB
JavaScript
import { getGlobalClassNames, getInputFocusStyle } from '../../Styling';
import { IsFocusVisibleClassName } from '../../Utilities';
import { DocumentCardPreviewGlobalClassNames as previewClassNames } from './DocumentCardPreview.styles';
import { DocumentCardActivityGlobalClassNames as activityClassNames } from './DocumentCardActivity.styles';
import { DocumentCardTitleGlobalClassNames as titleClassNames } from './DocumentCardTitle.styles';
import { DocumentCardLocationGlobalClassNames as locationClassNames } from './DocumentCardLocation.styles';
var GlobalClassNames = {
root: 'ms-DocumentCard',
rootActionable: 'ms-DocumentCard--actionable',
rootCompact: 'ms-DocumentCard--compact',
};
export var getStyles = function (props) {
var _a, _b;
var className = props.className, theme = props.theme, actionable = props.actionable, compact = props.compact;
var palette = theme.palette, fonts = theme.fonts, effects = theme.effects;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
{
WebkitFontSmoothing: 'antialiased',
backgroundColor: palette.white,
border: "1px solid ".concat(palette.neutralLight),
maxWidth: '320px',
minWidth: '206px',
userSelect: 'none',
position: 'relative',
selectors: (_a = {
':focus': {
outline: '0px solid',
}
},
_a[".".concat(IsFocusVisibleClassName, " &:focus, :host(.").concat(IsFocusVisibleClassName, ") &:focus")] = getInputFocusStyle(palette.neutralSecondary, effects.roundedCorner2),
_a[".".concat(locationClassNames.root, " + .").concat(titleClassNames.root)] = {
paddingTop: '4px',
},
_a),
},
actionable && [
classNames.rootActionable,
{
selectors: {
':hover': {
cursor: 'pointer',
borderColor: palette.neutralTertiaryAlt,
},
':hover:after': {
content: '" "',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
border: "1px solid ".concat(palette.neutralTertiaryAlt),
pointerEvents: 'none',
},
},
},
],
compact && [
classNames.rootCompact,
{
display: 'flex',
maxWidth: '480px',
height: '108px',
selectors: (_b = {},
_b[".".concat(previewClassNames.root)] = {
borderRight: "1px solid ".concat(palette.neutralLight),
borderBottom: 0,
maxHeight: '106px',
maxWidth: '144px',
},
_b[".".concat(previewClassNames.icon)] = {
maxHeight: '32px',
maxWidth: '32px',
},
_b[".".concat(activityClassNames.root)] = {
paddingBottom: '12px',
},
_b[".".concat(titleClassNames.root)] = {
paddingBottom: '12px 16px 8px 16px',
fontSize: fonts.mediumPlus.fontSize,
lineHeight: '16px',
},
_b),
},
],
className,
],
};
};
//# sourceMappingURL=DocumentCard.styles.js.map