@fluentui/react-northstar
Version:
A themable React component library.
75 lines (73 loc) • 2.46 kB
JavaScript
;
exports.__esModule = true;
exports.embedStyles = void 0;
var _utils = require("../../../../utils");
var _Embed = require("../../../../components/Embed/Embed");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _playIndicatorUrl = require("./playIndicatorUrl");
var _pauseIndicatorUrl = require("./pauseIndicatorUrl");
var embedStyles = {
root: function root(_ref) {
var _focusVisible, _hover;
var v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var borderFocusStyles = (0, _getBorderFocusStyles.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["& ." + _Embed.embedSlotClassNames.control] = Object.assign({
borderColor: v.focusBorderColor,
opacity: 1
}, borderFocusStyles[':focus-visible']), _focusVisible),
':hover': (_hover = {}, _hover["& ." + _Embed.embedSlotClassNames.control] = {
opacity: 1,
zIndex: v.zIndex
}, _hover)
});
},
control: function control(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
width: (0, _utils.pxToRem)(48),
height: (0, _utils.pxToRem)(48),
color: v.controlColor,
padding: (0, _utils.pxToRem)(4),
borderRadius: '50%',
backgroundColor: v.controlBackgroundColor,
backgroundImage: (0, _playIndicatorUrl.playIndicatorUrl)(v.controlColor),
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: v.controlBackgroundSize,
backgroundPositionX: (0, _utils.pxToRem)(12)
}, p.active && {
backgroundImage: (0, _pauseIndicatorUrl.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'
});
}
};
exports.embedStyles = embedStyles;
//# sourceMappingURL=embedStyles.js.map