itsa-react-maskedinput
Version:
Beautiful functional masked input-element for react
835 lines (748 loc) • 1.08 MB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
__webpack_require__(1);
__webpack_require__(5);
__webpack_require__(13);
__webpack_require__(15);
__webpack_require__(18);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var React = __webpack_require__(20),
ReactDOM = __webpack_require__(56),
Input = __webpack_require__(203),
Checkbox = __webpack_require__(224),
MaskedInput = __webpack_require__(225),
REG_EXP_PHONE = /^\(\d{0,3}\) \d{0,3}\-\d{0,4}$/;
/*******************************************************
* Custom form-Component
*******************************************************/
var MyForm = function (_React$Component) {
_inherits(MyForm, _React$Component);
function MyForm(props) {
_classCallCheck(this, MyForm);
var _this = _possibleConstructorReturn(this, (MyForm.__proto__ || Object.getPrototypeOf(MyForm)).call(this, props));
var instance = _this;
instance.state = {
formValid: false,
formValidated: false
};
instance.focusUnvalidated = instance.focusUnvalidated.bind(instance);
instance.formValid = instance.formValid.bind(instance);
instance.handleSubmit = instance.handleSubmit.bind(instance);
return _this;
}
_createClass(MyForm, [{
key: "focusUnvalidated",
value: function focusUnvalidated() {
var instance = this;
var validated = instance.props.validated;
if (!validated.name) {
instance.refs.name.focus();
} else if (!validated.email) {
instance.refs.email.focus();
} else if (!validated.phone) {
instance.refs.phone.focus();
} else if (!validated.password) {
instance.refs.password.focus();
} else if (!validated.termsAccepted) {
instance.refs.terms.focus();
}
}
}, {
key: "formValid",
value: function formValid() {
var validated = this.props.validated;
return validated.name && validated.email && validated.phone && validated.password && validated.termsAccepted;
}
}, {
key: "handleSubmit",
value: function handleSubmit(e) {
var formValid = this.formValid();
e.preventDefault();
this.setState({
formValid: formValid,
formValidated: true
});
this.props.onSubmit && this.props.onSubmit({
formValid: formValid,
target: this
});
}
}, {
key: "render",
value: function render() {
var formClass = "pure-form pure-form-stacked";
var props = this.props,
formValid = this.state.formValid,
formValidated = this.state.formValidated,
validatedText = formValid ? "valid" : "invalid",
validatedMsg = React.createElement(
"legend",
{ className: "formheader" },
"Form is ",
validatedText
),
generalTermsMsgClass = "checkbox-text" + (formValidated && !props.termsAccepted ? " checkbox-error-text" : "");
formValid || (formClass += " invalid");
return React.createElement(
"form",
{
className: formClass,
onSubmit: this.handleSubmit },
validatedMsg,
React.createElement(
"fieldset",
null,
React.createElement(Input, {
autoFocus: true,
className: "pure-input-1",
errorMsg: "Enter your name",
formValidated: formValidated,
markRequired: true,
markValidated: true,
onChange: props.onChangeName,
placeholder: "Name",
ref: "name",
tabIndex: 1,
validated: props.validated.name,
value: props.name }),
React.createElement(Input, {
className: "pure-input-1",
errorMsg: "Emailformat is: user@example.com",
formValidated: formValidated,
markRequired: true,
markValidated: true,
onChange: props.onChangeEmail,
placeholder: "Email address",
ref: "email",
tabIndex: 2,
validated: props.validated.email,
value: props.email }),
React.createElement(MaskedInput, {
className: "pure-input-1",
errorMsg: "Phone number format: (555) 555-5555",
formValidated: formValidated,
helpText: "format: (555) 555-5555",
markRequired: true,
markValidated: true,
mask: "(111) 111-1111",
onChange: props.onChangePhone,
placeholder: "Phone",
ref: "phone",
tabIndex: 4,
validated: props.validated.phone,
value: props.phone }),
React.createElement(Input, {
className: "pure-input-1",
errorMsg: "Use at least 5 characters",
formValidated: formValidated,
markRequired: true,
markValidated: true,
onChange: props.onChangePassword,
placeholder: "Password",
ref: "password",
tabIndex: 5,
type: "password",
validated: props.validated.password,
value: props.password }),
React.createElement(Checkbox, {
checked: props.termsAccepted,
formValidated: formValidated,
onChange: props.onTermsAccepted,
ref: "terms",
tabIndex: 7,
validated: props.validated.termsAccepted }),
React.createElement(
"span",
{ className: "itsa-input-required-msg-after" },
"General terms accepted"
),
React.createElement(
"div",
{ className: generalTermsMsgClass },
"You need to accept our terms"
),
React.createElement(
"div",
{ className: "itsa-input-required-msg-before" },
"required fields"
),
React.createElement(
"button",
{
className: "pure-button pure-button-primary",
tabIndex: 5,
type: "submit" },
"Validate Form"
)
)
);
}
}]);
return MyForm;
}(React.Component);
var MyForm2 = function (_React$Component2) {
_inherits(MyForm2, _React$Component2);
function MyForm2(props) {
_classCallCheck(this, MyForm2);
var _this2 = _possibleConstructorReturn(this, (MyForm2.__proto__ || Object.getPrototypeOf(MyForm2)).call(this, props));
var instance = _this2;
instance.state = {
formValid: false,
formValidated: false
};
instance.focusUnvalidated = instance.focusUnvalidated.bind(instance);
instance.formValid = instance.formValid.bind(instance);
instance.handleSubmit = instance.handleSubmit.bind(instance);
return _this2;
}
_createClass(MyForm2, [{
key: "focusUnvalidated",
value: function focusUnvalidated() {
var instance = this;
var validated = instance.props.validated;
if (!validated.name) {
instance.refs.name.focus();
} else if (!validated.email) {
instance.refs.email.focus();
} else if (!validated.phone) {
instance.refs.phone.focus();
} else if (!validated.password) {
instance.refs.password.focus();
} else if (!validated.termsAccepted) {
instance.refs.terms.focus();
}
}
}, {
key: "formValid",
value: function formValid() {
var validated = this.props.validated;
return validated.name && validated.email && validated.phone && validated.password && validated.termsAccepted;
}
}, {
key: "handleSubmit",
value: function handleSubmit(e) {
var formValid = this.formValid();
e.preventDefault();
this.setState({
formValid: formValid,
formValidated: true
});
this.props.onSubmit && this.props.onSubmit({
formValid: formValid,
target: this
});
}
}, {
key: "render",
value: function render() {
var formClass = "pure-form pure-form-stacked";
var props = this.props,
formValid = this.state.formValid,
formValidated = this.state.formValidated,
validatedText = formValid ? "valid" : "invalid",
validatedMsg = React.createElement(
"legend",
{ className: "formheader" },
"Form is ",
validatedText
),
generalTermsMsgClass = "checkbox-text" + (formValidated && !props.termsAccepted ? " checkbox-error-text" : "");
formValid || (formClass += " invalid");
return React.createElement(
"form",
{
className: formClass,
key: "1",
onSubmit: this.handleSubmit },
validatedMsg,
React.createElement(
"fieldset",
null,
React.createElement(Input, {
autoFocus: true,
className: "pure-input-1",
errorMsg: "Enter your name",
formValidated: formValidated,
markRequired: true,
markValidated: true,
onChange: props.onChangeName,
placeholder: "Name",
ref: "name",
tabIndex: 1,
validated: props.validated.name,
value: props.name }),
React.createElement(Input, {
className: "pure-input-1",
errorMsg: "Emailformat is: user@example.com",
formValidated: formValidated,
markRequired: true,
markValidated: true,
onChange: props.onChangeEmail,
placeholder: "Email address",
ref: "email",
tabIndex: 2,
validated: props.validated.email,
value: props.email }),
React.createElement(MaskedInput, {
className: "pure-input-1",
errorMsg: "Phone number format: (555) 555-5555",
formValidated: formValidated,
helpText: "format: (555) 555-5555",
markRequired: true,
markValidated: true,
mask: "(111) 111-1111",
onChange: props.onChangePhone,
placeholder: "Phone",
ref: "phone",
tabIndex: 4,
validated: props.validated.phone,
value: props.phone }),
React.createElement(Input, {
className: "pure-input-1",
errorMsg: "Use at least 5 characters",
formValidated: formValidated,
markRequired: true,
markValidated: true,
onChange: props.onChangePassword,
placeholder: "Password",
ref: "password",
tabIndex: 5,
type: "password",
validated: props.validated.password,
value: props.password }),
React.createElement(Checkbox, {
checked: props.termsAccepted,
formValidated: formValidated,
onChange: props.onTermsAccepted,
ref: "terms",
tabIndex: 7,
validated: props.validated.termsAccepted }),
React.createElement(
"span",
{ className: "itsa-input-required-msg-after" },
"General terms accepted"
),
React.createElement(
"div",
{ className: generalTermsMsgClass },
"You need to accept our terms"
),
React.createElement(
"div",
{ className: "itsa-input-required-msg-before" },
"required fields"
),
React.createElement(
"button",
{
className: "pure-button pure-button-primary",
tabIndex: 5,
type: "submit" },
"Validate Form"
)
)
);
}
}]);
return MyForm2;
}(React.Component);
/*******************************************************
* Event-hanldlers
*******************************************************/
var handleChangeName = function handleChangeName(e) {
redefineProps('name', e.target.value);
};
var handleChangeEmail = function handleChangeEmail(e) {
redefineProps('email', e.target.value);
};
var handleChangePassword = function handleChangePassword(e) {
redefineProps('password', e.target.value);
};
var handleChangePhone = function handleChangePhone(e) {
redefineProps('phone', e.target.value);
};
var handleChangeComment = function handleChangeComment(e) {
redefineProps('comment', e.target.value);
};
var handleSubmit = function handleSubmit(e) {
var formValid = e.formValid,
form = e.target;
formValid || form.focusUnvalidated();
};
var handleTermsAccepted = function handleTermsAccepted(e) {
redefineProps('termsAccepted');
};
/*******************************************************
* Validation
*******************************************************/
var validate = function validate(value, validators) {
var valid = void 0;
if (!validators) {
return true;
}
validators.some(function (validatorKey) {
validatorsDefinition[validatorKey] && (valid = validatorsDefinition[validatorKey](value));
return !valid;
});
return !!valid;
};
var validatorsDefinition = {
checked: function checked(val) {
return !!val;
},
email: function email(val) {
return val.itsa_isValidEmail(); // comes from itsa-jsext
},
password: function password(val) {
return val && val.length >= 5;
},
phone: function phone(val) {
return REG_EXP_PHONE.test(val) || !val;
},
required: function required(val) {
return !!val;
}
};
var validateProps = function validateProps(props) {
props.itsa_each(function (value, key) {
// only inspect primary type-properties
if (_typeof(props[key]) !== "object") {
props.validated[key] = validate(props[key], props.validators[key]);
}
});
};
/*******************************************************
* props
*******************************************************/
var props = {
ign: true,
name: '',
email: '',
password: '',
comment: '',
// phone: '',
termsAccepted: false,
onChangeName: handleChangeName,
onChangeEmail: handleChangeEmail,
onChangePassword: handleChangePassword,
onChangePhone: handleChangePhone,
onChangeComment: handleChangeComment,
onSubmit: handleSubmit,
onTermsAccepted: handleTermsAccepted,
validated: {},
validators: {
email: ["required", "email"],
name: ["required"],
phone: ["required", "phone"],
termsAccepted: ["checked"],
password: ["required", "password"]
}
};
var redefineProps = function redefineProps(key, value) {
if (key === 'termsAccepted') {
props.termsAccepted = !props.termsAccepted;
} else {
props[key] = value;
}
validateProps(props);
renderForm(props);
};
/*******************************************************
* React render form
*******************************************************/
var renderForm = function renderForm(props, start) {
if (start) {
console.warn('render initially');
ReactDOM.render(React.createElement(MyForm, props), document.getElementById("component-container"));
} else {
console.warn('render again');
ReactDOM.render(React.createElement(MyForm2, props), document.getElementById("component-container"));
}
};
/*******************************************************
* Initialization
*******************************************************/
validateProps(props);
renderForm(props, true);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(2);
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(4)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../css-loader/index.js!../../sass-loader/index.js!./pure-min.css", function() {
var newContent = require("!!../../css-loader/index.js!../../sass-loader/index.js!./pure-min.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(3)();
// imports
// module
exports.push([module.id, "/*!\nPure v0.6.2\nCopyright 2013 Yahoo!\nLicensed under the BSD License.\nhttps://github.com/yahoo/pure/blob/master/LICENSE.md\n*/\n/*!\nnormalize.css v^3.0 | MIT License | git.io/normalize\nCopyright (c) Nicolas Gallagher and Jonathan Neal\n*/\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\n.pure-button:focus, a:active, a:hover {\n outline: 0; }\n\n.pure-table, table {\n border-collapse: collapse;\n border-spacing: 0; }\n\nhtml {\n font-family: sans-serif;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%; }\n\nbody {\n margin: 0; }\n\narticle, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {\n display: block; }\n\naudio, canvas, progress, video {\n display: inline-block;\n vertical-align: baseline; }\n\naudio:not([controls]) {\n display: none;\n height: 0; }\n\n[hidden], template {\n display: none; }\n\na {\n background-color: transparent; }\n\nabbr[title] {\n border-bottom: 1px dotted; }\n\nb, optgroup, strong {\n font-weight: 700; }\n\ndfn {\n font-style: italic; }\n\nh1 {\n font-size: 2em;\n margin: .67em 0; }\n\nmark {\n background: #ff0;\n color: #000; }\n\nsmall {\n font-size: 80%; }\n\nsub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline; }\n\nsup {\n top: -.5em; }\n\nsub {\n bottom: -.25em; }\n\nimg {\n border: 0; }\n\nsvg:not(:root) {\n overflow: hidden; }\n\nfigure {\n margin: 1em 40px; }\n\nhr {\n box-sizing: content-box;\n height: 0; }\n\npre, textarea {\n overflow: auto; }\n\ncode, kbd, pre, samp {\n font-family: monospace,monospace;\n font-size: 1em; }\n\nbutton, input, optgroup, select, textarea {\n color: inherit;\n font: inherit;\n margin: 0; }\n\n.pure-button, input {\n line-height: normal; }\n\nbutton {\n overflow: visible; }\n\nbutton, select {\n text-transform: none; }\n\nbutton, html input[type=button], input[type=reset], input[type=submit] {\n -webkit-appearance: button;\n cursor: pointer; }\n\nbutton[disabled], html input[disabled] {\n cursor: default; }\n\nbutton::-moz-focus-inner, input::-moz-focus-inner {\n border: 0;\n padding: 0; }\n\ninput[type=checkbox], input[type=radio] {\n box-sizing: border-box;\n padding: 0; }\n\ninput[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {\n height: auto; }\n\ninput[type=search] {\n -webkit-appearance: textfield;\n box-sizing: content-box; }\n\n.pure-button, .pure-form input:not([type]), .pure-menu {\n box-sizing: border-box; }\n\ninput[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {\n -webkit-appearance: none; }\n\nfieldset {\n border: 1px solid silver;\n margin: 0 2px;\n padding: .35em .625em .75em; }\n\nlegend, td, th {\n padding: 0; }\n\nlegend {\n border: 0; }\n\n.hidden, [hidden] {\n display: none !important; }\n\n.pure-img {\n max-width: 100%;\n height: auto;\n display: block; }\n\n.pure-g {\n letter-spacing: -.31em;\n text-rendering: optimizespeed;\n font-family: FreeSans,Arimo,\"Droid Sans\",Helvetica,Arial,sans-serif;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-flex-flow: row wrap;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-align-content: flex-start;\n -ms-flex-line-pack: start;\n align-content: flex-start; }\n\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n table .pure-g {\n display: block; } }\n\n.opera-only :-o-prefocus, .pure-g {\n word-spacing: -.43em; }\n\n.pure-u, .pure-u-1, .pure-u-1-1, .pure-u-1-12, .pure-u-1-2, .pure-u-1-24, .pure-u-1-3, .pure-u-1-4, .pure-u-1-5, .pure-u-1-6, .pure-u-1-8, .pure-u-10-24, .pure-u-11-12, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-2-24, .pure-u-2-3, .pure-u-2-5, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24, .pure-u-3-24, .pure-u-3-4, .pure-u-3-5, .pure-u-3-8, .pure-u-4-24, .pure-u-4-5, .pure-u-5-12, .pure-u-5-24, .pure-u-5-5, .pure-u-5-6, .pure-u-5-8, .pure-u-6-24, .pure-u-7-12, .pure-u-7-24, .pure-u-7-8, .pure-u-8-24, .pure-u-9-24 {\n letter-spacing: normal;\n word-spacing: normal;\n vertical-align: top;\n text-rendering: auto;\n display: inline-block;\n zoom: 1; }\n\n.pure-g [class*=pure-u] {\n font-family: sans-serif; }\n\n.pure-u-1-24 {\n width: 4.1667%; }\n\n.pure-u-1-12, .pure-u-2-24 {\n width: 8.3333%; }\n\n.pure-u-1-8, .pure-u-3-24 {\n width: 12.5%; }\n\n.pure-u-1-6, .pure-u-4-24 {\n width: 16.6667%; }\n\n.pure-u-1-5 {\n width: 20%; }\n\n.pure-u-5-24 {\n width: 20.8333%; }\n\n.pure-u-1-4, .pure-u-6-24 {\n width: 25%; }\n\n.pure-u-7-24 {\n width: 29.1667%; }\n\n.pure-u-1-3, .pure-u-8-24 {\n width: 33.3333%; }\n\n.pure-u-3-8, .pure-u-9-24 {\n width: 37.5%; }\n\n.pure-u-2-5 {\n width: 40%; }\n\n.pure-u-10-24, .pure-u-5-12 {\n width: 41.6667%; }\n\n.pure-u-11-24 {\n width: 45.8333%; }\n\n.pure-u-1-2, .pure-u-12-24 {\n width: 50%; }\n\n.pure-u-13-24 {\n width: 54.1667%; }\n\n.pure-u-14-24, .pure-u-7-12 {\n width: 58.3333%; }\n\n.pure-u-3-5 {\n width: 60%; }\n\n.pure-u-15-24, .pure-u-5-8 {\n width: 62.5%; }\n\n.pure-u-16-24, .pure-u-2-3 {\n width: 66.6667%; }\n\n.pure-u-17-24 {\n width: 70.8333%; }\n\n.pure-u-18-24, .pure-u-3-4 {\n width: 75%; }\n\n.pure-u-19-24 {\n width: 79.1667%; }\n\n.pure-u-4-5 {\n width: 80%; }\n\n.pure-u-20-24, .pure-u-5-6 {\n width: 83.3333%; }\n\n.pure-u-21-24, .pure-u-7-8 {\n width: 87.5%; }\n\n.pure-u-11-12, .pure-u-22-24 {\n width: 91.6667%; }\n\n.pure-u-23-24 {\n width: 95.8333%; }\n\n.pure-u-1, .pure-u-1-1, .pure-u-24-24, .pure-u-5-5 {\n width: 100%; }\n\n.pure-button {\n display: inline-block;\n zoom: 1;\n white-space: nowrap;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n\n.pure-button::-moz-focus-inner {\n padding: 0;\n border: 0; }\n\n.pure-button-group {\n letter-spacing: -.31em;\n text-rendering: optimizespeed; }\n\n.opera-only :-o-prefocus, .pure-button-group {\n word-spacing: -.43em; }\n\n.pure-button {\n font-family: inherit;\n font-size: 100%;\n padding: .5em 1em;\n color: #444;\n color: rgba(0, 0, 0, 0.8);\n border: 1px solid #999;\n border: transparent;\n background-color: #E6E6E6;\n text-decoration: none;\n border-radius: 2px; }\n\n.pure-button-hover, .pure-button:focus, .pure-button:hover {\n filter: alpha(opacity=90);\n background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));\n background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); }\n\n.pure-button-active, .pure-button:active {\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;\n border-color: #000\\9; }\n\n.pure-button-disabled, .pure-button-disabled:active, .pure-button-disabled:focus, .pure-button-disabled:hover, .pure-button[disabled] {\n border: none;\n background-image: none;\n filter: alpha(opacity=40);\n opacity: .4;\n cursor: not-allowed;\n box-shadow: none;\n pointer-events: none; }\n\n.pure-button-hidden {\n display: none; }\n\n.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected {\n background-color: #0078e7;\n color: #fff; }\n\n.pure-button-group .pure-button {\n letter-spacing: normal;\n word-spacing: normal;\n vertical-align: top;\n text-rendering: auto;\n margin: 0;\n border-radius: 0;\n border-right: 1px solid #111;\n border-right: 1px solid rgba(0, 0, 0, 0.2); }\n\n.pure-button-group .pure-button:first-child {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px; }\n\n.pure-button-group .pure-button:last-child {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n border-right: none; }\n\n.pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=tel], .pure-form input[type=color], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=text], .pure-form select, .pure-form textarea {\n padding: .5em .6em;\n display: inline-block;\n border: 1px solid #ccc;\n box-shadow: inset 0 1px 3px #ddd;\n border-radius: 4px;\n vertical-align: middle;\n box-sizing: border-box; }\n\n.pure-form input:not([type]) {\n padding: .5em .6em;\n display: inline-block;\n border: 1px solid #ccc;\n box-shadow: inset 0 1px 3px #ddd;\n border-radius: 4px; }\n\n.pure-form input[type=color] {\n padding: .2em .5em; }\n\n.pure-form input:not([type]):focus, .pure-form input[type=password]:focus, .pure-form input[type=email]:focus, .pure-form input[type=url]:focus, .pure-form input[type=date]:focus, .pure-form input[type=month]:focus, .pure-form input[type=time]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=week]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=color]:focus, .pure-form input[type=number]:focus, .pure-form input[type=search]:focus, .pure-form input[type=text]:focus, .pure-form select:focus, .pure-form textarea:focus {\n outline: 0;\n border-color: #129FEA; }\n\n.pure-form input[type=file]:focus, .pure-form input[type=checkbox]:focus, .pure-form input[type=radio]:focus {\n outline: #129FEA auto 1px; }\n\n.pure-form .pure-checkbox, .pure-form .pure-radio {\n margin: .5em 0;\n display: block; }\n\n.pure-form input:not([type])[disabled], .pure-form input[type=password][disabled], .pure-form input[type=email][disabled], .pure-form input[type=url][disabled], .pure-form input[type=date][disabled], .pure-form input[type=month][disabled], .pure-form input[type=time][disabled], .pure-form input[type=datetime][disabled], .pure-form input[type=datetime-local][disabled], .pure-form input[type=week][disabled], .pure-form input[type=tel][disabled], .pure-form input[type=color][disabled], .pure-form input[type=number][disabled], .pure-form input[type=search][disabled], .pure-form input[type=text][disabled], .pure-form select[disabled], .pure-form textarea[disabled] {\n cursor: not-allowed;\n background-color: #eaeded;\n color: #cad2d3; }\n\n.pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] {\n background-color: #eee;\n color: #777;\n border-color: #ccc; }\n\n.pure-form input:focus:invalid, .pure-form select:focus:invalid, .pure-form textarea:focus:invalid {\n color: #b94a48;\n border-color: #e9322d; }\n\n.pure-form input[type=file]:focus:invalid:focus, .pure-form input[type=checkbox]:focus:invalid:focus, .pure-form input[type=radio]:focus:invalid:focus {\n outline-color: #e9322d; }\n\n.pure-form select {\n height: 2.25em;\n border: 1px solid #ccc;\n background-color: #fff; }\n\n.pure-form select[multiple] {\n height: auto; }\n\n.pure-form label {\n margin: .5em 0 .2em; }\n\n.pure-form fieldset {\n margin: 0;\n padding: .35em 0 .75em;\n border: 0; }\n\n.pure-form legend {\n display: block;\n width: 100%;\n padding: .3em 0;\n margin-bottom: .3em;\n color: #333;\n border-bottom: 1px solid #e5e5e5; }\n\n.pure-form-stacked input:not([type]), .pure-form-stacked input[type=password], .pure-form-stacked input[type=email], .pure-form-stacked input[type=url], .pure-form-stacked input[type=date], .pure-form-stacked input[type=month], .pure-form-stacked input[type=time], .pure-form-stacked input[type=datetime], .pure-form-stacked input[type=datetime-local], .pure-form-stacked input[type=week], .pure-form-stacked input[type=tel], .pure-form-stacked input[type=color], .pure-form-stacked input[type=file], .pure-form-stacked input[type=number], .pure-form-stacked input[type=search], .pure-form-stacked input[type=text], .pure-form-stacked label, .pure-form-stacked select, .pure-form-stacked textarea {\n display: block;\n margin: .25em 0; }\n\n.pure-form-aligned .pure-help-inline, .pure-form-aligned input, .pure-form-aligned select, .pure-form-aligned textarea, .pure-form-message-inline {\n display: inline-block;\n vertical-align: middle; }\n\n.pure-form-aligned textarea {\n vertical-align: top; }\n\n.pure-form-aligned .pure-control-group {\n margin-bottom: .5em; }\n\n.pure-form-aligned .pure-control-group label {\n text-align: right;\n display: inline-block;\n vertical-align: middle;\n width: 10em;\n margin: 0 1em 0 0; }\n\n.pure-form-aligned .pure-controls {\n margin: 1.5em 0 0 11em; }\n\n.pure-form .pure-input-rounded, .pure-form input.pure-input-rounded {\n border-radius: 2em;\n padding: .5em 1em; }\n\n.pure-form .pure-group fieldset {\n margin-bottom: 10px; }\n\n.pure-form .pure-group input, .pure-form .pure-group textarea {\n display: block;\n padding: 10px;\n margin: 0 0 -1px;\n border-radius: 0;\n position: relative;\n top: -1px; }\n\n.pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus {\n z-index: 3; }\n\n.pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child {\n top: 1px;\n border-radius: 4px 4px 0 0;\n margin: 0; }\n\n.pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child {\n top: 1px;\n border-radius: 4px;\n margin: 0; }\n\n.pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child {\n top: -2px;\n border-radius: 0 0 4px 4px;\n margin: 0; }\n\n.pure-form .pure-group button {\n margin: .35em 0; }\n\n.pure-form .pure-input-1 {\n width: 100%; }\n\n.pure-form .pure-input-3-4 {\n width: 75%; }\n\n.pure-form .pure-input-2-3 {\n width: 66%; }\n\n.pure-form .pure-input-1-2 {\n width: 50%; }\n\n.pure-form .pure-input-1-3 {\n width: 33%; }\n\n.pure-form .pure-input-1-4 {\n width: 25%; }\n\n.pure-form .pure-help-inline, .pure-form-message-inline {\n display: inline-block;\n padding-left: .3em;\n color: #666;\n vertical-align: middle;\n font-size: .875em; }\n\n.pure-form-message {\n display: block;\n color: #666;\n font-size: .875em; }\n\n@media only screen and (max-width: 480px) {\n .pure-form button[type=submit] {\n margin: .7em 0 0; }\n .pure-form input:not([type]), .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=tel], .pure-form input[type=color], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=text], .pure-form label {\n margin-bottom: .3em;\n display: block; }\n .pure-group input:not([type]), .pure-group input[type=password], .pure-group input[type=email], .pure-group input[type=url], .pure-group input[type=date], .pure-group input[type=month], .pure-group input[type=time], .pure-group input[type=datetime], .pure-group input[type=datetime-local], .pure-group input[type=week], .pure-group input[type=tel], .pure-group input[type=color], .pure-group input[type=number], .pure-group input[type=search], .pure-group input[type=text] {\n margin-bottom: 0; }\n .pure-form-aligned .pure-control-group label {\n margin-bottom: .3em;\n text-align: left;\n display: block;\n width: 100%; }\n .pure-form-aligned .pure-controls {\n margin: 1.5em 0 0; }\n .pure-form .pure-help-inline, .pure-form-message, .pure-form-message-inline {\n display: block;\n font-size: .75em;\n padding: .2em 0 .8em; } }\n\n.pure-menu-fixed {\n position: fixed;\n left: 0;\n top: 0;\n z-index: 3; }\n\n.pure-menu-item, .pure-menu-list {\n position: relative; }\n\n.pure-menu-list {\n list-style: none;\n margin: 0;\n padding: 0; }\n\n.pure-menu-item {\n padding: 0;\n margin: 0;\n height: 100%; }\n\n.pure-menu-heading, .pure-menu-link {\n display: block;\n text-decoration: none;\n white-space: nowrap; }\n\n.pure-menu-horizontal {\n width: 100%;\n white-space: nowrap; }\n\n.pure-menu-horizontal .pure-menu-list {\n display: inline-block; }\n\n.pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-item, .pure-menu-horizontal .pure-menu-separator {\n display: inline-block;\n zoom: 1;\n vertical-align: middle; }\n\n.pure-menu-item .pure-menu-item {\n display: block; }\n\n.pure-menu-children {\n display: none;\n position: absolute;\n left: 100%;\n top: 0;\n margin: 0;\n padding: 0;\n z-index: 3; }\n\n.pure-menu-horizontal .pure-menu-children {\n left: 0;\n top: auto;\n width: inherit; }\n\n.pure-menu-active > .pure-menu-children, .pure-menu-allow-hover:hover > .pure-menu-children {\n display: block;\n position: absolute; }\n\n.pure-menu-has-children > .pure-menu-link:after {\n padding-left: .5em;\n content: \"\\25B8\";\n font-size: small; }\n\n.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {\n content: \"\\25BE\"; }\n\n.pure-menu-scrollable {\n overflow-y: scroll;\n overflow-x: hidden; }\n\n.pure-menu-scrollable .pure-menu-list {\n display: block; }\n\n.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {\n display: inline-block; }\n\n.pure-menu-horizontal.pure-menu-scrollable {\n white-space: nowrap;\n overflow-y: hidden;\n overflow-x: auto;\n -ms-overflow-style: none;\n -webkit-overflow-scrolling: touch;\n padding: .5em 0; }\n\n.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {\n display: none; }\n\n.pure-menu-horizontal .pure-menu-children .pure-menu-separator, .pure-menu-separator {\n background-color: #ccc;\n height: 1px;\n margin: .3em 0; }\n\n.pure-menu-horizontal .pure-menu-separator {\n width: 1px;\n height: 1.3em;\n margin: 0 .3em; }\n\n.pure-menu-horizontal .pure-menu-children .pure-menu-separator {\n display: block;\n width: auto; }\n\n.pure-menu-heading {\n text-transform: uppercase;\n color: #565d64; }\n\n.pure-menu-link {\n color: #777; }\n\n.pure-menu-children {\n background-color: #fff; }\n\n.pure-menu-disabled, .pure-menu-heading, .pure-menu-link {\n padding: .5em 1em; }\n\n.pure-menu-disabled {\n opacity: .5; }\n\n.pure-menu-disabled .pure-menu-link:hover {\n background-color: transparent; }\n\n.pure-menu-active > .pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {\n background-color: #eee; }\n\n.pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited {\n color: #000; }\n\n.pure-table {\n empty-cells: show;\n border: 1px solid #cbcbcb; }\n\n.pure-table caption {\n color: #000;\n font: italic 85%/1 arial,sans-serif;\n padding: 1em 0;\n text-align: center; }\n\n.pure-table td, .pure-table th {\n border-left: 1px solid #cbcbcb;\n border-width: 0 0 0 1px;\n font-size: inherit;\n margin: 0;\n overflow: visible;\n padding: .5em 1em; }\n\n.pure-table td:first-child, .pure-table th:first-child {\n border-left-width: 0; }\n\n.pure-table thead {\n background-color: #e0e0e0;\n color: #000;\n text-align: left;\n vertical-align: bottom; }\n\n.pure-table td {\n background-color: transparent; }\n\n.pure-table-odd td, .pure-table-striped tr:nth-child(2n-1) td {\n background-color: #f2f2f2; }\n\n.pure-table-bordered td {\n border-bottom: 1px solid #cbcbcb; }\n\n.pure-table-bordered tbody > tr:last-child > td {\n border-bottom-width: 0; }\n\n.pure-table-horizontal td, .pure-table-horizontal th {\n border-width: 0 0 1px;\n border-bottom: 1px solid #cbcbcb; }\n\n.pure-table-horizontal tbody > tr:last-child > td {\n border-bottom-width: 0; }\n", ""]);
// exports
/***/ }),
/* 3 */
/***/ (function(module, exports) {
"use strict";
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function () {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for (var i = 0; i < this.length; i++) {
var item = this[i];
if (item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function (modules, mediaQuery) {
if (typeof modules === "string") modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for (var i = 0; i < this.length; i++) {
var id = this[i][0];
if (typeof id === "number") alreadyImportedModules[id] = true;
}
for (i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isOldIE = memoize(function() {
return /msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0,
styleElementsInsertedAtTop = [];
module.exports = function(list, options) {
if(false) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
// By default, add <style> tags to the bottom of <head>.
if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
}
function addStylesToDom(styles, options) {
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(list) {
var styles = [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
styles.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
return styles;
}
function insertStyleElement(options, styleElement) {
var head = getHeadElement();
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
if (options.insertAt === "top") {
if(!lastStyleElementInsertedAtTop) {
head.insertBefore(styleElement, head.firstChild);
} else if(lastStyleElementInsertedAtTop.nextSibling) {
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
} else {
head.appendChild(styleElement);
}
styleElementsInsertedAtTop.push(styleElement);
} else if (options.insertAt === "bottom") {
head.appendChild(styleElement);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
}
}
function removeStyleElement(styleElement) {
styleElement.parentNode.removeChild(styleElement);
var idx = styleElementsInsertedAtTop.indexOf(styleElement);
if(idx >= 0) {
styleElementsInsertedAtTop.splice(idx, 1);
}
}
function createStyleElement(options) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
insertStyleElement(options, styleElement);
return styleElement;
}
function createLinkElement(options) {
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
insertStyleElement(options, linkElement);
return linkElement;
}
function addStyle(obj, options) {
var styleElement, update, remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement(options));
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else if(obj.sourceMap &&
typeof URL === "function" &&
typeof URL.createObjectURL === "function" &&
typeof URL.revokeObjectURL === "function" &&
typeof Blob === "function" &&
typeof btoa === "function") {
styleElement = createLinkElement(options);
update = updateLink.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
if(styleElement.href)
URL.revokeObjectURL(styleElement.href);
};
} else {
styleElement = createStyleElement(options);
update = applyToTag.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
};
}
update(obj);
return function updateStyle(newObj) {
if(newObj) {
if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.source