mirror of
https://github.com/danog/sass-site.git
synced 2024-11-26 20:14:53 +01:00
use namespacing on classes, edit playground layout
This commit is contained in:
Stacy Kvernmo
parent
351f932b41
commit
4c6a19bc49
@ -6,17 +6,19 @@
|
||||
|
||||
<div class="sl-c-pop-stripe"></div>
|
||||
<div class="sl-l-container">
|
||||
<div class="sl-l-grid sl-l-grid--full sl-l-small-grid--fit sl-l-small-grid--center sl-l-small-grid--gutters">
|
||||
<div class="sl-l-grid sl-l-grid--full sl-l-small-grid--fit sl-l-large-grid--center sl-l-small-grid--justify-space-between sl-l-small-grid--gutters">
|
||||
<p class="sl-l-grid__column sl-r-banner__brand">
|
||||
<a href="/"><img
|
||||
height="24"
|
||||
alt="Sass"
|
||||
src="/assets/img/logos/logo.svg"></a>
|
||||
</p>
|
||||
<h1 class="sl-l-grid__column">{{ title }}</h1>
|
||||
<div class="sl-l-grid__column">
|
||||
<button type="button" id="playground-copy-url">Copy URL</button>
|
||||
<div class="alert" id="playground-copied-alert">URL copied to clipboard</div>
|
||||
<h1 class="sl-l-grid__column sl-l-large-grid--center">{{ title }}</h1>
|
||||
<div class="sl-l-grid sl-l-grid__column sl-l-large-grid--center playground-actions">
|
||||
<button type="button" id="playground-copy-url" class="sl-c-button">Copy URL</button>
|
||||
<div class="sl-c-alert playground-alert" id="playground-copied-alert">
|
||||
URL copied to clipboard
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
@use 'sass:color';
|
||||
@use '../visual-design/typography';
|
||||
|
||||
.sl-c-button {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: var(--sl-border-radius--large);
|
||||
border-radius: var(--radius-button, var(--sl-border-radius--large));
|
||||
background: var(--color-button-bg, var(--sl-color--iron));
|
||||
box-shadow: 0 2px 1px var(--sl-color--shadow);
|
||||
color: var(--color-button-text, var(--sl-color--highlight));
|
||||
@ -43,6 +44,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--tab {
|
||||
--color-button-bg: var(--color-tab-bg, --sl-color--code-background);
|
||||
--color-button-text: var(--text, var(--sl-color--pale-sky));
|
||||
--radius-button: 0;
|
||||
box-shadow: none;
|
||||
font-weight: typography.$sl-font-weight--bold;
|
||||
}
|
||||
|
||||
&:has(.caps) {
|
||||
--display-btn: inline;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@use '../config/color/brand';
|
||||
|
||||
.sl-c-callout {
|
||||
margin: var(--sl-gutter--sesqui) 0;
|
||||
margin: var(--sl-c-callout--block-margin, var(--sl-gutter--sesqui)) 0;
|
||||
padding: var(--sl-gutter--sesqui) var(--sl-gutter);
|
||||
background: color.adjust(brand.$sl-color--pale-sky, $lightness: 60%);
|
||||
border-radius: var(--sl-border-radius--small);
|
||||
|
||||
@ -3,26 +3,48 @@
|
||||
@use '../config/color/brand';
|
||||
@use '../visual-design/typography';
|
||||
|
||||
.playground {
|
||||
display: grid;
|
||||
grid-template:
|
||||
'header' auto
|
||||
'main' 1fr
|
||||
'footer' auto / 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
#main-content {
|
||||
display: grid;
|
||||
grid-template:
|
||||
'editor' 1fr
|
||||
'alert' min-content;
|
||||
}
|
||||
}
|
||||
|
||||
// Use smaller sizes for condensed header
|
||||
.sl-r-banner-playground {
|
||||
--h1-size: var(--sl-font-size--xx-large);
|
||||
--h1-size-lg: var(--sl-playground-heading);
|
||||
}
|
||||
|
||||
.sl-l-section-playground {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button#playground-copy-url {
|
||||
float: right;
|
||||
.playground-actions {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#playground-copied-alert {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s linear;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#playground-copied-alert {
|
||||
opacity: 0;
|
||||
float: right;
|
||||
transition: opacity 0.3s linear;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.playground-actions {
|
||||
gap: var(--sl-gutter--double);
|
||||
}
|
||||
|
||||
.playground-alert {
|
||||
@ -30,98 +52,107 @@
|
||||
padding-right: var(--sl-gutter);
|
||||
}
|
||||
|
||||
.code-editor-wrapper {
|
||||
// Duplicated from fun fact- should this be defined elsewhere?
|
||||
border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
|
||||
.playground-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
// Playground Editor area
|
||||
.sl-c-playground {
|
||||
--sl-c-callout--block-margin: 0;
|
||||
display: grid;
|
||||
gap: var(--sl-gutter);
|
||||
|
||||
flex-grow: 1;
|
||||
min-width: calc((100% - var(--sl-gutter)) / 2);
|
||||
@include breakpoints.sl-breakpoint--medium {
|
||||
grid-template:
|
||||
'sass css' 1fr
|
||||
'debug debug' minmax(0, auto) / 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Precompiled and Compiled code container
|
||||
.sl-c-playground__code-editor-wrapper {
|
||||
background-color: var(--sl-color-editor-background);
|
||||
border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.sl-c-playground__console-wrapper {
|
||||
grid-area: debug;
|
||||
min-width: calc((100% - var(--sl-gutter)) / 2);
|
||||
}
|
||||
|
||||
[data-code='precompiled'] {
|
||||
--sl-color-editor-background: var(--sl-color--white);
|
||||
grid-template-rows: min-content 1fr;
|
||||
}
|
||||
|
||||
[data-code='compiled'] {
|
||||
--sl-color-editor-background: var(--sl-color--code-background);
|
||||
grid-template-rows: min-content minmax(0, auto) 1fr;
|
||||
}
|
||||
|
||||
|
||||
.ͼ1 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#editor {
|
||||
--sl-color-editor-background: var(--sl-color--white);
|
||||
#editor {
|
||||
cursor: text;
|
||||
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
#css-view {
|
||||
--sl-color-editor-background: var(--sl-color--code-background);
|
||||
}
|
||||
.console {
|
||||
font-family: 'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono',
|
||||
'Droid Sans Mono', monospace;
|
||||
min-height: 2em;
|
||||
max-height: 500px;
|
||||
margin: 0;
|
||||
|
||||
.console {
|
||||
font-family: 'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono',
|
||||
'Droid Sans Mono', monospace;
|
||||
min-height: 2em;
|
||||
max-height: 500px;
|
||||
hr,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
hr,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
$console-type-colors: (
|
||||
'error': red,
|
||||
'warn': orange,
|
||||
'debug': green,
|
||||
);
|
||||
|
||||
$console-type-colors: (
|
||||
'error': red,
|
||||
'warn': orange,
|
||||
'debug': green,
|
||||
);
|
||||
|
||||
@each $name, $color in $console-type-colors {
|
||||
.console-type-#{$name} {
|
||||
color: $color;
|
||||
}
|
||||
@each $name, $color in $console-type-colors {
|
||||
.console-type-#{$name} {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.code-editor-tabbar {
|
||||
|
||||
.sl-c-playground__editor-tabbar {
|
||||
background-color: var(--sl-color--code-background-darker);
|
||||
|
||||
button {
|
||||
background-color: var(--sl-color--tab-bg, --sl-color--code-background);
|
||||
border: 0;
|
||||
color: var(--text, var(--sl-color--pale-sky));
|
||||
cursor: pointer;
|
||||
font-weight: typography.$sl-font-weight--bold;
|
||||
padding: var(--sl-gutter--half);
|
||||
|
||||
&:hover {
|
||||
// TODO- add hover styles
|
||||
}
|
||||
}
|
||||
|
||||
$sassoptions: 'scss', 'indented';
|
||||
|
||||
@each $option in $sassoptions {
|
||||
&[data-active='#{$option}'] [data-value='#{$option}'] {
|
||||
--sl-color--tab-bg: var(--sl-color--white);
|
||||
--color-tab-bg: var(--sl-color--white);
|
||||
--color-button-text: var(--text, var(--sl-color--pale-sky));
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
--color-tab-bg: var(--sl-color--white);
|
||||
--color-button-text: var(--text, var(--sl-color--pale-sky));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$cssoptions: 'expanded', 'compressed';
|
||||
@each $option in $cssoptions {
|
||||
&[data-active='#{$option}'] [data-value='#{$option}'] {
|
||||
--sl-color--tab-bg: var(--sl-color--code-background);
|
||||
--color-tab-bg: var(--sl-color--code-background);
|
||||
--color-button-text: var(--text, var(--sl-color--pale-sky));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#code-editor-error-alert {
|
||||
display: none;
|
||||
|
||||
// From warning callout
|
||||
background: color.adjust(brand.$sl-color--hopbush, $lightness: 38%);
|
||||
border: var(--sl-border--small) solid
|
||||
var(--sl-color--code-background);
|
||||
font-family: typography.$sl-font-family--code;
|
||||
|
||||
|
||||
// TODO Font weight bold not imported from Google Fonts
|
||||
font-weight: typography.$sl-font-weight--bold;
|
||||
}
|
||||
|
||||
|
||||
@ -3,29 +3,30 @@ layout: base
|
||||
title: 'Playground'
|
||||
is_playground: true
|
||||
---
|
||||
<div id="docsearch"></div>
|
||||
<div class="playground-wrapper" data-compiler-has-error="false">
|
||||
<div class="code-editor-wrapper">
|
||||
<div class="sl-c-playground" data-compiler-has-error="false">
|
||||
<div class="sl-c-playground__code-editor-wrapper" data-code="precompiled">
|
||||
<div
|
||||
class="code-editor-tabbar playground-precompiled"
|
||||
class="sl-c-playground__editor-tabbar"
|
||||
data-active="scss"
|
||||
data-setting="inputFormat">
|
||||
<button
|
||||
type="button"
|
||||
data-value="scss"
|
||||
data-tabbar="item"
|
||||
class="sl-c-button sl-c-button--tab"
|
||||
data-setting="inputFormat">SCSS</button>
|
||||
<button
|
||||
type="button"
|
||||
data-value="indented"
|
||||
data-tabbar="item"
|
||||
class="sl-c-button sl-c-button--tab"
|
||||
data-setting="inputFormat">Sass</button>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
<div class="code-editor-wrapper">
|
||||
<div class="sl-c-playground__code-editor-wrapper" data-code="compiled">
|
||||
<div
|
||||
class="code-editor-tabbar"
|
||||
class="sl-c-playground__editor-tabbar"
|
||||
data-active="expanded"
|
||||
data-setting="outputFormat">
|
||||
<span data-tabbar="item">
|
||||
@ -36,20 +37,22 @@ is_playground: true
|
||||
type="button"
|
||||
data-value="expanded"
|
||||
data-tabbar="item"
|
||||
class="sl-c-button sl-c-button--tab"
|
||||
data-setting="outputFormat">Expanded</button>
|
||||
<button
|
||||
type="button"
|
||||
data-value="compressed"
|
||||
data-tabbar="item"
|
||||
class="sl-c-button sl-c-button--tab"
|
||||
data-setting="outputFormat">Compressed</button>
|
||||
</div>
|
||||
<div id="code-editor-error-alert">Please resolve error to view compiled CSS.</div>
|
||||
<div id="css-view"></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="is-compiled"></div>
|
||||
</div>
|
||||
<div class="console-wrapper">
|
||||
<div class="code-editor-tabbar">
|
||||
<div class="sl-c-playground__console-wrapper">
|
||||
<div class="sl-c-playground__editor-tabbar">
|
||||
<span data-tabbar="item">
|
||||
Debug Console
|
||||
Console
|
||||
</span>
|
||||
</div>
|
||||
<pre class="console"></pre>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user