twreporter-react-index-page/lib/utils/style-utils.js

twreporter index page version 2

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.media = exports.centerBlock = undefined;
exports.truncate = truncate;

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

var centerBlock = exports.centerBlock = '\n  margin-left: auto;\n  margin-right: auto;\n';

var media = exports.media = {
  mobile: function mobile() {
    return (0, _styledComponents.css)(['@media (max-width: 414px) {', '}'], _styledComponents.css.apply(undefined, arguments));
  },
  iPhone5: function iPhone5() {
    return (0, _styledComponents.css)(['@media (max-width: 320px) {', '}'], _styledComponents.css.apply(undefined, arguments));
  },
  iPhone6: function iPhone6() {
    return (0, _styledComponents.css)(['@media (max-width: 375px) {', '}'], _styledComponents.css.apply(undefined, arguments));
  },
  iPhone6Plus: function iPhone6Plus() {
    return (0, _styledComponents.css)(['@media (max-width: 414px) {', '}'], _styledComponents.css.apply(undefined, arguments));
  },
  largeMobile: function largeMobile() {
    return (0, _styledComponents.css)(['@media (max-width: 650px) {', '}'], _styledComponents.css.apply(undefined, arguments));
  },
  tablet: function tablet() {
    return (0, _styledComponents.css)(['@media (max-width: 768px) {', '}'], _styledComponents.css.apply(undefined, arguments));
  }

  /**
  * @prop {string} position - postion of the content div
  * @prop {number} lineHeight - line-height
  * @prop {number} numberOfLine - number of line that you need in div
  * @prop {string} backgroundColor - background
  * @prop {string} textAlign - text-align
  **/
};function truncate(position, lineHeight, numberOfLine, backgroundColor, textAlign) {
  var maxHeight = lineHeight * numberOfLine;
  var textAlignValue = textAlign || 'justify';
  return '\n    overflow: hidden;\n    position: ' + position + ';\n    line-height: ' + lineHeight + 'em;\n    max-height: ' + maxHeight + 'em;\n    text-align: ' + textAlignValue + ';\n    margin-right: -1em;\n    padding-right: 1em;\n    &::before {\n      content: \'...\';\n      position: absolute;\n      right: 0;\n      bottom: 0;\n    }\n    &::after {\n      content: \'\';\n      position: absolute;\n      right: 0;\n      width: 1em;\n      height: 1em;\n      margin-top: 0.25em;\n      background: ' + backgroundColor + ';\n    }\n  ';
}