apeman-react-jumbotron/lib/ap_jumbotron_style.jsx

apeman react components for jumbotron

/**
 * Style for ApJumbotron.
 * @class ApJumbotronStyle
 */

'use strict'

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

/** @lends ApJumbotronStyle */
class ApJumbotronStyle extends Component {
  render () {
    const s = this
    let { props } = s

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

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

Object.assign(ApJumbotronStyle, {
  propTypes: {
    style: types.object,
    highlightColor: types.string,
    backgroundColor: types.string,
    titleSize: types.number
  },
  defaultProps: {
    style: {},
    titleSize: 54,
    highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
    backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR
  },
  styleData (config) {
    let { titleSize, highlightColor, backgroundColor } = config

    return {
      all: {
        '.ap-jumbotron': {
          display: 'block',
          boxSizing: 'border-box',
          width: '100%',
          padding: '32px',
          margin: '0 0 32px',
          position: 'relative',
          color: backgroundColor
        },
        '.ap-jumbotron-inner': {
          position: 'relative'
        },
        '.ap-jumbotron .ap-image': {
          backgroundColor: highlightColor
        },
        '.ap-jumbotron h1, .ap-jumbotron-title': {
          fontSize: `${titleSize}px`,
          lineHeight: `${titleSize}px`,
          margin: '8px 0',
          fontWeight: '100',
          wordWrap: 'break-word'
        },
        '.ap-jumbotron p, .ap-jumbotron-text': {
          margin: '4px 0'
        },
        '.ap-jumbotron-img-container': {
          position: 'absolute',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        '.ap-jumbotron-img': {
          width: '100% !important',
          height: '100% !important'
        },
        '.ap-jumbotron-img .ap-spinner': {
          display: 'none'
        },
        '.ap-jumbotron-img .ap-image': {
          opacity: 0.1,
          transition: 'opacity 100ms'
        },
        '.ap-jumbotron-img-ready .ap-image': {
          opacity: 1
        },
        '.ap-jumbotron-filter': {
          position: 'absolute',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          pointerEvents: 'none',
          backgroundColor: alpha(highlightColor, 0.78)
        }
      },
      small: {},
      medium: {},
      large: {}
    }
  }
})

export default ApJumbotronStyle