@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 ); } }