ui-neu/dist/components/forms/Check.js

Neu UI, a responsive React component library.

import _taggedTemplateLiteral from "/home/runner/work/neu_ui/neu_ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  :not(:checked),\n  :checked {\n    position: absolute;\n    left: -9999px;\n  }\n\n  :not(:checked) + label,\n  :checked + label {\n    position: relative;\n    padding-left: 1.95em;\n    cursor: pointer;\n    color: rgb(139, 139, 139);\n    font-weight: 300;\n    font-family: roboto, helvetica, sans-serif;\n  }\n\n  :not(:checked) + label:before,\n  :checked + label:before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 1.25em;\n    height: 1.25em;\n    background: rgba(204, 218, 226, 0.349);\n    border-radius: 4px;\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  :not(:checked) + label:after,\n  :checked + label:after {\n    content: \"\\2713\\0020\";\n    position: absolute;\n    top: 0.15em;\n    left: 0.22em;\n    font-size: 1.3em;\n    line-height: 0.8;\n    color: #999;\n    transition: all 0.2s;\n    font-family: \"Lucida Sans Unicode\", \"Arial Unicode MS\", Arial;\n  }\n\n  :not(:checked) + label:after {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  :checked + label:after {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :disabled:not(:checked) + label:before,\n  :disabled:checked + label:before {\n    box-shadow: none;\n    border-color: #bbb;\n    background-color: #ddd;\n  }\n\n  :disabled:checked + label:after {\n    color: #999;\n  }\n\n  :disabled + label {\n    color: #aaa;\n  }\n\n  :checked:focus + label:before,\n  :not(:checked):focus + label:before {\n    border: 2px solid blue;\n  }\n"], ["\n  :not(:checked),\n  :checked {\n    position: absolute;\n    left: -9999px;\n  }\n\n  :not(:checked) + label,\n  :checked + label {\n    position: relative;\n    padding-left: 1.95em;\n    cursor: pointer;\n    color: rgb(139, 139, 139);\n    font-weight: 300;\n    font-family: roboto, helvetica, sans-serif;\n  }\n\n  :not(:checked) + label:before,\n  :checked + label:before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 1.25em;\n    height: 1.25em;\n    background: rgba(204, 218, 226, 0.349);\n    border-radius: 4px;\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  :not(:checked) + label:after,\n  :checked + label:after {\n    content: \"\\\\2713\\\\0020\";\n    position: absolute;\n    top: 0.15em;\n    left: 0.22em;\n    font-size: 1.3em;\n    line-height: 0.8;\n    color: #999;\n    transition: all 0.2s;\n    font-family: \"Lucida Sans Unicode\", \"Arial Unicode MS\", Arial;\n  }\n\n  :not(:checked) + label:after {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  :checked + label:after {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :disabled:not(:checked) + label:before,\n  :disabled:checked + label:before {\n    box-shadow: none;\n    border-color: #bbb;\n    background-color: #ddd;\n  }\n\n  :disabled:checked + label:after {\n    color: #999;\n  }\n\n  :disabled + label {\n    color: #aaa;\n  }\n\n  :checked:focus + label:before,\n  :not(:checked):focus + label:before {\n    border: 2px solid blue;\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  :not(:checked),\n  :checked {\n    position: absolute;\n    left: -9999px;\n  }\n\n  :not(:checked) + label,\n  :checked + label {\n    position: relative;\n    padding-left: 1.95em;\n    cursor: pointer;\n    color: rgb(139, 139, 139);\n    font-weight: 300;\n    font-family: roboto, helvetica, sans-serif;\n  }\n\n  :not(:checked) + label:before,\n  :checked + label:before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 1.25em;\n    height: 1.25em;\n    background: rgba(204, 218, 226, 0.349);\n    border-radius: 1.25em;\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  :not(:checked) + label:after,\n  :checked + label:after {\n    content: \"\\2022\\0020\";\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    font-size: 5rem;\n    line-height: 0.8;\n    color: #999; /* tick color */\n    transition: all 0.2s;\n    font-family: \"Lucida Sans Unicode\", \"Arial Unicode MS\", Arial;\n  }\n\n  :not(:checked) + label:after {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  :checked + label:after {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :disabled:not(:checked) + label:before,\n  :disabled:checked + label:before {\n    box-shadow: none;\n    border-color: #bbb;\n    background-color: #ddd;\n  }\n\n  :disabled:checked + label:after {\n    color: #999;\n  }\n\n  :disabled + label {\n    color: #aaa;\n  }\n"], ["\n  :not(:checked),\n  :checked {\n    position: absolute;\n    left: -9999px;\n  }\n\n  :not(:checked) + label,\n  :checked + label {\n    position: relative;\n    padding-left: 1.95em;\n    cursor: pointer;\n    color: rgb(139, 139, 139);\n    font-weight: 300;\n    font-family: roboto, helvetica, sans-serif;\n  }\n\n  :not(:checked) + label:before,\n  :checked + label:before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 1.25em;\n    height: 1.25em;\n    background: rgba(204, 218, 226, 0.349);\n    border-radius: 1.25em;\n    box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n      inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  :not(:checked) + label:after,\n  :checked + label:after {\n    content: \"\\\\2022\\\\0020\";\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    font-size: 5rem;\n    line-height: 0.8;\n    color: #999; /* tick color */\n    transition: all 0.2s;\n    font-family: \"Lucida Sans Unicode\", \"Arial Unicode MS\", Arial;\n  }\n\n  :not(:checked) + label:after {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  :checked + label:after {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :disabled:not(:checked) + label:before,\n  :disabled:checked + label:before {\n    box-shadow: none;\n    border-color: #bbb;\n    background-color: #ddd;\n  }\n\n  :disabled:checked + label:after {\n    color: #999;\n  }\n\n  :disabled + label {\n    color: #aaa;\n  }\n"]);

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

  return data;
}

import React from "react";
import styled from "styled-components";
var StyledRadioInput = styled.input.attrs({
  type: "radio"
})(_templateObject(), function (props) {
  return props.isMobile ? '-1.29rem' : '-1.6rem';
}, function (props) {
  return props.isMobile ? '-0.19rem' : '-0.96rem';
});
var StyledCheckInput = styled.input.attrs({
  type: "checkbox"
})(_templateObject2());
export var Check = function Check(_ref) {
  var disabled = _ref.disabled,
      id = _ref.id,
      label = _ref.label,
      name = _ref.name;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(StyledCheckInput, {
    id: id,
    name: name ? name : null,
    disabled: disabled ? disabled : null
  }), /*#__PURE__*/React.createElement("label", {
    htmlFor: id
  }, label)));
};
export var Radio = function Radio(_ref2) {
  var disabled = _ref2.disabled,
      id = _ref2.id,
      label = _ref2.label,
      name = _ref2.name;
  var isMobile = /Android|iPhone|Mobile/i.test(navigator.userAgent);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(StyledRadioInput, {
    id: id,
    name: name ? name : null,
    disabled: disabled ? disabled : null,
    isMobile: isMobile
  }), /*#__PURE__*/React.createElement("label", {
    htmlFor: id
  }, label)));
};
Check.defaultProps = {
  disabled: false,
  id: null,
  label: null,
  name: null
};