1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.MERCURY_CENTER = exports.MERCURY_BSIDE = exports.MERCURY_SIDE = exports.FACEBOOK_ICON = exports.GOOGLE_ICON = exports.MERCURY_BUTTON = exports.FACEBOOK_BUTTON = exports.CANCEL_BUTTON = exports.CARETDOWN_BUTTON = exports.GOOGLE_BUTTON = exports.EXPAND_MORE = exports.EXPAND_LESS = exports.ICON = exports.BUTTON = undefined;
|
7 |
|
8 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
9 |
|
10 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
11 |
|
12 | var _extends2 = require('babel-runtime/helpers/extends');
|
13 |
|
14 | var _extends3 = _interopRequireDefault(_extends2);
|
15 |
|
16 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
17 |
|
18 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
19 |
|
20 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n padding: ', ';\n font-size: ', ';\n display: flex;\n font-family: \'PT Sans\';\n align-items: center;\n justify-content: center;\n transition: background 250ms ease-in-out, color 250ms ease-in-out;\n cursor: ', ';\n ', ';\n ', ';\n'], ['\n padding: ', ';\n font-size: ', ';\n display: flex;\n font-family: \'PT Sans\';\n align-items: center;\n justify-content: center;\n transition: background 250ms ease-in-out, color 250ms ease-in-out;\n cursor: ', ';\n ', ';\n ', ';\n']),
|
21 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n pointer-events: none;\n'], ['\n pointer-events: none;\n']),
|
22 | _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: flex-start;\n align-items: center;\n'], ['\n justify-content: flex-start;\n align-items: center;\n']),
|
23 | _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: space-between;\n'], ['\n justify-content: space-between;\n']),
|
24 | _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: flex-start;\n align-items: center;\n padding: ', ';\n height: ', ';\n'], ['\n justify-content: flex-start;\n align-items: center;\n padding: ', ';\n height: ', ';\n']),
|
25 | _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: flex-start;\n align-items: center;\n width: ', ';\n\n transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n padding 0.5s ease-in-out;\n padding: ', ';\n height: ', ';\n background-color: ', ';\n'], ['\n justify-content: flex-start;\n align-items: center;\n width: ', ';\n\n transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n padding 0.5s ease-in-out;\n padding: ', ';\n height: ', ';\n background-color: ', ';\n']),
|
26 | _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: flex-start;\n align-items: center;\n width: ', ';\n\n transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n padding 0.5s ease-in-out;\n padding: ', ';\n height: ', ';\n ', ';\n'], ['\n justify-content: flex-start;\n align-items: center;\n width: ', ';\n\n transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n padding 0.5s ease-in-out;\n padding: ', ';\n height: ', ';\n ', ';\n']),
|
27 | _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n/* padding: ', '; */\n padding: 0 1rem;\n \n display: flex;\n align-items: center;\n justify-content: center;\n width: ', ';\n /* flex-grow: ', '; */\n\n transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out, padding 0.5s ease-in-out;\n /* transition: width 0.5s ease-in-out; */\n\n \n justify-content: flex-start;\n\n'], ['\n/* padding: ', '; */\n padding: 0 1rem;\n \n display: flex;\n align-items: center;\n justify-content: center;\n width: ', ';\n /* flex-grow: ', '; */\n\n transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out, padding 0.5s ease-in-out;\n /* transition: width 0.5s ease-in-out; */\n\n \n justify-content: flex-start;\n\n']),
|
28 | _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n pointer-events: none;\n background-size: contain;\n background-repeat: no-repeat;\n height: 1.5rem;\n margin-right: 1.5rem;\n width: 1.5rem;\n padding: 0.6rem;\n'], ['\n pointer-events: none;\n background-size: contain;\n background-repeat: no-repeat;\n height: 1.5rem;\n margin-right: 1.5rem;\n width: 1.5rem;\n padding: 0.6rem;\n']),
|
29 | _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n background-image: url(\'/static/google.svg\');\n'], ['\n background-image: url(\'/static/google.svg\');\n']),
|
30 | _templateObject11 = (0, _taggedTemplateLiteral3.default)(['\n background-image: url(\'/static/facebook.svg\');\n'], ['\n background-image: url(\'/static/facebook.svg\');\n']);
|
31 |
|
32 | var _styledComponents = require('styled-components');
|
33 |
|
34 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
35 |
|
36 | var _tinycolor = require('tinycolor2');
|
37 |
|
38 | var _tinycolor2 = _interopRequireDefault(_tinycolor);
|
39 |
|
40 | var _defaultStyles = require('./defaultStyles');
|
41 |
|
42 | var _SVGExpandLess = require('./svg/SVGExpandLess');
|
43 |
|
44 | var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);
|
45 |
|
46 | var _SVGExpandMore = require('./svg/SVGExpandMore');
|
47 |
|
48 | var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);
|
49 |
|
50 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
51 |
|
52 | var getColor = function getColor(_ref) {
|
53 | var balance = _ref.balance,
|
54 | _ref$intensity = _ref.intensity,
|
55 | intensity = _ref$intensity === undefined ? 100 : _ref$intensity,
|
56 | colors = _ref.colors,
|
57 | key = _ref.key,
|
58 | isDisabled = _ref.isDisabled,
|
59 | isInverted = _ref.isInverted,
|
60 | isOn = _ref.isOn,
|
61 | _ref$disabledDefault = _ref.disabledDefault,
|
62 | disabledDefault = _ref$disabledDefault === undefined ? {
|
63 | color: '#666',
|
64 | backgroundColor: '#fff'
|
65 | } : _ref$disabledDefault,
|
66 | onHover = _ref.onHover,
|
67 | hasTouch = _ref.hasTouch;
|
68 |
|
69 | var color = void 0,
|
70 | on = void 0,
|
71 | off = void 0;
|
72 | var on$ = colors.on,
|
73 | off$ = colors.off,
|
74 | disabled = colors.disabled,
|
75 | transitionType = colors.transition;
|
76 |
|
77 | if (isInverted) {
|
78 | on = off$;
|
79 | off = on$;
|
80 | } else {
|
81 | on = on$;
|
82 | off = off$;
|
83 | }
|
84 |
|
85 | if (isDisabled) {
|
86 | color = disabled && disabled[key] || disabledDefault[key];
|
87 | }
|
88 |
|
89 | var onValue = void 0,
|
90 | offValue = void 0;
|
91 |
|
92 |
|
93 |
|
94 | if (on[key]) {
|
95 | onValue = on[key];
|
96 | } else {
|
97 | onValue = _defaultStyles.buttonStyles.neutral.on[key];
|
98 | }
|
99 | if (off[key]) {
|
100 | offValue = off[key];
|
101 | } else {
|
102 | offValue = _defaultStyles.buttonStyles.neutral.off[key];
|
103 | }
|
104 |
|
105 |
|
106 |
|
107 | if (onHover && !isDisabled && !hasTouch) {
|
108 | switch (transitionType) {
|
109 | case 'text':
|
110 | case 'mix':
|
111 | color = _tinycolor2.default.mix(onValue, offValue, balance).toString();
|
112 | break;
|
113 | case 'saturate':
|
114 | if (isOn === true) {
|
115 | color = (0, _tinycolor2.default)(onValue).brighten(intensity / 5).toString();
|
116 | } else {
|
117 | color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
|
118 | }
|
119 | break;
|
120 | case 'darken':
|
121 | if (isOn === true) {
|
122 | color = (0, _tinycolor2.default)(onValue).darken(intensity / 5).toString();
|
123 | } else {
|
124 | color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
|
125 | }
|
126 | break;
|
127 | case 'contrast':
|
128 | if (isOn === true) {
|
129 | color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
|
130 | } else {
|
131 | color = (0, _tinycolor2.default)(onValue).darken(intensity / 5).toString();
|
132 | }
|
133 | break;
|
134 | case 'darken':
|
135 | default:
|
136 | if (isOn === true) {
|
137 | color = (0, _tinycolor2.default)(onValue).darken(intensity / 5).toString();
|
138 | } else {
|
139 | color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
|
140 | }
|
141 | break;
|
142 | }
|
143 | }
|
144 | if (!onHover && !isDisabled) {
|
145 | if (isOn) {
|
146 | color = onValue;
|
147 | } else {
|
148 | color = offValue;
|
149 | }
|
150 | }
|
151 |
|
152 | return color;
|
153 | };
|
154 |
|
155 | var backgroundColor = function backgroundColor(_ref2) {
|
156 | var props = (0, _objectWithoutProperties3.default)(_ref2, []);
|
157 |
|
158 | var getBackgroundColor = function getBackgroundColor(args) {
|
159 | return getColor((0, _extends3.default)({}, props, args, {
|
160 | key: 'backgroundColor'
|
161 | }));
|
162 | };
|
163 | return '\n background-color: ' + getBackgroundColor() + ';\n :hover {\n background-color: ' + getBackgroundColor({
|
164 | onHover: true,
|
165 | balance: props.isOn ? 25 : 75,
|
166 | intensity: 25
|
167 | }) + ';\n }\n :active {\n background-color: ' + getBackgroundColor({
|
168 | onHover: true,
|
169 | balance: 50,
|
170 | intensity: 50
|
171 | }) + ';\n } \n ';
|
172 | };
|
173 | var invertedBackgroundColor = function invertedBackgroundColor(_ref3) {
|
174 | var props = (0, _objectWithoutProperties3.default)(_ref3, []);
|
175 |
|
176 | var getBackgroundColor = function getBackgroundColor(args) {
|
177 | return getColor((0, _extends3.default)({}, props, args, {
|
178 | isInverted: !props.isInverted,
|
179 | key: 'backgroundColor'
|
180 | }));
|
181 | };
|
182 | return '\n background-color: ' + getBackgroundColor() + ';\n :hover {\n background-color: ' + getBackgroundColor({
|
183 | onHover: true,
|
184 | balance: props.isOn ? 25 : 75,
|
185 | intensity: 25
|
186 | }) + ';\n }\n :active {\n background-color: ' + getBackgroundColor({
|
187 | onHover: true,
|
188 | balance: 50,
|
189 | intensity: 50
|
190 | }) + ';\n } \n ';
|
191 | };
|
192 |
|
193 | var color = function color(_ref4) {
|
194 | var props = (0, _objectWithoutProperties3.default)(_ref4, []);
|
195 |
|
196 | var getTextColor = function getTextColor(args) {
|
197 | return getColor((0, _extends3.default)({}, props, args, {
|
198 | key: 'color'
|
199 | }));
|
200 | };
|
201 | return '\n color: ' + getTextColor() + ';\n :hover {\n color: ' + getTextColor({
|
202 | onHover: true,
|
203 | balance: props.isOn ? 25 : 75
|
204 | }) + ';\n }\n :active {\n color: ' + getTextColor({
|
205 | onHover: true,
|
206 | balance: 50
|
207 | }) + ';\n } \n ';
|
208 | };
|
209 |
|
210 | var BUTTON = _styledComponents2.default.div(_templateObject, function (_ref5) {
|
211 | var size = _ref5.size;
|
212 | return size * 0.5 / 10 + 'rem ' + size / 10 + 'rem';
|
213 | }, function (_ref6) {
|
214 | var size = _ref6.size,
|
215 | sizeFontRatio = _ref6.sizeFontRatio;
|
216 | return size * sizeFontRatio / 10 + 'rem';
|
217 | }, function (_ref7) {
|
218 | var isDisabled = _ref7.isDisabled;
|
219 | return isDisabled ? 'default' : 'pointer';
|
220 | }, backgroundColor, color);
|
221 |
|
222 | BUTTON.defaultProps = {
|
223 | colors: _defaultStyles.buttonStyles.semiTransparentNeutral
|
224 | };
|
225 | var EXPAND_LESS = (0, _styledComponents2.default)(_SVGExpandLess2.default)(_templateObject2);
|
226 | var EXPAND_MORE = (0, _styledComponents2.default)(_SVGExpandMore2.default)(_templateObject2);
|
227 | var GOOGLE_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject3);
|
228 | var CARETDOWN_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject4);
|
229 | var CANCEL_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject4);
|
230 | var FACEBOOK_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject3);
|
231 | var MERCURY_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject5, function (_ref8) {
|
232 | var size = _ref8.size;
|
233 | return 0.025 * size + 'rem 0 ' + 0.025 * size + 'rem 0';
|
234 | }, function (_ref9) {
|
235 | var size = _ref9.size;
|
236 | return size * 0.15 + 'rem';
|
237 | });
|
238 |
|
239 | var MERCURY_SIDE = _styledComponents2.default.div(_templateObject6, function (_ref10) {
|
240 | var isOn = _ref10.isOn,
|
241 | mercuryRatio = _ref10.mercuryRatio,
|
242 | sideTransform = _ref10.sideTransform,
|
243 | _ref10$marginLock = _ref10.marginLock,
|
244 | marginLock = _ref10$marginLock === undefined ? false : _ref10$marginLock;
|
245 | return !marginLock ? isOn ? mercuryRatio[0] + '%' : mercuryRatio[1] + '%' : isOn ? mercuryRatio[0] + '%' : mercuryRatio[0] * sideTransform + '%';
|
246 | }, function (_ref11) {
|
247 | var size = _ref11.size;
|
248 | return 0.025 * size + 'rem 0';
|
249 | }, function (_ref12) {
|
250 | var size = _ref12.size;
|
251 | return size * 0.15 + 'rem';
|
252 | }, function (_ref13) {
|
253 | var colors = _ref13.colors,
|
254 | isOn = _ref13.isOn,
|
255 | isInverted = _ref13.isInverted;
|
256 | return isOn ? isInverted ? colors.on.backgroundColor : colors.off.backgroundColor : isInverted ? colors.off.backgroundColor : colors.on.backgroundColor;
|
257 | });
|
258 |
|
259 | var MERCURY_BSIDE = _styledComponents2.default.div(_templateObject7, function (_ref14) {
|
260 | var isOn = _ref14.isOn,
|
261 | mercuryRatio = _ref14.mercuryRatio,
|
262 | sideTransform = _ref14.sideTransform,
|
263 | _ref14$marginLock = _ref14.marginLock,
|
264 | marginLock = _ref14$marginLock === undefined ? false : _ref14$marginLock;
|
265 | return !marginLock ? isOn ? mercuryRatio[0] + '%' : mercuryRatio[1] + '%' : isOn ? '0%' : mercuryRatio[0] * (1 - sideTransform) + '%';
|
266 | }, function (_ref15) {
|
267 | var size = _ref15.size;
|
268 | return 0.025 * size + 'rem 0';
|
269 | }, function (_ref16) {
|
270 | var size = _ref16.size;
|
271 | return size * 0.15 + 'rem';
|
272 | }, backgroundColor);
|
273 | var MERCURY_CENTER = _styledComponents2.default.div(_templateObject8, function (_ref17) {
|
274 | var size = _ref17.size;
|
275 | return 0.025 * size + 'rem ' + 0.05 * size + 'rem';
|
276 | }, function (_ref18) {
|
277 | var isOn = _ref18.isOn,
|
278 | mercuryRatio = _ref18.mercuryRatio,
|
279 | marginLock = _ref18.marginLock;
|
280 | return !marginLock ? isOn ? 100 - mercuryRatio[0] + '%' : 100 - mercuryRatio[1] + '%' : 100 - mercuryRatio[0] + '%';
|
281 | }, function (_ref19) {
|
282 | var isOn = _ref19.isOn;
|
283 | return isOn ? 0.75 : 0.85;
|
284 | });
|
285 |
|
286 | var ICON = _styledComponents2.default.div(_templateObject9);
|
287 |
|
288 | var GOOGLE_ICON = (0, _styledComponents2.default)(ICON)(_templateObject10);
|
289 |
|
290 | var FACEBOOK_ICON = (0, _styledComponents2.default)(ICON)(_templateObject11);
|
291 |
|
292 | exports.BUTTON = BUTTON;
|
293 | exports.ICON = ICON;
|
294 | exports.EXPAND_LESS = EXPAND_LESS;
|
295 | exports.EXPAND_MORE = EXPAND_MORE;
|
296 | exports.GOOGLE_BUTTON = GOOGLE_BUTTON;
|
297 | exports.CARETDOWN_BUTTON = CARETDOWN_BUTTON;
|
298 | exports.CANCEL_BUTTON = CANCEL_BUTTON;
|
299 | exports.FACEBOOK_BUTTON = FACEBOOK_BUTTON;
|
300 | exports.MERCURY_BUTTON = MERCURY_BUTTON;
|
301 | exports.GOOGLE_ICON = GOOGLE_ICON;
|
302 | exports.FACEBOOK_ICON = FACEBOOK_ICON;
|
303 | exports.MERCURY_SIDE = MERCURY_SIDE;
|
304 | exports.MERCURY_BSIDE = MERCURY_BSIDE;
|
305 | exports.MERCURY_CENTER = MERCURY_CENTER; |
\ | No newline at end of file |