@vixcom/ui 1.7.0 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/colors.css +66 -72
- package/dist/css/colors.css.map +1 -1
- package/dist/css/helper/primefaces.css +80 -26
- package/dist/css/helper/primefaces.css.map +1 -1
- package/dist/css/main.css +18 -12
- package/dist/css/main.css.map +1 -1
- package/dist/css/menu.css +191 -259
- package/dist/css/menu.css.map +1 -1
- package/dist/js/alpinejs.min.js +5 -0
- package/package.json +1 -1
- package/src/css/colors.css +66 -72
- package/src/css/colors.css.map +1 -1
- package/src/css/helper/primefaces.css +80 -26
- package/src/css/helper/primefaces.css.map +1 -1
- package/src/css/main.css +18 -12
- package/src/css/main.css.map +1 -1
- package/src/css/menu.css +191 -259
- package/src/css/menu.css.map +1 -1
- package/src/pages/menu/index.html +123 -74
- package/src/styles/_mixins.scss +6 -22
- package/src/styles/colors.scss +7 -13
- package/src/styles/helper/primefaces.scss +120 -50
- package/src/styles/main.scss +25 -18
- package/src/styles/menu.scss +226 -236
package/dist/css/menu.css
CHANGED
|
@@ -5,6 +5,14 @@
|
|
|
5
5
|
* 2. full-menu (fullscreen floating)
|
|
6
6
|
* 2. float-menu (miniscreen corner floating)
|
|
7
7
|
*/
|
|
8
|
+
/* HACK: use 1% in css calc to insure the unit is applied to the variable ex: calc(1% * var(--the-variable)) */
|
|
9
|
+
:root {
|
|
10
|
+
--side-menu-width-sm: 80;
|
|
11
|
+
--side-menu-width-md: 15;
|
|
12
|
+
--side-menu-width-lg: 25;
|
|
13
|
+
--side-menu-width-lg-mini: 10;
|
|
14
|
+
}
|
|
15
|
+
|
|
8
16
|
input.main-menu-trigger {
|
|
9
17
|
/* @include absolute-content; */
|
|
10
18
|
position: fixed;
|
|
@@ -23,25 +31,10 @@ input.main-menu-trigger::after {
|
|
|
23
31
|
input.main-menu-trigger, input.main-menu-trigger::before, input.main-menu-trigger::after {
|
|
24
32
|
background-color: transparent;
|
|
25
33
|
}
|
|
26
|
-
input.main-menu-trigger:checked ~ main > footer, input.main-menu-trigger:checked ~ main + footer,
|
|
27
|
-
input.main-menu-trigger:checked ~ .page > footer,
|
|
28
|
-
input.main-menu-trigger:checked ~ .page + footer,
|
|
29
|
-
input.main-menu-trigger:checked ~ * main > footer,
|
|
30
|
-
input.main-menu-trigger:checked ~ * main + footer,
|
|
31
|
-
input.main-menu-trigger:checked ~ * .page > footer,
|
|
32
|
-
input.main-menu-trigger:checked ~ * .page + footer {
|
|
33
|
-
background-color: var(--secondary);
|
|
34
|
-
color: var(--secondary-c);
|
|
35
|
-
}
|
|
36
34
|
.main-menu-toggle {
|
|
35
|
+
margin: auto;
|
|
37
36
|
position: relative;
|
|
38
37
|
font-size: 120%;
|
|
39
|
-
z-index: 1;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.menu-container {
|
|
43
|
-
max-width: 100%;
|
|
44
|
-
overflow: hidden;
|
|
45
38
|
}
|
|
46
39
|
|
|
47
40
|
nav,
|
|
@@ -57,10 +50,9 @@ nav,
|
|
|
57
50
|
align-items: center;
|
|
58
51
|
}
|
|
59
52
|
|
|
60
|
-
|
|
61
|
-
.nav,
|
|
62
|
-
.menu-container {
|
|
63
|
-
flex: 1 1 100%;
|
|
53
|
+
.menu-container,
|
|
54
|
+
.menu-container nav,
|
|
55
|
+
.menu-container .nav {
|
|
64
56
|
gap: 0.5rem;
|
|
65
57
|
}
|
|
66
58
|
|
|
@@ -84,58 +76,42 @@ nav .item .label,
|
|
|
84
76
|
height: 100%;
|
|
85
77
|
transition: 0.5s;
|
|
86
78
|
}
|
|
87
|
-
.main-menu-container .side-menu nav,
|
|
88
|
-
.main-menu-container .side-menu .nav,
|
|
89
|
-
.main-menu-container .side-menu .menu-container {
|
|
90
|
-
flex-direction: column;
|
|
91
|
-
}
|
|
92
|
-
.main-menu-container .menu-logo {
|
|
93
|
-
min-width: 7.5rem;
|
|
94
|
-
}
|
|
95
|
-
.main-menu-container .menu-logo-alt {
|
|
96
|
-
display: none;
|
|
97
|
-
}
|
|
98
|
-
.main-menu-container.rtl .page {
|
|
99
|
-
order: -1;
|
|
100
|
-
}
|
|
101
79
|
.main-menu-container:is(body) {
|
|
102
80
|
width: 100vw;
|
|
103
81
|
height: 100vh;
|
|
104
82
|
}
|
|
105
|
-
.main-menu-container:has(> .side-menu).grid {
|
|
106
|
-
grid-template-columns: 1fr 4fr;
|
|
107
|
-
}
|
|
108
|
-
.main-menu-container:has(> .side-menu).grid > *:not(.main-menu) {
|
|
109
|
-
grid-column: 2;
|
|
110
|
-
}
|
|
111
|
-
.main-menu-container:has(> .side-menu).grid:has(> header + main) {
|
|
112
|
-
grid-auto-rows: 1fr;
|
|
113
|
-
}
|
|
114
|
-
.main-menu-container:has(> .side-menu).grid:has(> header + main) .main-menu {
|
|
115
|
-
grid-row: span 20;
|
|
116
|
-
}
|
|
117
|
-
.main-menu-container:has(> .side-menu).grid:has(> header + main) main {
|
|
118
|
-
grid-row: span 18;
|
|
119
|
-
}
|
|
120
|
-
.main-menu-container:has(> .side-menu) > main section,
|
|
121
|
-
.main-menu-container:has(> .side-menu) > .page section {
|
|
122
|
-
height: 100%;
|
|
123
|
-
min-height: unset;
|
|
124
|
-
}
|
|
125
|
-
.main-menu-container:not(:has(> .side-menu)).flex {
|
|
126
|
-
flex-direction: column;
|
|
127
|
-
}
|
|
128
83
|
.main-menu-container.flex {
|
|
129
84
|
display: flex;
|
|
130
85
|
}
|
|
86
|
+
.main-menu-container.flex:not(:has(> .side-menu)) {
|
|
87
|
+
flex-direction: column;
|
|
88
|
+
}
|
|
131
89
|
.main-menu-container.flex > .side-menu {
|
|
132
|
-
|
|
90
|
+
--side-menu-width: var(--side-menu-width-lg);
|
|
133
91
|
}
|
|
134
92
|
.main-menu-container.grid {
|
|
135
93
|
display: grid;
|
|
136
94
|
}
|
|
137
|
-
.main-menu-container.grid
|
|
138
|
-
grid-
|
|
95
|
+
.main-menu-container.grid:has(> .side-menu) {
|
|
96
|
+
grid-auto-flow: column;
|
|
97
|
+
grid-template-columns: calc(1% * var(--side-menu-width)) 1fr;
|
|
98
|
+
grid-template-rows: 10% 80% 10%;
|
|
99
|
+
}
|
|
100
|
+
.main-menu-container.grid:has(> .side-menu) > *:not(.side-menu) {
|
|
101
|
+
grid-column: 2;
|
|
102
|
+
}
|
|
103
|
+
.main-menu-container.grid:has(> .side-menu) > header {
|
|
104
|
+
grid-row: 1;
|
|
105
|
+
}
|
|
106
|
+
.main-menu-container.grid:has(> .side-menu) > footer {
|
|
107
|
+
grid-row: 3;
|
|
108
|
+
}
|
|
109
|
+
.main-menu-container > main,
|
|
110
|
+
.main-menu-container > .main-page,
|
|
111
|
+
.main-menu-container > .content {
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: 100%;
|
|
114
|
+
overflow: scroll;
|
|
139
115
|
}
|
|
140
116
|
|
|
141
117
|
.main-menu {
|
|
@@ -143,13 +119,24 @@ nav .item .label,
|
|
|
143
119
|
padding: 0;
|
|
144
120
|
margin: 0;
|
|
145
121
|
transition: transform 0.5s;
|
|
122
|
+
overflow: scroll;
|
|
146
123
|
z-index: 1;
|
|
147
124
|
}
|
|
125
|
+
.main-menu:not(.side-menu) .menu-header,
|
|
126
|
+
.main-menu:not(.side-menu) .menu-footer {
|
|
127
|
+
flex: 1 1 auto;
|
|
128
|
+
}
|
|
148
129
|
.main-menu:not(.side-menu:has(> .menu-snap)) {
|
|
149
130
|
flex-direction: column;
|
|
150
131
|
}
|
|
151
|
-
.main-menu img {
|
|
152
|
-
max-height: 5rem;
|
|
132
|
+
.main-menu .menu-snap img {
|
|
133
|
+
max-height: 2.5rem;
|
|
134
|
+
}
|
|
135
|
+
.main-menu .main-logo img {
|
|
136
|
+
width: 100%;
|
|
137
|
+
}
|
|
138
|
+
.main-menu .menu-logo-alt {
|
|
139
|
+
display: none;
|
|
153
140
|
}
|
|
154
141
|
.main-menu nav,
|
|
155
142
|
.main-menu .nav {
|
|
@@ -201,6 +188,10 @@ nav .item .label,
|
|
|
201
188
|
.main-menu .nav .item:hover::before {
|
|
202
189
|
opacity: 0.125;
|
|
203
190
|
}
|
|
191
|
+
.main-menu nav .item .icon,
|
|
192
|
+
.main-menu .nav .item .icon {
|
|
193
|
+
max-width: 2.5rem;
|
|
194
|
+
}
|
|
204
195
|
.main-menu nav .item .label,
|
|
205
196
|
.main-menu .nav .item .label {
|
|
206
197
|
overflow: hidden;
|
|
@@ -218,12 +209,13 @@ nav .item .label,
|
|
|
218
209
|
}
|
|
219
210
|
.menu-snap .item {
|
|
220
211
|
padding: 0.125%;
|
|
221
|
-
z-index: 1;
|
|
222
212
|
}
|
|
223
213
|
|
|
224
214
|
.side-menu {
|
|
225
215
|
position: relative;
|
|
226
216
|
height: 100%;
|
|
217
|
+
grid-row: 1/-1;
|
|
218
|
+
flex-basis: calc(1% * var(--side-menu-width));
|
|
227
219
|
transition: flex-basis 0.5s, transform 0.5s, opacity 0.25s;
|
|
228
220
|
overflow: hidden;
|
|
229
221
|
/* side-menu scrollbar */
|
|
@@ -238,114 +230,91 @@ nav .item .label,
|
|
|
238
230
|
.side-menu .menu-footer .title {
|
|
239
231
|
transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
|
|
240
232
|
}
|
|
241
|
-
.side-menu nav
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
/* Page */
|
|
246
|
-
.page,
|
|
247
|
-
main {
|
|
248
|
-
display: flex;
|
|
233
|
+
.side-menu nav,
|
|
234
|
+
.side-menu .nav,
|
|
235
|
+
.side-menu .menu-container {
|
|
236
|
+
flex: 1 1 auto;
|
|
249
237
|
flex-direction: column;
|
|
250
|
-
|
|
238
|
+
}
|
|
239
|
+
.side-menu .menu-container {
|
|
251
240
|
width: 100%;
|
|
252
|
-
height: 100%;
|
|
253
|
-
margin: 0;
|
|
254
|
-
flex: 1 1 100%;
|
|
255
|
-
transition: width 0.5s;
|
|
256
|
-
overflow-y: scroll;
|
|
257
|
-
z-index: 0;
|
|
258
241
|
}
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
background-color: var(--primary);
|
|
262
|
-
color: var(--primary-c);
|
|
242
|
+
.side-menu nav .item, .side-menu .nav .item {
|
|
243
|
+
min-width: auto;
|
|
263
244
|
}
|
|
264
245
|
|
|
265
246
|
/* Mobile or PC (Tablet Excluded) */
|
|
266
247
|
/* Above Tablets/Mini PC */
|
|
267
248
|
@media (min-width: 769px) {
|
|
268
|
-
.
|
|
269
|
-
.
|
|
270
|
-
.
|
|
271
|
-
.
|
|
249
|
+
.float-menu nav,
|
|
250
|
+
.float-menu .nav,
|
|
251
|
+
.full-menu nav,
|
|
252
|
+
.full-menu .nav {
|
|
272
253
|
overflow-x: scroll;
|
|
273
254
|
}
|
|
274
|
-
|
|
255
|
+
input.main-menu-trigger:not(:checked) ~ .side-menu > .menu-snap {
|
|
275
256
|
/* flex-basis: 25%; */
|
|
276
257
|
}
|
|
277
258
|
.main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
|
|
278
|
-
|
|
259
|
+
--side-menu-width: 0;
|
|
279
260
|
}
|
|
280
261
|
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
|
|
281
|
-
|
|
262
|
+
--side-menu-width: calc(
|
|
263
|
+
var(--side-menu-width-lg-mini) /
|
|
264
|
+
((var(--side-menu-width-lg-mini) / 100) + 1)
|
|
265
|
+
);
|
|
282
266
|
}
|
|
283
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu
|
|
267
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-logo {
|
|
284
268
|
display: none;
|
|
285
269
|
}
|
|
286
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu
|
|
270
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-logo-alt {
|
|
287
271
|
display: block;
|
|
288
272
|
}
|
|
289
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu
|
|
273
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .title {
|
|
290
274
|
opacity: 0;
|
|
291
275
|
height: 0;
|
|
292
276
|
margin-bottom: 0;
|
|
293
277
|
}
|
|
294
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .item,
|
|
295
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked)
|
|
299
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked)
|
|
300
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .
|
|
301
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .
|
|
302
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .item .label,
|
|
303
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title .label,
|
|
304
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .item .label,
|
|
305
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .title .label {
|
|
278
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .item .label,
|
|
279
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .title .label,
|
|
280
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .item .label,
|
|
281
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .title .label,
|
|
282
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .item .label,
|
|
283
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .title .label,
|
|
284
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .item .label,
|
|
285
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .title .label {
|
|
306
286
|
opacity: 0;
|
|
307
287
|
transform: translateX(100%);
|
|
308
288
|
position: absolute;
|
|
309
289
|
}
|
|
310
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .title,
|
|
311
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .title,
|
|
312
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title,
|
|
313
|
-
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .title {
|
|
290
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu nav .title,
|
|
291
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .nav .title,
|
|
292
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-header .title,
|
|
293
|
+
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) > .side-menu .menu-footer .title {
|
|
314
294
|
border-bottom: thin solid;
|
|
315
295
|
padding: 0;
|
|
316
296
|
}
|
|
317
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu:not(.mini)
|
|
318
|
-
|
|
319
|
-
flex-basis: 0;
|
|
297
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu:not(.mini) {
|
|
298
|
+
--side-menu-width: 0;
|
|
299
|
+
/* flex-basis: 0; */
|
|
320
300
|
}
|
|
321
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini
|
|
322
|
-
|
|
323
|
-
flex-basis: 5%;
|
|
301
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini {
|
|
302
|
+
--side-menu-width: var(--side-menu-width-lg-mini);
|
|
324
303
|
}
|
|
325
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini:has(> .menu-snap)
|
|
326
|
-
|
|
327
|
-
flex-basis: 10%;
|
|
304
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini:not(:has(> .menu-snap)) {
|
|
305
|
+
--side-menu-width: calc(var(--side-menu-width-lg-mini) / 2);
|
|
328
306
|
}
|
|
329
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-
|
|
330
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .menu-logo {
|
|
307
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-logo {
|
|
331
308
|
display: none;
|
|
332
309
|
}
|
|
333
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-
|
|
334
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .menu-logo-alt {
|
|
310
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-logo-alt {
|
|
335
311
|
display: block;
|
|
336
312
|
}
|
|
337
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .
|
|
338
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title {
|
|
313
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .title {
|
|
339
314
|
opacity: 0;
|
|
340
315
|
height: 0;
|
|
341
316
|
margin-bottom: 0;
|
|
342
317
|
}
|
|
343
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .item,
|
|
344
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .item,
|
|
345
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .item,
|
|
346
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .item {
|
|
347
|
-
justify-content: center;
|
|
348
|
-
}
|
|
349
318
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .item .label,
|
|
350
319
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .title .label,
|
|
351
320
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .item .label,
|
|
@@ -353,15 +322,7 @@ footer {
|
|
|
353
322
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .item .label,
|
|
354
323
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title .label,
|
|
355
324
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .item .label,
|
|
356
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title .label
|
|
357
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .item .label,
|
|
358
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .title .label,
|
|
359
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .item .label,
|
|
360
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .title .label,
|
|
361
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .item .label,
|
|
362
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title .label,
|
|
363
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .item .label,
|
|
364
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .title .label {
|
|
325
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title .label {
|
|
365
326
|
opacity: 0;
|
|
366
327
|
transform: translateX(100%);
|
|
367
328
|
position: absolute;
|
|
@@ -369,94 +330,94 @@ footer {
|
|
|
369
330
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .title,
|
|
370
331
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .title,
|
|
371
332
|
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title,
|
|
372
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title
|
|
373
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .title,
|
|
374
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .title,
|
|
375
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title,
|
|
376
|
-
.main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .title {
|
|
333
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title {
|
|
377
334
|
border-bottom: thin solid;
|
|
378
335
|
padding: 0;
|
|
379
336
|
}
|
|
380
337
|
}
|
|
381
338
|
/* Above Mobile */
|
|
382
339
|
@media (min-width: 577px) {
|
|
383
|
-
.
|
|
384
|
-
.
|
|
385
|
-
.
|
|
386
|
-
.
|
|
387
|
-
.
|
|
388
|
-
.
|
|
340
|
+
.full-menu .menu-container,
|
|
341
|
+
.full-menu .menu-container nav,
|
|
342
|
+
.full-menu .menu-container .nav,
|
|
343
|
+
.float-menu .menu-container,
|
|
344
|
+
.float-menu .menu-container nav,
|
|
345
|
+
.float-menu .menu-container .nav {
|
|
389
346
|
align-items: center;
|
|
390
347
|
}
|
|
391
|
-
.
|
|
392
|
-
.
|
|
393
|
-
.
|
|
394
|
-
.
|
|
348
|
+
.full-menu .menu-container nav,
|
|
349
|
+
.full-menu .menu-container .nav,
|
|
350
|
+
.float-menu .menu-container nav,
|
|
351
|
+
.float-menu .menu-container .nav {
|
|
395
352
|
width: 100%;
|
|
396
353
|
overflow-x: scroll;
|
|
397
354
|
}
|
|
355
|
+
.main-menu-container.grid:has(> .side-menu) {
|
|
356
|
+
--side-menu-width: calc(
|
|
357
|
+
var(--side-menu-width-lg) / ((var(--side-menu-width-lg) / 100) + 1)
|
|
358
|
+
);
|
|
359
|
+
}
|
|
398
360
|
}
|
|
399
361
|
/* Tablets/Mini PC (Tablet Only) */
|
|
400
362
|
@media (min-width: 577px) and (max-width: 768px) {
|
|
363
|
+
.main-menu-container.grid:has(> input.main-menu-trigger:checked) > .float-menu .menu-container {
|
|
364
|
+
width: 100%;
|
|
365
|
+
}
|
|
401
366
|
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) {
|
|
402
|
-
|
|
367
|
+
--side-menu-width: calc(
|
|
368
|
+
var(--side-menu-width-md) / ((var(--side-menu-width-md) / 100) + 1)
|
|
369
|
+
);
|
|
403
370
|
}
|
|
404
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu
|
|
371
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-logo {
|
|
405
372
|
display: none;
|
|
406
373
|
}
|
|
407
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu
|
|
374
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-logo-alt {
|
|
408
375
|
display: block;
|
|
409
376
|
}
|
|
410
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu
|
|
377
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .title {
|
|
411
378
|
opacity: 0;
|
|
412
379
|
height: 0;
|
|
413
380
|
margin-bottom: 0;
|
|
414
381
|
}
|
|
415
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) nav .item,
|
|
416
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .nav .
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked))
|
|
420
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked))
|
|
421
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .
|
|
422
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .
|
|
423
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .item .label,
|
|
424
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .title .label,
|
|
425
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-footer .item .label,
|
|
426
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-footer .title .label {
|
|
382
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .item .label,
|
|
383
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .title .label,
|
|
384
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .item .label,
|
|
385
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .title .label,
|
|
386
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .item .label,
|
|
387
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .title .label,
|
|
388
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .item .label,
|
|
389
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .title .label {
|
|
427
390
|
opacity: 0;
|
|
428
391
|
transform: translateX(100%);
|
|
429
392
|
position: absolute;
|
|
430
393
|
}
|
|
431
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) nav .title,
|
|
432
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .nav .title,
|
|
433
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .title,
|
|
434
|
-
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-footer .title {
|
|
394
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu nav .title,
|
|
395
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .nav .title,
|
|
396
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-header .title,
|
|
397
|
+
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) > .side-menu .menu-footer .title {
|
|
435
398
|
border-bottom: thin solid;
|
|
436
399
|
padding: 0;
|
|
437
400
|
}
|
|
438
|
-
.main-menu-container.flex input.main-menu-trigger:
|
|
439
|
-
|
|
401
|
+
.main-menu-container.flex input.main-menu-trigger:checked ~ .float-menu .menu-container {
|
|
402
|
+
width: 100%;
|
|
403
|
+
}
|
|
404
|
+
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu {
|
|
405
|
+
--side-menu-width: var(--side-menu-width-md);
|
|
440
406
|
}
|
|
441
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu:
|
|
442
|
-
|
|
407
|
+
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu:not(:has(> .menu-snap)) {
|
|
408
|
+
--side-menu-width: calc(var(--side-menu-width-md) / 2);
|
|
443
409
|
}
|
|
444
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-
|
|
410
|
+
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-logo {
|
|
445
411
|
display: none;
|
|
446
412
|
}
|
|
447
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-
|
|
413
|
+
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-logo-alt {
|
|
448
414
|
display: block;
|
|
449
415
|
}
|
|
450
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .
|
|
416
|
+
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .title {
|
|
451
417
|
opacity: 0;
|
|
452
418
|
height: 0;
|
|
453
419
|
margin-bottom: 0;
|
|
454
420
|
}
|
|
455
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .item,
|
|
456
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .item, .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .item,
|
|
457
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .item {
|
|
458
|
-
justify-content: center;
|
|
459
|
-
}
|
|
460
421
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .item .label,
|
|
461
422
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .title .label,
|
|
462
423
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .item .label,
|
|
@@ -464,14 +425,7 @@ footer {
|
|
|
464
425
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .item .label,
|
|
465
426
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title .label,
|
|
466
427
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .item .label,
|
|
467
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title .label
|
|
468
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .title .label,
|
|
469
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .item .label,
|
|
470
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .title .label,
|
|
471
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .item .label,
|
|
472
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title .label,
|
|
473
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .item .label,
|
|
474
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .title .label {
|
|
428
|
+
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title .label {
|
|
475
429
|
opacity: 0;
|
|
476
430
|
transform: translateX(100%);
|
|
477
431
|
position: absolute;
|
|
@@ -479,118 +433,96 @@ footer {
|
|
|
479
433
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .title,
|
|
480
434
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .title,
|
|
481
435
|
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title,
|
|
482
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title
|
|
483
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .title,
|
|
484
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title,
|
|
485
|
-
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .title {
|
|
436
|
+
.main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title {
|
|
486
437
|
border-bottom: thin solid;
|
|
487
438
|
padding: 0;
|
|
488
439
|
}
|
|
489
|
-
.float-menu {
|
|
490
|
-
/* width: 50%; */
|
|
491
|
-
}
|
|
492
440
|
}
|
|
493
441
|
/* Tablet Below */
|
|
494
442
|
@media (max-width: 768px) {
|
|
495
|
-
|
|
443
|
+
input.main-menu-trigger:checked ~ .side-menu > .menu-snap {
|
|
496
444
|
/* flex-basis: 25%; */
|
|
497
445
|
}
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
.main-menu-container input.main-menu-trigger:not(:checked) ~ * .full-menu .menu-container nav,
|
|
503
|
-
.main-menu-container input.main-menu-trigger:not(:checked) ~ * .full-menu .menu-container .nav,
|
|
504
|
-
.main-menu-container input.main-menu-trigger:not(:checked) ~ * .float-menu .menu-container nav,
|
|
505
|
-
.main-menu-container input.main-menu-trigger:not(:checked) ~ * .float-menu .menu-container .nav {
|
|
446
|
+
input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container nav,
|
|
447
|
+
input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container .nav,
|
|
448
|
+
input.main-menu-trigger:not(:checked) ~ .float-menu .menu-container nav,
|
|
449
|
+
input.main-menu-trigger:not(:checked) ~ .float-menu .menu-container .nav {
|
|
506
450
|
max-height: 0;
|
|
507
451
|
max-width: 0;
|
|
508
452
|
}
|
|
509
|
-
.
|
|
453
|
+
.float-menu .menu-container {
|
|
510
454
|
position: fixed;
|
|
511
455
|
bottom: 0;
|
|
512
456
|
}
|
|
513
|
-
.
|
|
457
|
+
.float-menu .menu-container.right, .float-menu .menu-container:not(.left) {
|
|
514
458
|
right: 0;
|
|
515
459
|
}
|
|
516
|
-
.
|
|
460
|
+
.float-menu .menu-container.left {
|
|
517
461
|
left: 0;
|
|
518
462
|
}
|
|
519
463
|
}
|
|
520
464
|
/* Mobile Below */
|
|
521
465
|
@media (max-width: 576px) {
|
|
466
|
+
.side-menu {
|
|
467
|
+
--side-menu-width: var(--side-menu-width-sm);
|
|
468
|
+
position: fixed;
|
|
469
|
+
top: 0;
|
|
470
|
+
left: 0;
|
|
471
|
+
bottom: 0;
|
|
472
|
+
width: 80%;
|
|
473
|
+
transform: translateX(-100%);
|
|
474
|
+
opacity: 0;
|
|
475
|
+
box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
|
|
476
|
+
}
|
|
477
|
+
.full-menu {
|
|
478
|
+
top: 0;
|
|
479
|
+
left: 0;
|
|
480
|
+
right: 0;
|
|
481
|
+
bottom: 0;
|
|
482
|
+
}
|
|
522
483
|
input.main-menu-trigger:checked {
|
|
523
484
|
width: 100vw;
|
|
524
485
|
height: 100vh;
|
|
525
486
|
background-color: hsla(var(--black-hs), var(--black-l), 0.2);
|
|
526
487
|
z-index: 1;
|
|
527
488
|
}
|
|
528
|
-
input.main-menu-trigger:checked ~ .main-menu
|
|
529
|
-
|
|
489
|
+
input.main-menu-trigger:checked ~ .main-menu {
|
|
490
|
+
--background-color: hsla(
|
|
491
|
+
var(--secondary-hs),
|
|
492
|
+
var(--secondary-l),
|
|
493
|
+
0.125
|
|
494
|
+
);
|
|
495
|
+
--color: var(--secondary-c);
|
|
496
|
+
}
|
|
497
|
+
input.main-menu-trigger:checked ~ .main-menu:not(:has(> .menu-snap), .h) {
|
|
530
498
|
flex-direction: column;
|
|
531
499
|
}
|
|
532
|
-
input.main-menu-trigger:checked ~ .main-menu .menu-header
|
|
533
|
-
input.main-menu-trigger:checked ~ * .main-menu .menu-header {
|
|
500
|
+
input.main-menu-trigger:checked ~ .main-menu .menu-header {
|
|
534
501
|
order: -1;
|
|
535
502
|
}
|
|
536
|
-
input.main-menu-trigger:checked ~ .side-menu
|
|
537
|
-
input.main-menu-trigger:checked ~ * .side-menu {
|
|
503
|
+
input.main-menu-trigger:checked ~ .side-menu {
|
|
538
504
|
transform: translateX(0);
|
|
539
505
|
opacity: 1;
|
|
540
506
|
}
|
|
541
|
-
input.main-menu-trigger:checked ~ .full-menu,
|
|
542
|
-
input.main-menu-trigger:checked ~ * input.main-menu-trigger:checked ~ .full-menu,
|
|
543
|
-
input.main-menu-trigger:checked ~ * .full-menu,
|
|
544
|
-
input.main-menu-trigger:checked ~ .float-menu .menu-container,
|
|
545
|
-
input.main-menu-trigger:checked ~ * .float-menu .menu-container {
|
|
546
|
-
--background-color: hsla(
|
|
547
|
-
var(--secondary-hs),
|
|
548
|
-
var(--secondary-l),
|
|
549
|
-
0.125
|
|
550
|
-
);
|
|
507
|
+
input.main-menu-trigger:checked ~ .full-menu, input.main-menu-trigger:checked ~ .float-menu input.main-menu-trigger:checked ~ .menu-container {
|
|
551
508
|
background-color: var(--background-color);
|
|
552
|
-
color: var(--
|
|
509
|
+
color: var(--color);
|
|
553
510
|
backdrop-filter: blur(0.75rem);
|
|
554
511
|
}
|
|
555
|
-
input.main-menu-trigger:checked ~ .full-menu
|
|
556
|
-
input.main-menu-trigger:checked ~ * .full-menu {
|
|
512
|
+
input.main-menu-trigger:checked ~ .full-menu {
|
|
557
513
|
position: fixed;
|
|
558
514
|
transform: translateY(0);
|
|
559
515
|
opacity: 1;
|
|
560
516
|
font-size: 125%;
|
|
561
517
|
}
|
|
562
|
-
input.main-menu-trigger:checked ~ .full-menu .menu-container
|
|
563
|
-
input.main-menu-trigger:checked ~ * .full-menu .menu-container {
|
|
518
|
+
input.main-menu-trigger:checked ~ .full-menu .menu-container {
|
|
564
519
|
background-color: unset;
|
|
565
520
|
}
|
|
566
|
-
.main-menu
|
|
567
|
-
flex-direction: column;
|
|
568
|
-
}
|
|
569
|
-
.main-menu-container.grid:has(> .side-menu) {
|
|
570
|
-
grid-template-columns: 1fr;
|
|
571
|
-
}
|
|
572
|
-
.main-menu-container .main-menu nav, .main-menu-container .main-menu .nav {
|
|
521
|
+
.main-menu nav, .main-menu .nav {
|
|
573
522
|
overflow-y: scroll;
|
|
574
523
|
}
|
|
575
|
-
.main-menu-container .
|
|
576
|
-
|
|
577
|
-
top: 0;
|
|
578
|
-
left: 0;
|
|
579
|
-
bottom: 0;
|
|
580
|
-
width: 80%;
|
|
581
|
-
flex-basis: 80%;
|
|
582
|
-
transform: translateX(-100%);
|
|
583
|
-
opacity: 0;
|
|
584
|
-
box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
|
|
585
|
-
}
|
|
586
|
-
.main-menu-container .full-menu {
|
|
587
|
-
top: 0;
|
|
588
|
-
left: 0;
|
|
589
|
-
right: 0;
|
|
590
|
-
bottom: 0;
|
|
591
|
-
}
|
|
592
|
-
.main-menu-container .full-menu .menu-header {
|
|
593
|
-
width: 100%;
|
|
524
|
+
.main-menu-container input.main-menu-trigger:checked ~ .main-menu nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ .main-menu .nav:not(.menu-snap), .main-menu-container input.main-menu-trigger:checked ~ .main-menu .menu-container:not(.menu-snap), .main-menu-container.flex {
|
|
525
|
+
flex-direction: column;
|
|
594
526
|
}
|
|
595
527
|
}
|
|
596
528
|
|