summaryrefslogtreecommitdiffstats
path: root/assets/css/components/_header.scss
blob: a190eee92a58a505ad3c1d48f3bbd50db30f3d2c (plain) (blame)
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@include namespace('header') {
    @include store((
        --colors: (
            --bg: prop(--colors --bg-lo, $global: true),
            --fg: prop(--colors --fg-lo, $global: true),
            --hover: (
                --bg: prop(--colors --fg-lo, $global: true),
                --fg: prop(--colors --bg-hi, $global: true),
            ),
            --active: (
                --fg: prop(--colors --fg-lo, $global: true),
            )
        ),
        --dims: (
            --height: 4rem,
            --icon:   1.5rem,
            --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
            --gap:    2px,
        )
    ));

    @include store((
        --colors: (
            --bg: prop(--colors --bg-hi, $global: true),
        )
    ), 'light');

    @include store((
        --dims: (
            --height: 3.4rem,
        )
    ), 'sm');

    @include component(namespace()) {
        display: flex;
        width:   0;
        height:  prop(--dims --height);
        padding: prop(--dims --gap);
        gap:     prop(--dims --gap);
        filter:  drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});

        @include element('item') {
            padding:          0 prop(--dims --pad-x);
            transition:       background-color .2s, color .2s, border-left-color .2s;
            background-color: prop(--colors --bg);
            color:            prop(--colors --fg);
            line-height:      prop(--dims --height);
            text-decoration:  none;

            &:hover,
            &:focus {
                border-left-color: prop(--colors --hover --bg);
                background-color:  prop(--colors --hover --bg);
                color:             prop(--colors --hover --fg);
            }

            @include modifier('icon') {
                display:         flex;
                align-items:     center;
                justify-content: center;
            }

            @include modifier('active') {
                color:       prop(--colors --active --fg);
                font-weight: bold;
            }
        }

        @include element('icon') {
            width:  prop(--dims --icon);
            height: prop(--dims --icon);
        }

        @include modifier('fixed') {
            position: fixed;
        }

        @include media('>=lg') {
            position:      sticky;
            z-index:       100;
            top:           0;
            margin-bottom: calc(-.75 * #{prop(--dims --height)});

            @include modifier('fixed') {
                position: fixed;
            }
        }

        @media print {
            display: none;
        }
    }
}