danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-22 13:51:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update selectors to match style guide

Browse Source
This commit is contained in:
James Stuckey Weber 2023-06-15 15:19:37 -04:00
parent 9969e5655d
commit a433c2588b
3 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
source/assets/js/playground.ts
View File

@ -56,13 +56,13 @@ function setupPlayground() {
}
}),
],
parent: document.getElementById('editor') || document.body,
parent: document.querySelector('.sl-code-is-precompiled') || undefined,
});
// Setup CSS view
const viewer = new EditorView({
extensions: [...outputSetup],
parent: document.getElementById('css-view') || document.body,
parent: document.querySelector('.sl-code-is-compiled') || undefined,
});
// Apply initial state to dom
@ -163,7 +163,9 @@ function setupPlayground() {
* so the output is collected through the compilation and the display updated just once.
*/
function updateDebugOutput() {
const console = document.querySelector('.console') as HTMLDivElement;
const console = document.querySelector(
'.sl-c-playground__console',
) as HTMLDivElement;
console.innerHTML = playgroundState.debugOutput
.map(displayForConsoleLog)
.join('\n');

15
source/assets/sass/components/_playground.scss
View File

@ -159,13 +159,13 @@
outline: 0;
}
}
.sl-code-is-precompiled & {
cursor: text;
}
}
#editor {
cursor: text;
}
.console {
.sl-c-playground__console {
font-family: typography.$sl-font-family--code;
max-height: 500px;
margin: 0;
@ -174,8 +174,7 @@
.console-line {
display: grid;
gap: var(--sl-gutter);
grid-template:
'location message' auto / 10ch 1fr;
grid-template: 'location message' auto / 10ch 1fr;
}
.console-message {
@ -219,7 +218,7 @@
}
}
#code-editor-error-alert {
.sl-c-playground__error {
display: none;
font-weight: typography.$sl-font-weight--bold;

8
source/playground.liquid
View File

@ -22,7 +22,7 @@ is_playground: true
class="sl-c-button sl-c-button--tab"
data-setting="inputFormat">Sass</button>
</div>
<div id="editor"></div>
<div class="sl-code-is-precompiled"></div>
</div>
<div class="sl-c-playground__code-editor-wrapper" data-code="compiled">
<div class="sl-c-playground__editor-tabbar" data-setting="outputFormat">
@ -45,8 +45,8 @@ is_playground: true
(Compiled)
</span>
</div>
<div id="code-editor-error-alert" class="sl-c-callout sl-c-callout--warning">Please resolve error to view compiled CSS.</div>
<div id="css-view" class="sl-code-is-compiled"></div>
<div class="sl-c-callout sl-c-callout--warning sl-c-playground__error">Please resolve error to view compiled CSS.</div>
<div class="sl-code-is-compiled"></div>
</div>
<div class="sl-c-playground__console-wrapper">
<div class="sl-c-playground__editor-tabbar">
@ -54,7 +54,7 @@ is_playground: true
Console
</span>
</div>
<pre class="console"></pre>
<pre class="sl-c-playground__console"></pre>
</div>
</div>