monday-ui-react-core/dist/esm/src/components/Checkbox/Checkbox.module.scss.js

Official monday.com UI resources for application development in React.js

var n={wrapper:"wrapper_e3e69f6065",checkbox:"checkbox_d2366b6f92",icon:"icon_afc563bddf",label:"label_1f1b07c1f1",input:"input_c78aa50c17",checkboxGrowAnimation:"checkboxGrowAnimation_2aeb03c7fd"};!function(n){const e="s_id-a622c58c4e9d_2_149_4";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const c=document.createElement("style");c.id=e,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('.wrapper_e3e69f6065 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n}\n\n.checkbox_d2366b6f92 {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: 16px;\n  width: 16px;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n\n.checkbox_d2366b6f92:after {\n  content: " ";\n  background-color: transparent;\n  position: absolute;\n  height: 16px;\n  z-index: 2;\n  left: 0;\n  right: 0;\n  width: 100%;\n}\n\n.checkbox_d2366b6f92:hover {\n  border-color: var(--secondary-text-color);\n}\n\n.icon_afc563bddf {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n\n.label_1f1b07c1f1 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--spacing-small);\n}\n\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n\n/* we hide the checkbox and draw a new one instead. */\n\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n\n.input_c78aa50c17 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n\n.input_c78aa50c17:focus + .checkbox_d2366b6f92 {\n  border-color: var(--secondary-text-color);\n}\n\n.input_c78aa50c17:focus:checked + .checkbox_d2366b6f92 {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n\n.input_c78aa50c17:focus-visible + .checkbox_d2366b6f92 {\n  outline: none;\n  border: 1px solid;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 2px;\n}\n\n.input_c78aa50c17:checked:focus + .checkbox_d2366b6f92:after,\n.input_c78aa50c17:indeterminate:focus + .checkbox_d2366b6f92:after {\n  background-color: var(--primary-hover-color);\n}\n\n.input_c78aa50c17:checked + .checkbox_d2366b6f92,\n.input_c78aa50c17:indeterminate + .checkbox_d2366b6f92 {\n  animation: checkboxGrowAnimation_2aeb03c7fd var(--motion-productive-short);\n}\n\n.input_c78aa50c17:checked + .checkbox_d2366b6f92,\n.input_c78aa50c17:indeterminate + .checkbox_d2366b6f92 {\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n\n.input_c78aa50c17:checked + .checkbox_d2366b6f92:hover,\n.input_c78aa50c17:indeterminate + .checkbox_d2366b6f92:hover {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n\n.input_c78aa50c17:checked + .checkbox_d2366b6f92:hover:after,\n.input_c78aa50c17:indeterminate + .checkbox_d2366b6f92:hover:after {\n  background-color: var(--primary-hover-color);\n}\n\n.input_c78aa50c17:checked + .checkbox_d2366b6f92:after,\n.input_c78aa50c17:indeterminate + .checkbox_d2366b6f92:after {\n  content: " ";\n  background-color: var(--primary-color);\n  height: 16px;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  left: 0;\n}\n\n.input_c78aa50c17:checked + .checkbox_d2366b6f92 > .icon_afc563bddf,\n.input_c78aa50c17:indeterminate + .checkbox_d2366b6f92 > .icon_afc563bddf {\n  visibility: visible;\n}\n\n.input_c78aa50c17:checked:disabled + .checkbox_d2366b6f92:after,\n.input_c78aa50c17:indeterminate:disabled + .checkbox_d2366b6f92:after {\n  background-color: var(--disabled-background-color);\n}\n\n.input_c78aa50c17:disabled + .checkbox_d2366b6f92,\n.input_c78aa50c17:disabled + .checkbox_d2366b6f92:hover {\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.input_c78aa50c17:disabled + .checkbox_d2366b6f92 .icon_afc563bddf,\n.input_c78aa50c17:disabled + .checkbox_d2366b6f92:hover .icon_afc563bddf {\n  color: var(--disabled-text-color);\n}\n\n.input_c78aa50c17:disabled + .checkbox_d2366b6f92,\n.input_c78aa50c17:disabled + .checkbox_d2366b6f92:hover {\n  cursor: not-allowed;\n}\n\n.input_c78aa50c17:disabled ~ .label_1f1b07c1f1 {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n\n@keyframes checkboxGrowAnimation_2aeb03c7fd {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}');export{n as default};
//# sourceMappingURL=Checkbox.module.scss.js.map