mirror of
https://github.com/danog/sass-site.git
synced 2024-12-12 09:29:58 +01:00
74 lines
1.9 KiB
SCSS
74 lines
1.9 KiB
SCSS
@use 'sass:color';
|
|
@use '../breakpoints';
|
|
@use '../config/color/brand';
|
|
|
|
// Use h2 sizes for condensed header
|
|
.sl-r-banner-playground h1 {
|
|
@include breakpoints.sl-breakpoint--medium {
|
|
--h1-size: var(--sl-font-size--xx-large);
|
|
}
|
|
|
|
@include breakpoints.sl-breakpoint--large {
|
|
--h1-size: var(--sl-font-size--xxx-large);
|
|
}
|
|
}
|
|
|
|
.playground-wrapper {
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
gap: var(--sl-gutter);
|
|
|
|
@include breakpoints.sl-breakpoint--medium {
|
|
flex-flow: nowrap;
|
|
}
|
|
|
|
> div {
|
|
// Duplicated from fun fact- should this be defined elsewhere?
|
|
border: var(--sl-border--small) solid
|
|
color.adjust(brand.$sl-color--patina, $lightness: 32%);
|
|
flex: 50%;
|
|
}
|
|
|
|
.code-editor-tabbar {
|
|
background-color: color.adjust(brand.$sl-color--patina, $lightness: 32%);
|
|
|
|
button {
|
|
background-color: color.adjust(brand.$sl-color--patina, $lightness: 32%);
|
|
font-weight: bold;
|
|
color: var(--text, var(--sl-color--pale-sky));
|
|
padding: var(--sl-gutter--half);
|
|
border: 0;
|
|
}
|
|
|
|
$options: 'scss', 'indented', 'expanded', 'compressed';
|
|
|
|
@each $option in $options {
|
|
&[data-active='#{$option}'] [data-value='#{$option}'] {
|
|
background-color: var(--sl-color--code-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
#code-editor-error-alert {
|
|
display: none;
|
|
|
|
// From warning callout
|
|
background: color.adjust(brand.$sl-color--hopbush, $lightness: 38%);
|
|
border: var(--sl-border--small) solid
|
|
color.adjust(brand.$sl-color--hopbush, $lightness: 27%);
|
|
font-family: 'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono',
|
|
'Droid Sans Mono', monospace;
|
|
font-size: var(--sl-font-size--x-small);
|
|
padding: var(--sl-gutter--half);
|
|
|
|
// TODO Font weight bold not imported from Google Fonts
|
|
font-weight: bold;
|
|
}
|
|
|
|
&[data-compiler-has-error='true'] {
|
|
#code-editor-error-alert {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|