apeman-react-section/lib/ap_section_style.js

apeman react package for section components.

/**
 * Style for ApSection.
 * @class ApSectionStyle
 */

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _apemanReactStyle = require('apeman-react-style');

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

/** @lends ApSectionStyle */
var ApSectionStyle = _react2.default.createClass({
  displayName: 'ApSectionStyle',

  propTypes: {
    style: _react.PropTypes.object
  },
  getDefaultProps: function getDefaultProps() {
    return {
      style: {},
      captionColor: _apemanReactStyle.ApStyle.CAPTION_COLOR,
      captionBorderColor: _apemanReactStyle.ApStyle.CAPTION_BORDER_COLOR,
      highlightColor: _apemanReactStyle.ApStyle.DEFAULT_HIGHLIGHT_COLOR
    };
  },

  statics: {
    styleData: function styleData(config) {
      var captionColor = config.captionColor;
      var captionBorderColor = config.captionBorderColor;
      var highlightColor = config.highlightColor;

      var headerFontSize = 36;
      var anchorWidth = 22;
      return {
        all: {
          '.ap-section': {
            display: 'block',
            margin: '0 0 32px'
          },
          '.ap-section-header': {
            display: 'block',
            paddingBottom: '8px',
            fontSize: headerFontSize + 'px',
            lineHeight: headerFontSize + 'px',
            margin: '0 0 16px',
            position: 'relative',
            fontWeight: 'normal'
          },
          '.ap-section-header-lined': {
            fontSize: '14px',
            borderBottom: '1px solid ' + captionBorderColor,
            lineHeight: '16px',
            padding: '0 4px',
            marginBottom: '4px',
            color: '' + captionColor
          },
          '.ap-section-header:hover .ap-section-anchor': {
            opacity: 0.6
          },
          '.ap-section-header-button': {
            display: 'inline-flex',
            color: '' + highlightColor,
            position: 'absolute',
            right: 0,
            top: 0,
            bottom: 0,
            padding: '0 4px',
            justifyContent: 'center',
            alignItems: 'center',
            cursor: 'pointer'
          },
          '.ap-section-header-button:hover': {},
          '.ap-section-header-button:active': {
            opacity: 0.9
          },
          '.ap-section-anchor': {
            cursor: 'pointer',
            boxSizing: 'border-box',
            position: 'absolute',
            left: anchorWidth * -1 + 'px',
            textAlign: 'center',
            transition: 'opacity 300ms',
            top: 0,
            opacity: 0
          },
          '.ap-section-anchor-disabled': {
            display: 'none !important'
          },
          '.ap-section-anchor:hover': {
            opacity: 1
          },
          '.ap-section-anchor:active': {
            opacity: 0.66
          },
          '.ap-section-aligner': {
            display: 'inline-block',
            overflow: 'hidden',
            width: '1px',
            marginRight: '-1px',
            color: 'transparent',
            opacity: 0,
            verticalAlign: 'middle'
          },
          '.ap-section-anchor-icon': {
            fontSize: '18px',
            padding: '0 2px',
            color: '#888',
            lineHeight: headerFontSize + 'px'
          },
          'ap-section-body': {}
        }
      };
    }
  },
  render: function render() {
    var s = this;
    var props = s.props;

    var _ApSectionStyle$style = ApSectionStyle.styleData(props);

    var all = _ApSectionStyle$style.all;
    var small = _ApSectionStyle$style.small;
    var medium = _ApSectionStyle$style.medium;
    var large = _ApSectionStyle$style.large;


    return _react2.default.createElement(
      _apemanReactStyle.ApStyle,
      { data: Object.assign(all, props.style),
        smallMediaData: small,
        mediumMediaData: medium,
        largeMediaData: large
      },
      props.children
    );
  }
});

exports.default = ApSectionStyle;
//# sourceMappingURL=data:application/json;base64,bnVsbA==