98 lines
1.6 KiB
SCSS
98 lines
1.6 KiB
SCSS
@mixin keyframes($animationName) {
|
|
@-webkit-keyframes #{$animationName} {
|
|
@content
|
|
}
|
|
@-moz-keyframes #{$animationName} {
|
|
@content
|
|
}
|
|
@-o-keyframes #{$animationName} {
|
|
@content
|
|
}
|
|
@keyframes #{$animationName} {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin unique-keyframes {
|
|
$animationName: unique-id();
|
|
animation-name: $animationName;
|
|
@include keyframes($animationName) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
[data-component=playground-code-editor-editor] {
|
|
position: relative;
|
|
height: 0;
|
|
|
|
.monaco-editor-light {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: var(--border);
|
|
|
|
.jsx-tag-angle-bracket {
|
|
color: #800000;
|
|
}
|
|
|
|
.jsx-text {
|
|
color: #000;
|
|
}
|
|
|
|
.jsx-tag-name {
|
|
color: #800000;
|
|
}
|
|
|
|
.jsx-tag-attribute-key {
|
|
color: #f00;
|
|
}
|
|
}
|
|
|
|
.monaco-editor-vs-dark {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: var(--border);
|
|
|
|
.jsx-tag-angle-bracket {
|
|
color: #808080;
|
|
}
|
|
|
|
.jsx-text {
|
|
color: #d4d4d4;
|
|
}
|
|
|
|
.jsx-tag-name {
|
|
color: #569cd6;
|
|
}
|
|
|
|
.jsx-tag-attribute-key {
|
|
color: #9cdcfe;
|
|
}
|
|
}
|
|
|
|
.playground-code-editor-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 4px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: {
|
|
top: 2px #666 solid;
|
|
bottom: 2px #ddd solid;
|
|
left: 2px #ddd solid;
|
|
right: 2px #ddd solid;
|
|
};
|
|
animation: .6s linear infinite;
|
|
|
|
@include unique-keyframes {
|
|
0% {
|
|
transform: rotateZ(0);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
}
|
|
} |