@activecollab/components/dist/cjs/components/CompleteCheckbox/Styles.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledCompleteCheckbox = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var burstScale = (0, _styledComponents.keyframes)(["from{transform:scale(0);}to{transform:scale(1);}"]);
var burstAnimation = (0, _styledComponents.keyframes)(["from{stroke-dashoffset:0;}to{stroke-dashoffset:8;}"]);
var StyledCompleteCheckbox = exports.StyledCompleteCheckbox = _styledComponents.default.button.withConfig({
  displayName: "Styles__StyledCompleteCheckbox",
  componentId: "sc-1801dzg-0"
})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;background-color:transparent;padding:0;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
  "position": "relative",
  "height": "1.5rem",
  "width": "1.5rem",
  "cursor": "pointer",
  "borderRadius": "9999px",
  "borderWidth": "1px",
  "borderStyle": "solid"
}, {
  "pointerEvents": "none",
  "position": "absolute"
}, function (props) {
  return props.$primary && (0, _styledComponents.css)(["svg path{stroke:var(--color-primary);}"]);
}, function (props) {
  return props.$primary && (0, _styledComponents.css)(["stroke:var(--color-theme-500);"]);
}, function (props) {
  return props.$completed && (0, _styledComponents.css)(["box-shadow:inset 0 0 0 12px var(--color-primary);border-color:var(--color-primary);border-width:0px;", " &:hover{box-shadow:inset 0 0 0 12px #84cc7c;", "}svg polyline{stroke-dashoffset:0;stroke:#fff;", "}svg path{stroke-dasharray:8;stroke-dashoffset:0;transform-origin:24px 24px;}"], !props.$primary && (0, _styledComponents.css)(["", " box-shadow:inset 0 0 0 12px #84cc7c;border-color:#84cc7c;"], {
    "borderWidth": "1px",
    "borderStyle": "solid"
  }), props.$primary && (0, _styledComponents.css)(["box-shadow:inset 0 0 0 12px var(--color-primary);"]), props.$primary && (0, _styledComponents.css)(["stroke:var(--color-theme-100);"]));
}, function (props) {
  return !props.$completed && !props.$disabled && (0, _styledComponents.css)(["&:hover,&:focus-visible{border:1px solid var(--color-primary);box-shadow:inset 0 0 0 2px var(--color-primary);border-width:0px;outline:none;", " svg polyline{stroke-dashoffset:0;}}"], !props.$primary && (0, _styledComponents.css)(["border:1px solid #84cc7c;box-shadow:inset 0 0 0 2px #84cc7c;"]));
}, function (props) {
  return props.$animation && (0, _styledComponents.css)(["svg path{animation:", " 0.6s ease 0s 1 normal,", " 0.4s ease 0.2s 1 normal;}"], burstScale, burstAnimation);
}, function (props) {
  return props.$disabled && (0, _styledComponents.css)(["", " opacity:0.5;"], {
    "cursor": "default"
  });
}, function (props) {
  return !props.$checkMarkClassName && (0, _styledComponents.css)(["svg{", "}"], {
    "height": "3rem",
    "width": "3rem"
  });
});
StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
//# sourceMappingURL=Styles.js.map