@vixcom/ui 1.6.2 → 1.7.1
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 +72 -24
- package/dist/css/helper/primefaces.css.map +1 -1
- package/dist/css/main.css +16 -9
- package/dist/css/main.css.map +1 -1
- package/dist/css/menu.css +31 -17
- package/dist/css/menu.css.map +1 -1
- package/package.json +1 -1
- package/src/assets/img/avatar.svg +1 -0
- package/src/css/colors.css +66 -72
- package/src/css/colors.css.map +1 -1
- package/src/css/helper/primefaces.css +72 -24
- package/src/css/helper/primefaces.css.map +1 -1
- package/src/css/main.css +16 -9
- package/src/css/main.css.map +1 -1
- package/src/css/menu.css +31 -17
- package/src/css/menu.css.map +1 -1
- package/src/pages/menu/index.html +29 -12
- package/src/styles/_mixins.scss +6 -22
- package/src/styles/colors.scss +7 -13
- package/src/styles/helper/primefaces.scss +110 -48
- package/src/styles/main.scss +23 -15
- package/src/styles/menu.scss +41 -20
|
@@ -32,6 +32,10 @@
|
|
|
32
32
|
height: 100%;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
.p-tabmenu-nav {
|
|
36
|
+
align-items: flex-end;
|
|
37
|
+
}
|
|
38
|
+
|
|
35
39
|
.p-dialog-mask,
|
|
36
40
|
.p-component-overlay,
|
|
37
41
|
.p-dialog-mask.p-component-overlay {
|
|
@@ -106,11 +110,27 @@
|
|
|
106
110
|
font-size: 0.75rem;
|
|
107
111
|
}
|
|
108
112
|
|
|
109
|
-
|
|
113
|
+
.p-float-label, .p-float-label.p-inputgroup {
|
|
110
114
|
display: flex;
|
|
111
|
-
flex-wrap: wrap;
|
|
112
115
|
}
|
|
113
|
-
|
|
116
|
+
.p-float-label :focus ~ label,
|
|
117
|
+
.p-float-label .p-filled ~ label {
|
|
118
|
+
top: 0;
|
|
119
|
+
transform: translateY(-100%);
|
|
120
|
+
}
|
|
121
|
+
.p-float-label label {
|
|
122
|
+
margin-top: 0;
|
|
123
|
+
/* top: 50%; */
|
|
124
|
+
left: 0;
|
|
125
|
+
padding: 0.25rem;
|
|
126
|
+
transform: translateY(-50%);
|
|
127
|
+
}
|
|
128
|
+
.p-float-label label.bottom {
|
|
129
|
+
transform: translateY(100%);
|
|
130
|
+
top: unset;
|
|
131
|
+
bottom: 0;
|
|
132
|
+
}
|
|
133
|
+
.p-float-label .p-dropdown .p-placeholder {
|
|
114
134
|
opacity: 1;
|
|
115
135
|
}
|
|
116
136
|
|
|
@@ -123,17 +143,18 @@ body .p-float-label .p-dropdown .p-placeholder {
|
|
|
123
143
|
.p-input-icon-left,
|
|
124
144
|
.p-input-icon-right {
|
|
125
145
|
display: flex;
|
|
146
|
+
align-items: center;
|
|
126
147
|
}
|
|
127
148
|
.p-input-icon-left i,
|
|
128
149
|
.p-input-icon-right i {
|
|
129
150
|
display: flex;
|
|
130
151
|
align-items: center;
|
|
131
|
-
position:
|
|
132
|
-
top:
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: unset;
|
|
133
154
|
margin-top: 0;
|
|
134
155
|
}
|
|
135
156
|
|
|
136
|
-
.p-
|
|
157
|
+
.p-inputgroup .p-button {
|
|
137
158
|
width: unset;
|
|
138
159
|
}
|
|
139
160
|
|
|
@@ -145,7 +166,7 @@ body .p-float-label .p-dropdown .p-placeholder {
|
|
|
145
166
|
border-radius: var(--border-radius);
|
|
146
167
|
}
|
|
147
168
|
.p-dropdown .p-dropdown-label {
|
|
148
|
-
display: flex;
|
|
169
|
+
/* display: flex; */
|
|
149
170
|
}
|
|
150
171
|
|
|
151
172
|
.p-inputswitch {
|
|
@@ -163,10 +184,13 @@ body .p-float-label .p-dropdown .p-placeholder {
|
|
|
163
184
|
transform: translate(0, -50%);
|
|
164
185
|
}
|
|
165
186
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
187
|
+
.p-dropdown,
|
|
188
|
+
.p-calendar,
|
|
189
|
+
.p-password,
|
|
190
|
+
.p-inputtext,
|
|
191
|
+
.p-inputnumber {
|
|
169
192
|
width: 100%;
|
|
193
|
+
flex: 1 1 auto;
|
|
170
194
|
}
|
|
171
195
|
|
|
172
196
|
p-chart {
|
|
@@ -177,22 +201,19 @@ p-chart canvas {
|
|
|
177
201
|
min-width: 100%;
|
|
178
202
|
}
|
|
179
203
|
|
|
180
|
-
.p-
|
|
181
|
-
/* width: 100%; */
|
|
182
|
-
}
|
|
183
|
-
.p-calendar .p-datepicker {
|
|
204
|
+
.p-datepicker {
|
|
184
205
|
min-width: unset;
|
|
185
206
|
}
|
|
186
|
-
.p-
|
|
207
|
+
.p-datepicker .p-datepicker-header .p-datepicker-month {
|
|
187
208
|
border: none;
|
|
188
209
|
}
|
|
189
|
-
.p-
|
|
210
|
+
.p-datepicker:not(.p-datepicker-inline) {
|
|
190
211
|
box-shadow: unset;
|
|
191
212
|
}
|
|
192
|
-
.p-
|
|
213
|
+
.p-datepicker:not(.p-datepicker-inline) > * {
|
|
193
214
|
position: relative;
|
|
194
215
|
}
|
|
195
|
-
.p-
|
|
216
|
+
.p-datepicker:not(.p-datepicker-inline)::before {
|
|
196
217
|
content: "";
|
|
197
218
|
display: block;
|
|
198
219
|
height: 100%;
|
|
@@ -204,13 +225,16 @@ p-chart canvas {
|
|
|
204
225
|
left: 0;
|
|
205
226
|
z-index: 0;
|
|
206
227
|
}
|
|
207
|
-
.p-
|
|
228
|
+
.p-datepicker .p-datepicker-buttonbar {
|
|
229
|
+
padding: 0;
|
|
230
|
+
}
|
|
231
|
+
.p-datepicker .p-timepicker span {
|
|
232
|
+
font-size: inherit;
|
|
233
|
+
}
|
|
234
|
+
.p-datepicker table td > span {
|
|
208
235
|
width: 2.25rem;
|
|
209
236
|
height: 2.25rem;
|
|
210
237
|
}
|
|
211
|
-
.p-calendar .p-datepicker .p-datepicker-buttonbar {
|
|
212
|
-
padding: 0;
|
|
213
|
-
}
|
|
214
238
|
|
|
215
239
|
.p-panel > :first-child {
|
|
216
240
|
border-top-left-radius: inherit;
|
|
@@ -224,6 +248,13 @@ p-chart canvas {
|
|
|
224
248
|
margin-top: 1rem;
|
|
225
249
|
}
|
|
226
250
|
|
|
251
|
+
.p-timeline-horizontal.p-timeline-left .p-timeline-event-opposite {
|
|
252
|
+
text-align: left;
|
|
253
|
+
}
|
|
254
|
+
.p-timeline-horizontal.p-timeline-right .p-timeline-event-opposite {
|
|
255
|
+
text-align: right;
|
|
256
|
+
}
|
|
257
|
+
|
|
227
258
|
.p-accordion .p-accordion-header-link {
|
|
228
259
|
border-radius: inherit;
|
|
229
260
|
}
|
|
@@ -269,6 +300,13 @@ p-chart canvas {
|
|
|
269
300
|
border-radius: 0.125rem;
|
|
270
301
|
}
|
|
271
302
|
|
|
303
|
+
.p-paginator {
|
|
304
|
+
background-color: unset;
|
|
305
|
+
padding: 0;
|
|
306
|
+
}
|
|
307
|
+
.p-paginator .p-inputwrapper {
|
|
308
|
+
width: unset;
|
|
309
|
+
}
|
|
272
310
|
.p-paginator-left-content {
|
|
273
311
|
margin-right: none;
|
|
274
312
|
}
|
|
@@ -276,15 +314,25 @@ p-chart canvas {
|
|
|
276
314
|
margin-left: none;
|
|
277
315
|
}
|
|
278
316
|
|
|
317
|
+
.p-datatable-header {
|
|
318
|
+
display: flex;
|
|
319
|
+
flex-wrap: wrap;
|
|
320
|
+
gap: 1rem;
|
|
321
|
+
}
|
|
279
322
|
.p-datatable-thead {
|
|
280
323
|
text-transform: capitalize;
|
|
281
324
|
}
|
|
282
325
|
.p-datatable-thead > tr > th, .p-datatable-tbody > tr > td {
|
|
283
|
-
|
|
326
|
+
/* max-width: 1px; */
|
|
327
|
+
padding: 0.5rem;
|
|
284
328
|
}
|
|
285
329
|
.p-datatable-thead > tr > th .p-row-toggler, .p-datatable-tbody > tr > td .p-row-toggler {
|
|
286
330
|
min-width: unset;
|
|
287
331
|
}
|
|
332
|
+
.p-datatable tr.p-datatable-row-expansion > td {
|
|
333
|
+
padding-left: 5%;
|
|
334
|
+
padding-right: 5%;
|
|
335
|
+
}
|
|
288
336
|
|
|
289
337
|
.p-message .p-message-wrapper {
|
|
290
338
|
flex-wrap: wrap;
|
|
@@ -305,7 +353,7 @@ p-chart canvas {
|
|
|
305
353
|
|
|
306
354
|
.p-button {
|
|
307
355
|
width: unset;
|
|
308
|
-
min-width: 2.5rem;
|
|
356
|
+
/* min-width: 2.5rem; */
|
|
309
357
|
/* text-transform: capitalize; */
|
|
310
358
|
}
|
|
311
359
|
.p-button:hover {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../styles/helper/primefaces.scss"],"names":[],"mappings":"AAGE;AAAA;AAGI;EACA;EACA;;;AAWF;EACE;;AAGF;EACE;EACA;;;AAMJ;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../styles/helper/primefaces.scss"],"names":[],"mappings":"AAGE;AAAA;AAGI;EACA;EACA;;;AAWF;EACE;;AAGF;EACE;EACA;;;AAMJ;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;;AAON;EACE;;;AAIJ;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGE;AAAA;EAEE;EACA;EACA;;;AAMR;EACE;;;AAGF;EACE;;;AAIA;EAEE;;AAKA;AAAA;EACE;EACA;;AAIJ;EACE;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;AAEA;AACE;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;;AAIJ;EACE;;AAGE;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;;AAMA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;;AAKF;EACE;;AAEF;EACE;;;AAKF;EACE;;;AAcJ;EACE;;AAEA;EACE;;AAEA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAIJ;AACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;AACA;AACA;;AAEA;EACE;;AAKN;AACE;;AAMF;EACE;EACA;EACA;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;AAEE;EACA;;AAEA;EACE;;AAGJ;EAEI;EACA;;;AAMJ;EACE;EACA;;;AAKF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;;;AAKJ;EACE;AACA;AACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;IACE;;EAEA;AACE;AACA;;EAIJ;IACE;IACA;IACA","file":"primefaces.css"}
|
package/src/css/main.css
CHANGED
|
@@ -340,8 +340,13 @@ textarea:-moz-input-placeholder,
|
|
|
340
340
|
textarea::-moz-input-placeholder,
|
|
341
341
|
textarea:-webkit-input-placeholder,
|
|
342
342
|
textarea::-webkit-input-placeholder {
|
|
343
|
+
text-transform: capitalize;
|
|
343
344
|
display: none;
|
|
344
345
|
color: currentColor;
|
|
346
|
+
}
|
|
347
|
+
input:focus::placeholder, input:focus::-webkit-input-placeholder,
|
|
348
|
+
textarea:focus::placeholder,
|
|
349
|
+
textarea:focus::-webkit-input-placeholder {
|
|
345
350
|
opacity: 0.75;
|
|
346
351
|
}
|
|
347
352
|
|
|
@@ -355,19 +360,18 @@ label {
|
|
|
355
360
|
margin: 0;
|
|
356
361
|
cursor: pointer;
|
|
357
362
|
}
|
|
358
|
-
label.radio, label.
|
|
363
|
+
label.radio, label.checkbox {
|
|
359
364
|
display: flex;
|
|
360
365
|
align-items: center;
|
|
366
|
+
gap: 0.75rem;
|
|
361
367
|
}
|
|
362
|
-
label.radio .label > *, label.
|
|
368
|
+
label.radio .label > *, label.checkbox .label > * {
|
|
363
369
|
margin-bottom: 0;
|
|
364
370
|
}
|
|
365
371
|
label.radio + .radio,
|
|
366
|
-
label.radio + .checkbox, label.
|
|
367
|
-
label.
|
|
368
|
-
|
|
369
|
-
label.checkbox-container + .checkbox {
|
|
370
|
-
margin-top: 1rem;
|
|
372
|
+
label.radio + .checkbox, label.checkbox + .radio,
|
|
373
|
+
label.checkbox + .checkbox {
|
|
374
|
+
/* margin-top: 1rem; */
|
|
371
375
|
}
|
|
372
376
|
label input ~ .label.off {
|
|
373
377
|
order: -1;
|
|
@@ -1301,7 +1305,7 @@ table {
|
|
|
1301
1305
|
|
|
1302
1306
|
.grid-item {
|
|
1303
1307
|
display: grid;
|
|
1304
|
-
grid-template-columns: 1fr
|
|
1308
|
+
grid-template-columns: minmax(1.5rem, 1fr) 6fr;
|
|
1305
1309
|
grid-template-rows: 1fr;
|
|
1306
1310
|
align-items: center;
|
|
1307
1311
|
}
|
|
@@ -1331,7 +1335,6 @@ table {
|
|
|
1331
1335
|
|
|
1332
1336
|
.card {
|
|
1333
1337
|
display: flex;
|
|
1334
|
-
flex-direction: column;
|
|
1335
1338
|
border-radius: var(--border-radius);
|
|
1336
1339
|
}
|
|
1337
1340
|
.card {
|
|
@@ -1357,6 +1360,9 @@ table {
|
|
|
1357
1360
|
.card::before:not(img::before, img::after) {
|
|
1358
1361
|
content: "";
|
|
1359
1362
|
}
|
|
1363
|
+
.card:not(.h) {
|
|
1364
|
+
flex-direction: column;
|
|
1365
|
+
}
|
|
1360
1366
|
.card:not(.flat)::before {
|
|
1361
1367
|
box-shadow: var(--card-shadow);
|
|
1362
1368
|
z-index: -1;
|
|
@@ -1631,6 +1637,7 @@ table {
|
|
|
1631
1637
|
}
|
|
1632
1638
|
|
|
1633
1639
|
img {
|
|
1640
|
+
height: 100%;
|
|
1634
1641
|
max-width: 100%;
|
|
1635
1642
|
object-fit: contain;
|
|
1636
1643
|
}
|
package/src/css/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../styles/main.scss","../styles/_mixins.scss"],"names":[],"mappings":"AAEA;AAEA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;;AAcF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;EAEE;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;ACnEA;EACE;;AAGF;AACE;AACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;;AAbA;EAEE;;ADsFF;EACE;;;AAIJ;EACE;;;AAGF;EACE;AAAA;IAEE;IACA;;EAEA;AAAA;IACE;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EAEE;EACA;;AAGF;EACE;;ACpKK;EDuKL;;;AAKN;EACE;EACA;EACA;EACA;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;AACA;EACA;EACA;;AAEA;AACE;EACA;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;AAIJ;ECjOE;EACA;EACA;EDiOA;;;AAGF;ECtOE;EACA;EACA;;ADuOA;EACE;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;AACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;;AAUF;AAAA;AACE;AACA;EACA;EACA;AACA;;AAEA;AAAA;AACE;EACA;;AAGF;AAAA;EACE;;;AAKN;AAAA;EAEE;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../styles/main.scss","../styles/_mixins.scss"],"names":[],"mappings":"AAEA;AAEA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;;AAcF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;EAEE;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;ACnEA;EACE;;AAGF;AACE;AACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;;AAbA;EAEE;;ADsFF;EACE;;;AAIJ;EACE;;;AAGF;EACE;AAAA;IAEE;IACA;;EAEA;AAAA;IACE;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EAEE;EACA;;AAGF;EACE;;ACpKK;EDuKL;;;AAKN;EACE;EACA;EACA;EACA;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;AACA;EACA;EACA;;AAEA;AACE;EACA;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;AAIJ;ECjOE;EACA;EACA;EDiOA;;;AAGF;ECtOE;EACA;EACA;;ADuOA;EACE;;AAEA;EACE;;AAIJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;AACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;;AAUF;AAAA;AACE;AACA;EACA;EACA;AACA;;AAEA;AAAA;AACE;EACA;;AAGF;AAAA;EACE;;;AAKN;AAAA;EAEE;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;AAIA;AAAA;AAAA;EAEE;;;AAKN;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;AAEA;EAEE;EACA;EACA;;AAEA;EACE;;AAIA;AAAA;AAAA;AAEE;;AAKN;EACE;;AAGF;AAAA;AAAA;EAKE;;AASJ;EACE;;;AAGF;AAsIE;AAAA;AAAA;AAAA;AAAA;;AArIA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EAEE;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;;;AAUJ;EACE;EACA;;AAGE;AAAA;AAAA;EAGE;EACA;;AAIJ;EACE;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;AACA;EACA;;AAGA;EAEE;;AAiBF;AAAA;EAEE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;EAEE;;AAKF;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAIA;AAAA;EAEE;;AAMJ;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAKF;AAAA;EAEE;;AAIJ;AAAA;EAEE;AACA;;;AAIJ;EACE;EACA;;ACnvBA;EACE;;AAGF;AACE;AACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;;AAbA;EAEE;;ADqwBF;EACE;;ACxuBF;EACE;;AAGF;AACE;AACA;;AAGF;EApCA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;;AAbA;EAEE;;AD4wBA;EACE;EAEA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC5wBF;EACE;;AAGF;AACE;AACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;;AAbA;EAEE;;AD8xBA;EACE;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAMR;EACE;EACA;EACA;EACA;AACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAWF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAMJ;EACE;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAUN;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAOF;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;;AAIJ;AACE;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAEA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKN;AACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAaF;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;AACA;EACA;EACA;EACA;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAYR;AAAA;AAAA;EAGE;EACA;EACA;EACA;EAEA;EACA;;AAYA;AAAA;AAAA;EACE;;AAMF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;AACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAaF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;EACE;EACA;EACA;EACA;;;AAKN;AAGE;EACE;;;AAIJ;AAEA;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;AACA;AACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;;;AAGF;EACE;;;AAGF;EChwCE;EACA;EACA;;ADiwCA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;AAEA;;AACA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;AACA;AACA;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;ACz3CA;EACE;;AAGF;AACE;AACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;;AAbA;EAEE;;AD44CF;EACE;;AAEF;EACE;EACA;;AAIA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EAEE;AACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;;AAKF;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAIA;AAAA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAMJ;AAAA;AAAA;EACE;;AAEA;AAAA;AAAA;EACE;;AAMR;AAAA;AAAA;EACE;;AAEA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;EACE;AACA;AACA;EACA;EACA;EACA;;AAaA;AAAA;AAAA;EACE;AACA;EACA;;AAIA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;AACE;;;AAKN;EACE;AACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;;AAGF;EAEE;ECtlDA;EACA;EACA;;ADwlDE;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EAKE;;AAJA;EACE;;AAMJ;EACE;EACA;;;AAKF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAKN;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;ECztDE;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;EDmtDA;;AChuDA;EAEE;;;AA8BF;EACE;;AAGF;AACE;AACA;;AAGF;EApCA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;AACA;;AAbA;EAEE;;ADouDF;AACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;AACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AACA;EACE;IACE;;;AAIJ;AACA;EAGI;AAAA;IACE;IACA;;EAOF;IACE;;;AAKN;AACA;EACE;AAAA;IAEE;;EAEA;AAAA;IACE;;EAGF;AAAA;IACE;;EAIJ;AACE;IACA;;EAEA;IACE;;EAKF;IACE;;EAKE;IACE;;EAGF;IACE;;EAOJ;AAAA;IACE;;EAGF;AAAA;IACE;IAEA;IACA;;;AAMR;AACA;EACE;IACE;;EAKA;AAAA;IACE;;EAGF;AAAA;IACE;IACA;;EAKF;IACE;IACA","file":"main.css"}
|
package/src/css/menu.css
CHANGED
|
@@ -23,17 +23,20 @@ input.main-menu-trigger::after {
|
|
|
23
23
|
input.main-menu-trigger, input.main-menu-trigger::before, input.main-menu-trigger::after {
|
|
24
24
|
background-color: transparent;
|
|
25
25
|
}
|
|
26
|
-
input.main-menu-trigger:checked ~ main > footer,
|
|
26
|
+
input.main-menu-trigger:checked ~ main > footer, input.main-menu-trigger:checked ~ main + footer,
|
|
27
27
|
input.main-menu-trigger:checked ~ .page > footer,
|
|
28
|
+
input.main-menu-trigger:checked ~ .page + footer,
|
|
28
29
|
input.main-menu-trigger:checked ~ * main > footer,
|
|
29
|
-
input.main-menu-trigger:checked ~ *
|
|
30
|
+
input.main-menu-trigger:checked ~ * main + footer,
|
|
31
|
+
input.main-menu-trigger:checked ~ * .page > footer,
|
|
32
|
+
input.main-menu-trigger:checked ~ * .page + footer {
|
|
30
33
|
background-color: var(--secondary);
|
|
31
34
|
color: var(--secondary-c);
|
|
32
35
|
}
|
|
33
36
|
.main-menu-toggle {
|
|
34
37
|
position: relative;
|
|
35
38
|
font-size: 120%;
|
|
36
|
-
z-index: 1;
|
|
39
|
+
/* z-index: 1; */
|
|
37
40
|
}
|
|
38
41
|
|
|
39
42
|
.menu-container {
|
|
@@ -54,9 +57,8 @@ nav,
|
|
|
54
57
|
align-items: center;
|
|
55
58
|
}
|
|
56
59
|
|
|
57
|
-
nav,
|
|
58
|
-
.nav,
|
|
59
|
-
.menu-container {
|
|
60
|
+
.menu-container nav,
|
|
61
|
+
.menu-container .nav, .menu-container {
|
|
60
62
|
flex: 1 1 100%;
|
|
61
63
|
gap: 0.5rem;
|
|
62
64
|
}
|
|
@@ -102,6 +104,12 @@ nav .item .label,
|
|
|
102
104
|
.main-menu-container:has(> .side-menu).grid {
|
|
103
105
|
grid-template-columns: 1fr 4fr;
|
|
104
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
|
+
}
|
|
105
113
|
.main-menu-container:has(> .side-menu) > main section,
|
|
106
114
|
.main-menu-container:has(> .side-menu) > .page section {
|
|
107
115
|
height: 100%;
|
|
@@ -118,10 +126,9 @@ nav .item .label,
|
|
|
118
126
|
}
|
|
119
127
|
.main-menu-container.grid {
|
|
120
128
|
display: grid;
|
|
121
|
-
grid-template-rows: 1fr;
|
|
122
129
|
}
|
|
123
130
|
.main-menu-container.grid > .side-menu {
|
|
124
|
-
grid-row:
|
|
131
|
+
grid-row: span 20;
|
|
125
132
|
}
|
|
126
133
|
|
|
127
134
|
.main-menu {
|
|
@@ -134,8 +141,8 @@ nav .item .label,
|
|
|
134
141
|
.main-menu:not(.side-menu:has(> .menu-snap)) {
|
|
135
142
|
flex-direction: column;
|
|
136
143
|
}
|
|
137
|
-
.main-menu img {
|
|
138
|
-
max-height: 5rem;
|
|
144
|
+
.main-menu .menu-snap img {
|
|
145
|
+
max-height: 2.5rem;
|
|
139
146
|
}
|
|
140
147
|
.main-menu nav,
|
|
141
148
|
.main-menu .nav {
|
|
@@ -200,6 +207,7 @@ nav .item .label,
|
|
|
200
207
|
.menu-snap {
|
|
201
208
|
display: flex;
|
|
202
209
|
overflow: scroll;
|
|
210
|
+
flex-basis: auto;
|
|
203
211
|
}
|
|
204
212
|
.menu-snap .item {
|
|
205
213
|
padding: 0.125%;
|
|
@@ -241,8 +249,8 @@ main {
|
|
|
241
249
|
overflow-y: scroll;
|
|
242
250
|
z-index: 0;
|
|
243
251
|
}
|
|
244
|
-
|
|
245
|
-
main footer {
|
|
252
|
+
|
|
253
|
+
.main-menu-container > footer {
|
|
246
254
|
background-color: var(--primary);
|
|
247
255
|
color: var(--primary-c);
|
|
248
256
|
}
|
|
@@ -257,13 +265,13 @@ main footer {
|
|
|
257
265
|
overflow-x: scroll;
|
|
258
266
|
}
|
|
259
267
|
.main-menu-container input.main-menu-trigger:not(:checked) ~ .side-menu > .menu-snap, .main-menu-container input.main-menu-trigger:not(:checked) ~ * .side-menu > .menu-snap {
|
|
260
|
-
flex-basis: 25%;
|
|
268
|
+
/* flex-basis: 25%; */
|
|
261
269
|
}
|
|
262
270
|
.main-menu-container.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
|
|
263
271
|
grid-template-columns: 0fr 1fr;
|
|
264
272
|
}
|
|
265
273
|
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
|
|
266
|
-
grid-template-columns: 1fr
|
|
274
|
+
grid-template-columns: 1fr 10fr;
|
|
267
275
|
}
|
|
268
276
|
.main-menu-container.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) .menu-header .menu-logo {
|
|
269
277
|
display: none;
|
|
@@ -365,6 +373,9 @@ main footer {
|
|
|
365
373
|
}
|
|
366
374
|
/* Above Mobile */
|
|
367
375
|
@media (min-width: 577px) {
|
|
376
|
+
.main-menu-container input.main-menu-trigger {
|
|
377
|
+
z-index: -1;
|
|
378
|
+
}
|
|
368
379
|
.main-menu-container .full-menu .menu-container,
|
|
369
380
|
.main-menu-container .full-menu .menu-container nav,
|
|
370
381
|
.main-menu-container .full-menu .menu-container .nav,
|
|
@@ -380,11 +391,14 @@ main footer {
|
|
|
380
391
|
width: 100%;
|
|
381
392
|
overflow-x: scroll;
|
|
382
393
|
}
|
|
394
|
+
.main-menu-container:has(> .side-menu).grid > header, .main-menu-container:has(> .side-menu).grid footer {
|
|
395
|
+
grid-column: 2;
|
|
396
|
+
}
|
|
383
397
|
}
|
|
384
398
|
/* Tablets/Mini PC (Tablet Only) */
|
|
385
399
|
@media (min-width: 577px) and (max-width: 768px) {
|
|
386
400
|
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) {
|
|
387
|
-
grid-template-columns: 1fr
|
|
401
|
+
grid-template-columns: 1fr 6fr;
|
|
388
402
|
}
|
|
389
403
|
.main-menu-container.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) .menu-header .menu-logo {
|
|
390
404
|
display: none;
|
|
@@ -478,7 +492,7 @@ main footer {
|
|
|
478
492
|
/* Tablet Below */
|
|
479
493
|
@media (max-width: 768px) {
|
|
480
494
|
.main-menu-container input.main-menu-trigger:checked ~ .side-menu > .menu-snap, .main-menu-container input.main-menu-trigger:checked ~ * .side-menu > .menu-snap {
|
|
481
|
-
flex-basis: 25%;
|
|
495
|
+
/* flex-basis: 25%; */
|
|
482
496
|
}
|
|
483
497
|
.main-menu-container input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container nav,
|
|
484
498
|
.main-menu-container input.main-menu-trigger:not(:checked) ~ .full-menu .menu-container .nav,
|
|
@@ -548,7 +562,7 @@ main footer {
|
|
|
548
562
|
input.main-menu-trigger:checked ~ * .full-menu .menu-container {
|
|
549
563
|
background-color: unset;
|
|
550
564
|
}
|
|
551
|
-
.main-menu-container input.main-menu-trigger:checked ~ .main-menu nav, .main-menu-container input.main-menu-trigger:checked ~ .main-menu .nav, .main-menu-container input.main-menu-trigger:checked ~ .main-menu .menu-container, .main-menu-container input.main-menu-trigger:checked ~ * .main-menu nav, .main-menu-container input.main-menu-trigger:checked ~ * .main-menu .nav, .main-menu-container input.main-menu-trigger:checked ~ * .main-menu .menu-container, .main-menu-container.flex {
|
|
565
|
+
.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 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 {
|
|
552
566
|
flex-direction: column;
|
|
553
567
|
}
|
|
554
568
|
.main-menu-container.grid:has(> .side-menu) {
|
package/src/css/menu.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAGE;;AAQI;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"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","file":"menu.css"}
|
|
@@ -15,16 +15,17 @@
|
|
|
15
15
|
<link rel="stylesheet" href="css/sizes.css">
|
|
16
16
|
<link rel="stylesheet" href="css/colors.css">
|
|
17
17
|
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
|
|
18
|
-
<script src="
|
|
18
|
+
<script src="http://unpkg.com/alpinejs" defer></script>
|
|
19
|
+
<!-- <script src="js/alpine" defer></script> -->
|
|
19
20
|
</head>
|
|
20
21
|
|
|
21
|
-
<body class="main-menu-container" :class="container" x-data="{type:'
|
|
22
|
+
<body class="main-menu-container" :class="container" x-data="{type:'side-menu', container:'grid', mini: true, active: false, flat: false}">
|
|
22
23
|
<input type="checkbox" id="main-menu-trigger" class="main-menu-trigger" x-model="active">
|
|
23
24
|
<menu :class="`main-menu bg-primary ${type} ${mini ? 'mini':'max'}`">
|
|
24
25
|
<nav class="menu-snap bg-text text-black">
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
</template>
|
|
26
|
+
<template x-for="() in 5">
|
|
27
|
+
<img src="assets/img/icon.png" class="item icon" alt="icon">
|
|
28
|
+
</template>
|
|
28
29
|
</nav>
|
|
29
30
|
<div class="menu-container p-1 rounded-2 bg-inherit">
|
|
30
31
|
<header class="menu-header">
|
|
@@ -58,11 +59,22 @@
|
|
|
58
59
|
<label for="main-menu-trigger" class="bi bi-list main-menu-toggle icon border bg-text p-2 m-auto rounded-circle align-self-center" />
|
|
59
60
|
</div>
|
|
60
61
|
</menu>
|
|
61
|
-
<
|
|
62
|
-
<header class="p-3 bg-white"></header>
|
|
62
|
+
<template x-if="flat">
|
|
63
|
+
<header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
|
|
64
|
+
</template>
|
|
65
|
+
<main>
|
|
66
|
+
<template x-if="!flat">
|
|
67
|
+
<header class="p-3 bg-white"><img class="sq-2 ml-auto" src="assets/img/avatar.svg" alt="P"></header>
|
|
68
|
+
</template>
|
|
63
69
|
<section>
|
|
64
70
|
<h1 x-text="`VX Dashboard ${type}`"></h1>
|
|
65
71
|
<menu>
|
|
72
|
+
<div class="tabs tabs-primary md">
|
|
73
|
+
<label>
|
|
74
|
+
<input class="default" type="checkbox" name="flat" x-model="flat">
|
|
75
|
+
<span class="label" x-text="`Flat: ${flat}`"></span>
|
|
76
|
+
</label>
|
|
77
|
+
</div>
|
|
66
78
|
<div class="tabs tabs-secondary prefill">
|
|
67
79
|
<template x-for="(v,k) of {flex:'bounding-box', grid: 'grid'}">
|
|
68
80
|
<label class="tab" :class="{active: k === container}" :title="k">
|
|
@@ -72,10 +84,10 @@
|
|
|
72
84
|
</label>
|
|
73
85
|
</template>
|
|
74
86
|
<template x-for="(v,k) of {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
87
|
+
'full-menu':'window-fullscreen',
|
|
88
|
+
'float-menu':'menu-up',
|
|
89
|
+
'side-menu':'layout-sidebar',
|
|
90
|
+
}">
|
|
79
91
|
<label class="tab" :class="{active: k === type}" :title="k">
|
|
80
92
|
<i :class="`icon bi bi-${v}`"></i>
|
|
81
93
|
<input type="radio" name="type" :value="k" x-model="type" hidden>
|
|
@@ -96,8 +108,13 @@
|
|
|
96
108
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
97
109
|
</template>
|
|
98
110
|
</section>
|
|
99
|
-
<
|
|
111
|
+
<template x-if="!flat">
|
|
112
|
+
<footer>All rights reserved</footer>
|
|
113
|
+
</template>
|
|
100
114
|
</main>
|
|
115
|
+
<template x-if="flat">
|
|
116
|
+
<footer>All rights reserved</footer>
|
|
117
|
+
</template>
|
|
101
118
|
</body>
|
|
102
119
|
|
|
103
120
|
</html>
|
package/src/styles/_mixins.scss
CHANGED
|
@@ -214,7 +214,7 @@ $colors-mapped: map-merge(
|
|
|
214
214
|
|
|
215
215
|
// /* Functions and Mixins */
|
|
216
216
|
|
|
217
|
-
@mixin bg-
|
|
217
|
+
@mixin bg-variant($selector, $k, $v) {
|
|
218
218
|
#{$selector} {
|
|
219
219
|
color: var(--#{$k}-c, map-get($v, 'c'));
|
|
220
220
|
background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
|
|
@@ -265,7 +265,7 @@ $colors-mapped: map-merge(
|
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
267
|
|
|
268
|
-
@mixin group-bg-
|
|
268
|
+
@mixin group-bg-variant($selector, $k, $v) {
|
|
269
269
|
#{$selector} {
|
|
270
270
|
// &:hover >.active {
|
|
271
271
|
// background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.275);
|
|
@@ -316,14 +316,14 @@ $colors-mapped: map-merge(
|
|
|
316
316
|
}
|
|
317
317
|
}
|
|
318
318
|
|
|
319
|
-
@mixin neon-
|
|
319
|
+
@mixin neon-fg-variant($selector, $k, $v) {
|
|
320
320
|
#{$selector} {
|
|
321
321
|
/* color: var(--white); */
|
|
322
322
|
text-shadow: 0 0 20px var(--#{$k}, map-get($v, 'bg')), 0 0 10px var(--white);
|
|
323
323
|
}
|
|
324
324
|
}
|
|
325
325
|
|
|
326
|
-
@mixin
|
|
326
|
+
@mixin fg-variant($selector, $k, $v) {
|
|
327
327
|
#{$selector} {
|
|
328
328
|
color: var(--#{$k}, map-get($v, 'bg'));
|
|
329
329
|
}
|
|
@@ -339,7 +339,7 @@ $colors-mapped: map-merge(
|
|
|
339
339
|
}
|
|
340
340
|
}
|
|
341
341
|
|
|
342
|
-
@mixin gradient-variant($selector, $k, $v) {
|
|
342
|
+
@mixin bg-gradient-variant($selector, $k, $v) {
|
|
343
343
|
#{$selector} {
|
|
344
344
|
background-image: linear-gradient(
|
|
345
345
|
var(--#{$k}, map-get($v, 'bg')),
|
|
@@ -367,23 +367,7 @@ $colors-mapped: map-merge(
|
|
|
367
367
|
}
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
-
|
|
371
|
-
// #{$selector} {
|
|
372
|
-
// background-color: hsla(
|
|
373
|
-
// var(--#{$k}-hs),
|
|
374
|
-
// calc(var(--#{$k}-l) + 45%),
|
|
375
|
-
// var(--#{$k}-a)
|
|
376
|
-
// );
|
|
377
|
-
// color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 45%), var(--#{$k}-a));
|
|
378
|
-
// border-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
|
|
379
|
-
|
|
380
|
-
// &.is-blur:not(:hover) {
|
|
381
|
-
// background-color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) + 45%), 0.5);
|
|
382
|
-
// }
|
|
383
|
-
// }
|
|
384
|
-
// }
|
|
385
|
-
|
|
386
|
-
@mixin outline-variant($selector, $k, $v) {
|
|
370
|
+
@mixin bg-outline-variant($selector, $k, $v) {
|
|
387
371
|
#{$selector} {
|
|
388
372
|
background-color: transparent;
|
|
389
373
|
color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
|
package/src/styles/colors.scss
CHANGED
|
@@ -13,14 +13,14 @@
|
|
|
13
13
|
|
|
14
14
|
@each $k, $v in $colors-mapped {
|
|
15
15
|
// Texts
|
|
16
|
-
@include
|
|
17
|
-
@include neon-
|
|
16
|
+
@include fg-variant('.text-#{$k}', $k, $v);
|
|
17
|
+
@include neon-fg-variant('.text-neon-#{$k}', $k, $v);
|
|
18
18
|
// Background
|
|
19
|
-
@include bg-
|
|
20
|
-
@include gradient-variant('.bg-
|
|
21
|
-
@include outline-variant('.bg-outline-#{$k}', $k, $v);
|
|
22
|
-
@include group-bg-
|
|
23
|
-
@include group-bg-
|
|
19
|
+
@include bg-variant('.bg-#{$k}', $k, $v);
|
|
20
|
+
@include bg-gradient-variant('.bg-gradient-#{$k}', $k, $v);
|
|
21
|
+
@include bg-outline-variant('.bg-outline-#{$k}', $k, $v);
|
|
22
|
+
@include group-bg-variant('.tabs-#{$k}', $k, $v);
|
|
23
|
+
@include group-bg-variant('.dots-#{$k}', $k, $v);
|
|
24
24
|
|
|
25
25
|
.border-#{$k} {
|
|
26
26
|
border-color: map-get($v, 'bg');
|
|
@@ -99,12 +99,6 @@ input {
|
|
|
99
99
|
@include before-content;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
input,
|
|
103
|
-
input::placeholder,
|
|
104
|
-
input::-webkit-input-placeholder {
|
|
105
|
-
color: currentColor;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
102
|
.text-unset,
|
|
109
103
|
.text-color-unset {
|
|
110
104
|
color: unset;
|