mirror of
https://github.com/danog/sass-site.git
synced 2024-12-12 01:19:50 +01:00
320 lines
6.8 KiB
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
|
|
);
|
|
}
|
|
}
|