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
|
@use 'iro-sass/src/index' as iro;
@use 'iro-design/src/functions' as fn;
@use 'include-media/dist/include-media' as media;
@include iro.props-namespace('header') {
@include iro.props-store((
--colors: (
--bg: fn.global-color(--bg-hi),
--fg: fn.global-color(--fg-lo),
--hover: (
--bg: fn.global-color(--fg-lo),
--fg: fn.global-color(--bg-hi),
),
--active: (
--fg: fn.global-color(--fg-lo),
)
)
), 'colors');
@include iro.props-store((
--dims: (
--height: calc(fn.global-dim(--header --height) - 2 * fn.dim(--gap, null)),
--icon: 1.5rem,
--pad-x: calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))),
--gap: fn.global-dim(--size --40),
)
), 'dims');
@include iro.props-store((
--colors: (
--bg: fn.global-color(--obj-hi),
)
), 'colors-dark');
@include iro.bem-component(iro.props-namespace()) {
display: flex;
position: absolute;
z-index: 100;
top: fn.dim(--gap);
left: fn.dim(--gap);
height: fn.dim(--height);
gap: fn.dim(--gap);
@include iro.bem-elem('item') {
padding: 0 fn.dim(--pad-x);
transition: background-color .2s, color .2s, border-left-color .2s;
background-color: fn.color(--bg);
color: fn.color(--fg);
line-height: fn.dim(--height);
text-decoration: none;
&:hover,
&:focus {
border-left-color: fn.color(--hover --bg);
background-color: fn.color(--hover --bg);
color: fn.color(--hover --fg);
}
@include iro.bem-modifier('icon') {
display: flex;
align-items: center;
justify-content: center;
}
@include iro.bem-modifier('active') {
color: fn.color(--active --fg);
font-weight: bold;
}
}
@include iro.bem-elem('icon') {
width: fn.dim(--icon);
height: fn.dim(--icon);
}
@include media.media('>lg') {
position: fixed;
}
@media print {
display: none;
}
}
}
|
