1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
16 |
|
17 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
18 |
|
19 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n cursor: pointer;\n position: relative;\n margin: auto;\n width: 18px;\n height: 18px;\n -webkit-tap-highlight-color: transparent;\n transform: translate3d(0, 0, 0);\n :before {\n content: \'\';\n position: absolute;\n top: -15px;\n left: -15px;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgba(34, 50, 84, 0.03);\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n svg {\n position: relative;\n z-index: 1;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: #c8ccd4;\n stroke-width: 1.5;\n transform: translate3d(0, 0, 0);\n transition: all 0.2s ease;\n }\n svg path {\n stroke-dasharray: 60;\n stroke-dashoffset: 0;\n }\n svg polyline {\n stroke-dasharray: 22;\n stroke-dashoffset: 66;\n }\n :hover:before {\n opacity: 1;\n }\n :hover svg {\n stroke: #4285f4;\n }\n'], ['\n cursor: pointer;\n position: relative;\n margin: auto;\n width: 18px;\n height: 18px;\n -webkit-tap-highlight-color: transparent;\n transform: translate3d(0, 0, 0);\n :before {\n content: \'\';\n position: absolute;\n top: -15px;\n left: -15px;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgba(34, 50, 84, 0.03);\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n svg {\n position: relative;\n z-index: 1;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: #c8ccd4;\n stroke-width: 1.5;\n transform: translate3d(0, 0, 0);\n transition: all 0.2s ease;\n }\n svg path {\n stroke-dasharray: 60;\n stroke-dashoffset: 0;\n }\n svg polyline {\n stroke-dasharray: 22;\n stroke-dashoffset: 66;\n }\n :hover:before {\n opacity: 1;\n }\n :hover svg {\n stroke: #4285f4;\n }\n']),
|
20 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n :checked + ', ' svg {\n stroke: #333;\n }\n :checked + ', ' svg path {\n stroke-dashoffset: 60;\n transition: all 0.3s linear;\n }\n :checked + ', ' svg polyline {\n stroke-dashoffset: 42;\n transition: all 0.2s linear;\n transition-delay: 0.15s;\n }\n'], ['\n :checked + ', ' svg {\n stroke: #333;\n }\n :checked + ', ' svg path {\n stroke-dashoffset: 60;\n transition: all 0.3s linear;\n }\n :checked + ', ' svg polyline {\n stroke-dashoffset: 42;\n transition: all 0.2s linear;\n transition-delay: 0.15s;\n }\n']),
|
21 | _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n display: grid;\n height: 100%;\n'], ['\n display: grid;\n height: 100%;\n']);
|
22 |
|
23 | var _react = require('react');
|
24 |
|
25 | var _react2 = _interopRequireDefault(_react);
|
26 |
|
27 | var _styledComponents = require('styled-components');
|
28 |
|
29 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
30 |
|
31 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
32 |
|
33 | var CHECK = _styledComponents2.default.label(_templateObject);
|
34 |
|
35 | var CBX = _styledComponents2.default.input(_templateObject2, CHECK, CHECK, CHECK);
|
36 |
|
37 | var BODY = _styledComponents2.default.div(_templateObject3);
|
38 | var Checkbox = function Checkbox(_ref) {
|
39 | var checked = _ref.checked,
|
40 | onChange = _ref.onChange,
|
41 | id = _ref.id,
|
42 | className = _ref.className,
|
43 | props = (0, _objectWithoutProperties3.default)(_ref, ['checked', 'onChange', 'id', 'className']);
|
44 |
|
45 | return _react2.default.createElement(
|
46 | BODY,
|
47 | { className: className },
|
48 | _react2.default.createElement(CBX, (0, _extends3.default)({
|
49 | onChange: onChange,
|
50 | checked: checked,
|
51 | type: 'checkbox',
|
52 | style: {
|
53 |
|
54 | display: 'none'
|
55 | },
|
56 | id: id
|
57 | }, props)),
|
58 | _react2.default.createElement(
|
59 | CHECK,
|
60 | { htmlFor: id },
|
61 | _react2.default.createElement(
|
62 | 'svg',
|
63 | { width: '18px', height: '18px', viewBox: '0 0 18 18' },
|
64 | _react2.default.createElement('path', { d: 'M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z' })
|
65 | )
|
66 | )
|
67 | );
|
68 | };
|
69 |
|
70 | exports.default = Checkbox; |
\ | No newline at end of file |