@stokr/components-library/dist/components/Background/Background.styles.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Wrap = exports.Video = exports.Img = exports.Image = exports.Content = exports.Container = exports.Caption = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _rwd = _interopRequireDefault(require("../../styles/rwd"));
var _templateObject;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const Container = exports.Container = _styledComponents.default.div.withConfig({
  displayName: "Backgroundstyles__Container",
  componentId: "sc-1pfq4ec-0"
})(["position:relative;width:100%;height:100%;font-size:0;", " &:after{", "}", ""], props => {
  if (!props.mobileRatio) return '';
  const ratio = props.mobileRatio.split(':');
  const percent = 100 * ratio[1] / ratio[0];
  return "\n      &:after {\n        z-index: 0;\n        content: '';\n        position: relative;\n        display: inline-block;\n        vertical-align: top;\n        width: 100%;\n        height: 100%;\n        padding-top: ".concat(percent, "%;\n        margin-left: -100%;\n      }\n    ");
}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: none;\n    "]))), props => props.investmentOpportunities && "\n    padding-top: 33% !important;\n  ");
const Wrap = exports.Wrap = _styledComponents.default.div.withConfig({
  displayName: "Backgroundstyles__Wrap",
  componentId: "sc-1pfq4ec-1"
})(["z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;& > div{height:100%;}"]);

// // Concerning MERGE:
// // differences from Img SUF below, left out of merge. Visually gave extra padding to background
// const Img
// export const Img = styled.img`
//   top: 50%;
//   left: 50%;
//   height: auto;
//   padding: 20px;
//   transform: translate(-50%, -50%);
// // same as others:
//   position: absolute;
//   width: 100%;
//   object-fit: cover;
//   object-position: center center;

const Caption = exports.Caption = _styledComponents.default.div.withConfig({
  displayName: "Backgroundstyles__Caption",
  componentId: "sc-1pfq4ec-2"
})(["font-size:11px;position:absolute;bottom:-25px;", ""], props => props.withPadding && "\n    bottom: -12px;\n  ");
const Img = exports.Img = _styledComponents.default.img.withConfig({
  displayName: "Backgroundstyles__Img",
  componentId: "sc-1pfq4ec-3"
})(["position:absolute;width:100%;object-fit:cover;object-position:center center;top:0;left:0;height:100%;", " ", " ", ""], props => props.investmentOpportunities && "\n    height: 100%;\n  ", props => props.withPadding && "\n    padding: 20px;\n  ", props => props.contain && "\n    object-fit:contain;\n  ");
const Video = exports.Video = _styledComponents.default.video.withConfig({
  displayName: "Backgroundstyles__Video",
  componentId: "sc-1pfq4ec-4"
})(["object-fit:cover;width:100%;height:100%;"]);
const Image = exports.Image = _styledComponents.default.img.withConfig({
  displayName: "Backgroundstyles__Image",
  componentId: "sc-1pfq4ec-5"
})(["min-width:100%;min-height:100%;width:auto;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
const Content = exports.Content = _styledComponents.default.div.withConfig({
  displayName: "Backgroundstyles__Content",
  componentId: "sc-1pfq4ec-6"
})(["z-index:2;position:relative;display:inline-block;vertical-align:top;width:100%;font-size:10px;"]);