66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(exports, "createSlideStyles", {
|
||
|
|
enumerable: true,
|
||
|
|
get: function() {
|
||
|
|
return createSlideStyles;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const _reacttheme = require("@fluentui/react-theme");
|
||
|
|
const _constants = require("./constants");
|
||
|
|
function createSlideStyles(mainAxis) {
|
||
|
|
const fadeIn = {
|
||
|
|
from: {
|
||
|
|
opacity: 0
|
||
|
|
},
|
||
|
|
to: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const slideDistanceVarX = '--fui-positioning-slide-distance-x';
|
||
|
|
const slideDistanceVarY = '--fui-positioning-slide-distance-y';
|
||
|
|
return {
|
||
|
|
animationComposition: 'accumulate',
|
||
|
|
animationDuration: _reacttheme.tokens.durationSlower,
|
||
|
|
animationTimingFunction: _reacttheme.tokens.curveDecelerateMid,
|
||
|
|
[slideDistanceVarX]: `0px`,
|
||
|
|
[slideDistanceVarY]: `${mainAxis}px`,
|
||
|
|
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=right]`]: {
|
||
|
|
[slideDistanceVarX]: `-${mainAxis}px`,
|
||
|
|
[slideDistanceVarY]: '0px'
|
||
|
|
},
|
||
|
|
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=bottom]`]: {
|
||
|
|
[slideDistanceVarX]: '0px',
|
||
|
|
[slideDistanceVarY]: `-${mainAxis}px`
|
||
|
|
},
|
||
|
|
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=left]`]: {
|
||
|
|
[slideDistanceVarX]: `${mainAxis}px`,
|
||
|
|
[slideDistanceVarY]: '0px'
|
||
|
|
},
|
||
|
|
animationName: [
|
||
|
|
fadeIn,
|
||
|
|
{
|
||
|
|
from: {
|
||
|
|
transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`
|
||
|
|
},
|
||
|
|
to: {}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
// Note: at-rules have more specificity in Griffel
|
||
|
|
'@media(prefers-reduced-motion)': {
|
||
|
|
[`&[${_constants.DATA_POSITIONING_PLACEMENT}]`]: {
|
||
|
|
animationDuration: '1ms',
|
||
|
|
animationName: fadeIn
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// Tested in Firefox 79
|
||
|
|
'@supports not (animation-composition: accumulate)': {
|
||
|
|
[`&[${_constants.DATA_POSITIONING_PLACEMENT}]`]: {
|
||
|
|
animationName: fadeIn
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|