code-editor/index.scss at main · fullstackedorg/code-editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@use "./node_modules/@fullstacked/ui/values/colors.scss" as c;
@use "./node_modules/@fullstacked/ui/values/spacing.scss" as s;
@use "./node_modules/@fullstacked/ui/values/typography.scss" as t;
@use "./node_modules/@fullstacked/ui/ui.scss";

@use "./editor.scss";

html,
body {
    background-color: c.$blue-dark;
}

main {
    display: flex;
    width: 100%;
    height: 100%;
    > div {
        flex: 1;
        width: 50%;
        height: 100%;
        max-width: 50%;
        max-height: 100%;
        &:first-child {
            display: flex;
            flex-direction: column;
            gap: s.$small;
            > div:nth-child(2) {
                flex: 1;
                overflow: auto;
            }
        }
    }

    @media (max-width: 768px) {
        flex-direction: column;
        > div {
            flex: 1;
            width: 100%;

            max-width: 100%;
            overflow: hidden;
            &:first-child {
                height: max-content;
                max-height: max-content;
            }
        }
    }
}