/*.editable-grid { /* 1px padding to prevent right-most cell border getting cut off for some reason* padding: 1px; }*/ .editable-grid:not(.overflow-visible) { /*overflow: visible; /** 10-31-22: adding this to allow dropdowns to escape row height..l hopefully it doesnt cause issues */ overflow: auto; } .editable-grid .cell-error { outline: 1px solid var(--color-error); } .editable-grid > table { border-spacing: 0; border-collapse: collapse; /* hack to prevent horizontal overflow from 1px of extra border... this might not be the best solution * width: calc(100% - 2px); /* hack to prevent left border from getting cutoff for some reason * margin-left: 1px; */ width: 100%; position: relative; } /* undoing hack from above when inside a details container. idk what this hack was for but its causing unwanted white border */ details .editable-grid > table { width: 100%; margin: 0; } details .editable-grid > table th { border-left: 1px solid var(--color-text) !important; border-top: 1px solid var(--color-text-text) !important; } .editable-grid > table > thead > tr { position: sticky; top: 0; z-index: 2; } .editable-grid > table td, .editable-grid > table th { border: 1px solid var(--color-stripe-border); white-space: nowrap; text-align: center; position: relative; padding: 0.5em; } .editable-grid > table th:last-child, .editable-grid > table td:last-child { border-right: none !important; } .editable-grid > table th:first-child, .editable-grid > table td:first-child { border-left: none !important; } .editable-grid > table th { font-weight: normal; background: var(--color-text); color: var(--color-text-text); padding: 0.25em 1em; /* have to remove vertical border entirely for sticky (border stays in place when scrolled down) */ border-top: none; border-bottom: none; } .editable-grid:not(.readonly) > table tr { cursor: default; } .editable-grid:not(.readonly) > table .clickable, .editable-grid.readonly > table .clickable-readonly { cursor: pointer; } /** to make everything consistently faded out on readonly grid: override disabled inputs to be 100% opacity so they get their opacity from<td>*/ .editable-grid.readonly td { opacity: 0.75; } .editable-grid.readonly td *[disabled] { opacity: 1; } .editable-grid > table tr.selected { background: var(--color-accent-75); color: var(--color-accent-text); } .editable-grid > table tr.selected td:first-child { background: var(--color-accent); } /* #region inputs */ .editable-grid .input-wrapper { min-width: 10em; border-radius: 0 !important; } .editable-grid .input-wrapper { border-color: transparent !important; } .editable-grid .textarea-wrapper { height: 100% !important; } .editable-grid textarea { min-width: 20em; resize: none; overflow-y: auto; height: 100% !important; } /* nested sub-cells get spaced out a bit (can't use grid gap because it's display:table-cell) */ .editable-grid > table tr > td > div:not(:first-child) { margin-top: 0.15em; } /** grid inputs get redonly not disabled, but dropdowns get disabled. need to fake it so dropdowns match the inputs (this is all because apparently disabled dropdowns get text cutoff at 100% width) */ .editable-grid .input-wrapper.dropdown-wrapper input:disabled { opacity: 1 !important; } .editable-grid input[type=number] { text-align: right; } /** hiding spinners because it's right against the right-aligned number input. can add margin but then the number is in center of textbox... (can add negative margin to right but then its cut off) */ .editable-grid input[type=number]::-webkit-inner-spin-button { display:none; } .editable-grid input:placeholder-shown { opacity: 0.25; } /* since border isn't visibnle when not focused, round out the left side of the button until focus causes input to be highlighted */ .editable-grid .input-wrapper .btn-icon.invert { border-radius: 0 !important; } /* #endregion */ .editable-grid .error > .input-wrapper > input::placeholder { color: var(--color-error); } .editable-grid .error .btn-icon.invert { background: var(--color-error); color: var(--color-error-text); } .editable-grid .error .input-wrapper:focus-within { box-shadow: 0px 0px 2px 1px var(--color-error); } .editable-grid .input-wrapper .dollar-sign { margin-left: -0.25em; margin-right: 0.125em; } .editable-grid .error > label.switch .slider:before { font-family: "Material Icons"; content: "block"; color: var(--color-error); } .editable-grid .error > label.switch .slider { background-color: var(--color-error); } .editable-grid .warning > label.switch .slider:before { font-family: "Material Icons"; content: "warning"; color: var(--color-warning); } .editable-grid .warning > label.switch .slider { background-color: var(--color-warning); } /* #region sortable */ .editable-grid .ui-sortable-helper td { visibility: hidden; border:none; } /*.editable-grid .ui-sortable-helper { background: var(--color-container); width: 100% !important; left: 0 !important; right: 0 !important; }*/ .editable-grid td.sortable-handle { width: 0; padding: 0; background: var(--color-header); } .editable-grid .ui-sortable-placeholder { background: var(--color-accent-75) !important; visibility: visible !important; } /* #endregion */ /* #region json table */ .editable-grid .json-table { cursor: pointer; } .editable-grid .json-table tr { background-color: transparent !important; } .editable-grid .json-table tr > * { padding: 0 0.25em !important; background-color: transparent !important; color: inherit !important; border: none !important; } .editable-grid .json-table tr > th { font-weight: bold !important; text-align: right !important; } .editable-grid .json-table tr > td { text-align: left; } /* #endregion */ .editable-grid td > .loader { width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; border-width: 5px; } /* NOTE: tfoot prevents rows from stretching. need 100% height on table for it to fill remaining height */ .editable-grid > table, .editable-grid tfoot { height: 100%; } /* to prevent unnecessary scroll bar, subtract page-footer height */ .editable-grid > table:not(:only-child) { height: calc(100% - 38px); } /* #region page row */ .editable-grid .page-footer { background: var(--color-text); color: var(--color-text-text); position: sticky; bottom: -1px; left: 0; z-index: 2; height: 38px; } .editable-grid .page-footer .input-wrapper { min-width: unset; padding-top: 0; padding-bottom: 0; height: 24px; border-radius: 4px !important; } .editable-grid .page-footer input { width: 48px; color: var(--color-text); } /* #endregion */</td>