@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
109 lines • 3.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var GlobalClassNames = {
root: 'ms-ChicletXsmall',
icon: 'ms-ChicletXsmall-icon',
innerIcon: 'ms-ChicletXsmall-innerIcon',
preview: 'ms-ChicletXsmall-preview',
info: 'ms-ChicletXsmall-info',
title: 'ms-ChicletXsmall-title',
};
exports.getStyles = function (styleProps) {
var theme = styleProps.theme, className = styleProps.className, footerProvided = styleProps.footerProvided;
var palette = theme.palette;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
theme.fonts.xSmall,
Styling_1.normalize,
{
display: 'flex',
flexWrap: 'wrap',
backgroundColor: palette.white,
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
padding: 4,
paddingBottom: 0,
width: 250,
userSelect: 'none',
overflow: 'hidden',
position: 'relative',
selectors: {
':hover': {
cursor: 'pointer',
},
},
},
className,
],
icon: [
classNames.icon,
{
// @todo: change values for height, width, and padding according to redline
height: 29,
width: 29,
padding: '17.44px',
backgroundColor: theme.palette.neutralLight,
},
],
preview: [
classNames.preview,
{
// @todo: change value for width according to redline
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 64,
width: 59,
},
!footerProvided && {
marginBottom: 4,
},
],
info: [
classNames.info,
{
// @todo: change values for height and width according to redline
display: 'flex',
flexWrap: 'wrap',
marginLeft: 10,
width: 170,
height: 63,
},
footerProvided && {
borderBottom: '1px solid gray',
},
],
url: [
{
fontSize: theme.fonts.small.fontSize,
// @todo: change values for height and width according to redline
width: 170,
height: 15,
fontWeight: Styling_1.FontWeights.semibold,
color: palette.neutralSecondary,
paddingBottom: 1,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
],
title: [
classNames.title,
{
fontSize: theme.fonts.medium.fontSize,
letterSpacing: 'normal',
textAlign: 'left',
fontWeight: Styling_1.FontWeights.semibold,
color: palette.neutralPrimary,
width: 170,
height: 35,
lineHeight: '1.25',
overflow: 'hidden',
wordWrap: 'break-word',
},
],
};
};
//# sourceMappingURL=ChicletXsmall.styles.js.map