ASCII text
1
.toolbar {
2
list-style: none;
3
display: flex;
4
justify-content: flex-start;
5
flex-wrap: wrap;
6
background: var(--color-toolbar);
7
color: var(--color-toolbar-text);
8
border: var(--border-toolbar);
9
box-shadow: var(--shadow-toolbar);
10
min-height: var(--haight-toolbar);
11
align-items: center;
12
gap: var(--gap-toolbar);
13
padding: var(--padding-toolbar);
14
border-radius: var(--radius-toolbar);
15
}
16
.flexible-space {
18
flex: 1 0 auto;
19
}
20
.toolbar.vertical {
22
flex-direction: column;
23
min-width: var(--width-toolbar);
24
align-items: stretch;
25
}
26
.toolbar.vertical * {
28
width: 100%;
29
}
30
details:is(.dropdown, .slidein) > summary {
32
cursor: pointer;
33
height: fit-content;
34
display: flex;
35
padding-top: 0;
36
padding-bottom: 0;
37
}
38
details:is(.dropdown, .slidein) > summary ~ * {
40
position: absolute;
41
background: var(--color-menu);
42
color: var(--color-menu-text);
43
box-shadow: var(--shadow-menu);
44
padding: var(--padding-menu);
45
border-radius: var(--radius-menu);
46
gap: var(--gap-menu);
47
display: flex;
48
align-items: stretch;
49
flex-direction: column;
50
}
51
details:is(.dropdown, .slidein) > summary ~ menu > li {
53
padding: var(--padding-menu-item);
54
min-height: var(--height-menu-item);
55
border: var(--border-menu-item);
56
background: var(--color-menu-item);
57
color: var(--color-menu-item-text);
58
position: relative;
59
display: flex;
60
align-items: center;
61
justify-content: space-between;
62
}
63
details:is(.dropdown, .slidein) > summary ~ menu > li:hover {
65
background: var(--color-menu-item-hover);
66
color: var(--color-menu-item-hover-text);
67
}
68
details.slidein > summary ~ * {
70
left: 100%;
71
top: 0;
72
display: flex;
73
align-items: center;
74
justify-content: space-between;
75
}