@fluent-windows/core
Version:
React components that inspired by Microsoft's Fluent Design System.
77 lines • 1.49 kB
JavaScript
import { createBaseTransition } from '../styles/createTransition';
const anchorTransitionMap = {
left: '-100%, 0, 0',
right: '100%, 0, 0',
top: '0, -100%, 0',
bottom: '0, 100%, 0'
};
export const createSwipe = anchor => ({
transition: createBaseTransition(['transform', 'visibility']),
'&.custom-enter': {
transform: `translate3d(${anchorTransitionMap[anchor]})`,
'&-done': {
transform: 'none'
}
},
'&.custom-exit': {
transform: 'none',
'&-active': {
transform: `translate3d(${anchorTransitionMap[anchor]})`
},
'&-done': {
transform: `translate3d(${anchorTransitionMap[anchor]})`
}
}
});
const anchorMap = {
left: {
height: '100%',
left: 0,
right: 'auto',
top: 0,
bottom: 0
},
right: {
height: '100%',
left: 'auto',
right: 0,
top: 0,
bottom: 0
},
top: {
width: '100%',
left: 0,
right: 0,
top: 0,
bottom: 'auto'
},
bottom: {
width: '100%',
left: 0,
right: 0,
top: 'auto',
bottom: 0
}
};
export const root = theme => ({
anchor
}) => ({
position: 'fixed',
zIndex: 1001,
boxShadow: theme.shadows[3],
backgroundColor: theme.colors.white.default,
...anchorMap[anchor]
});
export const mask = theme => ({
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 1000,
backgroundColor: theme.colors.standard.transparent2
});
export const styles = theme => ({
root: root(theme),
mask: mask(theme)
});