UNPKG

monday-ui-react-core

Version:

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

github.com/mondaycom/vibe

mondaycom/vibe

3 lines (2 loc) • 3.04 kB
1
2
3
var e={textAreaWrapper:"textAreaWrapper",label:"label",required:"required",subTextContainer:"subTextContainer",helpText:"helpText",limitText:"limitText",textArea:"textArea",small:"small",large:"large",resize:"resize",success:"success",error:"error",disabled:"disabled",readOnly:"readOnly"};!function(e){const r="s_id-cf287aae5ade_2_149_4";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('.textAreaWrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: var(--spacing-xs);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n}\n.textAreaWrapper .label {\n display: inline-flex;\n gap: var(--spacing-xs);\n color: var(--primary-text-color);\n}\n.textAreaWrapper .label.required::after {\n content: "*";\n color: var(--color-error);\n}\n.textAreaWrapper .subTextContainer {\n color: var(--secondary-text-color);\n}\n.textAreaWrapper .subTextContainer .helpText {\n display: flex;\n}\n.textAreaWrapper .subTextContainer .limitText {\n margin-left: auto;\n}\n.textAreaWrapper .textArea {\n resize: vertical;\n border: 1px solid var(--ui-border-color);\n border-radius: var(--border-radius-small);\n padding: var(--spacing-small) var(--spacing-medium);\n outline: none;\n background-color: var(--secondary-background-color);\n color: var(--primary-text-color);\n}\n.textAreaWrapper .textArea:hover {\n border-color: var(--primary-text-color);\n}\n.textAreaWrapper .textArea:active, .textAreaWrapper .textArea:focus, .textAreaWrapper .textArea:focus-within {\n border-color: var(--primary-color);\n}\n.textAreaWrapper .textArea.small {\n font: var(--font-text2-normal);\n}\n.textAreaWrapper .textArea.large {\n font: var(--font-text1-normal);\n}\n.textAreaWrapper .textArea:not(.resize) {\n resize: none;\n}\n.textAreaWrapper.success .textArea {\n border-color: var(--color-success);\n}\n.textAreaWrapper.success .helpText {\n color: var(--color-success);\n}\n.textAreaWrapper.error .textArea {\n border-color: var(--color-error);\n}\n.textAreaWrapper.error .helpText,\n.textAreaWrapper.error .limitText {\n color: var(--color-error);\n}\n.textAreaWrapper.disabled .textArea,\n.textAreaWrapper.disabled .textArea:hover {\n color: var(--disabled-text-color);\n background-color: var(--disabled-background-color);\n border-color: var(--disabled-text-color);\n}\n.textAreaWrapper.disabled .helpText {\n color: var(--disabled-text-color);\n}\n.textAreaWrapper.readOnly .textArea,\n.textAreaWrapper.readOnly .textArea:hover {\n background-color: var(--allgrey-background-color);\n border-color: transparent;\n resize: none;\n}');export{e as default}; //# sourceMappingURL=TextArea.module.scss.js.map