1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict'
|
7 |
|
8 | import React, {PropTypes as types} from 'react'
|
9 | import {ApStyle} from 'apeman-react-style'
|
10 |
|
11 |
|
12 | let ApPaperPhotoStyle = React.createClass({
|
13 | propTypes: {
|
14 | style: types.object
|
15 | },
|
16 | getDefaultProps () {
|
17 | return {
|
18 | style: {}
|
19 | }
|
20 | },
|
21 | render () {
|
22 | const s = this
|
23 | let { props } = s
|
24 |
|
25 | let shadowSize = 15
|
26 | let shadowDense = 0.33
|
27 |
|
28 | let data = {
|
29 | '.ap-paper-photo': {
|
30 | display: 'inline-block',
|
31 | boxShadow: '1px 1px 2px rgba(0,0,0,0.33)',
|
32 | border: '1px solid #E0E0E0',
|
33 | borderRadius: '2px',
|
34 | padding: '8px 8px 32px',
|
35 | position: 'relative',
|
36 | boxSizing: 'border-box',
|
37 | backgroundColor: 'white'
|
38 | },
|
39 | '.ap-paper-photo-shadow': {
|
40 | transform: 'rotate(-3deg)',
|
41 | background: `none repeat scroll 0 0 rgba(0, 0, 0, ${shadowDense})`,
|
42 | boxShadow: `0 ${shadowSize}px ${shadowSize}px rgba(0, 0, 0, ${shadowDense})`,
|
43 | position: 'absolute',
|
44 | top: 'auto',
|
45 | bottom: `${shadowSize}px`,
|
46 | width: '50%',
|
47 | height: `${shadowSize}px`,
|
48 | zIndex: '-1'
|
49 | },
|
50 | '.ap-paper-photo-shadow-right': {
|
51 | transform: 'rotate(3deg)',
|
52 | left: 'auto',
|
53 | right: `${shadowSize / 2}px`
|
54 | },
|
55 | '.ap-paper-photo .ap-image': {
|
56 | border: '1px solid #EEE',
|
57 | position: 'relative',
|
58 | zIndex: '1'
|
59 | },
|
60 | '.ap-paper-photo-text': {
|
61 | position: 'absolute',
|
62 | zIndex: '2'
|
63 | },
|
64 | '.ap-paper-photo.ap-photo-tappable': {
|
65 | cursor: 'pointer'
|
66 | },
|
67 | '.ap-paper-photo.ap-photo-tappable:hover': {},
|
68 | '.ap-paper-photo.ap-photo-tappable:hover .ap-paper-photo-shadow': {
|
69 | boxShadow: `0 ${shadowSize + 1}px ${shadowSize}px rgba(0, 0, 0, ${shadowDense})`
|
70 | },
|
71 | '.ap-paper-photo.ap-photo-tappable:active': {
|
72 | boxShadow: 'none'
|
73 | },
|
74 | '.ap-paper-photo.ap-photo-tappable:active .ap-paper-photo-shadow': {
|
75 | display: 'none'
|
76 | }
|
77 | }
|
78 | let smallMediaData = {}
|
79 | let mediumMediaData = {}
|
80 | let largeMediaData = {}
|
81 | return (
|
82 | <ApStyle data={ Object.assign(data, props.style) }
|
83 | smallMediaData={ smallMediaData }
|
84 | mediumMediaData={ mediumMediaData }
|
85 | largeMediaData={ largeMediaData }
|
86 | >{ props.children }</ApStyle>
|
87 | )
|
88 | }
|
89 | })
|
90 |
|
91 | export default ApPaperPhotoStyle;
|