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