monday-ui-react-core/dist/mocked_classnames_esm/src/components/BaseInput/BaseInput.module.scss.js

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

var r={wrapper:"wrapper",small:"small",medium:"medium",large:"large",rightThinnerPadding:"rightThinnerPadding",input:"input",success:"success",readOnly:"readOnly",disabled:"disabled",error:"error"};!function(r){const n="s_id-1f2ba40749da_2_149_4";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const e=document.createElement("style");e.id=n,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(r))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=r)}(".wrapper {\n  width: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-small);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-medium) var(--spacing-xs);\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  outline: none;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: var(--secondary-background-color);\n  transition: border-color var(--motion-productive-medium) ease-in;\n}\n.wrapper.small {\n  min-height: 32px;\n  height: 32px;\n  font: var(--font-text2-normal);\n}\n.wrapper.medium {\n  min-height: 40px;\n  height: 40px;\n}\n.wrapper.large {\n  min-height: 48px;\n  height: 48px;\n  padding-block: var(--spacing-small);\n}\n.wrapper.rightThinnerPadding {\n  padding-inline-end: var(--spacing-medium);\n}\n.wrapper:hover {\n  border-color: var(--primary-text-color);\n}\n@supports selector(:has(*)) {\n  .wrapper:has(.input:active, .input:focus) {\n    border-color: var(--primary-color);\n  }\n  .wrapper:has(.input:read-only) {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper:has(.input:read-only) .input {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper:has(.input:disabled) {\n    cursor: not-allowed;\n    user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper:has(.input:disabled) .input {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper.success {\n    border-color: var(--positive-color);\n  }\n  .wrapper.success:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper.success:has(.input:active, .input:focus) {\n    border-color: var(--positive-color);\n  }\n  .wrapper:has(.input[aria-invalid=true]) {\n    border-color: var(--negative-color);\n  }\n  .wrapper:has(.input[aria-invalid=true]):hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper:has(.input[aria-invalid=true]):has(.input:active, .input:focus) {\n    border-color: var(--negative-color);\n  }\n}\n@supports not selector(:has(*)) {\n  .wrapper:focus-within {\n    border-color: var(--primary-color);\n  }\n  .wrapper.readOnly {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper.readOnly .input {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper.disabled {\n    cursor: not-allowed;\n    user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper.disabled .input {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper.success {\n    border-color: var(--positive-color);\n  }\n  .wrapper.success:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper.success:focus-within {\n    border-color: var(--positive-color);\n  }\n  .wrapper.error {\n    border-color: var(--negative-color);\n  }\n  .wrapper.error:hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper.error:focus-within {\n    border-color: var(--negative-color);\n  }\n}\n.wrapper .input {\n  all: unset;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n  outline: none;\n}\n.wrapper .input::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.wrapper .input:disabled::placeholder {\n  color: var(--disabled-text-color);\n}");export{r as default};
//# sourceMappingURL=BaseInput.module.scss.js.map