open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix search highlight conflict

Browse Source 
Regular highlight styling and search highlight styling shouldn't both be applied at the same time. Search highlight styling should also be removed when search is closed. This PR resolves those conflicts.
This commit is contained in:
narcolepticinsomniac 2018-11-27 22:30:09 -05:00 committed by GitHub
parent e97a3ef269
commit 1f133f8004
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
edit/edit.css
View File

@ -364,13 +364,13 @@ input:invalid {
.resize-grip-enabled .CodeMirror-scrollbar-filler {
bottom: 7px; /* make space for resize-grip */
}
.cm-matchhighlight,
.CodeMirror-selection-highlight-scrollbar {
body:not(.find-open) .cm-matchhighlight,
body:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
animation-fill-mode: both;
}
[data-match-highlight-count="1"] .cm-matchhighlight,
[data-match-highlight-count="1"] .CodeMirror-selection-highlight-scrollbar {
body:not(.find-open) [data-match-highlight-count="1"] .cm-matchhighlight,
body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-highlight-scrollbar {
animation: none;
}
@-webkit-keyframes highlight {

26
edit/global-search.css
View File

@ -181,17 +181,33 @@
opacity: 1;
}
/*********** CodeMirror ****************/
.search-target-editor {
outline: 1px solid darkorange;
/*********** CM search highlight restyling, which shouldn't need color variables ****************/
body.find-open .search-target-editor {
outline-color: darkorange !important;
}
#stylus .search-target-match {
body.find-open .cm-searching {
background-color: rgba(255, 255, 0, .4);
}
body.find-open .cm-searching.search-target-match {
background-color: darkorange;
color: black;
}
body.find-open .CodeMirror-search-match {
background: gold;
border-top: 1px solid orange;
border-bottom: 1px solid orange;
}
/* hide default CM search highlight styling */
body .cm-searching,
body .CodeMirror-search-match {
background-color: transparent;
border-color: transparent;
}
@media (max-width: 500px) {
#search-replace-dialog {
left: 0;

10
edit/global-search.js
View File

@ -752,8 +752,14 @@ onDOMready().then(() => {
function makeTargetVisible(element) {
const old = $('.' + TARGET_CLASS);
if (old !== element) {
if (old) old.classList.remove(TARGET_CLASS);
if (element) element.classList.add(TARGET_CLASS);
if (old) {
old.classList.remove(TARGET_CLASS);
document.body.classList.remove('find-open');
}
if (element) {
element.classList.add(TARGET_CLASS);
document.body.classList.add('find-open');
}
}
}