{"componentChunkName":"component---src-templates-category-js","path":"/mixins/form","result":{"pageContext":{"node":{"frontmatter":{"category":"mixins","description":"Improves default browser form input, label, select and textarea styles","slug":"form","title":"Form"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Form\",\n  \"slug\": \"form\",\n  \"category\": \"mixins\",\n  \"description\": \"Improves default browser form input, label, select and textarea styles\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.form-element(options);\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Useful to use as a starting point when designing the element styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Form elements currently supported are \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"label\"), \", \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"input\"), \", \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"select\"), \" and \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"textarea\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Options may vary depending on the form element\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Label\"), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"To style a label element use the following mixin. This mixin accepts 3 parameters with the following default values:\", mdx(\"p\", null, \"\\xA0\"), mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"font-size: 1.2rem;\\nfont-weight: 700;\\ncolor: @color[primary];\")), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.label(@size, @weight, @color);\"), mdx(\"div\", {\n    className: \"form-container\"\n  }, mdx(\"label\", {\n    className: \"form__label--01\",\n    htmlFor: \"text-input\"\n  }, \"Form Label\"))), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"To customize adjust the values, for example:\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.label(18px, 400, @color[secondary]);\"), mdx(\"div\", {\n    className: \"form-container\"\n  }, mdx(\"label\", {\n    className: \"form__label--02\",\n    htmlFor: \"text-input\"\n  }, \"Form Label\"))), mdx(\"h2\", null, \"Input\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.input(@type);\")), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"This library currently includes 4 types of text input styles:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Default\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Rounded \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dark\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dark Rounded\")), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.input();\"), mdx(\"div\", {\n    className: \"form-container\"\n  }, mdx(\"input\", {\n    className: \"form__input--01\",\n    placeholder: \"Enter Text\"\n  }))), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.input(rounded);\"), mdx(\"div\", {\n    className: \"form-container\"\n  }, mdx(\"input\", {\n    className: \"form__input--02\",\n    placeholder: \"Enter Text\"\n  }))), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.input(dark);\"), mdx(\"div\", {\n    className: \"form-container\"\n  }, mdx(\"input\", {\n    className: \"form__input--03\",\n    placeholder: \"Enter Text\"\n  }))), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.input(dark-rounded);\"), mdx(\"div\", {\n    className: \"form-container\"\n  }, mdx(\"input\", {\n    className: \"form__input--04\",\n    placeholder: \"Enter Text\"\n  }))), mdx(\"hr\", null), mdx(\"h2\", null, \"Select\"), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Select Element default style:\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.select();\"), mdx(FormSelect, {\n    selectClassName: \"form__select--01\",\n    mdxType: \"FormSelect\"\n  })), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Select Element style with radius:\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.select(rounded);\"), mdx(FormSelect, {\n    selectClassName: \"form__select--02\",\n    mdxType: \"FormSelect\"\n  })), mdx(\"hr\", null), mdx(\"h2\", null, \"Textarea\"), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Browser default textarea styles are plain and unatractive. Using the mixin below, you can instatly size it so it's more visible.\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#form.textarea();\"), mdx(\"div\", {\n    className: \"form-container\"\n  }, mdx(\"textarea\", {\n    className: \"form__textarea\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"},"documentationLinks":{"Installation":{"linkText":"Installation","linkRoute":"/documentation/installation"},"Settings":{"linkText":"Settings","linkRoute":"/documentation/settings"}},"mixinLinks":{"Border":{"linkText":"Border","linkRoute":"/mixins/border"},"Button":{"linkText":"Button","linkRoute":"/mixins/button"},"Font":{"linkText":"Font","linkRoute":"/mixins/font"},"Display":{"linkText":"Display","linkRoute":"/mixins/display"},"Form":{"linkText":"Form","linkRoute":"/mixins/form"},"Gradient":{"linkText":"Gradient","linkRoute":"/mixins/gradient"},"Grid":{"linkText":"Grid","linkRoute":"/mixins/grid"},"Hide":{"linkText":"Hide","linkRoute":"/mixins/hide"},"Position":{"linkText":"Position","linkRoute":"/mixins/position"},"Shape":{"linkText":"Shape","linkRoute":"/mixins/shape"}},"variablesLinks":{"Breakpoints":{"linkText":"Breakpoints","linkRoute":"/variables/breakpoints"},"Color Names":{"linkText":"Color Names","linkRoute":"/variables/color-names"}},"category":"mixins"}},"staticQueryHashes":[]}