Skip to content

Instantly share code, notes, and snippets.

@basarat
Last active December 13, 2017 16:49
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save basarat/87d0a17a850b74a1cc07 to your computer and use it in GitHub Desktop.
Save basarat/87d0a17a850b74a1cc07 to your computer and use it in GitHub Desktop.
Atom Styles.less
// Style the find results
atom-text-editor::shadow .highlight.find-result .region {
background: rgb(163,163,0);
transition: background-color 0.2s, border-color 0.2s;
}
atom-text-editor::shadow .highlight.current-result .region,
atom-text-editor::shadow .highlight.current-result ~ .highlight.selection .region {
background: orange;
border-color: red;
}
// Style the git gutter
atom-text-editor::shadow .gutter .line-number.git-line-added {
border-left-width: 10px;
border-left-color: lime;
padding-left: calc(~"0.5em - 10px");
}
atom-text-editor::shadow .gutter .line-number.git-line-modified {
border-left-width: 10px;
border-left-color: yellow;
padding-left: calc(~"0.5em - 10px");
}
atom-text-editor::shadow .gutter .line-number.git-line-removed:before {
bottom: -15px;
margin-top: -15px;
border-width: 15px;
border-left-color: red;
}
@Tuaniwan
Copy link

Tuaniwan commented Dec 13, 2017

the shadow part is deprecated, here is an updated version. (Remove the space after the ~ character, as it was doing this to the text otherwise)

// Style the find results
atom-text-editor.editor .highlight.find-result .region {
background: rgb(163,163,0);
transition: background-color 0.2s, border-color 0.2s;
}
atom-text-editor.editor .highlight.current-result .region,
atom-text-editor.editor .highlight.current-result ~ .highlight.selection .region {
background: orange;
border-color: red;
}

// Style the git gutter
atom-text-editor.editor .gutter .line-number.git-line-added {
border-left-width: 10px;
border-left-color: lime;
padding-left: calc(~ "0.5em - 10px");
}
atom-text-editor.editor .gutter .line-number.git-line-modified {
border-left-width: 10px;
border-left-color: yellow;
padding-left: calc(~ "0.5em - 10px");
}
atom-text-editor.editor .gutter .line-number.git-line-removed:before {
bottom: -15px;
margin-top: -15px;
border-width: 15px;
border-left-color: red;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment