chytanka.github.io/src/app/shared/ui/@styles/details.scss at 73b7a8638a644e9cb6debdc2ca8fdec57ecc0f3e · chytanka/chytanka.github.io · 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
49
50
51
52
details {
    padding: 1.5ch 2ch;
    border-radius: .5ch;
    // border: 2px solid rgb(0, 40, 64);
    transition: all var(--t) ease-in-out;
    box-shadow: var(--shadow-1);

    summary {
        cursor: pointer;
        font-weight: bold;
        transition: color var(--t) cubic-bezier(0.45, 0.05, 0.55, 0.95);
    }

    &[open] {
        // border-color: #166496;
        background-color: #103651;

        @media (prefers-color-scheme: light) {
            background-color: #fff897;
        }

        & {
            box-shadow: var(--shadow-1);
        }

        summary {
            color: #caa902;
            border-bottom: var(--border-size) solid var(--border-color);
            padding-bottom: 1ch;

            @media (prefers-color-scheme: light) {
                color: #166496;
            }
        }
    }

}

@supports (height: calc-size(auto)) {
    details::details-content {
        display: block;
        height: 0;
        overflow: hidden;
        transition: height var(--t), content-visibility var(--t);
        transition-behavior: allow-discrete;
    }

    details[open]::details-content {
        height: calc-size(auto);
        transition: height var(--t), content-visibility var(--t);
    }
}