bodmas-formula-engine/dist/index.esm.css

A powerful React component for building mathematical formulas with visual interface, real-time validation, and comprehensive function library

.formula-builder{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;max-width:100%;transition:box-shadow .3s ease;width:100%}.formula-builder:hover{box-shadow:0 6px 30px #0000001f}.formula-builder .formula-editor{box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;min-height:280px;position:relative;width:100%}.formula-builder .formula-editor .monaco-editor{border:2px solid #e0e0e0;border-radius:8px;box-sizing:border-box;flex-shrink:0;height:clamp(150px,25vh,300px)!important;max-width:100%!important;min-height:150px!important;position:relative;transition:border-color .3s ease;width:100%!important}.formula-builder .formula-editor .monaco-editor:focus-within{border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}.formula-builder .formula-editor .monaco-editor.error{border-color:#d32f2f;box-shadow:0 0 0 3px #d32f2f1a}.formula-builder .formula-editor .monaco-editor .decorationsOverviewRuler,.formula-builder .formula-editor .monaco-editor .monaco-editor-background,.formula-builder .formula-editor .monaco-editor .monaco-scrollable-element,.formula-builder .formula-editor .monaco-editor .overflow-guard{box-sizing:border-box;height:100%!important;max-width:100%!important;position:relative;width:100%!important}.formula-builder .formula-editor .monaco-editor .margin{flex-shrink:0;height:100%!important;max-width:5rem;min-width:3rem;width:auto!important}.formula-builder .formula-editor .monaco-editor .monaco-editor-background,.formula-builder .formula-editor .monaco-editor .view-lines{height:100%!important;max-width:100%!important;overflow:hidden;position:relative;width:100%!important}.formula-builder .formula-editor .monaco-editor .view-line{word-wrap:break-word;max-width:100%;overflow-wrap:break-word;white-space:pre-wrap}.formula-builder .formula-editor .monaco-editor .editor-hover,.formula-builder .formula-editor .monaco-editor .parameter-hints-widget,.formula-builder .formula-editor .monaco-editor .suggest-widget{position:fixed!important;z-index:10000}.formula-builder .formula-editor .monaco-editor .monaco-scrollable-element>.scrollbar{position:absolute}.formula-builder .formula-editor .editor-toolbar{align-items:center;background:#f5f5f5;border-bottom:1px solid #e0e0e0;border-radius:8px 8px 0 0;box-sizing:border-box;display:flex;flex-shrink:0;flex-wrap:wrap;gap:.5rem;justify-content:space-between;min-height:3rem;padding:.5rem .75rem;width:100%}.formula-builder .formula-editor .editor-toolbar .editor-actions{display:flex;flex-wrap:wrap;gap:.5rem}.formula-builder .formula-editor .editor-toolbar .editor-info{color:#666;flex-shrink:0;font-size:.75rem}.formula-builder .formula-editor .editor-status{align-items:center;display:flex;flex-shrink:0;flex-wrap:wrap;gap:.5rem;justify-content:space-between;margin-top:.5rem;min-height:1.25rem}.formula-builder .function-palette{background:#fafafa;border-radius:8px;box-sizing:border-box;max-height:clamp(400px,60vh,800px);overflow-y:auto;padding:1rem;width:100%}.formula-builder .function-palette .search-input{margin-bottom:1rem;width:100%}.formula-builder .function-palette .search-input .MuiOutlinedInput-root{background:#fff;border-radius:8px;width:100%}.formula-builder .function-palette .function-category{margin-bottom:.5rem;width:100%}.formula-builder .function-palette .function-category .MuiAccordion-root{border-radius:8px!important;box-shadow:0 1px 3px #0000000d;width:100%}.formula-builder .function-palette .function-category .MuiAccordion-root.Mui-expanded{box-shadow:0 2px 8px #0000001a}.formula-builder .function-palette .function-category .MuiAccordion-root:before{display:none}.formula-builder .function-palette .function-category .MuiAccordionSummary-root{border-radius:8px;min-height:3rem}.formula-builder .function-palette .function-category .MuiAccordionSummary-root.Mui-expanded{border-radius:8px 8px 0 0}.formula-builder .function-palette .function-category .function-item{margin-bottom:.5rem;position:relative;width:100%}.formula-builder .function-palette .function-category .function-item .MuiButton-root{border-radius:8px;justify-content:flex-start;padding:.75rem;text-align:left;transition:all .2s ease;width:100%}.formula-builder .function-palette .function-category .function-item .MuiButton-root:hover{box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}.formula-builder .function-palette .function-category .function-item .function-help-icon{backdrop-filter:blur(4px);background:#ffffffe6;border:1px solid #0000001a;position:absolute;right:4px;top:4px;transition:all .2s ease;z-index:2}.formula-builder .function-palette .function-category .function-item .function-help-icon:hover{background:#1976d21a;border-color:#1976d2;transform:scale(1.1)}.formula-builder .function-palette .function-category .function-item .function-help-icon .MuiSvgIcon-root{color:#666;transition:color .2s ease}.formula-builder .function-palette .function-category .function-item .function-help-icon:hover .MuiSvgIcon-root{color:#1976d2}.formula-builder .function-palette .function-category .function-item .function-signature{color:#666;font-family:Monaco,Menlo,Consolas,monospace;font-size:.75rem;margin-top:.25rem;word-break:break-all}.formula-builder .function-palette .function-category .function-item .function-description{color:#888;font-size:.75rem;margin-top:.125rem}.formula-builder .function-palette .function-category .function-item .function-example{background:#2e7d321a;border-radius:4px;color:#2e7d32;font-family:Monaco,Menlo,Consolas,monospace;font-size:.7rem;margin-top:.25rem;padding:.25rem .5rem;word-break:break-all}.formula-builder .function-palette .operators-section{margin-bottom:1rem;width:100%}.formula-builder .function-palette .operators-section .operator-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(3.5rem,1fr));margin-top:.5rem;width:100%}.formula-builder .function-palette .operators-section .operator-button{border-radius:6px;font-weight:700;height:2.5rem;min-width:3.5rem;transition:all .2s ease}.formula-builder .function-palette .operators-section .operator-button:hover{transform:scale(1.05)}.formula-builder .function-palette .variables-section{margin-bottom:1rem;width:100%}.formula-builder .function-palette .variables-section .variable-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem;width:100%}.formula-builder .function-palette .variables-section .variable-chip{cursor:pointer;flex-shrink:0;transition:all .2s ease}.formula-builder .function-palette .variables-section .variable-chip:hover{transform:scale(1.05)}.formula-builder .palette-container{background:#fafafa;border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;max-height:clamp(400px,60vh,800px);overflow:hidden;width:100%}.formula-builder .palette-container .MuiTabs-root{min-height:40px}.formula-builder .palette-container .MuiTabs-root .MuiTab-root{font-size:.875rem;min-height:40px;padding:8px 12px;text-transform:none}.formula-builder .palette-container .MuiTabs-root .MuiTab-root .MuiSvgIcon-root{font-size:1.2rem}.formula-builder .palette-container .MuiTabPanel-root{height:100%;overflow:hidden;padding:0}.formula-builder .palette-container .function-palette{background:#0000;border-radius:0;height:100%;max-height:none;overflow-y:auto;padding:0 1rem 1rem}.formula-builder .palette-container .variable-palette{height:100%;overflow:hidden;padding:0 1rem 1rem}.formula-builder .validation-panel{box-sizing:border-box;width:100%}.formula-builder .validation-panel .validation-status{margin-bottom:1rem;width:100%}.formula-builder .validation-panel .validation-status.valid .MuiAlert-root{background:#2e7d321a;border:1px solid #2e7d324d}.formula-builder .validation-panel .validation-status.invalid .MuiAlert-root{background:#d32f2f1a;border:1px solid #d32f2f4d}.formula-builder .validation-panel .suggestions-list{width:100%}.formula-builder .validation-panel .suggestions-list .suggestion-item{align-items:center;border-radius:6px;display:flex;margin-bottom:.25rem;padding:.5rem .75rem;transition:background-color .2s ease}.formula-builder .validation-panel .suggestions-list .suggestion-item:hover{background:#00000005}.formula-builder .validation-panel .suggestions-list .suggestion-item .suggestion-icon{flex-shrink:0;margin-right:.5rem;min-width:1.25rem}.formula-builder .validation-panel .formula-analysis{background:#1976d20d;border:1px solid #1976d233;border-radius:8px;box-sizing:border-box;margin-top:1rem;padding:.75rem;width:100%}.formula-builder .validation-panel .formula-analysis .analysis-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem;width:100%}.formula-builder .validation-panel .bodmas-hint{margin-top:.75rem;width:100%}.formula-builder .validation-panel .bodmas-hint .MuiAlert-root{border-radius:8px;font-size:.8rem}.formula-builder .validation-panel .bodmas-hint .MuiAlert-root .bodmas-text{font-family:Monaco,Menlo,Consolas,monospace;font-weight:700}.formula-builder .preview-panel{box-sizing:border-box;width:100%}.formula-builder .preview-panel .current-formula{margin-bottom:1rem;width:100%}.formula-builder .preview-panel .current-formula .formula-display{align-items:center;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;box-sizing:border-box;display:flex;font-family:Monaco,Menlo,Consolas,monospace;font-size:.9rem;min-height:3rem;padding:.75rem;width:100%;word-break:break-all}.formula-builder .preview-panel .current-formula .formula-display.empty{color:#6c757d;font-family:inherit;font-style:italic}.formula-builder .preview-panel .result-display{margin-bottom:1rem;width:100%}.formula-builder .preview-panel .result-display .result-alert{border-radius:8px;width:100%}.formula-builder .preview-panel .result-display .result-alert .result-content{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;width:100%}.formula-builder .preview-panel .result-display .result-alert .result-value{flex:1;font-family:Monaco,Menlo,Consolas,monospace;font-size:.95rem;font-weight:700;min-width:0;word-break:break-all}.formula-builder .preview-panel .result-display .result-alert .result-type{flex-shrink:0;margin-left:.5rem}.formula-builder .preview-panel .variables-table{width:100%}.formula-builder .preview-panel .variables-table .MuiTableContainer-root{border-radius:8px;max-height:clamp(150px,25vh,300px);width:100%}.formula-builder .preview-panel .variables-table .variable-name{color:#1976d2;font-family:Monaco,Menlo,Consolas,monospace;font-weight:700;word-break:break-all}.formula-builder .preview-panel .variables-table .variable-value{font-family:Monaco,Menlo,Consolas,monospace;font-size:.85rem;word-break:break-all}.formula-builder .preview-panel .examples-section{margin-top:1rem;width:100%}.formula-builder .preview-panel .examples-section .example-item{border-radius:6px;box-sizing:border-box;cursor:pointer;font-family:Monaco,Menlo,Consolas,monospace;font-size:.8rem;margin-bottom:.375rem;padding:.5rem .75rem;transition:all .2s ease;width:100%;word-break:break-all}.formula-builder .preview-panel .examples-section .example-item:hover{background:#1976d21a;transform:translateX(.25rem)}@media (max-width:1200px){.formula-builder .function-palette{max-height:clamp(350px,50vh,600px)}}@media (max-width:900px){.formula-builder .MuiGrid-container .MuiGrid-item:first-child{order:2}.formula-builder .MuiGrid-container .MuiGrid-item:last-child{order:1}.formula-builder .function-palette{max-height:clamp(300px,40vh,500px);padding:.75rem}.formula-builder .function-palette .operators-section .operator-grid{gap:.375rem;grid-template-columns:repeat(auto-fit,minmax(3rem,1fr))}.formula-builder .formula-editor .monaco-editor{height:clamp(120px,20vh,250px)!important}}@media (max-width:600px){.formula-builder .function-palette{max-height:clamp(250px,35vh,400px);padding:.5rem}.formula-builder .function-palette .operators-section .operator-grid{gap:.25rem;grid-template-columns:repeat(4,1fr)}.formula-builder .function-palette .operators-section .operator-button{font-size:.8rem;height:2rem;min-width:2.5rem}.formula-builder .formula-editor .editor-toolbar{min-height:2.5rem;padding:.375rem .5rem}.formula-builder .formula-editor .editor-toolbar .editor-actions{gap:.25rem}.formula-builder .formula-editor .editor-toolbar .editor-info{font-size:.7rem}.formula-builder .formula-editor .monaco-editor{height:clamp(100px,18vh,200px)!important}.formula-builder .formula-editor .editor-status{margin-top:.375rem;min-height:1rem}.formula-builder .formula-editor .editor-status .MuiTypography-caption{font-size:.7rem}.formula-builder .preview-panel .current-formula,.formula-builder .preview-panel .formula-analysis,.formula-builder .preview-panel .result-display,.formula-builder .validation-panel .current-formula,.formula-builder .validation-panel .formula-analysis,.formula-builder .validation-panel .result-display{margin-bottom:.75rem}.formula-builder .preview-panel .formula-display,.formula-builder .preview-panel .result-alert,.formula-builder .validation-panel .formula-display,.formula-builder .validation-panel .result-alert{font-size:.8rem;padding:.5rem}}@media (max-width:400px){.formula-builder .function-palette{padding:.375rem}.formula-builder .function-palette .operators-section .operator-grid{grid-template-columns:repeat(3,1fr)}.formula-builder .function-palette .operators-section .operator-button{font-size:.75rem;height:1.75rem;min-width:2rem}.formula-builder .analysis-chips,.formula-builder .variable-chips{gap:.25rem!important}}@media (prefers-color-scheme:dark){.formula-builder{background:#1e1e1e;color:#fff}.formula-builder .formula-display{background:#2d2d2d;border-color:#404040;color:#fff}.formula-builder .monaco-editor{border-color:#404040}}@keyframes fadeIn{0%{opacity:0;transform:translateY(.625rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-1.25rem)}to{opacity:1;transform:translateX(0)}}@keyframes tooltipFadeIn{0%{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{0%{opacity:1}to{opacity:0}}.formula-builder .MuiTooltip-tooltip{background-color:#616161f2!important;border-radius:6px!important;box-shadow:0 4px 12px #00000026!important;font-size:.75rem!important;max-width:200px!important;padding:.5rem .75rem!important}.formula-builder .MuiTooltip-tooltip[data-popper-placement]{animation:tooltipFadeIn .2s ease-out!important}.formula-builder .MuiTooltip-popper{z-index:1500!important}.formula-builder .MuiTooltip-popper .MuiTooltip-tooltip{animation:tooltipFadeIn .2s ease-out!important}.formula-builder .MuiTooltip-popper[data-popper-placement] .MuiTooltip-tooltip{animation:tooltipFadeIn .2s ease-out!important;transform:none!important}.formula-builder .operators-section .MuiTooltip-tooltip{font-weight:500!important;letter-spacing:.02em!important}.formula-builder .MuiAlert-root{animation:fadeIn .3s ease-out}.formula-builder .function-item{animation:slideIn .2s ease-out}.formula-builder ::-webkit-scrollbar{height:.375rem;width:.375rem}.formula-builder ::-webkit-scrollbar-track{background:#f1f1f1;border-radius:.1875rem}.formula-builder ::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:.1875rem}.formula-builder ::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.formula-builder *{box-sizing:border-box;max-width:100%}.formula-builder .MuiGrid-container{max-width:100%!important;width:100%!important}.formula-builder .MuiGrid-container .MuiGrid-item{box-sizing:border-box;max-width:100%!important}.formula-builder .MuiGrid-container .MuiGrid-item[data-grid-item]{flex-shrink:0}.formula-builder .formula-builder-grid{display:flex!important;flex-wrap:nowrap!important;gap:1.5rem!important;width:100%!important}@media (max-width:600px){.formula-builder .formula-builder-grid{flex-wrap:wrap!important}.formula-builder .formula-builder-grid .function-palette-container,.formula-builder .formula-builder-grid .main-editor-container{flex:none!important;width:100%!important}}.formula-builder .formula-builder-grid .function-palette-container{flex:0 0 33.33%!important;max-width:400px!important;min-width:320px!important;width:33.33%!important}.formula-builder .formula-builder-grid .main-editor-container{flex:1 1 66.67%!important;min-width:400px!important;width:66.67%!important}.formula-builder .sub-grid-container{display:flex!important;flex-wrap:nowrap!important;gap:1rem!important;width:100%!important}@media (max-width:600px){.formula-builder .sub-grid-container{flex-wrap:wrap!important}.formula-builder .sub-grid-container .preview-container,.formula-builder .sub-grid-container .validation-container{flex:none!important;width:100%!important}}.formula-builder .sub-grid-container .preview-container,.formula-builder .sub-grid-container .validation-container{flex:1 1 50%!important;min-width:200px!important;width:50%!important}.formula-builder .flex-container{display:flex;flex-wrap:wrap;width:100%}.formula-builder .flex-item{flex:1;min-width:0}.formula-builder .flex-shrink-0{flex-shrink:0}.formula-builder .formula-builder-layout{align-items:start;display:grid;gap:1.5rem;grid-template-areas:"palette editor";grid-template-columns:minmax(280px,350px) 1fr;width:100%}@media (min-width:901px){.formula-builder .formula-builder-layout{grid-template-columns:minmax(320px,400px) 1fr}.formula-builder .formula-builder-layout .function-palette-section{max-width:400px;min-width:320px}.formula-builder .formula-builder-layout .main-editor-section{min-width:400px}}@media (max-width:600px){.formula-builder .formula-builder-layout{gap:1rem;grid-template-areas:"palette" "editor";grid-template-columns:1fr}}.formula-builder .formula-builder-layout .function-palette-section{grid-area:palette;max-width:350px;min-width:280px;width:100%}@media (max-width:600px){.formula-builder .formula-builder-layout .function-palette-section{max-width:none;min-width:280px}}.formula-builder .formula-builder-layout .main-editor-section{grid-area:editor;min-width:350px;width:100%}@media (max-width:600px){.formula-builder .formula-builder-layout .main-editor-section{min-width:280px}}.formula-builder .sub-panels-layout{display:grid;gap:1rem;grid-template-areas:"validation preview";grid-template-columns:1fr 1fr;margin-top:1rem;width:100%}@media (max-width:600px){.formula-builder .sub-panels-layout{gap:.75rem;grid-template-areas:"validation" "preview";grid-template-columns:1fr}}.formula-builder .sub-panels-layout .validation-section{grid-area:validation;min-width:200px;width:100%}.formula-builder .sub-panels-layout .preview-section{grid-area:preview;min-width:200px;width:100%}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.text-center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.p-1{padding:8px}.p-2{padding:16px}.p-3{padding:24px}.p-4{padding:32px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid #1976d2;outline-offset:2px}*{transition:all .2s ease}