@m4l/styles 7.1.29 → 7.1.30

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 (14) hide show
  1. package/package.json +1 -1
  2. package/theme/overrides/index.js +79 -83
  3. package/theme/palette/baseChipsPalette.js +3 -3
  4. package/theme/palette/baseColors.js +16 -16
  5. package/theme/palette/defaultColors.js +17 -9
  6. package/theme/palette/presetColors.js +66 -26
  7. package/theme/palette/semanticColors.js +52 -20
  8. package/theme/shadows.js +2 -2
  9. package/types/types.d.ts +10 -0
  10. package/utils/getPaletteByPreset.js +25 -25
  11. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.d.ts +0 -358
  12. package/theme/overrides/M4LExtendedComponents/M4LDataGrid.js +0 -393
  13. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +0 -2441
  14. package/theme/overrides/M4LExtendedComponents/M4LSideBar.js +0 -1747
package/theme/overrides/M4LExtendedComponents/M4LSideBar.js DELETED
@@ -1,1747 +0,0 @@
1
- import { alpha as r } from "@mui/material/styles";
2
- const t = (o) => ({
3
- M4LSideBar: {
4
- styleOverrides: {
5
- /* Estilos y funcionamiento general */
6
- "&.M4LSideBar-root": {
7
- "&.M4LSideBar-collapsed": {
8
- /* '& .M4LSideBar-contentDesktop:not(.M4LSideBar-overlapping)': {
9
- width: '0',
10
- transition: 'all 0.2s',
11
- } */
12
- },
13
- // Funcionamiento escritorio expandir y colapsar
14
- "& .M4LSideBar-wrapperSideBar": {
15
- height: "100%",
16
- transition: "all 0.3s",
17
- width: "240px",
18
- "& .M4LSideBar-areaExpandMenu": {
19
- position: "absolute",
20
- // fixed
21
- zIndex: "99999",
22
- height: "100%",
23
- transition: "all 0.3s",
24
- width: "240px",
25
- "& .M4LSideBar-contentDesktop": {
26
- display: "flex",
27
- width: "100%",
28
- height: "100%",
29
- boxShadow: o.vars.customShadows?.z2,
30
- transition: "all 0.3s",
31
- /* padding: '0 8px', */
32
- "& .M4LSideBar-containerContentGroupsFooter": {
33
- flexGrow: "1",
34
- display: "flex",
35
- flexDirection: "column",
36
- height: "100%",
37
- position: "relative",
38
- borderRight: "1px solid",
39
- borderColor: o.vars.palette?.border.default,
40
- backgroundColor: o.vars.palette.background.default,
41
- "& .M4LSideBar-contentGroups": {
42
- padding: "32px 12px",
43
- "& .M4LSideBar-wrapperGroup": {
44
- overflow: "visible",
45
- padding: "8px",
46
- borderTop: "1px solid",
47
- borderBottom: "1px solid",
48
- borderColor: o.vars.palette?.border.secondary,
49
- height: "fit-content",
50
- width: "100%",
51
- "& .M4LSideBar-navItemRootContent": {
52
- overflow: "hidden",
53
- height: "36px",
54
- padding: "0px 8px",
55
- display: "flex",
56
- alignItems: "center"
57
- }
58
- }
59
- },
60
- "& .M4LSideBar-footer": {
61
- display: "flex",
62
- padding: "10px 5px",
63
- borderTop: "1px solid",
64
- borderColor: o.vars.palette?.border.disabled,
65
- justifyContent: "center",
66
- gap: "24px",
67
- alignItems: "center",
68
- height: "48px",
69
- minHeight: "48px",
70
- flexDirection: "row-reverse",
71
- overflow: "hidden",
72
- "& .M4LSideBar-wrapperLogoFooter": {
73
- width: "100%",
74
- height: "100%",
75
- "& .M4LSideBar-containerLogoButtonLogo": {
76
- display: "flex",
77
- justifyContent: "center",
78
- alignItems: "center"
79
- }
80
- }
81
- }
82
- },
83
- "& .M4LSideBar-collapseButtonSecondary": {
84
- height: "100%",
85
- cursor: "pointer"
86
- }
87
- }
88
- }
89
- }
90
- },
91
- "&.M4LSideBar-root.M4LSideBar-variantDefault": {
92
- height: "100%",
93
- background: o.vars.palette.background.default,
94
- position: "relative",
95
- "& .M4LIconButton-sizeSmall": {
96
- width: "20px",
97
- height: "20px",
98
- minWidth: "20px",
99
- minHeight: "20px",
100
- "& .MuiButtonBase-root": {
101
- padding: "0px",
102
- width: "20px",
103
- height: "20px"
104
- }
105
- },
106
- /* Condición para visualizar el botón de colapsar en caso de estar en estado colapsado */
107
- "&:hover": {
108
- "& .M4LSideBar-collapseButton": {
109
- opacity: "1!important",
110
- transition: "all 0.3s"
111
- }
112
- },
113
- "& .M4LSideBar-collapseButton": {
114
- position: "absolute",
115
- top: "16px",
116
- right: "-8px",
117
- borderRadius: "4px",
118
- backgroundColor: `${o.vars.palette.background.default}!important`,
119
- transition: "all 0.3s",
120
- boxShadow: o.vars.customShadows.z1,
121
- zIndex: "1"
122
- },
123
- /* Condición para ocultar el botón de colapsar en estado expandido. */
124
- "&:not(.M4LSideBar-collapsed) .M4LSideBar-collapseButton": {
125
- opacity: 0,
126
- transition: "all 0.3s"
127
- },
128
- "& .M4LSideBar-subItemActive": {
129
- padding: "0px",
130
- "& .M4LIcon-icon": {
131
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
132
- }
133
- },
134
- "&.M4LSideBar-collapsed": {
135
- "& .M4LSideBar-wrapperSideBar": {
136
- "& .M4LSideBar-contentDesktop": {
137
- "& .M4LSideBar-containerSideBarLogo": {
138
- marginTop: "0px",
139
- "& .M4LSideBar-containerLogo": {
140
- gap: "24px",
141
- paddingLeft: "24px",
142
- width: "100%",
143
- "& .M4LImage-root": {
144
- minWidth: "40px !important",
145
- minHeight: "40px !important"
146
- }
147
- }
148
- }
149
- }
150
- }
151
- },
152
- [o.breakpoints.down("md")]: {
153
- width: "0px",
154
- height: "0px",
155
- padding: "0px"
156
- },
157
- "& .M4LSideBar-wrapperSideBar": {
158
- "& .M4LSideBar-containerSideBarLogo": {
159
- display: "flex",
160
- justifyContent: "flex-start",
161
- marginTop: "12px",
162
- "& .M4LSideBar-containerLogo": {
163
- display: "flex",
164
- justifyContent: "center",
165
- alignItems: "center",
166
- fitContent: "100%",
167
- boxSizing: "contentBox",
168
- paddingTop: "8px",
169
- paddingBottom: "8px",
170
- gap: "16px",
171
- paddingLeft: "24px",
172
- "& .M4LTypography-root": {
173
- display: "flex",
174
- width: "100%",
175
- "& .MuiTypography-root": {
176
- with: "100%",
177
- overflow: "hidden",
178
- textOverflow: "ellipsis",
179
- textWrap: "nowrap"
180
- }
181
- },
182
- "& .M4LImage-root": {
183
- position: "relative",
184
- padding: "6px",
185
- minWidth: "50px !important",
186
- minHeight: "50px !important"
187
- }
188
- }
189
- },
190
- "& .M4LSideBar-contentGroups": {
191
- overflow: "hidden",
192
- flexGrow: "1",
193
- display: "flex",
194
- flexDirection: "column",
195
- "& .M4LSideBar-contentGroupsLine": {
196
- display: "flex",
197
- height: "2px",
198
- marginRight: "14px",
199
- marginLeft: "14px",
200
- backgroundColor: "none"
201
- },
202
- "& .M4LSideBar-wrapperGroup": {
203
- height: "100%",
204
- "& .M4LScrollBar-root": {
205
- overflow: "hidden",
206
- height: "100%",
207
- gap: "8px"
208
- },
209
- "& .M4LSideBar-wrapperGroupTitle": {
210
- height: "28px",
211
- padding: "0px 0px 0px 12px",
212
- display: "flex",
213
- alignItems: "center",
214
- "& .M4LTypography-root": {
215
- display: "flex",
216
- width: "100%",
217
- "& .MuiTypography-root": {
218
- with: "100%",
219
- overflow: "hidden",
220
- textOverflow: "ellipsis",
221
- textWrap: "nowrap",
222
- ...o.colorSchemes.finalTheme.typography.paragraphDens,
223
- textTransform: "capitalize",
224
- fontWeight: "700"
225
- }
226
- }
227
- },
228
- "& .M4LSideBar-itemListMainRoot": {
229
- display: "flex",
230
- borderRadius: "4px 0px 0px 4px",
231
- justifyContent: "flex-start",
232
- flexDirection: "column",
233
- gap: "4px",
234
- //paddingBottom: '4px',
235
- height: "auto",
236
- marginBottom: "2px",
237
- "& .M4LSideBar-navItemMainRoot": {
238
- backgroundColor: "transparent",
239
- borderRadius: "4px",
240
- "&:hover": {
241
- background: o.vars.palette.background.hover,
242
- cursor: "pointer"
243
- }
244
- },
245
- "&.M4LSideBar-itemMainActive": {
246
- borderRadius: "4px",
247
- height: "auto",
248
- overflow: "hidden",
249
- "& .M4LSideBar-navItemMainRoot": {
250
- background: o.vars.palette.primary.opacity,
251
- border: "1px solid",
252
- borderColor: o.vars.palette.primary.opacity,
253
- boxShadow: o.shadows[1],
254
- "&:hover": {
255
- background: r(
256
- o.colorSchemes.finalTheme.palette.primary.active || "#fff",
257
- 0.24
258
- ),
259
- // Validar implementación desde la creación del tema.
260
- cursor: "pointer"
261
- }
262
- },
263
- "& .M4LSideBar-navItemRootContent": {
264
- "& .M4LSideBar-navItemRootContentIconTypo": {
265
- alignItems: "center",
266
- "& .M4LIcon-icon": {
267
- backgroundColor: o.vars.palette.primary.focusVisible
268
- },
269
- "& .M4LTypography-root": {
270
- "& .MuiTypography-root": {
271
- color: o.vars.palette.primary.focusVisible
272
- }
273
- },
274
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
275
- backgroundColor: o.vars.palette.primary.focusVisible
276
- }
277
- },
278
- "& .M4LSideBar-arrowIconRoot": {
279
- "& .M4LIcon-root": {
280
- "& .M4LIcon-icon": {
281
- backgroundColor: o.vars.palette.primary.focusVisible
282
- }
283
- }
284
- },
285
- "&::before": {
286
- content: '""',
287
- width: "3px",
288
- height: "50%",
289
- //revisar
290
- top: "25%",
291
- bottom: "25%",
292
- left: "0px",
293
- backgroundColor: o.vars.palette.primary.focusVisible,
294
- borderRadius: "0px 4px 4px 0px",
295
- position: "absolute"
296
- }
297
- }
298
- },
299
- "& .M4LSideBar-navItemRootContent": {
300
- display: "flex",
301
- padding: "12px 8px",
302
- borderRadius: "4px 0px 0px 4px",
303
- position: "relative",
304
- "& .M4LSideBar-navItemRootContentIconTypo": {
305
- display: "flex",
306
- gap: "8px",
307
- width: "100%",
308
- "& .M4LIcon-icon": {
309
- backgroundColor: o.vars.palette.text.secondary,
310
- width: "18px",
311
- height: "18px"
312
- },
313
- "& .M4LTypography-root": {
314
- display: "flex",
315
- flexGrow: "1",
316
- overflow: "hidden",
317
- "& .MuiTypography-root": {
318
- ...o.colorSchemes.finalTheme.typography.paragraph,
319
- color: o.vars.palette.text.primary,
320
- textWrap: "nowrap",
321
- textOverflow: "ellipsis",
322
- display: "block",
323
- overflow: "hidden"
324
- }
325
- },
326
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
327
- backgroundColor: o.vars.palette.text.primary
328
- }
329
- },
330
- "& .M4LSideBar-arrowIconRoot": {
331
- "& .M4LIcon-root": {
332
- "& .M4LIcon-icon": {
333
- background: o.vars.palette.text.primary
334
- }
335
- }
336
- }
337
- },
338
- "& .M4LSideBar-containerListSubItem": {
339
- paddingLeft: "0px"
340
- },
341
- "& .M4LSideBar-navListSubItemRoot": {
342
- gap: "8px",
343
- padding: "0px",
344
- "& .M4LSideBar-navSubItemContentRoot ": {
345
- padding: "0px 8px",
346
- width: "100%",
347
- height: "32px",
348
- borderRadius: "4px",
349
- gap: "8px",
350
- "&.M4LSideBar-subItemCollapseActive": {
351
- backgroundColor: o.vars.palette.primary.opacity,
352
- gap: "8px",
353
- border: "1px solid",
354
- borderColor: o.vars.palette.primary.opacity,
355
- "& .MuiButtonBase-root": {
356
- padding: "0px",
357
- "& .M4LIcon-root": {
358
- "& .M4LIcon-icon": {
359
- backgroundColor: o.vars.palette.primary.focusVisible
360
- }
361
- }
362
- }
363
- },
364
- "& .M4LSideBar-subItemActive": {
365
- "& .MuiButtonBase-root": {
366
- padding: "0px",
367
- "& .M4LIcon-root": {
368
- "& .M4LIcon-icon": {}
369
- },
370
- "& .M4LTypography-root": {
371
- "& .MuiTypography-root": {}
372
- }
373
- },
374
- "& .M4LSideBar-navSubItemContentBullet": {
375
- height: "14px",
376
- borderRadius: "4px",
377
- backgroundColor: o.vars.palette.primary.focusVisible,
378
- gap: "8px"
379
- }
380
- },
381
- "&:hover": {
382
- background: o.vars.palette.background.default,
383
- // Validar implementación desde la creación del tema.
384
- padding: "0 8px"
385
- }
386
- },
387
- "& .M4LSideBar-navSubItemContentRoot": {
388
- gap: "8px",
389
- margin: "0px 0px 0px 0px",
390
- //padding: '16px',
391
- "& .M4LSideBar-navSubItemContentBullet": {
392
- minWidth: "5px",
393
- minHeight: "5px",
394
- borderRadius: "50%",
395
- backgroundColor: o.vars.palette.text.primary
396
- },
397
- "& .M4LTypography-root": {
398
- display: "flex",
399
- width: "100%",
400
- "& .MuiTypography-root": {
401
- ...o.colorSchemes.finalTheme.typography.paragraph,
402
- color: o.vars.palette.text.primary,
403
- with: "100%",
404
- overflow: "hidden",
405
- textOverflow: "ellipsis",
406
- textWrap: "nowrap"
407
- }
408
- },
409
- "&.M4LSideBar-subItemActive.M4LSideBar-navSubItemContentRoot": {
410
- "& .M4LTypography-root": {
411
- color: o.vars.palette.primary.focusVisible,
412
- "& .MuiTypography-root": {
413
- color: o.vars.palette.primary.focusVisible
414
- }
415
- }
416
- }
417
- }
418
- },
419
- "& .MuiCollapse-root": {
420
- marginLeft: "8px"
421
- }
422
- }
423
- },
424
- "& .M4LIcon-root .M4LIcon-icon": {
425
- backgroundColor: o.vars.palette.text.primary
426
- }
427
- },
428
- "& .M4LSideBar-footer": {
429
- "& .M4LSideBar-containerLogoButton": {
430
- display: "flex",
431
- gap: "14px",
432
- width: "120px"
433
- },
434
- "& .M4LSideBar-containerLogoButtonLogo": {
435
- minWidth: "120px",
436
- height: "32px"
437
- }
438
- }
439
- }
440
- },
441
- "&.M4LSideBar-root.M4LSideBar-variantComercial": {
442
- //boxShadow: theme.customShadows?.z2,
443
- "& .M4LSideBar-subItemActive": {
444
- "& .M4LIcon-icon": {
445
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
446
- }
447
- },
448
- "&.M4LSideBar-collapsed": {
449
- "& .M4LSideBar-wrapperSideBar": {
450
- width: "50px",
451
- "& .M4LSideBar-contentDesktop": {
452
- "& .M4LSideBar-containerSideBarLogo": {
453
- marginTop: "0px",
454
- "& .M4LSideBar-containerLogo": {
455
- gap: "24px",
456
- paddingLeft: "24px",
457
- width: "100%",
458
- "& .M4LImage-root": {
459
- minWidth: "40px !important",
460
- minHeight: "40px !important"
461
- }
462
- }
463
- }
464
- }
465
- }
466
- },
467
- [o.breakpoints.down("md")]: {
468
- width: "0px",
469
- height: "0px",
470
- padding: "0px"
471
- },
472
- "& .M4LSideBar-wrapperSideBar": {
473
- "& .M4LSideBar-containerSideBarLogo": {
474
- display: "flex",
475
- justifyContent: "flex-start",
476
- marginTop: "12px",
477
- "& .M4LSideBar-containerLogo": {
478
- display: "flex",
479
- justifyContent: "center",
480
- alignItems: "center",
481
- fitContent: "100%",
482
- boxSizing: "contentBox",
483
- paddingTop: "8px",
484
- paddingBottom: "8px",
485
- gap: "16px",
486
- paddingLeft: "24px",
487
- "& .M4LTypography-root": {
488
- display: "flex",
489
- width: "100%",
490
- "& .MuiTypography-root": {
491
- with: "100%",
492
- overflow: "hidden",
493
- textOverflow: "ellipsis",
494
- textWrap: "nowrap"
495
- }
496
- },
497
- "& .M4LImage-root": {
498
- position: "relative",
499
- padding: "6px",
500
- minWidth: "50px !important",
501
- minHeight: "50px !important"
502
- }
503
- }
504
- },
505
- "& .M4LSideBar-contentGroups": {
506
- overflow: "hidden",
507
- flexGrow: "1",
508
- display: "flex",
509
- flexDirection: "column",
510
- gap: "8px",
511
- "& .M4LSideBar-contentGroupsLine": {
512
- display: "flex",
513
- height: "2px",
514
- marginRight: "14px",
515
- marginLeft: "14px",
516
- backgroundColor: "none"
517
- },
518
- "& .M4LSideBar-wrapperGroup": {
519
- height: "100%",
520
- "& .M4LSideBar-wrapperGroupTitle": {
521
- height: "60px",
522
- paddingLeft: "10px",
523
- "& .M4LTypography-root": {
524
- display: "flex",
525
- width: "100%",
526
- "& .MuiTypography-root": {
527
- with: "100%",
528
- overflow: "hidden",
529
- textOverflow: "ellipsis",
530
- textWrap: "nowrap"
531
- }
532
- }
533
- },
534
- "& .M4LSideBar-itemListMainRoot": {
535
- display: "flex",
536
- borderRadius: "4px 0px 0px 4px",
537
- justifyContent: "center",
538
- flexDirection: "column",
539
- padding: "0px 0px 8px 0px",
540
- gap: "0px",
541
- "& .M4LSideBar-navItemMainRoot": {
542
- backgroundColor: "transparent",
543
- borderRadius: "4px",
544
- "&:hover": {
545
- background: o.vars.palette.background.hover,
546
- cursor: "pointer"
547
- }
548
- },
549
- "&.M4LSideBar-itemMainActive": {
550
- background: o.vars.palette.primary.opacity,
551
- borderRadius: "4px",
552
- border: "1px solid",
553
- borderColor: o.vars.palette?.border.disabled,
554
- "& .M4LSideBar-navItemMainRoot": {
555
- background: o.vars.palette.primary.opacity,
556
- "&:hover": {
557
- background: r(
558
- o.colorSchemes.finalTheme.palette.primary.active || "#fff",
559
- 0.24
560
- ),
561
- // Validar implementación desde la creación del tema.
562
- cursor: "pointer"
563
- }
564
- },
565
- "& .M4LSideBar-navItemRootContent": {
566
- "& .M4LSideBar-navItemRootContentIconTypo": {
567
- "& .M4LIcon-icon": {
568
- backgroundColor: o.vars.palette.primary.focusVisible
569
- },
570
- "& .M4LTypography-root": {
571
- "& .MuiTypography-root": {
572
- color: o.vars.palette.primary.focusVisible
573
- }
574
- },
575
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
576
- backgroundColor: o.vars.palette.primary.focusVisible
577
- }
578
- },
579
- "& .M4LSideBar-arrowIconRoot": {
580
- "& .M4LIcon-root": {
581
- "& .M4LIcon-icon": {
582
- backgroundColor: o.vars.palette.primary.focusVisible
583
- }
584
- }
585
- },
586
- "&::before": {
587
- content: '""',
588
- width: "4px",
589
- top: "0px",
590
- bottom: "0px",
591
- right: "0px",
592
- backgroundColor: o.vars.palette.primary.focusVisible,
593
- borderRadius: "4px 0px 0px 4px",
594
- position: "absolute"
595
- }
596
- }
597
- },
598
- "& .M4LSideBar-navItemRootContent": {
599
- display: "flex",
600
- padding: "8px",
601
- justifyContent: "center",
602
- borderRadius: "4px 0px 0px 4px",
603
- position: "relative",
604
- "& .M4LSideBar-navItemRootContentIconTypo": {
605
- display: "flex",
606
- gap: "8px",
607
- width: "100%",
608
- "& .M4LIcon-icon": {
609
- backgroundColor: o.vars.palette.text.primary,
610
- width: "18px",
611
- height: "18px"
612
- },
613
- "& .M4LTypography-root": {
614
- display: "flex",
615
- flexGrow: "1",
616
- overflow: "hidden",
617
- "& .MuiTypography-root": {
618
- ...o.colorSchemes.finalTheme.typography.paragraph,
619
- color: o.vars.palette.text.primary,
620
- textWrap: "nowrap",
621
- textOverflow: "ellipsis",
622
- display: "block",
623
- overflow: "hidden"
624
- }
625
- },
626
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
627
- backgroundColor: o.vars.palette.text.primary
628
- }
629
- },
630
- "& .M4LSideBar-arrowIconRoot": {
631
- "& .M4LIcon-root": {
632
- "& .M4LIcon-icon": {
633
- background: o.vars.palette.text.primary
634
- }
635
- }
636
- }
637
- },
638
- "& .M4LSideBar-containerListSubItem": {
639
- paddingLeft: "0px"
640
- },
641
- "& .M4LSideBar-navListSubItemRoot": {
642
- gap: "12px",
643
- padding: "0px",
644
- "& .M4LSideBar-navSubItemContentRoot ": {
645
- width: "100%",
646
- height: "32px",
647
- borderRadius: "4px",
648
- gap: "8px",
649
- "&.M4LSideBar-subItemCollapseActive": {
650
- backgroundColor: o.vars.palette.primary.opacity,
651
- gap: "8px",
652
- "& .MuiButtonBase-root": {
653
- paddingLeft: "0",
654
- padding: "0px",
655
- "& .M4LIcon-root": {
656
- "& .M4LIcon-icon": {
657
- backgroundColor: o.vars.palette.primary.focusVisible
658
- }
659
- }
660
- }
661
- },
662
- "& .M4LSideBar-subItemActive": {
663
- "& .MuiButtonBase-root": {
664
- paddingLeft: "0px",
665
- padding: "0px",
666
- "& .M4LIcon-root": {
667
- "& .M4LIcon-icon": {
668
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
669
- }
670
- }
671
- },
672
- "& .M4LSideBar-navSubItemContentBullet": {
673
- height: "14px",
674
- borderRadius: "4px",
675
- backgroundColor: o.vars.palette.primary.focusVisible,
676
- gap: "8px"
677
- }
678
- },
679
- "&:hover": {
680
- padding: "0 8px",
681
- background: o.vars.palette.background.default
682
- // Validar implementación desde la creación del tema.
683
- }
684
- },
685
- "& .M4LSideBar-navSubItemContentRoot": {
686
- gap: "12px",
687
- margin: "0px 0px 0px 0px",
688
- padding: "16px",
689
- "& .M4LSideBar-navSubItemContentBullet": {
690
- minWidth: "5px",
691
- minHeight: "5px",
692
- borderRadius: "50%",
693
- backgroundColor: o.vars.palette.text.primary
694
- },
695
- "& .M4LTypography-root": {
696
- display: "flex",
697
- width: "100%",
698
- "& .MuiTypography-root": {
699
- ...o.colorSchemes.finalTheme.typography.paragraph,
700
- color: o.vars.palette.text.primary,
701
- with: "100%",
702
- overflow: "hidden",
703
- textOverflow: "ellipsis",
704
- textWrap: "nowrap"
705
- }
706
- }
707
- }
708
- },
709
- "& .MuiCollapse-root": {
710
- marginLeft: "18px"
711
- }
712
- }
713
- },
714
- "& .M4LIcon-root .M4LIcon-icon": {
715
- backgroundColor: o.vars.palette.text.primary
716
- }
717
- },
718
- "& .M4LSideBar-footer": {
719
- "& .M4LSideBar-containerLogoButton": {
720
- display: "flex",
721
- gap: "14px",
722
- width: "120px"
723
- },
724
- "& .M4LSideBar-containerLogoButtonLogo": {
725
- minWidth: "120px",
726
- height: "32px",
727
- "& .M4LSideBar-containerLogoButtonIcon": {
728
- display: "flex",
729
- alignItems: "center"
730
- }
731
- }
732
- }
733
- }
734
- }
735
- }
736
- },
737
- M4LSideBarPopover: {
738
- styleOverrides: {
739
- "&.M4LSideBar-popover.M4LSideBar-variantDefault": {
740
- "& .M4LSideBar-subItemActive": {
741
- "& .M4LIcon-icon": {
742
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
743
- }
744
- },
745
- "& .M4LSideBar-navListSubItemRoot": {
746
- width: "120px",
747
- height: "fit-content",
748
- "& .M4LSideBar-navSubItemContentRoot": {
749
- gap: "8px",
750
- padding: "8px",
751
- height: "fit-content",
752
- borderRadius: "4px",
753
- "&.M4LSideBar-subItemCollapseActive": {
754
- backgroundColor: o.vars.palette.primary.opacity
755
- },
756
- "& .M4LTypography-root": {
757
- display: "flex",
758
- width: "100%",
759
- "& .MuiTypography-root": {
760
- ...o.colorSchemes.finalTheme.typography.paragraph,
761
- color: o.vars.palette.text.secondary,
762
- with: "100%",
763
- overflow: "hidden",
764
- textOverflow: "ellipsis",
765
- textWrap: "nowrap"
766
- }
767
- },
768
- // subitems en sidebar colapsado
769
- "& .MuiPaper-root": {
770
- "& .M4LSideBar-navListSubItemRoot": {
771
- "& .M4LSideBar-subItemActive": {
772
- "& .MuiButtonBase-root": {
773
- padding: "0px",
774
- "& .M4LIcon-root": {
775
- "& .M4LIcon-icon": {
776
- backgroundColor: o.vars.palette.primary.focusVisible
777
- }
778
- }
779
- }
780
- }
781
- }
782
- },
783
- "& .M4LSideBar-subItemActive": {
784
- height: "fit-content",
785
- "& .MuiButtonBase-root": {
786
- padding: "0px",
787
- "& .M4LIcon-root": {
788
- "& .M4LIcon-icon": {
789
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
790
- }
791
- }
792
- },
793
- "& .M4LSideBar-navSubItemContentBullet": {
794
- height: "14px",
795
- borderRadius: "10px",
796
- backgroundColor: o.vars.palette.primary.focusVisible
797
- }
798
- },
799
- "& .M4LSideBar-navSubItemContentBullet": {
800
- minWidth: "5px",
801
- minHeight: "5px",
802
- borderRadius: "50%",
803
- backgroundColor: o.vars.palette.text.primary
804
- },
805
- "&:hover": {
806
- padding: "0 8px",
807
- background: o.vars.palette.background.default
808
- // Validar implementación desde la creación del tema.
809
- }
810
- }
811
- }
812
- },
813
- "&.M4LSideBar-popover.M4LSideBar-variantComercial": {
814
- "& .M4LSideBar-subItemActive": {
815
- "& .M4LIcon-icon": {
816
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
817
- }
818
- },
819
- "& .M4LSideBar-navListSubItemRoot": {
820
- width: "120px",
821
- height: "fit-content",
822
- "& .M4LSideBar-navSubItemContentRoot": {
823
- gap: "8px",
824
- padding: "8px",
825
- height: "fit-content",
826
- borderRadius: "4px",
827
- "&.M4LSideBar-subItemCollapseActive": {
828
- backgroundColor: o.vars.palette.primary.opacity,
829
- Text: "iufbivecf"
830
- },
831
- "& .M4LTypography-root": {
832
- display: "flex",
833
- width: "100%",
834
- "& .MuiTypography-root": {
835
- ...o.colorSchemes.finalTheme.typography.paragraph,
836
- color: o.vars.palette.text.secondary,
837
- with: "100%",
838
- overflow: "hidden",
839
- textOverflow: "ellipsis",
840
- textWrap: "nowrap"
841
- }
842
- },
843
- // subitems en sidebar colapsado
844
- "& .MuiPaper-root": {
845
- "& .M4LSideBar-navListSubItemRoot": {
846
- "& .M4LSideBar-subItemActive": {
847
- "& .MuiButtonBase-root": {
848
- padding: "0px",
849
- "& .M4LIcon-root": {
850
- "& .M4LIcon-icon": {
851
- backgroundColor: o.vars.palette.primary.focusVisible
852
- }
853
- }
854
- }
855
- }
856
- }
857
- },
858
- "& .M4LSideBar-subItemActive": {
859
- height: "fit-content",
860
- "& .MuiButtonBase-root": {
861
- padding: "0px",
862
- "& .M4LIcon-root": {
863
- "& .M4LIcon-icon": {
864
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
865
- }
866
- }
867
- },
868
- "& .M4LSideBar-navSubItemContentBullet": {
869
- height: "14px",
870
- borderRadius: "10px",
871
- backgroundColor: o.vars.palette.primary.focusVisible
872
- }
873
- },
874
- "& .M4LSideBar-navSubItemContentBullet": {
875
- minWidth: "5px",
876
- minHeight: "5px",
877
- borderRadius: "50%",
878
- backgroundColor: o.vars.palette.text.primary
879
- },
880
- "&:hover": {
881
- padding: "0 8px",
882
- background: o.vars.palette.background.default
883
- // Validar implementación desde la creación del tema.
884
- }
885
- }
886
- }
887
- }
888
- }
889
- },
890
- //Mobile
891
- M4LSideBarDrawer: {
892
- styleOverrides: {
893
- "&.M4LSideBar-drawer": {
894
- "&.M4LSideBar-variantDefault": {
895
- "& .M4LSideBar-subItemActive": {
896
- "& .M4LIcon-icon": {
897
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
898
- },
899
- "& .M4LTypography-root": {
900
- "& .MuiTypography-root": {
901
- color: `${o.vars.palette.primary.focusVisible} !important`
902
- }
903
- }
904
- },
905
- "& .M4LSideBar-contentMobile": {
906
- width: "100%",
907
- height: "100%",
908
- display: "flex",
909
- flexDirection: "column",
910
- padding: "8px",
911
- "& .M4LSideBar-containerSideBarLogo": {
912
- display: "flex",
913
- justifyContent: "flex-start",
914
- marginTop: "12px",
915
- "& .M4LSideBar-containerLogo": {
916
- display: "flex",
917
- justifyContent: "center",
918
- alignItems: "center",
919
- fitContent: "100%",
920
- boxSizing: "contentBox",
921
- paddingTop: "8px",
922
- paddingBottom: "8px",
923
- gap: "16px",
924
- paddingLeft: "24px",
925
- "& .M4LTypography-root": {
926
- display: "flex",
927
- width: "100%",
928
- "& .MuiTypography-root": {
929
- with: "100%",
930
- overflow: "hidden",
931
- textOverflow: "ellipsis",
932
- textWrap: "nowrap"
933
- }
934
- },
935
- "& .M4LImage-root": {
936
- position: "relative",
937
- background: o.vars.palette.background.default,
938
- boxShadow: o.vars.customShadows?.z2,
939
- padding: "6px",
940
- borderRadius: "6px",
941
- minWidth: "50px !important",
942
- minHeight: "50px !important"
943
- }
944
- }
945
- },
946
- "& .M4LSideBar-contentGroups": {
947
- overflow: "hidden",
948
- flexGrow: "1",
949
- display: "flex",
950
- flexDirection: "column",
951
- "& .M4LSideBar-contentGroupsLine": {
952
- display: "flex",
953
- height: "2px",
954
- marginRight: "14px",
955
- marginLeft: "14px",
956
- backgroundColor: "none"
957
- },
958
- "& .M4LSideBar-wrapperGroup": {
959
- height: "100%",
960
- "& .M4LSideBar-wrapperGroupTitle": {
961
- height: "28px",
962
- padding: "0px 0px 0px 12px",
963
- "& .M4LTypography-root": {
964
- display: "flex",
965
- width: "100%",
966
- "& .MuiTypography-root": {
967
- with: "100%",
968
- overflow: "hidden",
969
- textOverflow: "ellipsis",
970
- textWrap: "nowrap",
971
- ...o.colorSchemes.finalTheme.typography.paragraphDens,
972
- textTransform: "capitalize"
973
- }
974
- }
975
- },
976
- "& .M4LSideBar-itemListMainRoot": {
977
- display: "flex",
978
- borderRadius: "4px 0px 0px 4px",
979
- justifyContent: "flex-start",
980
- flexDirection: "column",
981
- paddingBottom: "4px",
982
- gap: "0px",
983
- height: "auto",
984
- "& .M4LSideBar-navItemMainRoot": {
985
- backgroundColor: "transparent",
986
- borderRadius: "4px",
987
- "&:hover": {
988
- background: o.vars.palette.background.hover,
989
- cursor: "pointer"
990
- }
991
- },
992
- "&.M4LSideBar-itemMainActive": {
993
- borderRadius: "4px",
994
- background: o.vars.palette.primary.opacity,
995
- border: "1px solid",
996
- borderColor: o.vars.palette.primary.opacity,
997
- "& .M4LSideBar-navItemMainRoot": {
998
- background: o.vars.palette.primary.active,
999
- "&:hover": {
1000
- background: r(
1001
- o.colorSchemes.finalTheme.palette.primary.active || "#fff",
1002
- 0.24
1003
- ),
1004
- // Validar implementación desde la creación del tema.
1005
- cursor: "pointer"
1006
- }
1007
- },
1008
- "& .M4LSideBar-navItemRootContent": {
1009
- "& .M4LSideBar-navItemRootContentIconTypo": {
1010
- alignItems: "center",
1011
- "& .M4LIcon-icon": {
1012
- backgroundColor: o.vars.palette.primary.focusVisible
1013
- },
1014
- "& .M4LTypography-root": {
1015
- "& .MuiTypography-root": {
1016
- color: o.vars.palette.primary.focusVisible
1017
- }
1018
- },
1019
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1020
- backgroundColor: o.vars.palette.primary.focusVisible
1021
- }
1022
- },
1023
- "& .M4LSideBar-arrowIconRoot": {
1024
- "& .M4LIcon-root": {
1025
- "& .M4LIcon-icon": {
1026
- backgroundColor: o.vars.palette.primary.focusVisible
1027
- }
1028
- }
1029
- },
1030
- "&::before": {
1031
- content: '""',
1032
- width: "2px",
1033
- top: "0px",
1034
- bottom: "0px",
1035
- left: "0px",
1036
- backgroundColor: o.vars.palette.primary.focusVisible,
1037
- borderRadius: "4px 0px 0px 4px",
1038
- position: "absolute"
1039
- }
1040
- }
1041
- },
1042
- "& .M4LSideBar-navItemRootContent": {
1043
- display: "flex",
1044
- padding: "8px",
1045
- justifyContent: "center",
1046
- borderRadius: "4px 0px 0px 4px",
1047
- position: "relative",
1048
- "& .M4LSideBar-navItemRootContentIconTypo": {
1049
- display: "flex",
1050
- gap: "8px",
1051
- width: "100%",
1052
- "& .M4LIcon-icon": {
1053
- backgroundColor: o.vars.palette.text.primary,
1054
- width: "18px",
1055
- height: "18px"
1056
- },
1057
- "& .M4LTypography-root": {
1058
- display: "flex",
1059
- flexGrow: "1",
1060
- overflow: "hidden",
1061
- "& .MuiTypography-root": {
1062
- ...o.colorSchemes.finalTheme.typography.paragraph,
1063
- color: o.vars.palette.text.primary,
1064
- textWrap: "nowrap",
1065
- textOverflow: "ellipsis",
1066
- display: "block",
1067
- overflow: "hidden"
1068
- }
1069
- },
1070
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1071
- backgroundColor: o.vars.palette.text.primary
1072
- }
1073
- },
1074
- "& .M4LSideBar-arrowIconRoot": {
1075
- "& .M4LIcon-root": {
1076
- "& .M4LIcon-icon": {
1077
- background: o.vars.palette.text.primary
1078
- }
1079
- }
1080
- }
1081
- },
1082
- "& .M4LSideBar-containerListSubItem": {
1083
- paddingLeft: "0px"
1084
- },
1085
- "& .M4LSideBar-navListSubItemRoot": {
1086
- gap: "12px",
1087
- padding: "0px",
1088
- "& .M4LSideBar-navSubItemContentRoot ": {
1089
- width: "100%",
1090
- height: "32px",
1091
- borderRadius: "4px",
1092
- gap: "8px",
1093
- padding: "0px",
1094
- "&.M4LSideBar-subItemCollapseActive": {
1095
- backgroundColor: o.vars.palette.primary.opacity,
1096
- gap: "8px",
1097
- padding: "0px",
1098
- "& .MuiButtonBase-root": {
1099
- padding: "0px",
1100
- "& .M4LIcon-root": {
1101
- "& .M4LIcon-icon": {
1102
- backgroundColor: o.vars.palette.primary.focusVisible
1103
- }
1104
- }
1105
- }
1106
- },
1107
- "& .M4LSideBar-subItemActive": {
1108
- "& .MuiButtonBase-root": {
1109
- padding: "0px",
1110
- "& .M4LIcon-root": {
1111
- "& .M4LIcon-icon": {
1112
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
1113
- }
1114
- }
1115
- },
1116
- "& .M4LSideBar-navSubItemContentBullet": {
1117
- height: "14px",
1118
- borderRadius: "4px",
1119
- backgroundColor: o.vars.palette.primary.focusVisible,
1120
- gap: "8px"
1121
- }
1122
- },
1123
- "&:hover": {
1124
- padding: "0 8px",
1125
- background: o.vars.palette.background.default
1126
- // Validar implementación desde la creación del tema.
1127
- }
1128
- },
1129
- "& .M4LSideBar-navSubItemContentRoot": {
1130
- gap: "12px",
1131
- margin: "0px 0px 0px 0px",
1132
- padding: "8px",
1133
- "& .M4LIcon-root": {
1134
- minHeight: "24px",
1135
- minWwidth: "24px",
1136
- "& .M4LIcon-icon": {
1137
- minHeight: "24px",
1138
- minWidth: "24px"
1139
- }
1140
- },
1141
- "& .M4LSideBar-navSubItemContentBullet": {
1142
- minWidth: "5px",
1143
- minHeight: "5px",
1144
- borderRadius: "50%",
1145
- backgroundColor: o.vars.palette.text.primary
1146
- },
1147
- "& .M4LTypography-root": {
1148
- display: "flex",
1149
- width: "100%",
1150
- "& .MuiTypography-root": {
1151
- ...o.colorSchemes.finalTheme.typography.paragraph,
1152
- color: o.vars.palette.text.primary,
1153
- with: "100%",
1154
- overflow: "hidden",
1155
- textOverflow: "ellipsis",
1156
- textWrap: "nowrap"
1157
- }
1158
- }
1159
- }
1160
- },
1161
- "& .MuiCollapse-root": {
1162
- marginLeft: "0px"
1163
- }
1164
- }
1165
- },
1166
- "& .M4LIcon-root .M4LIcon-icon": {
1167
- backgroundColor: o.vars.palette.text.primary
1168
- }
1169
- },
1170
- "& .M4LSideBar-footer": {
1171
- "& .M4LSideBar-containerLogoButton": {
1172
- display: "flex",
1173
- gap: "14px",
1174
- width: "120px"
1175
- },
1176
- "& .M4LSideBar-containerLogoButtonLogo": {
1177
- minWidth: "120px",
1178
- height: "32px",
1179
- "& .M4LSideBar-containerLogoButtonIcon": {
1180
- display: "flex",
1181
- alignItems: "center"
1182
- }
1183
- }
1184
- }
1185
- }
1186
- },
1187
- "&.M4LSideBar-variantComercial": {
1188
- /* '& .MuiBackdrop-root': {
1189
- background: 'transparent',
1190
- backgroundColor: `rgba(0, 0, 0, 0.5) !important`,
1191
- transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
1192
- }, */
1193
- "& .M4LSideBar-contentMobile": {
1194
- width: "100%",
1195
- height: "100%",
1196
- display: "flex",
1197
- flexDirection: "column",
1198
- "& .M4LSideBar-containerSideBarLogo": {
1199
- display: "flex",
1200
- justifyContent: "flex-start",
1201
- marginTop: "12px",
1202
- "& .M4LSideBar-containerLogo": {
1203
- display: "flex",
1204
- justifyContent: "center",
1205
- alignItems: "center",
1206
- fitContent: "100%",
1207
- boxSizing: "contentBox",
1208
- paddingTop: "8px",
1209
- paddingBottom: "8px",
1210
- gap: "16px",
1211
- paddingLeft: "24px",
1212
- "& .M4LTypography-root": {
1213
- display: "flex",
1214
- width: "100%",
1215
- "& .MuiTypography-root": {
1216
- with: "100%",
1217
- overflow: "hidden",
1218
- textOverflow: "ellipsis",
1219
- textWrap: "nowrap"
1220
- }
1221
- },
1222
- "& .M4LImage-root": {
1223
- position: "relative",
1224
- padding: "6px",
1225
- borderRadius: "6px",
1226
- minWidth: "215px !important",
1227
- minHeight: "50px !important"
1228
- }
1229
- }
1230
- },
1231
- "& .M4LSideBar-contentGroups": {
1232
- overflow: "hidden",
1233
- flexGrow: "1",
1234
- display: "flex",
1235
- flexDirection: "column",
1236
- "& .M4LSideBar-contentGroupsLine": {
1237
- display: "flex",
1238
- height: "2px",
1239
- marginRight: "14px",
1240
- marginLeft: "14px",
1241
- backgroundColor: "none"
1242
- },
1243
- "& .M4LSideBar-wrapperGroup": {
1244
- height: "auto",
1245
- paddingLeft: "10px",
1246
- "& .M4LSideBar-wrapperGroupTitle": {
1247
- "& .M4LTypography-root": {
1248
- display: "flex",
1249
- width: "100%",
1250
- "& .MuiTypography-root": {
1251
- with: "100%",
1252
- overflow: "hidden",
1253
- textOverflow: "ellipsis",
1254
- textWrap: "nowrap",
1255
- fontWeight: "700",
1256
- fontSize: "14px !important"
1257
- }
1258
- }
1259
- },
1260
- "& .M4LSideBar-itemListMainRoot": {
1261
- display: "flex",
1262
- borderRadius: "4px 0px 0px 4px",
1263
- justifyContent: "center",
1264
- flexDirection: "column",
1265
- padding: "0px 0px 8px 0px",
1266
- gap: "0",
1267
- "& .M4LSideBar-navItemMainRoot": {
1268
- backgroundColor: "transparent",
1269
- borderRadius: "4px",
1270
- "&:hover": {
1271
- background: o.vars.palette.background.hover,
1272
- cursor: "pointer"
1273
- }
1274
- },
1275
- "&.M4LSideBar-itemMainActive": {
1276
- borderRadius: "4px",
1277
- background: o.vars.palette.primary.opacity,
1278
- border: "1px solid",
1279
- borderColor: o.vars.palette.primary.opacity,
1280
- "& .M4LSideBar-navItemMainRoot": {
1281
- background: o.vars.palette.primary.opacity,
1282
- "&:hover": {
1283
- background: r(
1284
- o.colorSchemes.finalTheme.palette.primary.active || "#fff",
1285
- 0.24
1286
- ),
1287
- // Validar implementación desde la creación del tema.
1288
- cursor: "pointer"
1289
- }
1290
- },
1291
- "& .M4LSideBar-navItemRootContent": {
1292
- "& .M4LSideBar-navItemRootContentIconTypo": {
1293
- fontSize: "14px !important",
1294
- "& .M4LIcon-icon": {
1295
- backgroundColor: o.vars.palette.primary.focusVisible
1296
- },
1297
- "& .M4LTypography-root": {
1298
- "& .MuiTypography-root": {
1299
- color: o.vars.palette.primary.focusVisible
1300
- }
1301
- },
1302
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1303
- backgroundColor: o.vars.palette.primary.focusVisible
1304
- }
1305
- },
1306
- "& .M4LSideBar-arrowIconRoot": {
1307
- "& .M4LIcon-root": {
1308
- "& .M4LIcon-icon": {
1309
- backgroundColor: o.vars.palette.primary.focusVisible
1310
- }
1311
- }
1312
- },
1313
- "&::before": {
1314
- content: '""',
1315
- width: "4px",
1316
- top: "0px",
1317
- bottom: "0px",
1318
- right: "0px",
1319
- backgroundColor: o.vars.palette.primary.focusVisible,
1320
- borderRadius: "4px 0px 0px 4px",
1321
- position: "absolute"
1322
- }
1323
- }
1324
- },
1325
- "& .M4LSideBar-navItemRootContent": {
1326
- display: "flex",
1327
- padding: "8px",
1328
- justifyContent: "center",
1329
- borderRadius: "4px 0px 0px 4px",
1330
- position: "relative",
1331
- "& .M4LSideBar-navItemRootContentIconTypo": {
1332
- display: "flex",
1333
- gap: "8px",
1334
- width: "100%",
1335
- "& .M4LIcon-icon": {
1336
- backgroundColor: o.vars.palette.text.primary,
1337
- width: "18px",
1338
- height: "18px"
1339
- },
1340
- "& .M4LTypography-root": {
1341
- display: "flex",
1342
- flexGrow: "1",
1343
- overflow: "hidden",
1344
- "& .MuiTypography-root": {
1345
- ...o.colorSchemes.finalTheme.typography.paragraph,
1346
- color: o.vars.palette.text.primary,
1347
- textWrap: "nowrap",
1348
- textOverflow: "ellipsis",
1349
- display: "block",
1350
- overflow: "hidden",
1351
- fontSize: "14px !important"
1352
- }
1353
- },
1354
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1355
- backgroundColor: o.vars.palette.text.primary
1356
- }
1357
- },
1358
- "& .M4LSideBar-arrowIconRoot": {
1359
- "& .M4LIcon-root": {
1360
- "& .M4LIcon-icon": {
1361
- background: o.vars.palette.text.primary
1362
- }
1363
- }
1364
- }
1365
- },
1366
- "& .M4LSideBar-containerListSubItem": {
1367
- paddingLeft: "0px"
1368
- },
1369
- "& .M4LSideBar-navListSubItemRoot": {
1370
- gap: "12px",
1371
- padding: "0px",
1372
- "& .M4LSideBar-navSubItemContentRoot ": {
1373
- width: "100%",
1374
- height: "32px",
1375
- borderRadius: "4px",
1376
- gap: "8px",
1377
- padding: "0px",
1378
- "&.M4LSideBar-subItemCollapseActive": {
1379
- backgroundColor: o.vars.palette.primary.opacity,
1380
- gap: "8px",
1381
- "& .MuiButtonBase-root": {
1382
- padding: "0px",
1383
- "& .M4LIcon-root": {
1384
- "& .M4LIcon-icon": {
1385
- backgroundColor: o.vars.palette.primary.focusVisible
1386
- }
1387
- }
1388
- }
1389
- },
1390
- "& .M4LSideBar-subItemActive": {
1391
- "& .MuiButtonBase-root": {
1392
- padding: "0px",
1393
- "& .M4LIcon-root": {
1394
- "& .M4LIcon-icon": {
1395
- backgroundColor: `${o.vars.palette.primary.focusVisible}!important`
1396
- }
1397
- }
1398
- },
1399
- "& .M4LSideBar-navSubItemContentBullet": {
1400
- height: "14px",
1401
- borderRadius: "4px",
1402
- backgroundColor: o.vars.palette.primary.focusVisible,
1403
- gap: "8px"
1404
- }
1405
- },
1406
- "&:hover": {
1407
- padding: "0 8px",
1408
- background: o.vars.palette.background.default
1409
- // Validar implementación desde la creación del tema.
1410
- }
1411
- },
1412
- "& .M4LSideBar-navSubItemContentRoot": {
1413
- gap: "12px",
1414
- margin: "0px 0px 0px 0px",
1415
- padding: "0px",
1416
- "& .M4LSideBar-navSubItemContentBullet": {
1417
- minWidth: "5px",
1418
- minHeight: "5px",
1419
- borderRadius: "50%",
1420
- backgroundColor: o.vars.palette.text.primary
1421
- },
1422
- "& .M4LTypography-root": {
1423
- display: "flex",
1424
- width: "100%",
1425
- "& .MuiTypography-root": {
1426
- ...o.colorSchemes.finalTheme.typography.paragraph,
1427
- color: o.vars.palette.text.primary,
1428
- with: "100%",
1429
- overflow: "hidden",
1430
- textOverflow: "ellipsis",
1431
- textWrap: "nowrap",
1432
- fontSize: "14px !important"
1433
- }
1434
- }
1435
- }
1436
- },
1437
- "& .MuiCollapse-root": {
1438
- marginLeft: "18px",
1439
- "&.M4LSideBar-drawer.M4LSideBar-variantComercial": {
1440
- /* '& .MuiBackdrop-root': {
1441
- '& .MuiModal-backdrop': {
1442
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
1443
- }
1444
- }, */
1445
- "& .M4LSideBar-subItemActive": {
1446
- "& .M4LIcon-icon": {
1447
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
1448
- }
1449
- },
1450
- "& .M4LSideBar-contentMobile": {
1451
- width: "100%",
1452
- height: "100%",
1453
- display: "flex",
1454
- flexDirection: "column",
1455
- "& .M4LSideBar-containerSideBarLogo": {
1456
- display: "flex",
1457
- justifyContent: "flex-start",
1458
- marginTop: "12px",
1459
- "& .M4LSideBar-containerLogo": {
1460
- display: "flex",
1461
- justifyContent: "center",
1462
- alignItems: "center",
1463
- fitContent: "100%",
1464
- boxSizing: "contentBox",
1465
- paddingTop: "8px",
1466
- paddingBottom: "8px",
1467
- gap: "16px",
1468
- paddingLeft: "24px",
1469
- "& .M4LTypography-root": {
1470
- display: "flex",
1471
- width: "100%",
1472
- "& .MuiTypography-root": {
1473
- with: "100%",
1474
- overflow: "hidden",
1475
- textOverflow: "ellipsis",
1476
- textWrap: "nowrap"
1477
- }
1478
- },
1479
- "& .M4LImage-root": {
1480
- position: "relative",
1481
- background: o.vars.palette.background.default,
1482
- boxShadow: o.vars.customShadows?.z2,
1483
- padding: "6px",
1484
- borderRadius: "6px",
1485
- minWidth: "50px !important",
1486
- minHeight: "50px !important"
1487
- }
1488
- }
1489
- },
1490
- "& .M4LSideBar-contentGroups": {
1491
- overflow: "hidden",
1492
- flexGrow: "1",
1493
- display: "flex",
1494
- flexDirection: "column",
1495
- "& .M4LSideBar-contentGroupsLine": {
1496
- display: "flex",
1497
- height: "2px",
1498
- marginRight: "14px",
1499
- marginLeft: "14px",
1500
- backgroundColor: "none"
1501
- },
1502
- "& .M4LSideBar-wrapperGroup": {
1503
- height: "100%",
1504
- paddingLeft: "10px",
1505
- "& .M4LSideBar-wrapperGroupTitle": {
1506
- "& .M4LTypography-root": {
1507
- display: "flex",
1508
- width: "100%",
1509
- "& .MuiTypography-root": {
1510
- with: "100%",
1511
- overflow: "hidden",
1512
- textOverflow: "ellipsis",
1513
- textWrap: "nowrap"
1514
- }
1515
- }
1516
- },
1517
- "& .M4LSideBar-itemListMainRoot": {
1518
- display: "flex",
1519
- borderRadius: "4px 0px 0px 4px",
1520
- justifyContent: "center",
1521
- flexDirection: "column",
1522
- padding: "0px 0px 8px 0px",
1523
- gap: "4px",
1524
- "& .M4LSideBar-navItemMainRoot": {
1525
- backgroundColor: "transparent",
1526
- borderRadius: "4px",
1527
- "&:hover": {
1528
- background: o.vars.palette.background.hover,
1529
- cursor: "pointer"
1530
- }
1531
- },
1532
- "&.M4LSideBar-itemMainActive": {
1533
- borderRadius: "4px",
1534
- background: o.vars.palette.primary.opacity,
1535
- border: "1px solid",
1536
- borderColor: o.vars.palette.primary.opacity,
1537
- "& .M4LSideBar-navItemMainRoot": {
1538
- background: o.vars.palette.primary.opacity,
1539
- "&:hover": {
1540
- background: r(
1541
- o.colorSchemes.finalTheme.palette.primary.active || "#fff",
1542
- 0.24
1543
- ),
1544
- // Validar implementación desde la creación del tema.
1545
- cursor: "pointer"
1546
- }
1547
- },
1548
- "& .M4LSideBar-navItemRootContent": {
1549
- "& .M4LSideBar-navItemRootContentIconTypo": {
1550
- "& .M4LIcon-icon": {
1551
- backgroundColor: o.vars.palette.primary.focusVisible
1552
- },
1553
- "& .M4LTypography-root": {
1554
- "& .MuiTypography-root": {
1555
- color: o.vars.palette.primary.focusVisible
1556
- }
1557
- },
1558
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1559
- backgroundColor: o.vars.palette.primary.focusVisible
1560
- }
1561
- },
1562
- "& .M4LSideBar-arrowIconRoot": {
1563
- "& .M4LIcon-root": {
1564
- "& .M4LIcon-icon": {
1565
- backgroundColor: o.vars.palette.primary.focusVisible
1566
- }
1567
- }
1568
- },
1569
- "&::before": {
1570
- content: '""',
1571
- width: "4px",
1572
- top: "0px",
1573
- bottom: "0px",
1574
- right: "0px",
1575
- backgroundColor: o.vars.palette.primary.focusVisible,
1576
- borderRadius: "4px 0px 0px 4px",
1577
- position: "absolute"
1578
- }
1579
- }
1580
- },
1581
- "& .M4LSideBar-navItemRootContent": {
1582
- display: "flex",
1583
- padding: "8px",
1584
- justifyContent: "center",
1585
- borderRadius: "4px 0px 0px 4px",
1586
- position: "relative",
1587
- "& .M4LSideBar-navItemRootContentIconTypo": {
1588
- display: "flex",
1589
- gap: "8px",
1590
- width: "100%",
1591
- "& .M4LIcon-icon": {
1592
- backgroundColor: o.vars.palette.text.primary,
1593
- width: "18px",
1594
- height: "18px"
1595
- },
1596
- "& .M4LTypography-root": {
1597
- display: "flex",
1598
- flexGrow: "1",
1599
- overflow: "hidden",
1600
- "& .MuiTypography-root": {
1601
- ...o.colorSchemes.finalTheme.typography.paragraph,
1602
- color: o.vars.palette.text.primary,
1603
- textWrap: "nowrap",
1604
- textOverflow: "ellipsis",
1605
- display: "block",
1606
- overflow: "hidden"
1607
- }
1608
- },
1609
- "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
1610
- backgroundColor: o.vars.palette.text.primary
1611
- }
1612
- },
1613
- "& .M4LSideBar-arrowIconRoot": {
1614
- "& .M4LIcon-root": {
1615
- "& .M4LIcon-icon": {
1616
- background: o.vars.palette.text.primary
1617
- }
1618
- }
1619
- }
1620
- },
1621
- "& .M4LSideBar-containerListSubItem": {
1622
- paddingLeft: "0px"
1623
- },
1624
- "& .M4LSideBar-navListSubItemRoot": {
1625
- gap: "12px",
1626
- padding: "0px",
1627
- "& .M4LSideBar-navSubItemContentRoot ": {
1628
- width: "100%",
1629
- height: "32px",
1630
- borderRadius: "4px",
1631
- gap: "8px",
1632
- padding: "0px",
1633
- "&.M4LSideBar-subItemCollapseActive": {
1634
- backgroundColor: o.vars.palette.primary.opacity,
1635
- gap: "8px",
1636
- "& .MuiButtonBase-root": {
1637
- padding: "0px",
1638
- "& .M4LIcon-root": {
1639
- "& .M4LIcon-icon": {
1640
- backgroundColor: o.vars.palette.primary.focusVisible
1641
- }
1642
- }
1643
- }
1644
- },
1645
- "& .M4LSideBar-subItemActive": {
1646
- "& .MuiButtonBase-root": {
1647
- padding: "0px",
1648
- "& .M4LIcon-root": {
1649
- "& .M4LIcon-icon": {
1650
- backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
1651
- }
1652
- }
1653
- },
1654
- "& .M4LSideBar-navSubItemContentBullet": {
1655
- height: "14px",
1656
- borderRadius: "4px",
1657
- backgroundColor: o.vars.palette.primary.focusVisible,
1658
- gap: "8px"
1659
- }
1660
- },
1661
- "&:hover": {
1662
- background: o.vars.palette.background.default,
1663
- // Validar implementación desde la creación del tema.
1664
- padding: "0 8px"
1665
- }
1666
- },
1667
- "& .M4LSideBar-navSubItemContentRoot": {
1668
- gap: "12px",
1669
- margin: "0px 0px 0px 0px",
1670
- padding: "0px",
1671
- "& .M4LSideBar-navSubItemContentBullet": {
1672
- minWidth: "5px",
1673
- minHeight: "5px",
1674
- borderRadius: "50%",
1675
- backgroundColor: o.vars.palette.text.primary
1676
- },
1677
- "& .M4LTypography-root": {
1678
- display: "flex",
1679
- width: "100%",
1680
- "& .MuiTypography-root": {
1681
- ...o.colorSchemes.finalTheme.typography.paragraph,
1682
- color: o.colorSchemes.finalTheme.palette.text.primary,
1683
- with: "100%",
1684
- overflow: "hidden",
1685
- textOverflow: "ellipsis",
1686
- textWrap: "nowrap"
1687
- }
1688
- }
1689
- }
1690
- },
1691
- "& .MuiCollapse-root": {
1692
- marginLeft: "18px"
1693
- }
1694
- }
1695
- },
1696
- "& .M4LIcon-root .M4LIcon-icon": {
1697
- backgroundColor: o.vars.palette.text.primary
1698
- }
1699
- },
1700
- "& .M4LSideBar-footer": {
1701
- "& .M4LSideBar-containerLogoButton": {
1702
- display: "flex",
1703
- gap: "14px",
1704
- width: "120px"
1705
- },
1706
- "& .M4LSideBar-containerLogoButtonLogo": {
1707
- minWidth: "120px",
1708
- height: "32px",
1709
- "& .M4LSideBar-containerLogoButtonIcon": {
1710
- display: "flex",
1711
- alignItems: "center"
1712
- }
1713
- }
1714
- }
1715
- }
1716
- }
1717
- }
1718
- }
1719
- },
1720
- "& .M4LIcon-root .M4LIcon-icon": {
1721
- backgroundColor: o.vars.palette.text.primary
1722
- }
1723
- },
1724
- "& .M4LSideBar-footer": {
1725
- "& .M4LSideBar-containerLogoButton": {
1726
- display: "flex",
1727
- gap: "14px",
1728
- width: "120px"
1729
- },
1730
- "& .M4LSideBar-containerLogoButtonLogo": {
1731
- minWidth: "120px",
1732
- height: "32px",
1733
- "& .M4LSideBar-containerLogoButtonIcon": {
1734
- display: "flex",
1735
- alignItems: "center"
1736
- }
1737
- }
1738
- }
1739
- }
1740
- }
1741
- }
1742
- }
1743
- }
1744
- });
1745
- export {
1746
- t as M
1747
- };