@vixcom/ui 1.2.0 → 1.3.0

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.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/src/css/index.css +1 -1
  3. package/src/css/{app.css → main.css} +9 -8
  4. package/src/css/menu.css +198 -196
  5. package/src/css/menu.css.map +1 -1
  6. package/src/index.html +1 -1
  7. package/src/pages/sidemenu/{grid.html → index.html} +26 -19
  8. package/src/styles/index.scss +1 -1
  9. package/src/styles/{app.scss → main.scss} +8 -7
  10. package/src/styles/menu.scss +112 -148
  11. package/src/pages/sidemenu/flex.html +0 -36
package/src/css/menu.css CHANGED
@@ -39,18 +39,21 @@ input.main-menu-trigger:checked ~ * .page > footer {
39
39
  }
40
40
 
41
41
  nav,
42
+ .nav,
42
43
  .menu-header,
43
44
  .menu-footer {
44
45
  width: 100%;
45
46
  display: flex;
46
47
  }
47
48
 
48
- nav {
49
+ nav,
50
+ .nav {
49
51
  height: 100%;
50
52
  font-size: 120%;
51
53
  gap: 0.5rem;
52
54
  }
53
- nav .item {
55
+ nav .item,
56
+ .nav .item {
54
57
  display: flex;
55
58
  align-items: center;
56
59
  gap: 0.75rem;
@@ -58,17 +61,17 @@ nav .item {
58
61
  text-decoration: none;
59
62
  color: currentColor;
60
63
  }
61
- nav .item .label {
64
+ nav .item .label,
65
+ .nav .item .label {
62
66
  transition: position 0.25s linear 0.125s, transform 0.25s linear 0.125s, opacity 0.5s linear 0.125s;
63
67
  }
64
68
 
65
- /* side-menu */
69
+ /* Menu */
66
70
  .main-menu-container {
67
71
  position: relative;
68
- display: flex;
69
- flex-direction: row;
70
72
  width: 100%;
71
73
  height: 100%;
74
+ transition: 0.5s;
72
75
  }
73
76
  .main-menu-container.rtl .page {
74
77
  order: -1;
@@ -77,16 +80,25 @@ nav .item .label {
77
80
  width: 100vw;
78
81
  height: 100vh;
79
82
  }
80
- .main-menu-container.grid {
81
- display: grid;
82
- grid-template-rows: 1fr;
83
- transition: 0.5s;
83
+ .main-menu-container:has(> .side-menu).grid {
84
+ grid-template-columns: 1fr 4fr;
84
85
  }
85
- .main-menu-container.grid:has(> .side-menu) > main section,
86
- .main-menu-container.grid:has(> .side-menu) > .page section {
86
+ .main-menu-container:has(> .side-menu) > main section,
87
+ .main-menu-container:has(> .side-menu) > .page section {
87
88
  height: 100%;
88
89
  min-height: unset;
89
90
  }
91
+ .main-menu-container.flex {
92
+ display: flex;
93
+ flex-direction: row;
94
+ }
95
+ .main-menu-container.flex > .side-menu {
96
+ flex-basis: 25%;
97
+ }
98
+ .main-menu-container.grid {
99
+ display: grid;
100
+ grid-template-rows: 1fr;
101
+ }
90
102
  .main-menu-container.grid > .side-menu {
91
103
  grid-row: 1/-1;
92
104
  }
@@ -97,8 +109,6 @@ nav .item .label {
97
109
  position: relative;
98
110
  height: 100%;
99
111
  margin: 0;
100
- flex: 1 1 30%;
101
- /* border-right: thin solid var(--secondary); */
102
112
  transition: width 0.5s, flex-basis 0.5s, transform 0.5s, opacity 0.25s;
103
113
  overflow: hidden;
104
114
  z-index: 1;
@@ -112,26 +122,29 @@ nav .item .label {
112
122
  }
113
123
  .side-menu .menu-header,
114
124
  .side-menu .menu-footer {
115
- padding: 1rem;
116
125
  align-items: center;
117
126
  }
118
127
  .side-menu .menu-header .title,
119
128
  .side-menu .menu-footer .title {
120
129
  transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
121
130
  }
122
- .side-menu nav {
131
+ .side-menu nav,
132
+ .side-menu .nav {
123
133
  flex-direction: column;
124
134
  overflow-y: scroll;
125
135
  overflow-x: hidden;
126
136
  }
127
- .side-menu nav .item {
137
+ .side-menu nav .item,
138
+ .side-menu .nav .item {
128
139
  position: relative;
129
140
  }
130
- .side-menu nav .item > * {
141
+ .side-menu nav .item > *,
142
+ .side-menu .nav .item > * {
131
143
  /* position: relative; */
132
144
  z-index: 1;
133
145
  }
134
- .side-menu nav .item::before {
146
+ .side-menu nav .item::before,
147
+ .side-menu .nav .item::before {
135
148
  content: "";
136
149
  display: flex;
137
150
  align-items: center;
@@ -144,21 +157,26 @@ nav .item .label {
144
157
  left: 0;
145
158
  z-index: 0;
146
159
  }
147
- .side-menu nav .item::before:not(img::before, img::after) {
160
+ .side-menu nav .item::before:not(img::before, img::after),
161
+ .side-menu .nav .item::before:not(img::before, img::after) {
148
162
  content: "";
149
163
  }
150
- .side-menu nav .item::before {
164
+ .side-menu nav .item::before,
165
+ .side-menu .nav .item::before {
151
166
  background-color: currentColor;
152
167
  opacity: 0;
153
168
  transition: opacity 0.5s;
154
169
  }
155
- .side-menu nav .item.active::before {
170
+ .side-menu nav .item.active::before,
171
+ .side-menu .nav .item.active::before {
156
172
  opacity: 0.25;
157
173
  }
158
- .side-menu nav .item:hover::before {
174
+ .side-menu nav .item:hover::before,
175
+ .side-menu .nav .item:hover::before {
159
176
  opacity: 0.125;
160
177
  }
161
- .side-menu nav .item .label {
178
+ .side-menu nav .item .label,
179
+ .side-menu .nav .item .label {
162
180
  overflow: hidden;
163
181
  text-overflow: ellipsis;
164
182
  white-space: nowrap;
@@ -174,7 +192,8 @@ nav .item .label {
174
192
  align-items: center;
175
193
  justify-content: center;
176
194
  }
177
- .full-menu nav {
195
+ .full-menu nav,
196
+ .full-menu .nav {
178
197
  align-items: center;
179
198
  justify-content: center;
180
199
  overflow: scroll;
@@ -183,7 +202,8 @@ nav .item .label {
183
202
  .float-menu {
184
203
  display: flex;
185
204
  }
186
- .float-menu nav .item {
205
+ .float-menu nav .item,
206
+ .float-menu .nav .item {
187
207
  gap: 1rem;
188
208
  }
189
209
 
@@ -207,250 +227,231 @@ main footer {
207
227
  color: var(--primary-c);
208
228
  }
209
229
 
210
- .page-content {
211
- position: relative;
212
- padding: 3em;
213
- width: 100%;
214
- flex: 1 1 100%;
215
- transition: margin 0.2s;
216
- }
217
-
218
- /* Excluding Tablets */
219
- @media (max-width: 575.98px) or (min-width: 768px) {
220
- input.main-menu-trigger:checked ~ .side-menu .menu-logo-alt,
221
- input.main-menu-trigger:checked ~ * .side-menu .menu-logo-alt {
230
+ /* Mobile or PC (Tablet Excluded) */
231
+ /* Above Tablets/Mini PC */
232
+ @media (min-width: 769px) {
233
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-logo-alt, .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-logo-alt {
222
234
  display: none;
223
235
  }
224
- input.main-menu-trigger:not(:checked) ~ .side-menu:not(.mini) .menu-logo-alt,
225
- input.main-menu-trigger:not(:checked) ~ * .side-menu:not(.mini) .menu-logo-alt {
226
- display: none;
227
- }
228
- }
229
- /* Above <---> Tablets/Mini PC */
230
- @media (min-width: 768px) {
231
236
  .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
232
237
  grid-template-columns: 0fr 1fr;
233
238
  }
234
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu:not(.mini),
235
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu:not(.mini) {
236
- width: 0;
237
- flex-basis: 0;
238
- opacity: 0;
239
- padding: 0;
240
- }
241
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini,
242
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini {
243
- width: 15%;
244
- flex-basis: 15%;
239
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
240
+ grid-template-columns: 1fr 20fr;
245
241
  }
246
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-header .menu-logo,
247
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-header .main-menu-toggle,
248
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-header .menu-logo,
249
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-header .main-menu-toggle {
242
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .menu-logo {
250
243
  display: none;
251
244
  }
252
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-header .title,
253
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-header .title {
245
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title {
254
246
  opacity: 0;
255
247
  height: 0;
256
248
  margin-bottom: 0;
257
249
  }
258
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini nav .item,
259
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini nav .item {
250
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .item,
251
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .item {
260
252
  justify-content: center;
261
253
  }
262
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini nav .item .label,
263
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini nav .title .label,
264
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-header .item .label,
265
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-header .title .label,
266
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-footer .item .label,
267
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-footer .title .label,
268
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini nav .item .label,
269
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini nav .title .label,
270
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-header .item .label,
271
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-header .title .label,
272
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-footer .item .label,
273
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-footer .title .label {
254
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .item .label,
255
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .title .label,
256
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .item .label,
257
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .title .label,
258
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .item .label,
259
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title .label,
260
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .item .label,
261
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .title .label {
274
262
  opacity: 0;
275
263
  transform: translateX(100%);
276
264
  position: absolute;
277
265
  }
278
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini nav .title,
279
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-header .title,
280
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .side-menu.mini .menu-footer .title,
281
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini nav .title,
282
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-header .title,
283
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .side-menu.mini .menu-footer .title {
266
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) nav .title,
267
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .nav .title,
268
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .title,
269
+ .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-footer .title {
284
270
  border-bottom: thin solid;
285
271
  padding: 0;
286
272
  }
287
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ main .page-header .main-menu-toggle,
288
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ .page .page-header .main-menu-toggle,
289
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * main .page-header .main-menu-toggle,
290
- .main-menu-container:not(.grid) input.main-menu-trigger:not(:checked) ~ * .page .page-header .main-menu-toggle {
291
- display: none;
273
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu:not(.mini),
274
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu:not(.mini) {
275
+ width: 0;
276
+ flex-basis: 0;
277
+ opacity: 0;
278
+ padding: 0;
292
279
  }
293
- }
294
- /* Above <---> Mobile */
295
- @media (min-width: 576px) {
296
- .main-menu-container.grid:has(> .side-menu:not(.mini)), .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
297
- grid-template-columns: 1fr 4fr;
280
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu:not(.mini) .menu-logo-alt,
281
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu:not(.mini) .menu-logo-alt {
282
+ display: none;
298
283
  }
299
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) {
300
- grid-template-columns: 1fr 11fr;
284
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini,
285
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini {
286
+ width: 5%;
287
+ flex-basis: 5%;
301
288
  }
302
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-header .menu-logo,
303
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-header .main-menu-toggle {
289
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .menu-logo,
290
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .menu-logo {
304
291
  display: none;
305
292
  }
306
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-header .title {
293
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title,
294
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title {
307
295
  opacity: 0;
308
296
  height: 0;
309
297
  margin-bottom: 0;
310
298
  }
311
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) nav .item {
299
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .item,
300
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .item,
301
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .item,
302
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .item {
312
303
  justify-content: center;
313
304
  }
314
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) nav .item .label,
315
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) nav .title .label,
316
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-header .item .label,
317
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-header .title .label,
318
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-footer .item .label,
319
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-footer .title .label {
305
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .item .label,
306
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .title .label,
307
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .item .label,
308
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .title .label,
309
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .item .label,
310
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title .label,
311
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .item .label,
312
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title .label,
313
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .item .label,
314
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .title .label,
315
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .item .label,
316
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .title .label,
317
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .item .label,
318
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title .label,
319
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .item .label,
320
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .title .label {
320
321
  opacity: 0;
321
322
  transform: translateX(100%);
322
323
  position: absolute;
323
324
  }
324
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) nav .title,
325
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-header .title,
326
- .main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) .menu-footer .title {
325
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini nav .title,
326
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .nav .title,
327
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-header .title,
328
+ .main-menu-container.flex input.main-menu-trigger:checked ~ .side-menu.mini .menu-footer .title,
329
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini nav .title,
330
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .nav .title,
331
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-header .title,
332
+ .main-menu-container.flex input.main-menu-trigger:checked ~ * .side-menu.mini .menu-footer .title {
327
333
  border-bottom: thin solid;
328
334
  padding: 0;
329
335
  }
330
- .main-menu-container.grid > .side-menu {
331
- align-items: center;
332
- }
333
- .main-menu-container:not(.grid) .side-menu {
334
- width: 30%;
336
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .menu-logo-alt,
337
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .menu-logo-alt {
338
+ display: none;
335
339
  }
340
+ }
341
+ /* Above Mobile */
342
+ @media (min-width: 577px) {
336
343
  .float-menu,
337
344
  .full-menu {
338
345
  align-items: center;
339
346
  }
340
- .float-menu .menu-header .menu-logo,
341
- .float-menu .menu-header .main-menu-toggle,
342
- .full-menu .menu-header .menu-logo,
343
- .full-menu .menu-header .main-menu-toggle {
344
- display: none;
345
- }
346
347
  .float-menu {
347
348
  /* width: 75%; */
348
349
  }
349
350
  }
350
- /* Mobile <---> Tablets/Mini PC */
351
- @media (min-width: 576px) and (max-width: 767.98px) {
352
- .main-menu-container:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-logo-alt, .main-menu-container:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:not(:checked)) .menu-logo-alt {
351
+ /* Tablets/Mini PC (Tablet Only) */
352
+ @media (min-width: 577px) and (max-width: 768px) {
353
+ .main-menu-container.grid:has(> input.main-menu-trigger:checked) .menu-logo-alt {
353
354
  display: none;
354
355
  }
355
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
356
- grid-template-columns: 1fr 11fr;
356
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) {
357
+ grid-template-columns: 1fr 12fr;
357
358
  }
358
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-header .menu-logo,
359
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-header .main-menu-toggle {
359
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-header .menu-logo {
360
360
  display: none;
361
361
  }
362
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-header .title {
362
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-header .title {
363
363
  opacity: 0;
364
364
  height: 0;
365
365
  margin-bottom: 0;
366
366
  }
367
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) nav .item {
367
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) nav .item,
368
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .nav .item {
368
369
  justify-content: center;
369
370
  }
370
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) nav .item .label,
371
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) nav .title .label,
372
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-header .item .label,
373
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-header .title .label,
374
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-footer .item .label,
375
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-footer .title .label {
371
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) nav .item .label,
372
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) nav .title .label,
373
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .nav .item .label,
374
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .nav .title .label,
375
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-header .item .label,
376
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-header .title .label,
377
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-footer .item .label,
378
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-footer .title .label {
376
379
  opacity: 0;
377
380
  transform: translateX(100%);
378
381
  position: absolute;
379
382
  }
380
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) nav .title,
381
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-header .title,
382
- .main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) .menu-footer .title {
383
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) nav .title,
384
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .nav .title,
385
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-header .title,
386
+ .main-menu-container.grid:has(> input.main-menu-trigger:not(:checked)) .menu-footer .title {
383
387
  border-bottom: thin solid;
384
388
  padding: 0;
385
389
  }
386
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu,
387
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu {
388
- width: 15%;
389
- flex-basis: 15%;
390
+ .main-menu-container.flex input.main-menu-trigger:checked .menu-logo-alt {
391
+ display: none;
392
+ }
393
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu,
394
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu {
395
+ width: 7.5%;
396
+ flex-basis: 7.5%;
390
397
  }
391
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-header .menu-logo,
392
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-header .main-menu-toggle,
393
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-header .menu-logo,
394
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-header .main-menu-toggle {
398
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .menu-logo,
399
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .menu-logo {
395
400
  display: none;
396
401
  }
397
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-header .title,
398
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-header .title {
402
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title,
403
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title {
399
404
  opacity: 0;
400
405
  height: 0;
401
406
  margin-bottom: 0;
402
407
  }
403
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu nav .item,
404
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu nav .item {
408
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .item,
409
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .item,
410
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .item,
411
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .item {
405
412
  justify-content: center;
406
413
  }
407
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu nav .item .label,
408
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu nav .title .label,
409
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-header .item .label,
410
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-header .title .label,
411
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-footer .item .label,
412
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-footer .title .label,
413
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu nav .item .label,
414
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu nav .title .label,
415
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-header .item .label,
416
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-header .title .label,
417
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-footer .item .label,
418
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-footer .title .label {
414
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .item .label,
415
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .title .label,
416
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .item .label,
417
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .title .label,
418
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .item .label,
419
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title .label,
420
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .item .label,
421
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title .label,
422
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .item .label,
423
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .title .label,
424
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .item .label,
425
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .title .label,
426
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .item .label,
427
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title .label,
428
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .item .label,
429
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .title .label {
419
430
  opacity: 0;
420
431
  transform: translateX(100%);
421
432
  position: absolute;
422
433
  }
423
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu nav .title,
424
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-header .title,
425
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ .side-menu .menu-footer .title,
426
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu nav .title,
427
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-header .title,
428
- .main-menu-container:not(.grid) input.main-menu-trigger:checked ~ * .side-menu .menu-footer .title {
434
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu nav .title,
435
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .nav .title,
436
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-header .title,
437
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ .side-menu .menu-footer .title,
438
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu nav .title,
439
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .nav .title,
440
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-header .title,
441
+ .main-menu-container.flex input.main-menu-trigger:not(:checked) ~ * .side-menu .menu-footer .title {
429
442
  border-bottom: thin solid;
430
443
  padding: 0;
431
444
  }
432
- .main-menu-container:not(.grid) .side-menu .btn,
433
- .main-menu-container:not(.grid) .side-menu nav .item {
434
- padding-left: 1rem;
435
- padding-right: 1rem;
436
- }
437
- .main-menu-container:not(.grid) .side-menu .main-menu-toggle {
438
- display: none;
439
- }
440
445
  .float-menu {
441
446
  /* width: 50%; */
442
447
  }
443
448
  }
444
- /* Tablets/Mini PC <---> BELOW */
445
- @media (max-width: 767.98px) {
446
- .side-menu .btn {
447
- min-width: auto;
448
- }
449
- }
450
- /* Mobile <--> BELOW */
451
- @media (max-width: 575.98px) {
449
+ /* Below Mobile */
450
+ @media (max-width: 576px) {
452
451
  input.main-menu-trigger:not(:checked) ~ .full-menu nav,
453
- input.main-menu-trigger:not(:checked) ~ * .full-menu nav {
452
+ input.main-menu-trigger:not(:checked) ~ .full-menu .nav,
453
+ input.main-menu-trigger:not(:checked) ~ * .full-menu nav,
454
+ input.main-menu-trigger:not(:checked) ~ * .full-menu .nav {
454
455
  display: none;
455
456
  /* transform: translateY(-100%); */
456
457
  /* opacity: 0; */
@@ -461,6 +462,7 @@ main footer {
461
462
  }
462
463
  input.main-menu-trigger:checked {
463
464
  width: 100vw;
465
+ height: 100vh;
464
466
  background-color: hsla(var(--black-hs), var(--black-l), 0.2);
465
467
  z-index: 2;
466
468
  }
@@ -490,12 +492,12 @@ main footer {
490
492
  backdrop-filter: blur(10px);
491
493
  z-index: 2;
492
494
  }
493
- input.main-menu-trigger:checked ~ .full-menu .btn,
494
- input.main-menu-trigger:checked ~ * .full-menu .btn {
495
+ input.main-menu-trigger:checked ~ .full-menu button,
496
+ input.main-menu-trigger:checked ~ * .full-menu button {
495
497
  color: var(--secondary-c);
496
498
  }
497
- input.main-menu-trigger:checked ~ .full-menu .btn:hover,
498
- input.main-menu-trigger:checked ~ * .full-menu .btn:hover {
499
+ input.main-menu-trigger:checked ~ .full-menu button:hover,
500
+ input.main-menu-trigger:checked ~ * .full-menu button:hover {
499
501
  background-color: var(--secondary-c);
500
502
  color: var(--secondary);
501
503
  }
@@ -504,12 +506,10 @@ main footer {
504
506
  order: -1;
505
507
  padding: 1rem;
506
508
  }
507
- input.main-menu-trigger:checked ~ .full-menu .menu-header .menu-logo,
508
- input.main-menu-trigger:checked ~ * .full-menu .menu-header .menu-logo {
509
- display: none;
510
- }
511
509
  input.main-menu-trigger:checked ~ .full-menu nav,
512
- input.main-menu-trigger:checked ~ * .full-menu nav {
510
+ input.main-menu-trigger:checked ~ .full-menu .nav,
511
+ input.main-menu-trigger:checked ~ * .full-menu nav,
512
+ input.main-menu-trigger:checked ~ * .full-menu .nav {
513
513
  flex-direction: column;
514
514
  }
515
515
  input.main-menu-trigger:checked ~ .float-menu,
@@ -522,6 +522,9 @@ main footer {
522
522
  input.main-menu-trigger:checked ~ * .page .page-header .main-menu-toggle {
523
523
  transform: translateX(-50%);
524
524
  }
525
+ .main-menu-container .menu-logo-alt {
526
+ display: none;
527
+ }
525
528
  .main-menu-container.grid:has(> .side-menu) {
526
529
  grid-template-columns: 1fr;
527
530
  }
@@ -557,17 +560,16 @@ main footer {
557
560
  display: flex;
558
561
  flex-direction: column;
559
562
  }
560
- .main-menu-container .float-menu nav {
563
+ .main-menu-container .float-menu nav,
564
+ .main-menu-container .float-menu .nav {
561
565
  flex-direction: column;
562
566
  }
563
567
  .main-menu-container .float-menu nav,
568
+ .main-menu-container .float-menu .nav,
564
569
  .main-menu-container .float-menu .menu-header,
565
570
  .main-menu-container .float-menu .menu-footer {
566
571
  padding: 1rem;
567
572
  }
568
- .main-menu-container .page .page-content {
569
- padding: 3em 1em;
570
- }
571
573
  }
572
574
 
573
575
  /*# sourceMappingURL=menu.css.map */