pure-styled-components/lib/components/Form/Form.js

Styled Component design system based on Pure CSS for React/Preact

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  /*\nBox-model set to false because we're setting a height on select elements, which\nalso have border and padding. This is done because some browsers don't render\nthe padding. We explicitly set the box-model for select elements to border-box,\nso we can ignore the csslint warning.\n*/\n\n  & input[type=\"text\"],\n  & input[type=\"password\"],\n  & input[type=\"email\"],\n  & input[type=\"url\"],\n  & input[type=\"date\"],\n  & input[type=\"month\"],\n  & input[type=\"time\"],\n  & input[type=\"datetime\"],\n  & input[type=\"datetime-local\"],\n  & input[type=\"week\"],\n  & input[type=\"number\"],\n  & input[type=\"search\"],\n  & input[type=\"tel\"],\n  & input[type=\"color\"],\n  & select,\n  & textarea {\n    padding: 0.5em 0.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\n  /*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n  & input:not([type]) {\n    padding: 0.5em 0.6em;\n    display: inline-block;\n    border: 1px solid #ccc;\n    box-shadow: inset 0 1px 3px #ddd;\n    border-radius: 4px;\n    box-sizing: border-box;\n  }\n\n  /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */\n  /* May be able to remove this tweak as color inputs become more standardized across browsers. */\n  & input[type=\"color\"] {\n    padding: 0.2em 0.5em;\n  }\n\n  & input[type=\"text\"]:focus,\n  & input[type=\"password\"]:focus,\n  & input[type=\"email\"]:focus,\n  & input[type=\"url\"]:focus,\n  & input[type=\"date\"]:focus,\n  & input[type=\"month\"]:focus,\n  & input[type=\"time\"]:focus,\n  & input[type=\"datetime\"]:focus,\n  & input[type=\"datetime-local\"]:focus,\n  & input[type=\"week\"]:focus,\n  & input[type=\"number\"]:focus,\n  & input[type=\"search\"]:focus,\n  & input[type=\"tel\"]:focus,\n  & input[type=\"color\"]:focus,\n  & select:focus,\n  & textarea:focus {\n    outline: 0;\n    border-color: #129fea;\n  }\n\n  /*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n  & input:not([type]):focus {\n    outline: 0;\n    border-color: #129fea;\n  }\n\n  & input[type=\"file\"]:focus,\n  & input[type=\"radio\"]:focus,\n  & input[type=\"checkbox\"]:focus {\n    outline: thin solid #129fea;\n    outline: 1px auto #129fea;\n  }\n  & .pure-checkbox,\n  & .pure-radio {\n    margin: 0.5em 0;\n    display: block;\n  }\n\n  & input[type=\"text\"][disabled],\n  & input[type=\"password\"][disabled],\n  & input[type=\"email\"][disabled],\n  & input[type=\"url\"][disabled],\n  & input[type=\"date\"][disabled],\n  & input[type=\"month\"][disabled],\n  & input[type=\"time\"][disabled],\n  & input[type=\"datetime\"][disabled],\n  & input[type=\"datetime-local\"][disabled],\n  & input[type=\"week\"][disabled],\n  & input[type=\"number\"][disabled],\n  & input[type=\"search\"][disabled],\n  & input[type=\"tel\"][disabled],\n  & input[type=\"color\"][disabled],\n  & select[disabled],\n  & textarea[disabled] {\n    cursor: not-allowed;\n    background-color: #eaeded;\n    color: #cad2d3;\n  }\n\n  /*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n  & input:not([type])[disabled] {\n    cursor: not-allowed;\n    background-color: #eaeded;\n    color: #cad2d3;\n  }\n  & input[readonly],\n  & select[readonly],\n  & textarea[readonly] {\n    background-color: #eee; /* menu hover bg color */\n    color: #777; /* menu text color */\n    border-color: #ccc;\n  }\n\n  & input:focus:invalid,\n  & textarea:focus:invalid,\n  & select:focus:invalid {\n    color: #b94a48;\n    border-color: #e9322d;\n  }\n  & input[type=\"file\"]:focus:invalid:focus,\n  & input[type=\"radio\"]:focus:invalid:focus,\n  & input[type=\"checkbox\"]:focus:invalid:focus {\n    outline-color: #e9322d;\n  }\n  & select {\n    /* Normalizes the height; padding is not sufficient. */\n    height: 2.25em;\n    border: 1px solid #ccc;\n    background-color: white;\n  }\n  & select[multiple] {\n    height: auto;\n  }\n  & label {\n    margin: 0.5em 0 0.2em;\n  }\n  & fieldset {\n    margin: 0;\n    padding: 0.35em 0 0.75em;\n    border: 0;\n  }\n  & legend {\n    display: block;\n    width: 100%;\n    padding: 0.3em 0;\n    margin-bottom: 0.3em;\n    color: #333;\n    border-bottom: 1px solid #e5e5e5;\n  }\n  ", ";\n\n  ", ";\n\n  /* Rounded Inputs */\n  & input.pure-input-rounded,\n  & .pure-input-rounded {\n    border-radius: 2em;\n    padding: 0.5em 1em;\n  }\n\n  /* Grouped Inputs */\n  & .pure-group fieldset {\n    margin-bottom: 10px;\n  }\n  & .pure-group input,\n  & .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-group input:focus,\n  & .pure-group textarea:focus {\n    z-index: 3;\n  }\n  & .pure-group input:first-child,\n  & .pure-group textarea:first-child {\n    top: 1px;\n    border-radius: 4px 4px 0 0;\n    margin: 0;\n  }\n  & .pure-group input:first-child:last-child,\n  & .pure-group textarea:first-child:last-child {\n    top: 1px;\n    border-radius: 4px;\n    margin: 0;\n  }\n  & .pure-group input:last-child,\n  & .pure-group textarea:last-child {\n    top: -2px;\n    border-radius: 0 0 4px 4px;\n    margin: 0;\n  }\n  & .pure-group button {\n    margin: 0.35em 0;\n  }\n\n  /* Inline help for forms */\n  /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */\n  & .pure-help-inline,\n  .pure-form-message-inline {\n    display: inline-block;\n    padding-left: 0.3em;\n    color: #666;\n    vertical-align: middle;\n    font-size: 0.875em;\n  }\n\n  /* Block help for forms */\n  .pure-form-message {\n    display: block;\n    color: #666;\n    font-size: 0.875em;\n  }\n\n  @media only screen and (max-width: 480px) {\n    & button[type=\"submit\"] {\n      margin: 0.7em 0 0;\n    }\n\n    & input:not([type]),\n    & input[type=\"text\"],\n    & input[type=\"password\"],\n    & input[type=\"email\"],\n    & input[type=\"url\"],\n    & input[type=\"date\"],\n    & input[type=\"month\"],\n    & input[type=\"time\"],\n    & input[type=\"datetime\"],\n    & input[type=\"datetime-local\"],\n    & input[type=\"week\"],\n    & input[type=\"number\"],\n    & input[type=\"search\"],\n    & input[type=\"tel\"],\n    & input[type=\"color\"],\n    & label {\n      margin-bottom: 0.3em;\n      display: block;\n    }\n\n    .pure-group input:not([type]),\n    .pure-group input[type=\"text\"],\n    .pure-group input[type=\"password\"],\n    .pure-group input[type=\"email\"],\n    .pure-group input[type=\"url\"],\n    .pure-group input[type=\"date\"],\n    .pure-group input[type=\"month\"],\n    .pure-group input[type=\"time\"],\n    .pure-group input[type=\"datetime\"],\n    .pure-group input[type=\"datetime-local\"],\n    .pure-group input[type=\"week\"],\n    .pure-group input[type=\"number\"],\n    .pure-group input[type=\"search\"],\n    .pure-group input[type=\"tel\"],\n    .pure-group input[type=\"color\"] {\n      margin-bottom: 0;\n    }\n\n    /* NOTE: pure-help-inline is deprecated. Use &-message-inline instead. */\n    & .pure-help-inline,\n    & .pure-form-message-inline,\n    & .pure-form-message {\n      display: block;\n      font-size: 0.75em;\n      /* Increased bottom padding to make it group with its related input element. */\n      padding: 0.2em 0 0.8em;\n    }\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

var BaseForm = function BaseForm(_ref) {
  var className = _ref.className,
      children = _ref.children;
  return React.createElement("form", {
    type: "Form",
    className: className
  }, children);
};
/**
 * Pure CSS and React Form. Just wrap your regular DOM <input> tags and go!
 *
 * @param {*} { className, children }
 */


var Form = styled(BaseForm)(_templateObject(), function (props) {
  return props.stacked ? "\n  & input[type=\"text\"],\n  & input[type=\"password\"],\n  & input[type=\"email\"],\n  & input[type=\"url\"],\n  & input[type=\"date\"],\n  & input[type=\"month\"],\n  & input[type=\"time\"],\n  & input[type=\"datetime\"],\n  & input[type=\"datetime-local\"],\n  & input[type=\"week\"],\n  & input[type=\"number\"],\n  & input[type=\"search\"],\n  & input[type=\"tel\"],\n  & input[type=\"color\"],\n  & input[type=\"file\"],\n  & select,\n  & label,\n  & textarea {\n    display: block;\n    margin: 0.25em 0;\n  }\n\n  /*\nNeed to separate out the :not() selector from the rest of the CSS 2.1 selectors\nsince IE8 won't execute CSS that contains a CSS3 selector.\n*/\n  & input:not([type]) {\n    display: block;\n    margin: 0.25em 0;\n  }" : "";
}, function (props) {
  return props.aligned ? "\n  & input,\n& textarea,\n& select,\n/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */\n& .pure-help-inline,\n.pure-form-message-inline {\n    display: inline-block;\n    *display: inline;\n    *zoom: 1;\n    vertical-align: middle;\n  }\n  & textarea {\n    vertical-align: top;\n  }\n\n  /* Aligned Forms */\n  & .pure-control-group {\n    margin-bottom: 0.5em;\n  }\n  & .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-controls {\n    margin: 1.5em 0 0 11em;\n  }\n  @media only screen and (max-width: 480px) {\n  \n    & .pure-control-group label {\n      margin-bottom: 0.3em;\n      text-align: left;\n      display: block;\n      width: 100%;\n    }\n\n    & .pure-controls {\n      margin: 1.5em 0 0 0;\n    }\n  }\n  " : "";
});
Form.propTypes = {
  /**
   * Aligns form elements so that labels are right aligned (on the left)
   * and form inputs are left aligned (on the right).
   *
   * e.g.
   * ```md
   *    Label Here: []
   *  Longer Label: []
   * ```
   */
  aligned: PropTypes.boolean,

  /**
   * Stacks form inputs into 1 column (since <Form> defaults to inline elements)
   */
  stacked: PropTypes.boolean,

  /**
   * Automatically generated class name passed to component
   * from Styled Components
   */
  className: PropTypes.string.isRequired,

  /**
   * Child components (array or single element)
   */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
/** @component */

export default Form;
//# sourceMappingURL=Form.js.map