@wulperstudio/cms/node/organisms/VideoModalCta/styled.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.videoCustom = exports.VideoModalWrapper = exports.VideoEmbed = exports.Form = exports.ContainerVideo = exports.ContainerText = exports.ContainerForm = exports.ContainerFab = exports.ContainerButtonForm = exports.BoxForm = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _material = require("@mui/material");
var videoCustom = exports.videoCustom = function videoCustom() {
  return {
    cursor: 'pointer',
    height: '100%',
    left: '49.9%',
    minHeight: '102%',
    minWidth: '101%',
    objectFit: 'cover',
    position: 'absolute',
    top: '50%',
    transform: 'translate(-50%, -50%)',
    width: '100%',
    opacity: '1',
    background: 'transparent',
    borderRadius: '1rem'
  };
};
var ContainerFab = exports.ContainerFab = (0, _material.styled)(_material.Box)(function () {
  return {
    position: 'fixed',
    right: 50,
    bottom: 50
  };
});
var VideoModalWrapper = exports.VideoModalWrapper = (0, _material.styled)(_material.Box)(function (_ref) {
  var theme = _ref.theme;
  return (0, _defineProperty2["default"])({
    backgroundColor: theme.palette.background["default"],
    borderRadius: theme.spacing(3),
    boxShadow: theme.shadows[1],
    boxSizing: 'border-box',
    height: '630px',
    left: 'initial',
    position: 'fixed',
    bottom: '15px',
    right: '15px',
    top: 'initial',
    width: '360px',
    zIndex: theme.zIndex.modal
  }, theme.breakpoints.down('md'), {
    position: 'fixed',
    maxHeight: '100%',
    maxWidth: '100%',
    width: '100%',
    top: 0,
    left: 0,
    overflow: 'hidden',
    borderRadius: 0,
    bottom: 0,
    height: '100%'
  });
});
var VideoEmbed = exports.VideoEmbed = (0, _material.styled)(_material.Box)(function (_ref3) {
  var theme = _ref3.theme;
  return (0, _defineProperty2["default"])({
    width: '100%',
    height: '100%',
    boxSizing: 'border-box',
    borderRadius: theme.spacing(3)
  }, theme.breakpoints.down('md'), {
    borderRadius: 0
  });
});
var ContainerVideo = exports.ContainerVideo = (0, _material.styled)(_material.Box)(function (_ref5) {
  var theme = _ref5.theme;
  return (0, _defineProperty2["default"])({
    position: 'relative',
    background: 'black',
    height: '100%',
    overflow: 'hidden',
    userSelect: 'none',
    width: '100%',
    borderRadius: '1rem'
  }, theme.breakpoints.down('md'), {
    borderRadius: 0
  });
});
var ContainerText = exports.ContainerText = (0, _material.styled)(_material.Box)(function () {
  return {
    padding: '50px 24px 24px',
    position: 'absolute',
    margin: '0px',
    left: '0px',
    top: '0px',
    width: '100%',
    height: '100%',
    pointerEvents: 'none'
  };
});
var ContainerForm = exports.ContainerForm = (0, _material.styled)(_material.Box)(function () {
  return {
    padding: '0px 16px',
    transition: 'all 0.3s ease-out 0s',
    width: '100%',
    height: '100%'
  };
});
var Form = exports.Form = (0, _material.styled)(_material.Box)(function () {
  return {
    maxHeight: '228px',
    alignItems: 'flex-start',
    display: 'flex',
    flexDirection: 'column',
    transition: 'all 0.3s ease-in-out 0s',
    width: '100%'
  };
});
var BoxForm = exports.BoxForm = (0, _material.styled)(_material.Box)(function () {
  return {
    bottom: '0px',
    left: '0px',
    // pointerEvents: 'none',
    position: 'absolute',
    // height: '100%',
    width: '100%',
    right: '0px',
    zIndex: 10
  };
});
var ContainerButtonForm = exports.ContainerButtonForm = (0, _material.styled)(_material.Box)(function () {
  return {
    flexGrow: '2',
    height: 'auto',
    marginBottom: '16px',
    outline: 'none',
    position: 'relative',
    pointerEvents: 'initial',
    width: '100%',
    margin: '8px auto'
  };
});