1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.STARBOARD = exports.ITEM = exports.IMAGE = exports.DECK = exports.STERN = exports.CONTAINER = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _styledComponents = require('styled-components');
|
13 |
|
14 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
15 |
|
16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17 |
|
18 | var CONTAINER = (0, _styledComponents2.default)('div')({
|
19 | display: 'flex',
|
20 | flexWrap: 'wrap'
|
21 | });
|
22 |
|
23 | var STERN = (0, _styledComponents2.default)('div')({
|
24 | zIndex: '1',
|
25 | margin: '0.375rem 0',
|
26 | background: 'rgba(246, 246, 246, 0.5)',
|
27 | borderRadius: '0.5rem',
|
28 | width: '100%'
|
29 | });
|
30 |
|
31 | var DECK = (0, _styledComponents2.default)('div')({
|
32 | display: 'flex',
|
33 | justifyContent: 'space-between'
|
34 | });
|
35 |
|
36 | var IMAGE = (0, _styledComponents2.default)('div')(function (_ref) {
|
37 | var heightImageM = _ref.heightImageM,
|
38 | heightImageL = _ref.heightImageL,
|
39 | widthImageM = _ref.widthImageM,
|
40 | widthImageL = _ref.widthImageL,
|
41 | sizeSpeed = _ref.sizeSpeed,
|
42 | itemSize = _ref.itemSize,
|
43 | imageSrc = _ref.imageSrc;
|
44 |
|
45 | var height = void 0,
|
46 | width = void 0;
|
47 | if (itemSize === 'm') {
|
48 | height = '' + heightImageM;
|
49 | width = '' + widthImageM;
|
50 | }
|
51 | if (itemSize === 'l') {
|
52 | height = '' + heightImageL;
|
53 | width = '' + widthImageL;
|
54 | }
|
55 | return {
|
56 | backgroundImage: 'url(' + imageSrc + ')',
|
57 | alignSelf: 'flex-start',
|
58 | justifySelf: 'center',
|
59 | cursor: 'pointer',
|
60 | backgroundSize: 'contain',
|
61 | backgroundRepeat: 'no-repeat',
|
62 | objectFit: 'contain',
|
63 | transition: 'transform 0.25s ease-in-out, width ' + sizeSpeed + ' ease-in-out, height ' + sizeSpeed + ' ease-in-out',
|
64 | height: height + 'px',
|
65 | width: width + 'px'
|
66 | };
|
67 | });
|
68 |
|
69 | var ITEM = (0, _styledComponents2.default)('div')(function (_ref2) {
|
70 | var heightItemM = _ref2.heightItemM,
|
71 | heightItemL = _ref2.heightItemL,
|
72 | widthItemM = _ref2.widthItemM,
|
73 | widthItemL = _ref2.widthItemL,
|
74 | widthStarboardM = _ref2.widthStarboardM,
|
75 | widthStarboardL = _ref2.widthStarboardL,
|
76 | itemSize = _ref2.itemSize,
|
77 | showStarboard = _ref2.showStarboard,
|
78 | show = _ref2.show,
|
79 | sizeSpeed = _ref2.sizeSpeed;
|
80 |
|
81 | {
|
82 | var height = void 0,
|
83 | width = void 0;
|
84 | if (itemSize === 'm' && showStarboard === true) {
|
85 | height = '' + heightItemM;
|
86 | width = '' + (widthItemM + widthStarboardM);
|
87 | }
|
88 | if (itemSize === 'm' && showStarboard === false) {
|
89 | height = '' + heightItemM;
|
90 | width = '' + widthItemM;
|
91 | }
|
92 | if (itemSize === 'l' && showStarboard === true) {
|
93 | height = '' + heightItemL;
|
94 | width = '' + (widthItemL + widthStarboardL);
|
95 | }
|
96 | if (itemSize === 'l' && showStarboard === false) {
|
97 | height = '' + heightItemL;
|
98 | width = '' + widthItemL;
|
99 | }
|
100 | var other = void 0;
|
101 | if (show) {
|
102 | other = {
|
103 | opacity: 1
|
104 | };
|
105 | } else {
|
106 | other = {
|
107 | opacity: '0',
|
108 | height: '0',
|
109 | padding: '0',
|
110 | overflow: 'hidden'
|
111 | };
|
112 | }
|
113 | return (0, _extends3.default)({
|
114 | marginBottom: '1rem',
|
115 | display: 'flex',
|
116 | flexDirection: 'column',
|
117 | position: 'relative',
|
118 | alignSelf: 'center',
|
119 | justifySelf: 'center',
|
120 |
|
121 | transition: 'width ' + sizeSpeed + ' ease-in-out, height ' + sizeSpeed + ' ease-in-out',
|
122 | height: height + 'px',
|
123 | width: width + 'px'
|
124 | }, other);
|
125 | }
|
126 | });
|
127 |
|
128 | var STARBOARD = (0, _styledComponents2.default)('div')(function (_ref3) {
|
129 | var itemSize = _ref3.itemSize,
|
130 | showStarboard = _ref3.showStarboard,
|
131 | widthStarboardM = _ref3.widthStarboardM,
|
132 | widthStarboardL = _ref3.widthStarboardL,
|
133 | heightImageM = _ref3.heightImageM,
|
134 | heightImageL = _ref3.heightImageL,
|
135 | moveSpeed = _ref3.moveSpeed;
|
136 |
|
137 | var shared = {
|
138 | transition: 'transform ' + moveSpeed + ' ease-in-out, opacity ' + moveSpeed + ' ease-in-out'
|
139 | };
|
140 | if (showStarboard) {
|
141 | if (itemSize === 'm') {
|
142 | return (0, _extends3.default)({
|
143 | width: widthStarboardM,
|
144 | height: heightImageM,
|
145 | marginLeft: '2px',
|
146 | transform: 'translateX(0)',
|
147 | opacity: '1'
|
148 | }, shared);
|
149 | }
|
150 | if (itemSize === 'l') {
|
151 | return (0, _extends3.default)({
|
152 | width: widthStarboardL,
|
153 | height: heightImageL,
|
154 | marginLeft: '2px',
|
155 | transform: 'translateX(0)',
|
156 | opacity: '1'
|
157 | }, shared);
|
158 | }
|
159 | }
|
160 | return (0, _extends3.default)({
|
161 | width: '0px',
|
162 | height: '0px',
|
163 | transform: 'translateX(-30px)',
|
164 | opacity: '0',
|
165 | zIndex: '-9999'
|
166 | }, shared);
|
167 | });
|
168 |
|
169 | exports.CONTAINER = CONTAINER;
|
170 | exports.STERN = STERN;
|
171 | exports.DECK = DECK;
|
172 | exports.IMAGE = IMAGE;
|
173 | exports.ITEM = ITEM;
|
174 | exports.STARBOARD = STARBOARD; |
\ | No newline at end of file |