@scrnhq/eurovision-elements/editor/component.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  font-family: ', ';\n  font-weight: 300;\n  max-width: 100%;\n  max-width: 100vw;\n\n  figure {\n    margin: ', ' 0;\n\n    ', '\n  }\n\n  ul {\n    font-family: ', ';\n    font-size: 1em;\n    font-weight: 300;\n    margin: 2em 0;\n    line-height: 1.4;\n    padding-left: 1.5em;\n\n    ', '\n    ', '\n  }\n\n  blockquote {\n    margin: 0;\n    font-family: ', ';\n    font-weight: 300;\n    font-style: italic;\n    span { background: rgba(247,184,6,0.30); }\n  }\n\n  .paragraph {\n    font-family: ', ';\n    font-weight: 300;\n    font-size: 1em;\n    line-height: 1.4;\n    margin-bottom: 1em;\n\n    ', '\n    ', '\n  }\n\n  h2, h3 {\n    font-family: ', ';\n    font-weight: 400;\n    line-height: 1.2;\n    margin-top: 1.4em;\n    margin-bottom: 0.5em;\n    letter-spacing: -0.02em;\n  }\n\n  h2 {\n    font-size: 1.125em;\n\n    ', '\n    ', '\n    ', '\n  }\n\n  h3 {\n    font-size: 1em;\n\n    ', '\n    ', '\n    ', '\n  }\n\n  .draft-image-container {\n    position: relative;\n\n    img {\n      display: block;\n      max-width: 100%;\n      height: auto;\n      position: relative;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);\n\n      &.big {\n        ', '\n      }\n    }\n\n    figcaption {\n      font-size: 12px;\n      line-height: 1.5;\n      margin: 0;\n      margin-top: 1.25rem;\n      font-family: ', ';\n      font-weight: 300;\n      color: ', ';\n      ', '\n    }\n  }\n\n  .draft-embed {\n    ', '\n\n    .card {\n      ', '\n    }\n\n    .meta {\n      ', '\n    }\n  }\n\n  a {\n    color: ', ';\n    transition: color 0.2s ease-out;\n\n    &:hover {\n      color: ', ';\n    }\n  }\n\n  .DraftEditor-root,\n  .DraftEditor-editorContainer,\n  .public-DraftEditor-content {\n    height: inherit;\n    text-align: initial;\n  }\n\n  .public-DraftEditor-content[contenteditable="true"] {\n    -webkit-user-modify: read-write-plaintext-only;\n  }\n\n  .DraftEditor-root {\n    position: relative;\n  }\n\n  .public-DraftEditorPlaceholder-root {\n    font-weight: 300;\n    font-size: 1.125em;\n  }\n\n  /**\n   * Zero-opacity background used to allow focus in IE. Otherwise, clicks\n   * fall through to the placeholder.\n   */\n  .DraftEditor-editorContainer {\n    background-color: rgba(255, 255, 255, 0);\n    /* Repair mysterious missing Safari cursor */\n    border-left: 0.1px solid transparent;\n    position: relative;\n    z-index: 1;\n  }\n\n  .public-DraftEditor-block {\n    position: relative;\n  }\n\n  .DraftEditor-alignLeft .public-DraftStyleDefault-block {\n    text-align: left;\n  }\n\n  .DraftEditor-alignLeft .public-DraftEditorPlaceholder-root {\n    left: 0;\n    text-align: left;\n  }\n\n  .DraftEditor-alignCenter .public-DraftStyleDefault-block {\n    text-align: center;\n  }\n\n  .DraftEditor-alignCenter .public-DraftEditorPlaceholder-root {\n    margin: 0 auto;\n    text-align: center;\n    width: 100%;\n  }\n\n  .DraftEditor-alignRight .public-DraftStyleDefault-block {\n    text-align: right;\n  }\n\n  .DraftEditor-alignRight .public-DraftEditorPlaceholder-root {\n    right: 0;\n    text-align: right;\n  }\n\n  .public-DraftEditorPlaceholder-root {\n    color: #BABABA;\n    position: absolute;\n    z-index: 0;\n  }\n\n  .public-DraftEditorPlaceholder-hasFocus {\n    color: #BABABA;\n  }\n\n  .DraftEditorPlaceholder-hidden {\n    display: none;\n  }\n'], ['\n  position: relative;\n  font-family: ', ';\n  font-weight: 300;\n  max-width: 100%;\n  max-width: 100vw;\n\n  figure {\n    margin: ', ' 0;\n\n    ', '\n  }\n\n  ul {\n    font-family: ', ';\n    font-size: 1em;\n    font-weight: 300;\n    margin: 2em 0;\n    line-height: 1.4;\n    padding-left: 1.5em;\n\n    ', '\n    ', '\n  }\n\n  blockquote {\n    margin: 0;\n    font-family: ', ';\n    font-weight: 300;\n    font-style: italic;\n    span { background: rgba(247,184,6,0.30); }\n  }\n\n  .paragraph {\n    font-family: ', ';\n    font-weight: 300;\n    font-size: 1em;\n    line-height: 1.4;\n    margin-bottom: 1em;\n\n    ', '\n    ', '\n  }\n\n  h2, h3 {\n    font-family: ', ';\n    font-weight: 400;\n    line-height: 1.2;\n    margin-top: 1.4em;\n    margin-bottom: 0.5em;\n    letter-spacing: -0.02em;\n  }\n\n  h2 {\n    font-size: 1.125em;\n\n    ', '\n    ', '\n    ', '\n  }\n\n  h3 {\n    font-size: 1em;\n\n    ', '\n    ', '\n    ', '\n  }\n\n  .draft-image-container {\n    position: relative;\n\n    img {\n      display: block;\n      max-width: 100%;\n      height: auto;\n      position: relative;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);\n\n      &.big {\n        ', '\n      }\n    }\n\n    figcaption {\n      font-size: 12px;\n      line-height: 1.5;\n      margin: 0;\n      margin-top: 1.25rem;\n      font-family: ', ';\n      font-weight: 300;\n      color: ', ';\n      ', '\n    }\n  }\n\n  .draft-embed {\n    ', '\n\n    .card {\n      ', '\n    }\n\n    .meta {\n      ', '\n    }\n  }\n\n  a {\n    color: ', ';\n    transition: color 0.2s ease-out;\n\n    &:hover {\n      color: ', ';\n    }\n  }\n\n  .DraftEditor-root,\n  .DraftEditor-editorContainer,\n  .public-DraftEditor-content {\n    height: inherit;\n    text-align: initial;\n  }\n\n  .public-DraftEditor-content[contenteditable="true"] {\n    -webkit-user-modify: read-write-plaintext-only;\n  }\n\n  .DraftEditor-root {\n    position: relative;\n  }\n\n  .public-DraftEditorPlaceholder-root {\n    font-weight: 300;\n    font-size: 1.125em;\n  }\n\n  /**\n   * Zero-opacity background used to allow focus in IE. Otherwise, clicks\n   * fall through to the placeholder.\n   */\n  .DraftEditor-editorContainer {\n    background-color: rgba(255, 255, 255, 0);\n    /* Repair mysterious missing Safari cursor */\n    border-left: 0.1px solid transparent;\n    position: relative;\n    z-index: 1;\n  }\n\n  .public-DraftEditor-block {\n    position: relative;\n  }\n\n  .DraftEditor-alignLeft .public-DraftStyleDefault-block {\n    text-align: left;\n  }\n\n  .DraftEditor-alignLeft .public-DraftEditorPlaceholder-root {\n    left: 0;\n    text-align: left;\n  }\n\n  .DraftEditor-alignCenter .public-DraftStyleDefault-block {\n    text-align: center;\n  }\n\n  .DraftEditor-alignCenter .public-DraftEditorPlaceholder-root {\n    margin: 0 auto;\n    text-align: center;\n    width: 100%;\n  }\n\n  .DraftEditor-alignRight .public-DraftStyleDefault-block {\n    text-align: right;\n  }\n\n  .DraftEditor-alignRight .public-DraftEditorPlaceholder-root {\n    right: 0;\n    text-align: right;\n  }\n\n  .public-DraftEditorPlaceholder-root {\n    color: #BABABA;\n    position: absolute;\n    z-index: 0;\n  }\n\n  .public-DraftEditorPlaceholder-hasFocus {\n    color: #BABABA;\n  }\n\n  .DraftEditorPlaceholder-hidden {\n    display: none;\n  }\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n      margin: ', ' 0;\n    '], ['\n      margin: ', ' 0;\n    ']),
    _templateObject3 = _taggedTemplateLiteral(['font-size: 1.25em'], ['font-size: 1.25em']),
    _templateObject4 = _taggedTemplateLiteral(['font-size: 1.125em'], ['font-size: 1.125em']),
    _templateObject5 = _taggedTemplateLiteral(['font-size: 1.5em;'], ['font-size: 1.5em;']),
    _templateObject6 = _taggedTemplateLiteral(['font-size: 1.625em;'], ['font-size: 1.625em;']),
    _templateObject7 = _taggedTemplateLiteral(['font-size: 2em;'], ['font-size: 2em;']),
    _templateObject8 = _taggedTemplateLiteral(['font-size: 1.25em;'], ['font-size: 1.25em;']),
    _templateObject9 = _taggedTemplateLiteral(['\n          width: 120%;\n          max-width: 120%;\n          left: -10%;\n        '], ['\n          width: 120%;\n          max-width: 120%;\n          left: -10%;\n        ']),
    _templateObject10 = _taggedTemplateLiteral(['font-size: 0.875em;'], ['font-size: 0.875em;']),
    _templateObject11 = _taggedTemplateLiteral(['\n      position: relative;\n      width: 120%;\n      left: -10%;\n    '], ['\n      position: relative;\n      width: 120%;\n      left: -10%;\n    ']);

var _media = require('../library/media');

var _media2 = _interopRequireDefault(_media);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _base = require('../card/base');

var _meta = require('../card/meta');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

exports.default = _styledComponents2.default.div(_templateObject, function (props) {
  return props.theme.font.base;
}, function (props) {
  return props.theme.spacing.large;
}, _media2.default.medium(_templateObject2, function (props) {
  return props.theme.spacing.jumbo;
}), function (props) {
  return props.theme.font.base;
}, _media2.default.medium(_templateObject3), _media2.default.wide(_templateObject4), function (props) {
  return props.theme.font.base;
}, function (props) {
  return props.theme.font.base;
}, _media2.default.medium(_templateObject3), _media2.default.wide(_templateObject4), function (props) {
  return props.theme.font.header;
}, _media2.default.medium(_templateObject5), _media2.default.wide(_templateObject6), _media2.default.extraWide(_templateObject7), _media2.default.medium(_templateObject8), _media2.default.wide(_templateObject8), _media2.default.extraWide(_templateObject5), _media2.default.medium(_templateObject9), function (props) {
  return props.theme.font.base;
}, function (props) {
  return props.theme.colors.grey;
}, _media2.default.wide(_templateObject10), _media2.default.medium(_templateObject11), _base.styling, _meta.styling, function (props) {
  return props.theme.colors.tertiary;
}, function (props) {
  return props.theme.colors.quaternary;
});