sass-site/source/assets/sass/components/_playground.scss

320 lines
6.8 KiB
SCSS

@use 'sass:color';
@use '../breakpoints';
@use '../config/color/brand';
@use '../visual-design/typography';
.playground {
--sl-container-max-width: 100vw;
display: grid;
grid-template:
'header' min-content
'main' 1fr
'footer' min-content / 100%;
min-height: 100vh;
overflow: hidden auto;
@include breakpoints.sl-breakpoint--large {
height: 100vh;
overflow: hidden;
}
#main-content {
display: inherit;
overflow: inherit;
}
}
.sl-r-banner--playground-grid {
align-items: center;
display: grid;
grid-template:
'logo title copy' auto
'alert alert alert' minmax(0, auto) / 1fr 1fr 1fr;
@include breakpoints.sl-breakpoint--large {
grid-template: 'logo title copy' auto / 1fr 1fr 1fr;
}
}
// add padding to items in order for alert to be full width
.sl-r-banner--playground__brand {
padding-left: var(--sl-gutter);
@include breakpoints.sl-breakpoint--small {
padding-left: var(--sl-gutter--double);
}
}
.sl-l-section--playground {
--container-inline-padding: 0;
--container-inline-padding-large: 0;
border-bottom: 1px solid var(--sl-color--iron);
display: inherit;
overflow: inherit;
width: 100%;
}
.sl-r-banner__playground-title {
// Use smaller sizes for condensed header
--h1-size: var(--sl-font-size--xx-large);
--h1-size-lg: var(--sl-playground-heading);
margin-bottom: 0;
}
// Playground banner actions area
.sl-r-banner__playground-actions {
gap: var(--sl-gutter);
display: contents;
@include breakpoints.sl-breakpoint--large {
display: grid;
grid-template: 'alert copy' auto / minmax(0, auto) max-content;
}
}
.sl-r-banner__playground-button {
grid-area: copy;
padding-right: var(--sl-gutter);
text-align: right;
@include breakpoints.sl-breakpoint--small {
padding-right: var(--sl-gutter--double);
}
}
// Playground banner actions alert message
.sl-r-banner__playground-alert {
--alert-padding-block: 0;
grid-area: alert;
height: 0;
opacity: 0;
padding-left: var(--sl-gutter--half);
padding-right: var(--sl-gutter--half);
transition: opacity 0.3s 0.05s, visibility 0.3s;
visibility: hidden;
&.show {
--alert-padding-block: var(--sl-gutter--minus);
height: 100%;
opacity: 1;
visibility: visible;
}
}
// Playground Editor area
.sl-c-playground {
--sl-c-callout--block-margin: 0;
--sl-c-callout--block-padding: var(--sl-gutter--quarter);
display: grid;
gap: var(--sl-gutter);
grid-template:
'sass' 1fr
'css' auto
'debug' auto / 100%;
@include breakpoints.sl-breakpoint--large {
// magic numbers, the layout is well balanced with these proportions
grid-template:
'sass css' minmax(20ex, 1fr)
'sass debug' minmax(0, 40%) / 1fr 1fr;
height: 100%;
overflow: inherit;
}
}
.sl-c-playground__panel {
display: grid;
overflow: inherit;
grid-template:
'editor-tabbar' min-content
'editor-error' min-content
'editor-code' 1fr / 1fr;
}
.sl-c-playground__panel-content {
grid-area: editor-code;
overflow: hidden auto;
}
// 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);
}
[data-code='precompiled'] {
--sl-color-editor-background: var(--sl-color--white);
grid-area: sass;
}
[data-code='compiled'] {
--sl-color-editor-background: var(--sl-color--code-background);
}
// Codemirror overrides
.cm-editor {
background-color: var(--sl-color-editor-background);
color: var(--sl-color--code-base, var(--sl-color--code-text));
font-size: var(--sl-font-size--x-small);
height: 100%;
overflow-x: auto;
overflow-y: inherit;
.cm-gutters {
background-color: var(--sl-color-editor-background);
border-right: none;
}
.cm-lineNumbers .cm-gutterElement {
min-width: var(--sl-gutter--double);
}
.cm-content,
.cm-tooltip-lint {
font-family: typography.$sl-font-family--code;
}
.cm-scroller {
overflow: unset;
}
.cm-line {
padding-left: var(--sl-gutter);
}
.cm-activeLineGutter,
.cm-activeLine {
background-color: var(--sl-color--highlight-blush);
[data-code='compiled'] & {
background-color: var(--sl-color--code-background);
}
}
&.cm-focused {
[data-code='precompiled'] & {
outline: 1px solid var(--sl-color--border-blush);
}
[data-code='compiled'] & {
outline: 0;
}
}
.sl-code-is-precompiled & {
cursor: text;
}
}
// Compiled CSS error
.sl-c-playground__error {
display: none;
font-weight: typography.$sl-font-weight--bold;
grid-area: editor-error;
[data-compiler-has-error='true'] & {
display: block;
}
}
// Console specific styles
.sl-c-playground__console-wrapper {
grid-area: debug;
}
.sl-c-playground__console {
font-family: typography.$sl-font-family--code;
height: 100%;
margin: 0;
.console-line {
display: grid;
gap: var(--sl-gutter);
grid-template: 'location message' auto / 10ch 1fr;
}
.console-message {
display: grid;
}
$console-type-colors: (
'error': var(--sl-color--error),
'warn': var(--sl-color--warn),
'debug': var(--sl-color--success),
);
@each $name, $color in $console-type-colors {
.console-type-#{$name} {
color: $color;
}
}
}
// Playground Tab Bar & Buttons
.sl-c-playground__editor-tabbar {
background-color: var(--sl-color--code-background-darker);
display: flex;
grid-area: editor-tabbar;
[data-active='true'] {
--color-button-text-focus: var(--color-button-tab-active);
--color-button-text: var(--sl-color--pale-sky);
}
[data-code='precompiled'] & {
[data-active='true'] {
--color-button-background: var(--sl-color--white);
--color-button-background-state: var(--sl-color--white);
}
}
[data-code='compiled'] & {
[data-active='true'] {
--color-button-background: var(--sl-color--code-background);
--color-button-background-state: var(--sl-color--code-background);
}
}
}
// Make sure all tab bar buttons and text get the same padding
[data-tabbar~='item'] {
padding: var(--sl-gutter--half) var(--sl-gutter);
}
.sl-c-playground__tabbar-title {
// For nested caps in tab title, reset a few styles
.caps {
--sl-font-size--caps: var(--sl-font-size--medium);
font-weight: normal;
letter-spacing: 0;
}
// align the code editor titles to the right of the panel header area
.sl-c-playground__code-editor-wrapper & {
margin-left: auto;
text-align: right;
}
}
.sl-c-footer-link-grid {
align-items: center;
display: grid;
gap: var(--sl-gutter);
grid-template-columns: minmax(var(--twitter-link-width), auto) 1fr;
@include breakpoints.sl-breakpoint--large {
grid-template-columns: minmax(var(--twitter-link-width), auto) minmax(
var(--mac-stadium-icon-width),
auto
);
}
}