Use codemirror tooltip extension to set parent to fix positioning bug (#3323)
* fix: 🐛 absolute positioning of cm tooltip in firefox * docs: ✏️ add comment * fix: 🐛 tooltip hidden in editor fullscreen mode & dark mode * fix: 🐛 tooltip color in dark mode * docs: ✏️ add comment
This commit is contained in:
1 parent
b8ea558f14
commit
0dac4ccf47
3 files changed
+32
-23
No files matched your search
@@ -203,30 +203,30 @@
|
||||
// Overrides for CodeMirror 6 autocomplete and lint tooltips/panels.
|
||||
@mixin dark-mode-codemirror-override {
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
// Autocomplete dropdown and lint hover tooltips
|
||||
.cm-tooltip {
|
||||
background-color: var(--token-color-palette-neutral-50);
|
||||
border: 1px solid var(--token-color-palette-neutral-100);
|
||||
color: var(--token-color-palette-neutral-400);
|
||||
}
|
||||
|
||||
// Arrow pointer for tooltips shown above the cursor
|
||||
.cm-tooltip-above::before {
|
||||
border-top-color: var(--token-color-palette-neutral-50);
|
||||
}
|
||||
|
||||
// Arrow pointer for tooltips shown below the cursor
|
||||
.cm-tooltip-below::before {
|
||||
border-bottom-color: var(--token-color-palette-neutral-50);
|
||||
}
|
||||
|
||||
// Autocomplete list > selected item highlight
|
||||
.cm-tooltip-autocomplete > ul > li[aria-selected] {
|
||||
background-color: var(--token-color-palette-blue-300);
|
||||
color: var(--token-color-palette-neutral-700);
|
||||
}
|
||||
|
||||
.cm-editor {
|
||||
// Autocomplete dropdown and lint hover tooltips
|
||||
.cm-tooltip {
|
||||
background-color: var(--token-color-palette-neutral-50);
|
||||
border: 1px solid var(--token-color-palette-neutral-100);
|
||||
color: var(--token-color-palette-neutral-400);
|
||||
}
|
||||
|
||||
// Arrow pointer for tooltips shown above the cursor
|
||||
.cm-tooltip-above::before {
|
||||
border-top-color: var(--token-color-palette-neutral-50);
|
||||
}
|
||||
|
||||
// Arrow pointer for tooltips shown below the cursor
|
||||
.cm-tooltip-below::before {
|
||||
border-bottom-color: var(--token-color-palette-neutral-50);
|
||||
}
|
||||
|
||||
// Autocomplete list > selected item highlight
|
||||
.cm-tooltip-autocomplete > ul > li[aria-selected] {
|
||||
background-color: var(--token-color-palette-blue-300);
|
||||
color: var(--token-color-palette-neutral-700);
|
||||
}
|
||||
|
||||
// Content/gutter border
|
||||
.cm-content {
|
||||
border-left: 1px solid var(--token-color-palette-neutral-100);
|
||||
|
||||
Reference in new issue
Block a user