github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-04-28 03:01:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

📝 Update text-editor example

Browse Source
This commit is contained in:
simurai
2015-01-20 16:03:47 +09:00
parent 323ce940f9
commit 6f4107fe5d
1 changed files with 2 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/upgrading/upgrading-your-syntax-theme.md
View File

@@ -6,19 +6,16 @@ Syntax themes are specifically intended to style only text editor content, so th
When theme style sheets are loaded into the text editor's shadow DOM, selectors intended to target the editor from the *outside* no longer make sense. Styles targeting the `.editor` and `.editor-colors` classes instead need to target the `:host` pseudo-element, which matches against the containing `atom-text-editor` node. Check out the [Shadow DOM 201][host-pseudo-element] article for more information about the `:host` pseudo-element.
Here's an example from Atom's light syntax theme. Note that the previous selectors intended to target the editor from the outside have been retained to allow the theme to keep working during the transition phase when it is possible to disable the shadow DOM.
Here's an example from Atom's light syntax theme. Note that the `atom-text-editor` selector intended to target the editor from the outside has been retained to allow the theme to keep working during the transition phase when it is possible to disable the shadow DOM.
```css
.editor-colors, :host { /* :host added */
atom-text-editor, :host { /* :host added */
background-color: @syntax-background-color;
color: @syntax-text-color;
}
.editor, :host { /* :host added */
.invisible-character {
color: @syntax-invisible-character-color;
}
/* more nested selectors... */
}
```