monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 3.03 kB
JavaScript
var e={toggle:"toggle_401cba883a","focus-visible":"focus-visible_338c52cf9e",selected:"selected_388ec8dc6d",notSelected:"notSelected_38603d85be",disabled:"disabled_c76650ac61",medium:"medium_5961d8f7ed",small:"small_797877d500"};!function(e){const n="s_id-49e22e19a989_2_149_4";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('.toggle_401cba883a {\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n background: transparent;\n /* inherit font & color from ancestor */\n color: inherit;\n font: inherit;\n /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n line-height: normal;\n /* Corrects font smoothing for webkit */\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n /* Corrects inability to style clickable `input` types in iOS */\n appearance: none;\n transition: background-color var(--motion-productive-medium) var(--motion-timing-transition);\n margin: 0 var(--spacing-small);\n position: relative;\n height: var(--toggle-height);\n width: var(--toggle-width);\n cursor: pointer;\n border-radius: 100px !important;\n}\n.toggle_401cba883a:focus-visible, .toggle_401cba883a.focus-visible_338c52cf9e {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.toggle_401cba883a:focus:not(.focus-visible_338c52cf9e) {\n outline: none;\n}\n.toggle_401cba883a::after {\n background-color: var(--primary-background-color);\n content: " ";\n position: absolute;\n width: var(--circle-size);\n height: var(--circle-size);\n border-radius: 50%;\n top: calc(50% - 9px);\n transition: left var(--motion-productive-medium) var(--motion-timing-transition);\n}\n.toggle_401cba883a.selected_388ec8dc6d {\n background-color: var(--primary-color);\n}\n.toggle_401cba883a.selected_388ec8dc6d::after {\n left: 20px;\n}\n.toggle_401cba883a.notSelected_38603d85be {\n background-color: var(--ui-border-color);\n}\n.toggle_401cba883a.notSelected_38603d85be::after {\n left: 3px;\n}\n.toggle_401cba883a.disabled_c76650ac61 {\n opacity: var(--disabled-component-opacity);\n cursor: not-allowed;\n}\n.toggle_401cba883a.medium_5961d8f7ed {\n --toggle-width: 41px;\n --toggle-height: 24px;\n}\n.toggle_401cba883a.medium_5961d8f7ed::after {\n --circle-size: 18px;\n}\n.toggle_401cba883a.small_797877d500 {\n --toggle-width: 28px;\n --toggle-height: 16px;\n}\n.toggle_401cba883a.small_797877d500::after {\n --circle-size: 12px;\n top: calc(50% - 6px);\n left: 14px;\n}\n.toggle_401cba883a.small_797877d500.notSelected_38603d85be::after {\n left: 2px;\n}');export{e as default};
//# sourceMappingURL=MockToggle.module.scss.js.map