office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
254 lines • 8.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var globalClassNames = {
root: 'ms-TeachingBubble',
body: 'ms-TeachingBubble-body',
bodyContent: 'ms-TeachingBubble-bodycontent',
closeButton: 'ms-TeachingBubble-closebutton',
content: 'ms-TeachingBubble-content',
footer: 'ms-TeachingBubble-footer',
header: 'ms-TeachingBubble-header',
headerIsCondensed: 'ms-TeachingBubble-header--condensed',
headerIsSmall: 'ms-TeachingBubble-header--small',
headerIsLarge: 'ms-TeachingBubble-header--large',
headline: 'ms-TeachingBubble-headline',
image: 'ms-TeachingBubble-image',
primaryButton: 'ms-TeachingBubble-primaryButton',
secondaryButton: 'ms-TeachingBubble-secondaryButton',
subText: 'ms-TeachingBubble-subText',
// TODO: Button global class name usage should be converted to a styles function once
// Button supports JS styling, which means these button names can be removed.
button: 'ms-Button',
buttonLabel: 'ms-Button-label'
};
var opacityFadeIn = Styling_1.keyframes({
'0%': {
opacity: 0,
animationTimingFunction: Styling_1.AnimationVariables.easeFunction1,
transform: 'scale3d(.90,.90,.90)'
},
'100%': {
opacity: 1,
transform: 'scale3d(1,1,1)'
}
});
var rootStyle = function (isWide) {
return [
{
display: 'block',
maxWidth: 364,
border: 0,
outline: 'transparent',
width: 'calc(100% + 1px)',
animationName: "" + opacityFadeIn,
animationDuration: '300ms',
animationTimingFunction: 'linear',
animationFillMode: 'both'
},
isWide && {
maxWidth: 456
}
];
};
var headerStyle = function (classNames, hasCondensedHeadline, hasSmallHeadline) {
if (hasCondensedHeadline) {
return [classNames.headerIsCondensed];
}
return [
hasSmallHeadline && classNames.headerIsSmall,
!hasSmallHeadline && classNames.headerIsLarge,
{
selectors: {
':not(:last-child)': {
marginBottom: 14
}
}
}
];
};
exports.getStyles = function (props) {
var _a, _b, _c;
var calloutClassName = props.calloutClassName, hasCondensedHeadline = props.hasCondensedHeadline, hasSmallHeadline = props.hasSmallHeadline, isWide = props.isWide, primaryButtonClassName = props.primaryButtonClassName, secondaryButtonClassName = props.secondaryButtonClassName, theme = props.theme;
var hasLargeHeadline = !hasCondensedHeadline && !hasSmallHeadline;
var palette = theme.palette, fonts = theme.fonts;
var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
return {
root: [classNames.root, fonts.medium, calloutClassName],
body: [
classNames.body,
{
selectors: {
':not(:last-child)': {
marginBottom: 20
}
}
}
],
bodyContent: [
classNames.bodyContent,
{
padding: 20
},
isWide && {
maxWidth: 302
}
],
closeButton: [
classNames.closeButton,
{
position: 'absolute',
right: 0,
top: 0,
borderRadius: 0,
color: palette.white,
fontSize: fonts.small.fontSize,
selectors: {
':hover': {
background: palette.themeDarkAlt,
color: palette.white
},
':active': {
background: palette.themeDark,
color: palette.white
}
}
}
],
content: [
classNames.content
].concat(rootStyle(isWide), [
isWide && {
display: 'flex'
}
]),
footer: [
classNames.footer,
{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
color: palette.white,
selectors: (_a = {},
// TODO: global class name usage should be converted to a button styles function once Button supports JS styling
_a["." + classNames.button + ":not(:first-child)"] = {
marginLeft: 16
},
_a)
}
],
header: [
classNames.header
].concat(headerStyle(classNames, hasCondensedHeadline, hasSmallHeadline), [
(hasCondensedHeadline || hasSmallHeadline) && [
fonts.medium,
{
marginRight: 10,
fontWeight: Styling_1.FontWeights.semibold
}
]
]),
headline: [
classNames.headline,
{
margin: 0,
color: palette.white,
fontWeight: Styling_1.FontWeights.semibold
},
hasLargeHeadline && [
{
fontSize: fonts.xLarge.fontSize
}
]
],
imageContent: [
classNames.header,
classNames.image,
isWide && {
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
maxWidth: 154
}
],
primaryButton: [
classNames.primaryButton,
primaryButtonClassName,
{
backgroundColor: palette.white,
borderColor: palette.white,
color: palette.themePrimary,
whiteSpace: 'nowrap',
selectors: (_b = {},
// TODO: global class name usage should be converted to a button styles function once Button supports JS styling
_b["." + classNames.buttonLabel] = fonts.medium,
_b[':hover'] = {
backgroundColor: palette.themeLighter,
borderColor: palette.themeLighter,
color: palette.themePrimary
},
_b[':focus'] = {
backgroundColor: palette.themeLighter,
borderColor: palette.white
},
_b[':active'] = {
backgroundColor: palette.white,
borderColor: palette.white,
color: palette.themePrimary
},
_b)
}
],
secondaryButton: [
classNames.secondaryButton,
secondaryButtonClassName,
{
backgroundColor: palette.themePrimary,
borderColor: palette.white,
whiteSpace: 'nowrap',
selectors: (_c = {},
// TODO: global class name usage should be converted to a button styles function once Button supports JS styling
_c["." + classNames.buttonLabel] = [
fonts.medium,
{
color: palette.white
}
],
_c['&:hover, &:focus'] = {
backgroundColor: palette.themeDarkAlt,
borderColor: palette.white
},
_c[':active'] = {
backgroundColor: palette.themePrimary,
borderColor: palette.white
},
_c)
}
],
subText: [
classNames.subText,
{
margin: 0,
fontSize: fonts.medium.fontSize,
color: palette.white,
fontWeight: Styling_1.FontWeights.semilight
}
],
subComponentStyles: {
callout: {
root: rootStyle(isWide).concat([fonts.medium]),
beak: [
{
background: palette.themePrimary
}
],
calloutMain: [
{
background: palette.themePrimary
}
]
}
}
};
};
//# sourceMappingURL=TeachingBubble.styles.js.map