From decae9e34c149a584b9325680c12308e7aea3eef Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Sun, 16 Nov 2014 10:50:56 -0700 Subject: [PATCH 01/15] Start on upgrading UI theme guide --- docs/upgrading/upgrading-your-ui-theme.md | 105 ++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 docs/upgrading/upgrading-your-ui-theme.md diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md new file mode 100644 index 000000000..f42a5aa82 --- /dev/null +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -0,0 +1,105 @@ +# Upgrading your UI Theme + +In addition to changes in Atom's scripting API, we'll also be making some breaking changes to Atom's DOM structure, requiring style sheets in both packages and themes to be updated. Deprecation cop will list usages of deprecated selector patterns to guide you. + +## Custom Tags + +Rather than adding classes to standard HTML elements to indicate their role, Atom now uses custom element names. For example, `
` has now been replaced with ``. Selectors should be updated accordingly. Note that tag names have lower specificity than classes in CSS, so you'll need to take care in converting things. + +Old Selector | New Selector +--------------------|-------------------------------- +`.editor` | `atom-text-editor` +`.editor.mini` | `atom-text-editor[mini]` +`.workspace` | `atom-workspace` +`.horizontal` | `atom-workspace-axis.horizontal` +`.vertical` | `atom-workspace-axis.vertical` +`.pane-container` | `atom-pane-conatiner` +`.pane` | `atom-pane` +`.tool-panel` | `atom-panel` +`.panel-top` | `atom-panel[location="top"]` +`.panel-bottom` | `atom-panel[location="bottom"]` +`.panel-left` | `atom-panel[location="left"]` +`.panel-right` | `atom-panel[location="right"]` + +## Supporting the Shadow DOM + +Text editor content is now rendered in the shadow DOM, which shields it from being styled by global style sheets to protect against accidental style pollution. For more background on the shadow DOM, check out the [Shadow DOM 101][shadow-dom-101] on HTML 5 Rocks. If you need to style text editor content in a UI theme, you'll need to circumvent this protection for any rules that target the text editor's content. Some examples of the kinds of UI theme styles needing to be updated: + +* Highlight decorations +* Gutter decorations +* Line decorations +* Scrollbar styling + +During a transition phase, it will be possible to enable or disable the text editor's shadow DOM in the settings, so themes will need to be compatible with both approaches. + +### Shadow DOM Combinators + +Chromium provides two tools for bypassing shadow boundaries, the `::shadow` pseudo-element and the `/deep/` combinator. For an in-depth explanation of styling the shadow DOM, see the [Shadow DOM 201][shadow-dom-201] article on HTML 5 Rocks. + +#### ::shadow + +The `::shadow` pseudo-element allows you to bypass a single shadow root. For example, say you want to update a highlight decoration for a linter package. Initially, the style looks as follows: + +```css +atom-text-editor .highlight.my-linter { + background: hotpink; +} +``` + +In order for this style to apply with the shadow DOM enabled, you will need to add a second selector with the `::shadow` pseudo-element. You should leave the original selector in place so your theme continues to work with the shadow DOM disabled during the transition period. + +```css +atom-text-editor .highlight.my-linter, +atom-text-editor::shadow .highlight.my-linter { + background: hotpink; +} +``` + +#### /deep/ + +The `/deep/` combinator overrides *all* shadow boundaries, making it useful for rules you want to apply globally such as scrollbar styling. Here's a snippet containing scrollbar styling for the Atom Dark UI theme before shadow DOM support: + +```css +.scrollbars-visible-always { + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track, + ::-webkit-scrollbar-corner { + background: @scrollbar-background-color; + } + + ::-webkit-scrollbar-thumb { + background: @scrollbar-color; + border-radius: 5px; + box-shadow: 0 0 1px black inset; + } +} +``` + +To style scrollbars even inside of the shadow DOM, each rule needs to be prefixed with `/deep/`. We use `/deep/` instead of `::shadow` because we don't care about the selector of the host element in this case. We just want our styling to apply everywhere. + +```css +.scrollbars-visible-always { + /deep/ ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + /deep/ ::-webkit-scrollbar-track, + /deep/ ::-webkit-scrollbar-corner { + background: @scrollbar-background-color; + } + + /deep/ ::-webkit-scrollbar-thumb { + background: @scrollbar-color; + border-radius: 5px; + box-shadow: 0 0 1px black inset; + } +} +``` + +[shadow-dom-101]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom +[shadow-dom-201]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ From e2ecff5e2364f700211e98dc61a11dfb3d47e04f Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Sun, 16 Nov 2014 15:07:02 -0700 Subject: [PATCH 02/15] Talk about context-targeted style sheets --- docs/upgrading/upgrading-your-ui-theme.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index f42a5aa82..81805af3e 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -32,7 +32,7 @@ Text editor content is now rendered in the shadow DOM, which shields it from bei During a transition phase, it will be possible to enable or disable the text editor's shadow DOM in the settings, so themes will need to be compatible with both approaches. -### Shadow DOM Combinators +### Shadow DOM Selectors Chromium provides two tools for bypassing shadow boundaries, the `::shadow` pseudo-element and the `/deep/` combinator. For an in-depth explanation of styling the shadow DOM, see the [Shadow DOM 201][shadow-dom-201] article on HTML 5 Rocks. @@ -101,5 +101,20 @@ To style scrollbars even inside of the shadow DOM, each rule needs to be prefixe } ``` +### Context-Targeted Style Sheets + +The selector features discussed above allow you to target shadow DOM content with specific selectors, but Atom also allows you to target a specific shadow DOM context with an entire style sheet. The context into which a style sheet is loaded is based on the file name. If you want to load a style sheet into the editor, name it with the `.atom-text-editor.less` or `.atom-text-editor.css` extensions. + +``` +my-ui-theme/ + stylesheets/ + index.less # loaded globally + index.atom-text-editor.less # loaded in the text editor shadow DOM +``` + +Inside a context-targeted style sheet, there's no need to use the `::shadow` or `/deep/` expressions. If you want to refer to the element containing the shadow root, you can use the `::host` pseudo-element. + +During the transition phase, style sheets targeting the `atom-text-editor` context will *also* be loaded globally, but that will change once the option to disable the shadow DOM is removed. + [shadow-dom-101]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom [shadow-dom-201]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ From 9d947d994e84deb18deb01f00241432d42b01240 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Sun, 16 Nov 2014 15:46:50 -0700 Subject: [PATCH 03/15] Add syntax theme upgrade guide --- docs/upgrading/upgrading-your-syntax-theme.md | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/upgrading/upgrading-your-syntax-theme.md diff --git a/docs/upgrading/upgrading-your-syntax-theme.md b/docs/upgrading/upgrading-your-syntax-theme.md new file mode 100644 index 000000000..eb3d3afe7 --- /dev/null +++ b/docs/upgrading/upgrading-your-syntax-theme.md @@ -0,0 +1,24 @@ +# Upgrading Your Syntax Theme + +Text editor content is now rendered in the shadow DOM, which shields it from being styled by global style sheets to protect against accidental style pollution. For more background on the shadow DOM, check out the [Shadow DOM 101][shadow-dom-101] on HTML 5 Rocks. + +Syntax themes are specifically intended to style only text editor content, so they are automatically loaded directly into the text editor's shadow DOM when it is enabled. This happens automatically when the the theme's `package.json` contains a `theme: "syntax"` declaration, so you don't need to change anything to target the appropriate context. + +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 targeted the `.editor` and `.editor-colors` classes instead need to target the `:host` pseudo-element, which matches against the containing `atom-text-editor` node. + +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. + +```css +.editor-colors, :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... */ +} +``` From bbaf908bb236e421a52b984048fc64cd725eaa2c Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Mon, 17 Nov 2014 11:36:41 -0700 Subject: [PATCH 04/15] Add example links --- docs/upgrading/upgrading-your-ui-theme.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index 81805af3e..dbebd4932 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -55,6 +55,8 @@ atom-text-editor::shadow .highlight.my-linter { } ``` +Check out the [find-and-replace][https://github.com/atom/find-and-replace/blob/master/stylesheets/find-and-replace.less#L10] package for another example of using `::shadow` to pierce the shadow DOM. + #### /deep/ The `/deep/` combinator overrides *all* shadow boundaries, making it useful for rules you want to apply globally such as scrollbar styling. Here's a snippet containing scrollbar styling for the Atom Dark UI theme before shadow DOM support: @@ -112,9 +114,11 @@ my-ui-theme/ index.atom-text-editor.less # loaded in the text editor shadow DOM ``` +Check out this [style sheet](https://github.com/atom/decoration-example/blob/master/stylesheets/decoration-example.atom-text-editor.less) from the decoration-example package for an example of context-targeting. + Inside a context-targeted style sheet, there's no need to use the `::shadow` or `/deep/` expressions. If you want to refer to the element containing the shadow root, you can use the `::host` pseudo-element. -During the transition phase, style sheets targeting the `atom-text-editor` context will *also* be loaded globally, but that will change once the option to disable the shadow DOM is removed. +During the transition phase, style sheets targeting the `atom-text-editor` context will *also* be loaded globally. Make sure you update your selectors in a way that maintains compatibility with the shadow DOM being disabled. That means if you use a `::host` pseudo element, you should also include the same style rule matches against `atom-text-editor`. [shadow-dom-101]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom [shadow-dom-201]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ From d237b3448c0f4b5c04cbe805f42bf10f60fe8b8b Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 13:50:57 -0800 Subject: [PATCH 05/15] Add theme guides to the index --- docs/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/index.md b/docs/index.md index e4a25367c..fdc8a43e7 100644 --- a/docs/index.md +++ b/docs/index.md @@ -20,3 +20,8 @@ * [Serialization](advanced/serialization.md) * [View System](advanced/view-system.md) * [Scopes and Scope Descriptors](advanced/scopes-and-scope-descriptors.md) + +### Upgrading to 1.0 APIs + +* [Upgrading your UI Theme](upgrading/upgrading-your-ui-theme.md) +* [Upgrading your Syntax Theme](upgrading/upgrading-your-syntax-theme.md) From f168aafc33f73c50ff0ec1c3da3420f000142787 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 13:59:37 -0800 Subject: [PATCH 06/15] Tiny :lipstick: change --- docs/upgrading/upgrading-your-syntax-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrading/upgrading-your-syntax-theme.md b/docs/upgrading/upgrading-your-syntax-theme.md index eb3d3afe7..9c8550a4d 100644 --- a/docs/upgrading/upgrading-your-syntax-theme.md +++ b/docs/upgrading/upgrading-your-syntax-theme.md @@ -4,7 +4,7 @@ Text editor content is now rendered in the shadow DOM, which shields it from bei Syntax themes are specifically intended to style only text editor content, so they are automatically loaded directly into the text editor's shadow DOM when it is enabled. This happens automatically when the the theme's `package.json` contains a `theme: "syntax"` declaration, so you don't need to change anything to target the appropriate context. -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 targeted the `.editor` and `.editor-colors` classes instead need to target the `:host` pseudo-element, which matches against the containing `atom-text-editor` node. +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. 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. From 133bf0cedb9e5ed93ddd2039ebedc9826c9ce251 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 14:10:31 -0800 Subject: [PATCH 07/15] Update title to reference packages too --- docs/upgrading/upgrading-your-ui-theme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index dbebd4932..c898b8e36 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -1,6 +1,6 @@ -# Upgrading your UI Theme +# Upgrading your UI Theme or Package Stylesheets -In addition to changes in Atom's scripting API, we'll also be making some breaking changes to Atom's DOM structure, requiring style sheets in both packages and themes to be updated. Deprecation cop will list usages of deprecated selector patterns to guide you. +In addition to changes in Atom's scripting API, we'll also be making some breaking changes to Atom's DOM structure, requiring stylesheets in both packages and themes to be updated. Deprecation cop will list usages of deprecated selector patterns to guide you. ## Custom Tags From 3969c719323b466ac0b093b31ba15fb5c0fc818f Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 14:11:00 -0800 Subject: [PATCH 08/15] Add some comments to the examples for clarity --- docs/upgrading/upgrading-your-ui-theme.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index c898b8e36..dc0663f55 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -41,6 +41,7 @@ Chromium provides two tools for bypassing shadow boundaries, the `::shadow` pseu The `::shadow` pseudo-element allows you to bypass a single shadow root. For example, say you want to update a highlight decoration for a linter package. Initially, the style looks as follows: ```css +// Without shadow DOM support atom-text-editor .highlight.my-linter { background: hotpink; } @@ -49,6 +50,7 @@ atom-text-editor .highlight.my-linter { In order for this style to apply with the shadow DOM enabled, you will need to add a second selector with the `::shadow` pseudo-element. You should leave the original selector in place so your theme continues to work with the shadow DOM disabled during the transition period. ```css +// With shadow DOM support atom-text-editor .highlight.my-linter, atom-text-editor::shadow .highlight.my-linter { background: hotpink; @@ -62,6 +64,7 @@ Check out the [find-and-replace][https://github.com/atom/find-and-replace/blob/m The `/deep/` combinator overrides *all* shadow boundaries, making it useful for rules you want to apply globally such as scrollbar styling. Here's a snippet containing scrollbar styling for the Atom Dark UI theme before shadow DOM support: ```css +// Without shadow DOM support .scrollbars-visible-always { ::-webkit-scrollbar { width: 8px; @@ -84,6 +87,7 @@ The `/deep/` combinator overrides *all* shadow boundaries, making it useful for To style scrollbars even inside of the shadow DOM, each rule needs to be prefixed with `/deep/`. We use `/deep/` instead of `::shadow` because we don't care about the selector of the host element in this case. We just want our styling to apply everywhere. ```css +// With shadow DOM support using /deep/ .scrollbars-visible-always { /deep/ ::-webkit-scrollbar { width: 8px; From 041d3f5c4c28b4a575b8257ae0ba5bd3f0578191 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 14:11:14 -0800 Subject: [PATCH 09/15] Fix link --- docs/upgrading/upgrading-your-ui-theme.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index dc0663f55..5a7f5bde4 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -57,7 +57,7 @@ atom-text-editor::shadow .highlight.my-linter { } ``` -Check out the [find-and-replace][https://github.com/atom/find-and-replace/blob/master/stylesheets/find-and-replace.less#L10] package for another example of using `::shadow` to pierce the shadow DOM. +Check out the [find-and-replace][find-and-replace] package for another example of using `::shadow` to pierce the shadow DOM. #### /deep/ @@ -126,3 +126,4 @@ During the transition phase, style sheets targeting the `atom-text-editor` conte [shadow-dom-101]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom [shadow-dom-201]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ +[find-and-replace]: https://github.com/atom/find-and-replace/blob/95351f261bc384960a69b66bf12eae8002da63f9/stylesheets/find-and-replace.less#L10 From 856370f522d8d81e3e6c22b59c697b5aa06cb3b2 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 14:11:21 -0800 Subject: [PATCH 10/15] Add one more bullet point --- docs/upgrading/upgrading-your-ui-theme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index 5a7f5bde4..7b8773c31 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -29,6 +29,7 @@ Text editor content is now rendered in the shadow DOM, which shields it from bei * Gutter decorations * Line decorations * Scrollbar styling +* Anything targeting a child selector of `.editor` During a transition phase, it will be possible to enable or disable the text editor's shadow DOM in the settings, so themes will need to be compatible with both approaches. From ff78a5b075c57e89a09597220ce05b832554c64a Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 14:24:11 -0800 Subject: [PATCH 11/15] Add bit about deprecation cop --- docs/upgrading/upgrading-your-ui-theme.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index 7b8773c31..58dc3a38e 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -1,6 +1,12 @@ # Upgrading your UI Theme or Package Stylesheets -In addition to changes in Atom's scripting API, we'll also be making some breaking changes to Atom's DOM structure, requiring stylesheets in both packages and themes to be updated. Deprecation cop will list usages of deprecated selector patterns to guide you. +In addition to changes in Atom's scripting API, we'll also be making some breaking changes to Atom's DOM structure, requiring stylesheets and keymaps in both packages and themes to be updated. + +## Deprecation Cop + +Deprecation cop will list usages of deprecated selector patterns to guide you. You can access it via the command palette (`cmd-shift-p`, then search for `Deprecation`). It breaks the deprecations down by package: + +![dep-cop](https://cloud.githubusercontent.com/assets/69169/5078860/d38a5df4-6e64-11e4-95b6-eb585ee9bbfc.png) ## Custom Tags From dd0bed9bff3e69e428dfcb46ac081b213698e16e Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 14:24:19 -0800 Subject: [PATCH 12/15] Add .overlay to the list --- docs/upgrading/upgrading-your-ui-theme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index 58dc3a38e..e12ecccd1 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -26,6 +26,7 @@ Old Selector | New Selector `.panel-bottom` | `atom-panel[location="bottom"]` `.panel-left` | `atom-panel[location="left"]` `.panel-right` | `atom-panel[location="right"]` +`.overlay` | `atom-panel[location="modal"]` ## Supporting the Shadow DOM From d327d4923feeb40ab5ad719de36050acdf11db22 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 15:44:16 -0800 Subject: [PATCH 13/15] Stylesheets -> Selectors --- docs/upgrading/upgrading-your-ui-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index e12ecccd1..6479b935d 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -1,4 +1,4 @@ -# Upgrading your UI Theme or Package Stylesheets +# Upgrading Your UI Theme Or Package Selectors In addition to changes in Atom's scripting API, we'll also be making some breaking changes to Atom's DOM structure, requiring stylesheets and keymaps in both packages and themes to be updated. From 2710d404030a6a01c0d60a4bc23a9437b6627cc6 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 15:48:38 -0800 Subject: [PATCH 14/15] Change link titles --- docs/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/index.md b/docs/index.md index fdc8a43e7..97f1e6b45 100644 --- a/docs/index.md +++ b/docs/index.md @@ -23,5 +23,5 @@ ### Upgrading to 1.0 APIs -* [Upgrading your UI Theme](upgrading/upgrading-your-ui-theme.md) -* [Upgrading your Syntax Theme](upgrading/upgrading-your-syntax-theme.md) +* [Upgrading Your UI Theme Or Package Selectors](upgrading/upgrading-your-ui-theme.md) +* [Upgrading Your Syntax Theme](upgrading/upgrading-your-syntax-theme.md) From d914ae2a62351d4046b9e166db61c461a23679bb Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Mon, 17 Nov 2014 16:39:07 -0800 Subject: [PATCH 15/15] Use new panel classes --- docs/upgrading/upgrading-your-ui-theme.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/upgrading/upgrading-your-ui-theme.md b/docs/upgrading/upgrading-your-ui-theme.md index 6479b935d..0dbb9566a 100644 --- a/docs/upgrading/upgrading-your-ui-theme.md +++ b/docs/upgrading/upgrading-your-ui-theme.md @@ -22,11 +22,11 @@ Old Selector | New Selector `.pane-container` | `atom-pane-conatiner` `.pane` | `atom-pane` `.tool-panel` | `atom-panel` -`.panel-top` | `atom-panel[location="top"]` -`.panel-bottom` | `atom-panel[location="bottom"]` -`.panel-left` | `atom-panel[location="left"]` -`.panel-right` | `atom-panel[location="right"]` -`.overlay` | `atom-panel[location="modal"]` +`.panel-top` | `atom-panel.top` +`.panel-bottom` | `atom-panel.bottom` +`.panel-left` | `atom-panel.left` +`.panel-right` | `atom-panel.right` +`.overlay` | `atom-panel.modal` ## Supporting the Shadow DOM