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