1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.INFO = exports.ASTERISK = exports.INPUTBOX = exports.MULTIPLECHOICE = exports.COMPOSITION = exports.TEXTAREA = exports.CHECKBOX = exports.SELECTMANY = exports.CONTAINER = exports.SELECTONE = exports.TEXTINPUT = exports.ERROR = exports.GROUP = exports.SUBMIT = undefined;
|
7 |
|
8 | var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");
|
9 |
|
10 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
11 |
|
12 | var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n color: #d93025;\n"], ["\n color: #d93025;\n"]),
|
13 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n margin-bottom: 1.75rem;\n font-family: \"Google Sans\", Roboto, Arial, sans-serif;\n font-size: 1.75rem;\n font-weight: 500;\n letter-spacing: 0.1px;\n line-height: 24px;\n color: #202124;\n font-weight: 400;\n width: 100%;\n word-break: break-word;\n"], ["\n margin-bottom: 1.75rem;\n font-family: \"Google Sans\", Roboto, Arial, sans-serif;\n font-size: 1.75rem;\n font-weight: 500;\n letter-spacing: 0.1px;\n line-height: 24px;\n color: #202124;\n font-weight: 400;\n width: 100%;\n word-break: break-word;\n"]),
|
14 | _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n margin-top: 1rem;\n font-size: 1.375rem;\n display: flex;\n align-items: center;\n color: #d93025;\n svg {\n margin-right: 1rem;\n }\n /* position: absolute; */\n /* bottom: -2.25rem; */\n /* right: 0.5rem; */\n"], ["\n margin-top: 1rem;\n font-size: 1.375rem;\n display: flex;\n align-items: center;\n color: #d93025;\n svg {\n margin-right: 1rem;\n }\n /* position: absolute; */\n /* bottom: -2.25rem; */\n /* right: 0.5rem; */\n"]),
|
15 | _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n display: flex;\n width: 80%;\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n"], ["\n display: flex;\n width: 80%;\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n"]),
|
16 | _templateObject5 = (0, _taggedTemplateLiteral3.default)(["\n display: flex;\n flex-direction: column;\n margin-bottom: 3.5rem;\n position: relative;\n\n padding: 2.4rem;\n border-radius: 1rem;\n border: ", ";\n background: white;\n width: 35rem;\n @media (max-width: 425px) {\n border-radius: 0.5rem;\n width: 100%;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-bottom: 3.5rem;\n position: relative;\n\n padding: 2.4rem;\n border-radius: 1rem;\n border: ", ";\n background: white;\n width: 35rem;\n @media (max-width: 425px) {\n border-radius: 0.5rem;\n width: 100%;\n }\n"]),
|
17 | _templateObject6 = (0, _taggedTemplateLiteral3.default)([""], [""]),
|
18 | _templateObject7 = (0, _taggedTemplateLiteral3.default)(["\n height: 20rem;\n "], ["\n height: 20rem;\n "]),
|
19 | _templateObject8 = (0, _taggedTemplateLiteral3.default)(["\n width: 5rem;\n border: none;\n text-align: ", ";\n :focus {\n outline: none;\n }\n "], ["\n width: 5rem;\n border: none;\n text-align: ", ";\n :focus {\n outline: none;\n }\n "]),
|
20 | _templateObject9 = (0, _taggedTemplateLiteral3.default)(["\n width: auto;\n "], ["\n width: auto;\n "]),
|
21 | _templateObject10 = (0, _taggedTemplateLiteral3.default)(["\n display: flex;\n align-items: center;\n background: #e7e7e7;\n margin: ", ";\n padding: ", ";\n justify-content: ", ";\n width: 8rem;\n "], ["\n display: flex;\n align-items: center;\n background: #e7e7e7;\n margin: ", ";\n padding: ", ";\n justify-content: ", ";\n width: 8rem;\n "]),
|
22 | _templateObject11 = (0, _taggedTemplateLiteral3.default)(["\n z-index: 1;\n "], ["\n z-index: 1;\n "]),
|
23 | _templateObject12 = (0, _taggedTemplateLiteral3.default)(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n justify-content: space-between;\n "], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n justify-content: space-between;\n "]),
|
24 | _templateObject13 = (0, _taggedTemplateLiteral3.default)(["\n min-height: 5rem;\n width: 25.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n "], ["\n min-height: 5rem;\n width: 25.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n "]),
|
25 | _templateObject14 = (0, _taggedTemplateLiteral3.default)(["\n margin-right: 2.25rem;\n margin-bottom: 0.75rem;\n "], ["\n margin-right: 2.25rem;\n margin-bottom: 0.75rem;\n "]),
|
26 | _templateObject15 = (0, _taggedTemplateLiteral3.default)(["\n text-transform: uppercase;\n font-weight: bold;\n\n margin-bottom: 1rem;\n margin-left: 1.5rem;\n "], ["\n text-transform: uppercase;\n font-weight: bold;\n\n margin-bottom: 1rem;\n margin-left: 1.5rem;\n "]),
|
27 | _templateObject16 = (0, _taggedTemplateLiteral3.default)(["\n font-weight: bold;\n\n margin-bottom: 0.75rem;\n "], ["\n font-weight: bold;\n\n margin-bottom: 0.75rem;\n "]),
|
28 | _templateObject17 = (0, _taggedTemplateLiteral3.default)(["\n margin-top: 0.25rem;\n margin-bottom: 3rem;\n font-size: 1.5rem;\n line-height: 2rem;\n "], ["\n margin-top: 0.25rem;\n margin-bottom: 3rem;\n font-size: 1.5rem;\n line-height: 2rem;\n "]),
|
29 | _templateObject18 = (0, _taggedTemplateLiteral3.default)(["\n border-top: 1px solid #ddd;\n margin-top: 2rem;\n padding-top: 1.5rem;\n "], ["\n border-top: 1px solid #ddd;\n margin-top: 2rem;\n padding-top: 1.5rem;\n "]),
|
30 | _templateObject19 = (0, _taggedTemplateLiteral3.default)(["\n /* padding: 2.4rem 2.4rem 0 2.4rem; */\n font-weight: bold;\n font-family: \"Google Sans\", Roboto, Arial, sans-serif;\n letter-spacing: 0.1px;\n line-height: 24px;\n color: #202124;\n font-weight: 400;\n width: 100%;\n word-break: break-word;\n\n pointer-events: none;\n "], ["\n /* padding: 2.4rem 2.4rem 0 2.4rem; */\n font-weight: bold;\n font-family: \"Google Sans\", Roboto, Arial, sans-serif;\n letter-spacing: 0.1px;\n line-height: 24px;\n color: #202124;\n font-weight: 400;\n width: 100%;\n word-break: break-word;\n\n pointer-events: none;\n "]),
|
31 | _templateObject20 = (0, _taggedTemplateLiteral3.default)(["\n width: 90%;\n min-width: 35rem;\n "], ["\n width: 90%;\n min-width: 35rem;\n "]),
|
32 | _templateObject21 = (0, _taggedTemplateLiteral3.default)(["\n font-size: 1.5rem;\n line-height: 1.75rem;\n /* text-align: justify; */\n "], ["\n font-size: 1.5rem;\n line-height: 1.75rem;\n /* text-align: justify; */\n "]),
|
33 | _templateObject22 = (0, _taggedTemplateLiteral3.default)(["\n margin: 2rem 0 2rem 0;\n\n font-size: 1.75rem;\n line-height: 1.75rem;\n "], ["\n margin: 2rem 0 2rem 0;\n\n font-size: 1.75rem;\n line-height: 1.75rem;\n "]),
|
34 | _templateObject23 = (0, _taggedTemplateLiteral3.default)(["\n background: none;\n color: #dadada;\n\n padding: 0.75rem 0 0.675rem 0.5rem;\n display: block;\n width: 25.5rem;\n border: none;\n border-radius: 0;\n border-bottom: 1px solid #dadada;\n :valid {\n color: black;\n }\n :focus {\n outline: none;\n }\n"], ["\n background: none;\n color: #dadada;\n\n padding: 0.75rem 0 0.675rem 0.5rem;\n display: block;\n width: 25.5rem;\n border: none;\n border-radius: 0;\n border-bottom: 1px solid #dadada;\n :valid {\n color: black;\n }\n :focus {\n outline: none;\n }\n"]),
|
35 | _templateObject24 = (0, _taggedTemplateLiteral3.default)(["\n color: #dadada;\n font-size: 1.5rem;\n font-weight: normal;\n position: absolute;\n pointer-events: none;\n left: 5px;\n top: 10px;\n transition: 300ms ease all;\n ", ":focus ~ &,\n ", ":valid ~ & {\n top: -10px;\n left: 0px;\n font-weight: bold;\n\n color: #224233;\n }\n"], ["\n color: #dadada;\n font-size: 1.5rem;\n font-weight: normal;\n position: absolute;\n pointer-events: none;\n left: 5px;\n top: 10px;\n transition: 300ms ease all;\n ", ":focus ~ &,\n ", ":valid ~ & {\n top: -10px;\n left: 0px;\n font-weight: bold;\n\n color: #224233;\n }\n"]),
|
36 | _templateObject25 = (0, _taggedTemplateLiteral3.default)(["\n position: relative;\n display: flex;\n :before {\n content: \"\";\n height: 2px;\n width: 0rem;\n bottom: 0px;\n position: absolute;\n background: #424242;\n transition: 300ms ease all;\n left: 0%;\n ", ":focus ~ & {\n width: 25.5rem;\n }\n }\n"], ["\n position: relative;\n display: flex;\n :before {\n content: \"\";\n height: 2px;\n width: 0rem;\n bottom: 0px;\n position: absolute;\n background: #424242;\n transition: 300ms ease all;\n left: 0%;\n ", ":focus ~ & {\n width: 25.5rem;\n }\n }\n"]),
|
37 | _templateObject26 = (0, _taggedTemplateLiteral3.default)(["\n margin-top: 0.25rem;\n\n width: 25.5rem;\n"], ["\n margin-top: 0.25rem;\n\n width: 25.5rem;\n"]),
|
38 | _templateObject27 = (0, _taggedTemplateLiteral3.default)(["\n border-top: 1rem solid #e5e5e5;\n border-bottom: 1rem solid #e5e5e5;\n padding-top: 1.25rem;\n "], ["\n border-top: 1rem solid #e5e5e5;\n border-bottom: 1rem solid #e5e5e5;\n padding-top: 1.25rem;\n "]),
|
39 | _templateObject28 = (0, _taggedTemplateLiteral3.default)(["\n font-weight: bold;\n font-size: 1.5rem;\n text-align: end;\n text-transform: uppercase;\n margin-bottom: 2rem;\n "], ["\n font-weight: bold;\n font-size: 1.5rem;\n text-align: end;\n text-transform: uppercase;\n margin-bottom: 2rem;\n "]),
|
40 | _templateObject29 = (0, _taggedTemplateLiteral3.default)(["\n font-family: \"Google Sans\", Roboto, Arial, sans-serif;\n letter-spacing: 0.1px;\n line-height: 24px;\n color: #202124;\n font-weight: 400;\n width: 100%;\n word-break: break-word;\n font-size: 1.75rem;\n font-weight: normal;\n margin: 0 0 2.75rem 0;\n "], ["\n font-family: \"Google Sans\", Roboto, Arial, sans-serif;\n letter-spacing: 0.1px;\n line-height: 24px;\n color: #202124;\n font-weight: 400;\n width: 100%;\n word-break: break-word;\n font-size: 1.75rem;\n font-weight: normal;\n margin: 0 0 2.75rem 0;\n "]),
|
41 | _templateObject30 = (0, _taggedTemplateLiteral3.default)(["\n display: flex;\n\n flex-direction: column;\n padding: 1.25rem 1.5rem;\n flex-direction: row;\n border-radius: 0.75rem;\n width: 10rem;\n font-weight: bold;\n "], ["\n display: flex;\n\n flex-direction: column;\n padding: 1.25rem 1.5rem;\n flex-direction: row;\n border-radius: 0.75rem;\n width: 10rem;\n font-weight: bold;\n "]),
|
42 | _templateObject31 = (0, _taggedTemplateLiteral3.default)(["\n background: none;\n padding: 0;\n\n margin-left: -4.8rem;\n margin-top: -1.6rem;\n "], ["\n background: none;\n padding: 0;\n\n margin-left: -4.8rem;\n margin-top: -1.6rem;\n "]);
|
43 |
|
44 | var _styledComponents = require("styled-components");
|
45 |
|
46 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
47 |
|
48 | var _Checkbox = require("./Checkbox");
|
49 |
|
50 | var _Checkbox2 = _interopRequireDefault(_Checkbox);
|
51 |
|
52 | var _defaultStyles = require("./defaultStyles");
|
53 |
|
54 | var _tinycolor = require("tinycolor2");
|
55 |
|
56 | var _tinycolor2 = _interopRequireDefault(_tinycolor);
|
57 |
|
58 | var _StyledButton = require("./StyledButton");
|
59 |
|
60 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
61 |
|
62 | var defaultWidth = 25.5;
|
63 |
|
64 | var ASTERISK = (0, _styledComponents2.default)("span")(_templateObject);
|
65 |
|
66 | var LABEL = _styledComponents2.default.div(_templateObject2);
|
67 | var SUBLABEL = _styledComponents2.default.div(_templateObject2);
|
68 | var ERROR = _styledComponents2.default.div(_templateObject3);
|
69 | var CONTAINER = _styledComponents2.default.form(_templateObject4);
|
70 | var SOCKET = _styledComponents2.default.div(_templateObject5, function (_ref) {
|
71 | var border = _ref.border;
|
72 | return border;
|
73 | });
|
74 | var TEXTAREA = {
|
75 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject6),
|
76 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject6),
|
77 | INPUT: _styledComponents2.default.textarea(_templateObject7)
|
78 | };
|
79 |
|
80 | var COMPOSITION = {
|
81 | NUMBER_INPUT: _styledComponents2.default.input.attrs({
|
82 | type: "number"
|
83 | })(_templateObject8, function (_ref2) {
|
84 | var isVertical = _ref2.isVertical;
|
85 | return isVertical ? "right" : "center";
|
86 | }),
|
87 | RANGE_INPUT: _styledComponents2.default.input.attrs(function (_ref3) {
|
88 | var isVertical = _ref3.isVertical;
|
89 | return isVertical ? {
|
90 | orient: "vertical",
|
91 | type: "range"
|
92 | } : {
|
93 | orient: "horizontal",
|
94 | type: "range"
|
95 | };
|
96 | })(function (_ref4) {
|
97 | var isVertical = _ref4.isVertical;
|
98 | return isVertical ? {
|
99 | WebkitAppearance: "slider-vertical",
|
100 | writingMode: "bt-lr",
|
101 | width: "3rem"
|
102 | } : {
|
103 | width: "15rem"
|
104 | };
|
105 | }),
|
106 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject9),
|
107 | HEAD: (0, _styledComponents2.default)("div")(_templateObject6),
|
108 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject10, function (_ref5) {
|
109 | var isVertical = _ref5.isVertical;
|
110 | return isVertical ? "0 0 1rem" : "0 0.75rem 0 0";
|
111 | }, function (_ref6) {
|
112 | var isVertical = _ref6.isVertical;
|
113 | return isVertical ? "0.5rem 0" : "0.5rem 1rem";
|
114 | }, function (_ref7) {
|
115 | var isVertical = _ref7.isVertical;
|
116 | return isVertical ? "center" : "flex-start";
|
117 | }),
|
118 | OPTIONS: (0, _styledComponents2.default)("div")(_templateObject11),
|
119 | CURRENT_OPTION: (0, _styledComponents2.default)("div")(_templateObject12, function (_ref8) {
|
120 | var isVertical = _ref8.isVertical;
|
121 | return isVertical ? "column" : "row";
|
122 | })
|
123 | };
|
124 |
|
125 | var CHECKBOX = {
|
126 | DESIGN: (0, _styledComponents2.default)("label")(_templateObject6),
|
127 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject13),
|
128 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject14),
|
129 | INPUT: (0, _styledComponents2.default)(_Checkbox2.default)(_templateObject6)
|
130 | };
|
131 |
|
132 | var SELECTONE = {
|
133 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject6),
|
134 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject15),
|
135 | DROPDOWN: (0, _styledComponents2.default)("div")(_templateObject11)
|
136 | };
|
137 |
|
138 | var SELECTMANY = {
|
139 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject6),
|
140 |
|
141 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject16),
|
142 | DROPDOWN: (0, _styledComponents2.default)("div")(_templateObject11)
|
143 | };
|
144 | var MULTIPLECHOICE = {
|
145 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject6),
|
146 | SUBLABEL: (0, _styledComponents2.default)(SUBLABEL)(_templateObject17),
|
147 | FOOTER: (0, _styledComponents2.default)("div")(_templateObject18),
|
148 |
|
149 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject19)
|
150 | };
|
151 | var INFO = {
|
152 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject20),
|
153 | TEXT: (0, _styledComponents2.default)("div")(_templateObject21),
|
154 | SUBLABEL: (0, _styledComponents2.default)(SUBLABEL)(_templateObject22),
|
155 | FOOTER: (0, _styledComponents2.default)("div")(_templateObject18),
|
156 |
|
157 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject19)
|
158 | };
|
159 |
|
160 | var TEXTINPUT = {};
|
161 |
|
162 | TEXTINPUT.INPUT = (0, _styledComponents2.default)("input")(_templateObject23);
|
163 | TEXTINPUT.SOCKET = (0, _styledComponents2.default)(SOCKET)(_templateObject6);
|
164 | TEXTINPUT.LABEL = (0, _styledComponents2.default)(LABEL)(_templateObject24, TEXTINPUT.INPUT, TEXTINPUT.INPUT);
|
165 | TEXTINPUT.BAR = (0, _styledComponents2.default)("div")(_templateObject25, TEXTINPUT.INPUT);
|
166 | TEXTINPUT.SUBLABEL = (0, _styledComponents2.default)("div")(_templateObject26);
|
167 |
|
168 | var GROUP = {
|
169 | SOCKET: (0, _styledComponents2.default)(SOCKET)(_templateObject27),
|
170 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject28),
|
171 | CHILDREN: (0, _styledComponents2.default)("div")(_templateObject6)
|
172 | };
|
173 | var INPUTBOX = {
|
174 | CONTAINER: (0, _styledComponents2.default)(SOCKET)(_templateObject6),
|
175 | LABEL: (0, _styledComponents2.default)(LABEL)(_templateObject29),
|
176 | SUBLABEL: (0, _styledComponents2.default)(LABEL)(_templateObject6)
|
177 | };
|
178 |
|
179 | var SUBMIT = {
|
180 | TRIGGER: (0, _styledComponents2.default)(_StyledButton.BUTTON).attrs(function (props) {
|
181 | return {
|
182 | colors: !props.theme ? _defaultStyles.buttonStyles.neutral : {
|
183 | transition: "mix",
|
184 |
|
185 | on: {
|
186 | backgroundColor: (0, _tinycolor2.default)(props.theme.alpha).toString(),
|
187 | color: "#fff"
|
188 | },
|
189 | off: {
|
190 | backgroundColor: (0, _tinycolor2.default)(props.theme.beta).toString(),
|
191 | color: "#fff"
|
192 | },
|
193 | disabled: { backgroundColor: "#ccc", color: "#888" },
|
194 | diff: 30
|
195 | }
|
196 | };
|
197 | })(_templateObject30),
|
198 | CONTAINER: (0, _styledComponents2.default)(SOCKET)(_templateObject31)
|
199 | };
|
200 |
|
201 | exports.SUBMIT = SUBMIT;
|
202 | exports.GROUP = GROUP;
|
203 | exports.ERROR = ERROR;
|
204 | exports.TEXTINPUT = TEXTINPUT;
|
205 | exports.SELECTONE = SELECTONE;
|
206 | exports.CONTAINER = CONTAINER;
|
207 | exports.SELECTMANY = SELECTMANY;
|
208 | exports.CHECKBOX = CHECKBOX;
|
209 | exports.TEXTAREA = TEXTAREA;
|
210 | exports.COMPOSITION = COMPOSITION;
|
211 | exports.MULTIPLECHOICE = MULTIPLECHOICE;
|
212 | exports.INPUTBOX = INPUTBOX;
|
213 | exports.ASTERISK = ASTERISK;
|
214 | exports.INFO = INFO; |
\ | No newline at end of file |