react-misc-toolbox/dist/StyledMultipleChoice.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CONTAINER = exports.FOOTNOTE_SIGN = exports.SUBLABEL = exports.ROW = exports.LABEL = exports.ICON = exports.CHECKBOX_CONTAINER = exports.CONTENT = exports.RADIO_TRIGGER = exports.CHECKBOX_TRIGGER = exports.OPTION = undefined;

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)([""], [""]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  margin: ", ";\n\n  max-width: 100%;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  margin: ", ";\n\n  max-width: 100%;\n  flex-direction: row;\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  margin: 0 -2.4rem;\n  max-width: 100%;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  margin: 0 -2.4rem;\n  max-width: 100%;\n  flex-direction: row;\n"]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  flex-direction: column;\n\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  width: 100%;\n"]),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"]),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(["\n  margin-right: 2.4rem;\n  display: flex;\n  justify-content: flex-start;\n"], ["\n  margin-right: 2.4rem;\n  display: flex;\n  justify-content: flex-start;\n"]),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(["\n  @media (max-width: ", "px) {\n    display: ", ";\n  }\n  min-width: ", "rem;\n  height: ", "rem;\n  margin-left: 1rem;\n  position: absolute;\n  right: 2.4rem;\n  border-radius: 0.25rem;\n  border: 2px solid white;\n  background-image: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n"], ["\n  @media (max-width: ", "px) {\n    display: ", ";\n  }\n  min-width: ", "rem;\n  height: ", "rem;\n  margin-left: 1rem;\n  position: absolute;\n  right: 2.4rem;\n  border-radius: 0.25rem;\n  border: 2px solid white;\n  background-image: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n"]),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  width: 100%;\n  justify-content: space-evenly;\n  flex-direction: column;\n"], ["\n  display: flex;\n  width: 100%;\n  justify-content: space-evenly;\n  flex-direction: column;\n"]),
    _templateObject9 = (0, _taggedTemplateLiteral3.default)(["\n  display: flex;\n  justify-content: space-between;\n  \n  margin: 0 -2.5rem 0 0;\n  /* padding: 0.5rem ", "rem 0.5rem 1rem;\n  margin: 0rem -", "rem 0rem 0rem; */\n  \n    padding: 0.5rem 3rem 0.75rem 2rem;\n  \n  /* @media (max-width: 425px) {\n  }\n  @media (min-width: 425px) {\n    padding: 0.5rem 9rem 0.75rem 2rem;\n  } */\n  :first-child {\n    background: linear-gradient(to right, ", ", ", ");\n    /* color: ", "; */\n    color: white;\n  }\n  /* :last-child {\n    background: #fdd;\n    //color: white;\n  } */\n"], ["\n  display: flex;\n  justify-content: space-between;\n  \n  margin: 0 -2.5rem 0 0;\n  /* padding: 0.5rem ", "rem 0.5rem 1rem;\n  margin: 0rem -", "rem 0rem 0rem; */\n  \n    padding: 0.5rem 3rem 0.75rem 2rem;\n  \n  /* @media (max-width: 425px) {\n  }\n  @media (min-width: 425px) {\n    padding: 0.5rem 9rem 0.75rem 2rem;\n  } */\n  :first-child {\n    background: linear-gradient(to right, ", ", ", ");\n    /* color: ", "; */\n    color: white;\n  }\n  /* :last-child {\n    background: #fdd;\n    //color: white;\n  } */\n"]);

var _defaultStyles = require("./defaultStyles");

var _tinycolor = require("tinycolor2");

var _tinycolor2 = _interopRequireDefault(_tinycolor);

var _StyledButton = require("./StyledButton");

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _StyledGeneric = require("./StyledGeneric");

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

var CONTAINER = (0, _styledComponents2.default)("div")(_templateObject);

var RADIO_TRIGGER = (0, _styledComponents2.default)(_StyledButton.BUTTON).attrs(function (props) {
  return {
    colors: !props.theme ? _defaultStyles.buttonStyles.neutral : {
      transition: "mix",
      on: {
        backgroundColor: (0, _tinycolor2.default)(props.theme.beta).lighten(55).toString(),
        color: "#000"
      },
      off: {
        backgroundColor: (0, _tinycolor2.default)(props.theme.alpha).lighten(100).toString(),
        color: "#000"
      },
      disabled: { backgroundColor: "#ccc", color: "#888" },
      diff: 30
    }
  };
})(_templateObject2, function (_ref) {
  var _ref$padding = _ref.padding,
      padding = _ref$padding === undefined ? "0 2.4rem 0" : _ref$padding;
  return padding;
}, function (_ref2) {
  var _ref2$margin = _ref2.margin,
      margin = _ref2$margin === undefined ? "0 -2.4rem 0" : _ref2$margin;
  return margin;
});

var CHECKBOX_TRIGGER = (0, _styledComponents2.default)(_StyledButton.BUTTON).attrs(function (props) {
  return {
    colors: !props.theme ? _defaultStyles.buttonStyles.neutral : {
      transition: "mix",
      on: {
        backgroundColor: (0, _tinycolor2.default)(props.theme.beta).lighten(55).toString(),
        color: "#000"
      },
      off: {
        backgroundColor: (0, _tinycolor2.default)(props.theme.alpha).lighten(50).toString(),
        color: "#000"
      },
      disabled: { backgroundColor: "#ccc", color: "#888" },
      diff: 30
    }
  };
})(_templateObject3, function (_ref3) {
  var _ref3$padding = _ref3.padding,
      padding = _ref3$padding === undefined ? "0 2.4rem 0" : _ref3$padding;
  return padding;
});

var OPTION = (0, _styledComponents2.default)("div")(_templateObject4);
var CONTENT = (0, _styledComponents2.default)("div")(_templateObject5);
var CHECKBOX_CONTAINER = (0, _styledComponents2.default)("div")(_templateObject6);
var ICON = (0, _styledComponents2.default)("div")(_templateObject7, function (_ref4) {
  var renderIconMediaMin = _ref4.renderIconMediaMin;
  return renderIconMediaMin;
}, function (_ref5) {
  var renderIconMediaMin = _ref5.renderIconMediaMin;
  return renderIconMediaMin !== 0 ? "none" : "flex";
}, function (_ref6) {
  var iconSize = _ref6.iconSize;
  return iconSize;
}, function (_ref7) {
  var iconSize = _ref7.iconSize;
  return iconSize;
}, function (_ref8) {
  var src = _ref8.src;
  return "url(\"" + src + "\")";
});

var LABEL = (0, _styledComponents2.default)("div")(_templateObject8);
var ROW = (0, _styledComponents2.default)("div")(_templateObject9, function (_ref9) {
  var _ref9$iconSize = _ref9.iconSize,
      iconSize = _ref9$iconSize === undefined ? 4 : _ref9$iconSize;
  return iconSize + 4;
}, function (_ref10) {
  var _ref10$iconSize = _ref10.iconSize,
      iconSize = _ref10$iconSize === undefined ? 4 : _ref10$iconSize;
  return iconSize + 4;
}, function (props) {
  return props.isOn ? props.theme.beta : props.theme.alpha;
}, function (props) {
  return props.isOn ? props.theme.alpha : props.theme.gamma;
}, function (props) {
  return props.isOn ? "white" : props.theme.beta;
});

ROW.defaultProps = {
  theme: {
    primary: "salmon",
    secondary: "papayawhip"
  }
};
var SUBLABEL = (0, _styledComponents2.default)("div")(_templateObject);

exports.OPTION = OPTION;
exports.CHECKBOX_TRIGGER = CHECKBOX_TRIGGER;
exports.RADIO_TRIGGER = RADIO_TRIGGER;
exports.CONTENT = CONTENT;
exports.CHECKBOX_CONTAINER = CHECKBOX_CONTAINER;
exports.ICON = ICON;
exports.LABEL = LABEL;
exports.ROW = ROW;
exports.SUBLABEL = SUBLABEL;
exports.FOOTNOTE_SIGN = _StyledGeneric.FOOTNOTE_SIGN;
exports.CONTAINER = CONTAINER;