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

ActiveCollab Components

import styled, { css, keyframes } from "styled-components";
const burstScale = keyframes(["from{transform:scale(0);}to{transform:scale(1);}"]);
const burstAnimation = keyframes(["from{stroke-dashoffset:0;}to{stroke-dashoffset:8;}"]);
export const StyledCompleteCheckbox = styled.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"
}, props => props.$primary && css(["svg path{stroke:var(--color-primary);}"]), props => props.$primary && css(["stroke:var(--color-theme-500);"]), props => props.$completed && 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 && css(["", " box-shadow:inset 0 0 0 12px #84cc7c;border-color:#84cc7c;"], {
  "borderWidth": "1px",
  "borderStyle": "solid"
}), props.$primary && css(["box-shadow:inset 0 0 0 12px var(--color-primary);"]), props.$primary && css(["stroke:var(--color-theme-100);"])), props => !props.$completed && !props.$disabled && 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 && css(["border:1px solid #84cc7c;box-shadow:inset 0 0 0 2px #84cc7c;"])), props => props.$animation && css(["svg path{animation:", " 0.6s ease 0s 1 normal,", " 0.4s ease 0.2s 1 normal;}"], burstScale, burstAnimation), props => props.$disabled && css(["", " opacity:0.5;"], {
  "cursor": "default"
}), props => !props.$checkMarkClassName && css(["svg{", "}"], {
  "height": "3rem",
  "width": "3rem"
}));
StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
//# sourceMappingURL=Styles.js.map