office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
247 lines • 8.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
exports.COACHMARK_WIDTH = 32;
exports.COACHMARK_HEIGHT = 32;
exports.translateOne = Styling_1.keyframes({
'0%': {
transform: 'translate(0, 0)',
animationTimingFunction: 'linear'
},
'78.57%': {
transform: 'translate(0, 0)',
animationTimingFunction: 'cubic-bezier(0.62, 0, 0.56, 1)'
},
'82.14%': {
transform: 'translate(0, -5px)',
animationTimingFunction: 'cubic-bezier(0.58, 0, 0, 1)'
},
'84.88%': {
transform: 'translate(0, 9px)',
animationTimingFunction: 'cubic-bezier(1, 0, 0.56, 1)'
},
'88.1%': {
transform: 'translate(0, -2px)',
animationTimingFunction: 'cubic-bezier(0.58, 0, 0.67, 1)'
},
'90.12%': {
transform: 'translate(0, 0)',
animationTimingFunction: 'linear'
},
'100%': {
transform: 'translate(0, 0)'
}
});
exports.scaleOne = Styling_1.keyframes({
'0%': {
transform: ' scale(0)',
animationTimingFunction: 'linear'
},
'14.29%': {
transform: 'scale(0)',
animationTimingFunction: 'cubic-bezier(0.84, 0, 0.52, 0.99)'
},
'16.67%': {
transform: 'scale(1.15)',
animationTimingFunction: 'cubic-bezier(0.48, -0.01, 0.52, 1.01)'
},
'19.05%': {
transform: 'scale(0.95)',
animationTimingFunction: 'cubic-bezier(0.48, 0.02, 0.52, 0.98)'
},
'21.43%': {
transform: 'scale(1)',
animationTimingFunction: 'linear'
},
'42.86%': {
transform: 'scale(1)',
animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)'
},
'45.71%': {
transform: 'scale(0.8)',
animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)'
},
'50%': {
transform: 'scale(1)',
animationTimingFunction: 'linear'
},
'90.12%': {
transform: 'scale(1)',
animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)'
},
'92.98%': {
transform: 'scale(0.8)',
animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)'
},
'97.26%': {
transform: 'scale(1)',
animationTimingFunction: 'linear'
},
'100%': {
transform: 'scale(1)'
}
});
exports.rotateOne = Styling_1.keyframes({
'0%': {
transform: 'rotate(0deg)',
animationTimingFunction: 'linear'
},
'83.33%': {
transform: ' rotate(0deg)',
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
},
'83.93%': {
transform: 'rotate(15deg)',
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
},
'84.52%': {
transform: 'rotate(-15deg)',
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
},
'85.12%': {
transform: 'rotate(15deg)',
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
},
'85.71%': {
transform: 'rotate(-15deg)',
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
},
'86.31%': {
transform: 'rotate(0deg)',
animationTimingFunction: 'linear'
},
'100%': {
transform: 'rotate(0deg)'
}
});
function getStyles(props, theme) {
if (theme === void 0) { theme = Styling_1.getTheme(); }
var animationInnerDimension = '35px';
var animationOuterDimension = '150px';
var animationBorderWidth = '10px';
var ContinuousPulse = Styling_1.PulsingBeaconAnimationStyles.continuousPulseAnimationDouble(props.beaconColorOne ? props.beaconColorOne : theme.palette.themePrimary, props.beaconColorTwo ? props.beaconColorTwo : theme.palette.themeTertiary, animationInnerDimension, animationOuterDimension, animationBorderWidth);
var ContinuousPulseAnimation = Styling_1.PulsingBeaconAnimationStyles.createDefaultAnimation(ContinuousPulse);
return {
root: [
{
position: 'relative'
}
],
pulsingBeacon: [
{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '0px',
height: '0px',
borderRadius: '225px',
borderStyle: 'solid',
opacity: '0'
},
props.isCollapsed && props.isBeaconAnimating && ContinuousPulseAnimation
],
// Translate Animation Layer
translateAnimationContainer: [
{
width: '100%',
height: '100%'
},
props.isCollapsed && {
animationDuration: '14s',
animationTimingFunction: 'linear',
animationDirection: 'normal',
animationIterationCount: '1',
animationDelay: '0s',
animationFillMode: 'forwards',
animationName: exports.translateOne,
transition: 'opacity 0.5s ease-in-out'
},
!props.isCollapsed && {
opacity: '1'
}
],
// Scale Animation Layer
scaleAnimationLayer: [
{
width: '100%',
height: '100%'
},
props.isCollapsed && {
animationDuration: '14s',
animationTimingFunction: 'linear',
animationDirection: 'normal',
animationIterationCount: '1',
animationDelay: '0s',
animationFillMode: 'forwards',
animationName: exports.scaleOne
}
],
// Rotate Animation Layer
rotateAnimationLayer: [
{
width: '100%',
height: '100%'
},
props.isCollapsed && {
animationDuration: '14s',
animationTimingFunction: 'linear',
animationDirection: 'normal',
animationIterationCount: '1',
animationDelay: '0s',
animationFillMode: 'forwards',
animationName: exports.rotateOne
},
!props.isCollapsed && {
opacity: '1'
}
],
// Layer Host, defaults to collapsed
entityHost: [
{
position: 'relative',
outline: 'none',
overflow: 'hidden',
backgroundColor: props.color,
borderRadius: exports.COACHMARK_WIDTH,
transition: 'border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1)',
visibility: 'hidden'
},
!props.isMeasuring && {
width: exports.COACHMARK_WIDTH,
height: exports.COACHMARK_HEIGHT,
visibility: 'visible'
},
!props.isCollapsed && {
borderRadius: '1px',
opacity: '1',
width: props.entityHostWidth,
height: props.entityHostHeight
}
],
entityInnerHost: [
{
transition: 'transform 500ms cubic-bezier(0.5, 0, 0, 1)',
transformOrigin: props.transformOrigin,
transform: 'scale(0)'
},
!props.isCollapsed && {
width: props.entityHostWidth,
height: props.entityHostHeight,
transform: 'scale(1)'
},
!props.isMeasuring && {
visibility: 'visible'
}
],
ariaContainer: {
position: 'fixed',
opacity: 0,
height: 0,
width: 0,
pointerEvents: 'none'
}
};
}
exports.getStyles = getStyles;
//# sourceMappingURL=Coachmark.styles.js.map