@buffetjs/styles/dist/components/Checkbox/index.js

Buffetjs Styles - The styling solution of Buffetjs

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _colors = _interopRequireDefault(require("../../assets/styles/colors"));

var _sizes = _interopRequireDefault(require("../../assets/styles/sizes"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  cursor: pointer;\n  margin: 0;\n  position: relative;\n  width: ", ";\n  &:focus,\n  &:active {\n    outline: 0;\n  }\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    margin-top: calc(-", " / 2);\n    width: ", ";\n    height: ", ";\n    border: 1px solid rgba(16, 22, 34, 0.15);\n    background-color: #fdfdfd;\n    border-radius: 3px;\n    box-sizing: border-box;\n  }\n  &:after {\n    display: none;\n    content: '\f00c';\n    font-family: 'FontAwesome';\n    position: absolute;\n    left: 0px;\n    top: 55%;\n    margin-top: calc(-", " / 2);\n    width: ", ";\n    height: ", ";\n    text-align: center;\n    font-size: 9px;\n    color: ", ";\n    line-height: ", ";\n  }\n  &:checked {\n    &:after {\n      display: block;\n    }\n  }\n\n  ", "\n\n  &:disabled {\n    background-color: ", ";\n    cursor: initial;\n    &:after {\n      color: ", ";\n    }\n  }\n  & + label {\n    display: inline-block;\n    font-weight: ", ";\n    font-size: ", ";\n  }\n"], ["\n  cursor: pointer;\n  margin: 0;\n  position: relative;\n  width: ", ";\n  &:focus,\n  &:active {\n    outline: 0;\n  }\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    margin-top: calc(-", " / 2);\n    width: ", ";\n    height: ", ";\n    border: 1px solid rgba(16, 22, 34, 0.15);\n    background-color: #fdfdfd;\n    border-radius: 3px;\n    box-sizing: border-box;\n  }\n  &:after {\n    display: none;\n    content: '\\f00c';\n    font-family: 'FontAwesome';\n    position: absolute;\n    left: 0px;\n    top: 55%;\n    margin-top: calc(-", " / 2);\n    width: ", ";\n    height: ", ";\n    text-align: center;\n    font-size: 9px;\n    color: ", ";\n    line-height: ", ";\n  }\n  &:checked {\n    &:after {\n      display: block;\n    }\n  }\n\n  ", "\n\n  &:disabled {\n    background-color: ", ";\n    cursor: initial;\n    &:after {\n      color: ", ";\n    }\n  }\n  & + label {\n    display: inline-block;\n    font-weight: ", ";\n    font-size: ", ";\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) } })); }

var Checkbox = _styledComponents["default"].input(_templateObject(), _sizes["default"].checkbox.width, _sizes["default"].checkbox.width, _sizes["default"].checkbox.width, _sizes["default"].checkbox.height, _sizes["default"].checkbox.width, _sizes["default"].checkbox.width, _sizes["default"].checkbox.height, _colors["default"].darkBlue, _sizes["default"].checkbox.height, function (_ref) {
  var someChecked = _ref.someChecked;

  if (someChecked) {
    return "\n        &:after {\n          content: '\f068';\n          display: block;\n          top: 50%;\n          font-size: 10px;\n        }\n      ";
  }

  return '';
}, _colors["default"].greyIconBkgd, _colors["default"].brightGrey, _sizes["default"].fontWeight.semiBold, _sizes["default"].input.fontSize);

Checkbox.defaultProps = {
  someChecked: false,
  type: 'checkbox'
};
Checkbox.propTypes = {
  someChecked: _propTypes["default"].bool,
  type: _propTypes["default"].string
};
var _default = Checkbox;
exports["default"] = _default;