@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.ContainerVideo = exports.ContainerForm = exports.BoxForm = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _material = require("@mui/material");
var videoCustom = exports.videoCustom = function videoCustom() {
  return {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '100%',
    height: '100%',
    minWidth: '100%',
    minHeight: '100%',
    objectFit: 'cover',
    borderRadius: 3,
    opacity: 1,
    background: 'transparent',
    cursor: 'pointer'
  };
};
var VideoModalWrapper = exports.VideoModalWrapper = (0, _material.styled)(_material.Box)(function (_ref) {
  var theme = _ref.theme;
  return (0, _defineProperty2["default"])({
    position: 'fixed',
    bottom: 20,
    right: 20,
    width: 360,
    height: 640,
    backgroundColor: theme.palette.background["default"],
    borderRadius: theme.spacing(3),
    boxShadow: theme.shadows[24],
    zIndex: theme.zIndex.modal,
    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  }, theme.breakpoints.down('md'), {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
    maxWidth: '100%',
    maxHeight: '100%',
    borderRadius: 0
  });
});
var VideoEmbed = exports.VideoEmbed = (0, _material.styled)(_material.Box)(function (_ref3) {
  var theme = _ref3.theme;
  return (0, _defineProperty2["default"])({
    position: 'relative',
    width: '100%',
    height: '100%',
    borderRadius: theme.spacing(3),
    overflow: 'hidden'
  }, 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',
    width: '100%',
    height: '100%',
    background: '#000',
    overflow: 'hidden',
    userSelect: 'none',
    borderRadius: theme.spacing(3),
    '&::before': {
      content: '""',
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: '40%',
      background: 'linear-gradient(to top, rgba(0,0,0,0.8), transparent)',
      zIndex: 1,
      pointerEvents: 'none'
    }
  }, theme.breakpoints.down('md'), {
    borderRadius: 0
  });
});
var BoxForm = exports.BoxForm = (0, _material.styled)(_material.Box)(function () {
  return {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    width: '100%',
    zIndex: 2,
    pointerEvents: 'none',
    '& > *': {
      pointerEvents: 'auto'
    }
  };
});
var ContainerForm = exports.ContainerForm = (0, _material.styled)(_material.Box)(function (_ref7) {
  var theme = _ref7.theme;
  return (0, _defineProperty2["default"])({
    padding: theme.spacing(2),
    width: '100%',
    transition: 'all 0.3s ease-in-out'
  }, theme.breakpoints.down('md'), {
    padding: theme.spacing(1.5)
  });
});