this repo has no description
hauleth.dev
1@define-mixin menu {
2 position: absolute;
3 background: var(--background);
4 box-shadow: var(--shadow);
5 color: white;
6 border: 2px solid;
7 margin: 0;
8 padding: 10px;
9 list-style: none;
10 z-index: 99;
11}
12
13.header {
14 display: flex;
15 flex-direction: column;
16 position: relative;
17
18 &__inner {
19 display: flex;
20 align-items: center;
21 justify-content: space-between;
22 }
23
24 &__logo {
25 display: flex;
26 flex: 1;
27
28 &:after {
29 content: '';
30 background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
31 display: block;
32 width: 100%;
33 right: 10px;
34 }
35
36 a {
37 flex: 0 0 auto;
38 max-width: 100%;
39 text-decoration: none;
40 }
41 }
42
43 .menu {
44 --shadow-color: color-mod(var(--background) a(80%));
45 --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
46 margin: 20px 0;
47
48 @media (--phone) {
49 @mixin menu;
50 top: 50px;
51 right: 0;
52 }
53
54 &__inner {
55 display: flex;
56 flex-wrap: wrap;
57 list-style: none;
58 margin: 0;
59 padding: 0;
60
61 &--desktop {
62 @media (--phone) {
63 display: none;
64 }
65 }
66
67 &--mobile {
68 display: none;
69
70 @media (--phone) {
71 display: block;
72 }
73 }
74
75 li {
76 &:not(:last-of-type) {
77 margin-right: 20px;
78 margin-bottom: 10px;
79 flex: 0 0 auto;
80 }
81 }
82
83 @media (--phone) {
84 flex-direction: column;
85 align-items: flex-start;
86 padding: 0;
87
88 li {
89 margin: 0;
90 padding: 5px;
91 }
92 }
93 }
94
95 &__sub-inner {
96 position: relative;
97 list-style: none;
98 padding: 0;
99 margin: 0;
100
101 &:not(:only-child) {
102 margin-left: 20px;
103 }
104
105 &-more {
106 @mixin menu;
107 top: 35px;
108 left: 0;
109
110 &-trigger {
111 color: var(--accent);
112 user-select: none;
113 cursor: pointer;
114 }
115
116 li {
117 margin: 0;
118 padding: 5px;
119 white-space: nowrap;
120 }
121 }
122 }
123
124 &-trigger {
125 color: var(--accent);
126 border: 2px solid;
127 margin-left: 10px;
128 height: 100%;
129 padding: 3px 8px;
130 position: relative;
131 }
132 }
133}