apeman-react-section/lib/ap_section_style.jsx

apeman react package for section components.

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

'use strict'

import React, {PropTypes as types} from 'react'
import {ApStyle} from 'apeman-react-style'

/** @lends ApSectionStyle */
const ApSectionStyle = React.createClass({
  propTypes: {
    style: types.object
  },
  getDefaultProps () {
    return {
      style: {},
      captionColor: ApStyle.CAPTION_COLOR,
      captionBorderColor: ApStyle.CAPTION_BORDER_COLOR,
      highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR
    }
  },
  statics: {
    styleData (config) {
      let {
        captionColor,
        captionBorderColor,
        highlightColor
      } = config
      let headerFontSize = 36
      let 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 () {
    const s = this
    let { props } = s

    let { all, small, medium, large } = ApSectionStyle.styleData(props)

    return (
      <ApStyle data={ Object.assign(all, props.style) }
               smallMediaData={ small }
               mediumMediaData={ medium }
               largeMediaData={ large }
      >{ props.children }</ApStyle>
    )
  }
})

export default ApSectionStyle