mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 20:10:46 +00:00
4e805a4d9c
Summary: When traceback is present, give it 64px, or more if available, or less if less is needed. If less space is available than needed, the traceback will scroll within its allocated area. Test Plan: The test FieldEditorSizing which tests basic sizing still passes; details with different size of formula and traceback were tested manually. Reviewers: jarek Reviewed By: jarek Subscribers: jarek Differential Revision: https://phab.getgrist.com/D3531
136 lines
3.0 KiB
CSS
136 lines
3.0 KiB
CSS
.cell_editor {
|
|
position: absolute;
|
|
z-index: 1000; /* make it higher than popper's 999 */
|
|
display: flex;
|
|
}
|
|
|
|
.default_editor {
|
|
box-shadow: 0 0 3px 2px var(--grist-color-cursor);
|
|
}
|
|
|
|
.readonly_editor {
|
|
box-shadow: 0 0 3px 2px var(--grist-color-slate);
|
|
}
|
|
|
|
/* make room for lock icon */
|
|
.readonly_editor .celleditor_cursor_editor .celleditor_text_editor,
|
|
.readonly_editor .celleditor_cursor_editor .celleditor_content_measure {
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.readonly_editor::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 4px 3px 0 3px;
|
|
width: 13px;
|
|
height: 13px;
|
|
background-color: #D0D0D0;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-image: var(--icon-Lock);
|
|
}
|
|
|
|
.formula_editor_wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Make overflow hidden, since editor might be 1 pixel bigger due to fix for devices
|
|
* with different pixel ratio */
|
|
.formula_editor {
|
|
background-color: white;
|
|
padding: 4px 0 2px 21px;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
flex: none;
|
|
min-height: 22px; /* this is the usual height, but helps slightly when font is shorter than expected */
|
|
}
|
|
|
|
/* styles specific to the formula editor in the side panel */
|
|
.default_editor.formula_editor_sidepane {
|
|
border-radius: 3px;
|
|
}
|
|
.formula_editor_sidepane > .formula_editor {
|
|
padding: 5px 0 5px 24px;
|
|
border-radius: 3px;
|
|
}
|
|
.formula_editor_sidepane > .formula_field_edit::before, .formula_field_sidepane::before {
|
|
left: 4px;
|
|
}
|
|
|
|
.celleditor_cursor_editor {
|
|
background-color: white;
|
|
|
|
/* the following are copied from .field_clip */
|
|
padding: 3px 3px 0px 3px;
|
|
font-family: var(--grist-font-family-data);
|
|
font-size: var(--grist-medium-font-size);
|
|
line-height: 18px;
|
|
min-height: 21px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.celleditor_text_editor {
|
|
display: block;
|
|
outline: none;
|
|
padding: 0px;
|
|
border: none;
|
|
resize: none;
|
|
z-index: 10;
|
|
color: black;
|
|
|
|
/* Inherit styles, same as for .celleditor_content_measure, to ensure that sizes correspond. */
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.celleditor_content_measure {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border: none;
|
|
visibility: hidden;
|
|
overflow: visible;
|
|
/* with 'pre-wrap', this lets the editor gets as wide as needed before wrapping; */
|
|
/* width is limited only by max-width (which is set in JS code). */
|
|
width: max-content;
|
|
|
|
/* Inherit styles, same as for .celleditor_text_editor, to ensure that sizes correspond. */
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.error_msg {
|
|
background-color: #ffb6c1;
|
|
padding: 4px;
|
|
color: black;
|
|
cursor: pointer;
|
|
white-space: pre-wrap;
|
|
flex: none;
|
|
}
|
|
|
|
.error_details {
|
|
background-color: #F8EAD5; /* 20% of color-warning-bg */
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
flex: auto;
|
|
overflow: auto;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.error_details_inner {
|
|
padding: 2px 2px 2px 28px;
|
|
}
|
|
|
|
.kf_collapser {
|
|
height: 1.2rem;
|
|
}
|