yagich/porom
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add previews to babycode editor component

Browse Source
This commit is contained in:
Lera Elvoé
2025-06-01 02:35:55 +03:00
parent 8a00500387
commit 615cd36eab
6 changed files with 177 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
sass/style.scss
View File

@ -45,6 +45,7 @@ $lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
$main_bg: color.scale($accent_color, $lightness: -10%, $saturation: -40%);
$button_color: color.adjust($accent_color, $hue: 90);
$button_color2: color.adjust($accent_color, $hue: 180);
%button-base {
cursor: default;
@ -524,8 +525,44 @@ input[type="text"], input[type="password"], textarea, select {
.babycode-editor {
height: 150px;
font-size: 1rem;
}
.babycode-editor-container {
width: 100%;
}
.babycode-preview-errors-container {
font-size: 0.8rem;
}
.tab-button {
@include button($button_color);
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
&.active {
background-color: $button_color2;
padding-top: 8px;
}
}
.tab-content {
display: none;
&.active {
min-height: 250px;
display: block;
background-color: color.adjust($button_color2, $saturation: -20%);
border: 1px solid black;
padding: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
}
ul, ol {
margin: 10px 0 10px 30px;