@coko/client/dist/theme/elements/Radio.js

Client side common code for coko apps

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _styledComponents = require("styled-components");
var _toolkit = require("../../toolkit");
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
/* stylelint-disable string-quotes */
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var checking = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0.8);\n  }\n\n  20% {\n    transform: scale(1.2);\n  }\n\n  80% {\n    transform: scale(1);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n"])));
var _default = {
  Root: (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition: all ", ";\n\n    &:hover {\n      span {\n        color: ", ";\n\n        &::before {\n          animation-duration: ", ";\n          animation-name: ", ";\n          box-shadow: 0 0 0 ", "\n            ", ";\n        }\n      }\n    }\n  "])), (0, _toolkit.th)('transitionDuration'), function (props) {
    return props.checked ? 'inherit' : props.theme.colorPrimary;
  }, (0, _toolkit.th)('transitionDuration'), function (props) {
    return props.checked ? 'none' : checking;
  }, (0, _toolkit.th)('borderWidth'), function (props) {
    return props.checked ? 'currentColor' : props.theme.colorPrimary;
  }),
  Label: (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-style: italic;\n\n    &::before {\n      /* This is not a real border (box-shadow provides that), so not themed as such */\n      background: ", ";\n      border: calc(", " / 4) solid white;\n      border-radius: 50%;\n      box-shadow: 0 0 0 ", " currentColor;\n      color: ", ";\n      content: ' ';\n      display: inline-block;\n      height: calc(", " * 2);\n      margin-left: ", ";\n      margin-right: ", ";\n      transition: border ", "\n        ", ";\n      vertical-align: middle;\n      width: calc(", " * 2);\n    }\n  "])), function (props) {
    return props.checked ? 'currentColor' : 'transparent';
  }, (0, _toolkit.th)('gridUnit'), (0, _toolkit.th)('borderWidth'), function (props) {
    return props.color ? props.color : props.theme.colorText;
  }, (0, _toolkit.th)('gridUnit'), (0, _toolkit.th)('gridUnit'), (0, _toolkit.th)('gridUnit'), (0, _toolkit.th)('transitionDuration'), (0, _toolkit.th)('transitionTimingFunction'), (0, _toolkit.th)('gridUnit')),
  Input: (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n\n    &:focus + span::before {\n      box-shadow: 0 0 ", " calc(", " * 2)\n        ", ";\n    }\n  "])), (0, _toolkit.th)('borderWidth'), (0, _toolkit.th)('borderWidth'), (0, _toolkit.th)('colorPrimary'))
};
exports["default"] = _default;