Skip to content

Commit

Permalink
refactor(client): Scope global CSS selectors in Debug panel (#527)
Browse files Browse the repository at this point in the history
Previously, `<button>`, `<section>`, and `<select>` elements where being 
styled directly with global scope. This poses a fairly high risk of 
leaking styles to elements in the rest of a game using the debug panel.

This restricts the scope of those global selectors to only apply to 
children of the root debug panel component.
  • Loading branch information
delucis authored and nicolodavis committed Dec 1, 2019
1 parent ef4f24d commit 9ce176c
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions src/client/debug/Debug.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
background: #fefefe;
}
:global(button, select) {
.debug-panel :global(button, select) {
cursor: pointer;
outline: none;
background: #eee;
Expand All @@ -84,21 +84,21 @@
border-radius: 3px;
}
:global(button) {
.debug-panel :global(button) {
padding-left: 10px;
padding-right: 10px;
}
:global(button:hover) {
.debug-panel :global(button:hover) {
background: #ddd;
}
:global(button:active) {
.debug-panel :global(button:active) {
background: #888;
color: #fff;
}
:global(section) {
.debug-panel :global(section) {
margin-bottom: 20px;
}
</style>
Expand Down

0 comments on commit 9ce176c

Please sign in to comment.