@fluentui/react-northstar
Version:
A themable React component library.
70 lines (69 loc) • 2.24 kB
JavaScript
import { pxToRem } from '../../../../utils';
import { embedSlotClassNames } from '../../../../components/Embed/Embed';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { playIndicatorUrl } from './playIndicatorUrl';
import { pauseIndicatorUrl } from './pauseIndicatorUrl';
export var embedStyles = {
root: function root(_ref) {
var _focusVisible, _hover;
var v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var borderFocusStyles = getBorderFocusStyles({
variables: siteVariables
});
return Object.assign({
display: 'inline-block',
verticalAlign: 'middle',
position: 'relative',
cursor: 'pointer',
width: v.width,
height: v.height || 'auto',
outline: 0
}, borderFocusStyles[':focus'], {
':focus-visible': (_focusVisible = {}, _focusVisible["& ." + embedSlotClassNames.control] = Object.assign({
borderColor: v.focusBorderColor,
opacity: 1
}, borderFocusStyles[':focus-visible']), _focusVisible),
':hover': (_hover = {}, _hover["& ." + embedSlotClassNames.control] = {
opacity: 1,
zIndex: v.zIndex
}, _hover)
});
},
control: function control(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
width: pxToRem(48),
height: pxToRem(48),
color: v.controlColor,
padding: pxToRem(4),
borderRadius: '50%',
backgroundColor: v.controlBackgroundColor,
backgroundImage: playIndicatorUrl(v.controlColor),
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: v.controlBackgroundSize,
backgroundPositionX: pxToRem(12)
}, p.active && {
backgroundImage: pauseIndicatorUrl(v.controlColor)
}, {
opacity: p.active ? 0 : 1,
pointerEvents: 'none',
transition: 'opacity .22s ease-in-out',
left: '50%',
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%)'
});
},
iframe: function iframe(_ref3) {
var p = _ref3.props;
return Object.assign({
display: 'block'
}, !p.iframeLoaded && {
display: 'none'
});
}
};
//# sourceMappingURL=embedStyles.js.map