@onpe/ui 1.3.11 → 1.3.13

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/index.css CHANGED
@@ -615,119 +615,119 @@ body.onpe-modal-open {
615
615
  }
616
616
  }
617
617
 
618
- /* ModalSystemIncompatible Component Styles */
619
- .onpe-modal-system-incompatible-container {
620
- /* Solo contenido - el espaciado lo maneja el Modal base */
621
- width: 100%;
622
- max-width: 680px !important; /* Tamaño específico para este modal */
623
- }
624
-
625
- .onpe-modal-system-incompatible-icon-container {
626
- display: flex;
627
- justify-content: center;
628
- align-items: center;
629
- }
630
-
631
- .onpe-modal-system-incompatible-icon {
632
- width: 84px; /* 5.5rem = 84px */
633
- height: 84px; /* 5.5rem = 84px */
634
- color: var(--onpe-ui-skyblue);
635
- }
636
-
637
- .onpe-modal-system-incompatible-title {
638
- margin-top: 4px; /* mt-4 - Menos espacio entre icono warning y título */
639
- font-size: 14px; /* 0.875rem = 14px */
640
- font-weight: 600; /* font-semibold */
641
- text-align: center;
642
- color: var(--onpe-ui-skyblue);
643
- }
644
-
645
- .onpe-modal-system-incompatible-message {
646
- margin-top: 24px; /* 2rem = 24px - Más espacio entre título y mensaje */
647
- font-size: 14px; /* 0.875rem = 14px */
648
- text-align: center;
649
- }
650
-
651
- .onpe-modal-system-incompatible-systems-container {
652
- display: flex;
653
- align-items: center;
654
- justify-content: center;
655
- gap: 40px; /* 2.5rem = 40px - Más espacio entre iconos de sistemas */
656
- margin-top: 47px; /* 2.5rem = 47px - Más espacio entre mensaje e iconos de sistemas */
657
- }
658
-
659
- .onpe-modal-system-incompatible-system-icon {
660
- width: 32px; /* 2rem = 32px */
661
- height: 32px; /* 2rem = 32px */
662
- color: var(--onpe-ui-skyblue);
663
- }
664
-
665
- /* Estilos específicos para móvil */
666
- @media (max-width: 640px) {
667
- .onpe-modal-system-incompatible-title {
668
- font-size: 16px; /* 1rem = 16px para móvil */
669
- margin-top: 0px; /* mt-3 - Menos espacio entre icono warning y título en móvil */
670
- }
671
-
672
- .onpe-modal-system-incompatible-message {
673
- font-size: 16px; /* 1rem = 16px para móvil */
674
- margin-top: 24px; /* 1.5rem = 24px - Más espacio en móvil */
675
- padding: 0 8px; /* 0.5rem = 8px */
676
- }
677
-
678
- .onpe-modal-system-incompatible-systems-container {
679
- gap: 32px; /* 2rem = 32px - Más espacio entre iconos de sistemas en móvil */
680
- margin-top: 32px; /* 2rem = 32px - Más espacio entre mensaje e iconos de sistemas en móvil */
681
- }
682
-
683
- .onpe-modal-system-incompatible-system-icon {
684
- width: 28px; /* 1.75rem = 28px para móvil */
685
- height: 28px; /* 1.75rem = 28px para móvil */
686
- }
687
-
688
- .onpe-modal-system-incompatible-icon {
689
- width: 64px; /* 4rem = 64px para móvil */
690
- height: 64px; /* 4rem = 64px para móvil */
691
- }
692
- }
693
-
694
- /* Responsive Design */
695
- @media (min-width: 640px) {
696
-
697
- }
698
-
699
- @media (min-width: 768px) {
700
- .onpe-modal-system-incompatible-container {
701
- /* Desktop: Tamaño específico de 680px */
702
- max-width: 680px !important;
703
- }
704
- }
705
-
706
- @media (min-width: 640px) {
707
- .onpe-modal-system-incompatible-title {
708
- font-size: 24px; /* 1.5rem = 24px para tablet y desktop */
709
- }
710
-
711
- .onpe-modal-system-incompatible-message {
712
- font-size: 18px; /* 1.125rem = 18px para tablet y desktop */
713
- }
714
-
715
- .onpe-modal-system-incompatible-systems-container {
716
- gap: 48px; /* 3rem = 48px para tablet y desktop */
717
- }
718
-
719
- .onpe-modal-system-incompatible-system-icon {
720
- width: 48px; /* 3rem = 48px para tablet y desktop */
721
- height: 48px; /* 3rem = 48px para tablet y desktop */
722
- }
723
- }
724
-
725
- @media (min-width: 1024px) {
726
- .onpe-modal-system-incompatible-container {
727
- /* Desktop grande: Tamaño específico de 680px */
728
- max-width: 680px !important;
729
- }
730
- }
618
+ /* ModalSystemIncompatible Component Styles */
619
+ .onpe-modal-system-incompatible-container {
620
+ /* Solo contenido - el espaciado lo maneja el Modal base */
621
+ width: 100%;
622
+ max-width: 680px !important; /* Tamaño específico para este modal */
623
+ }
624
+
625
+ .onpe-modal-system-incompatible-icon-container {
626
+ display: flex;
627
+ justify-content: center;
628
+ align-items: center;
629
+ }
630
+
631
+ .onpe-modal-system-incompatible-icon {
632
+ width: 84px; /* 5.5rem = 84px */
633
+ height: 84px; /* 5.5rem = 84px */
634
+ color: var(--onpe-ui-skyblue);
635
+ }
636
+
637
+ .onpe-modal-system-incompatible-title {
638
+ margin-top: 4px; /* mt-4 - Menos espacio entre icono warning y título */
639
+ font-size: 14px; /* 0.875rem = 14px */
640
+ font-weight: 600; /* font-semibold */
641
+ text-align: center;
642
+ color: var(--onpe-ui-skyblue);
643
+ }
644
+
645
+ .onpe-modal-system-incompatible-message {
646
+ margin-top: 24px; /* 2rem = 24px - Más espacio entre título y mensaje */
647
+ font-size: 14px; /* 0.875rem = 14px */
648
+ text-align: center;
649
+ }
650
+
651
+ .onpe-modal-system-incompatible-systems-container {
652
+ display: flex;
653
+ align-items: center;
654
+ justify-content: center;
655
+ gap: 40px; /* 2.5rem = 40px - Más espacio entre iconos de sistemas */
656
+ margin-top: 47px; /* 2.5rem = 47px - Más espacio entre mensaje e iconos de sistemas */
657
+ }
658
+
659
+ .onpe-modal-system-incompatible-system-icon {
660
+ width: 32px; /* 2rem = 32px */
661
+ height: 32px; /* 2rem = 32px */
662
+ color: var(--onpe-ui-skyblue);
663
+ }
664
+
665
+ /* Estilos específicos para móvil */
666
+ @media (max-width: 640px) {
667
+ .onpe-modal-system-incompatible-title {
668
+ font-size: 16px; /* 1rem = 16px para móvil */
669
+ margin-top: 0px; /* mt-3 - Menos espacio entre icono warning y título en móvil */
670
+ }
671
+
672
+ .onpe-modal-system-incompatible-message {
673
+ font-size: 16px; /* 1rem = 16px para móvil */
674
+ margin-top: 24px; /* 1.5rem = 24px - Más espacio en móvil */
675
+ padding: 0 8px; /* 0.5rem = 8px */
676
+ }
677
+
678
+ .onpe-modal-system-incompatible-systems-container {
679
+ gap: 32px; /* 2rem = 32px - Más espacio entre iconos de sistemas en móvil */
680
+ margin-top: 32px; /* 2rem = 32px - Más espacio entre mensaje e iconos de sistemas en móvil */
681
+ }
682
+
683
+ .onpe-modal-system-incompatible-system-icon {
684
+ width: 28px; /* 1.75rem = 28px para móvil */
685
+ height: 28px; /* 1.75rem = 28px para móvil */
686
+ }
687
+
688
+ .onpe-modal-system-incompatible-icon {
689
+ width: 64px; /* 4rem = 64px para móvil */
690
+ height: 64px; /* 4rem = 64px para móvil */
691
+ }
692
+ }
693
+
694
+ /* Responsive Design */
695
+ @media (min-width: 640px) {
696
+
697
+ }
698
+
699
+ @media (min-width: 768px) {
700
+ .onpe-modal-system-incompatible-container {
701
+ /* Desktop: Tamaño específico de 680px */
702
+ max-width: 680px !important;
703
+ }
704
+ }
705
+
706
+ @media (min-width: 640px) {
707
+ .onpe-modal-system-incompatible-title {
708
+ font-size: 24px; /* 1.5rem = 24px para tablet y desktop */
709
+ }
710
+
711
+ .onpe-modal-system-incompatible-message {
712
+ font-size: 18px; /* 1.125rem = 18px para tablet y desktop */
713
+ }
714
+
715
+ .onpe-modal-system-incompatible-systems-container {
716
+ gap: 48px; /* 3rem = 48px para tablet y desktop */
717
+ }
718
+
719
+ .onpe-modal-system-incompatible-system-icon {
720
+ width: 48px; /* 3rem = 48px para tablet y desktop */
721
+ height: 48px; /* 3rem = 48px para tablet y desktop */
722
+ }
723
+ }
724
+
725
+ @media (min-width: 1024px) {
726
+ .onpe-modal-system-incompatible-container {
727
+ /* Desktop grande: Tamaño específico de 680px */
728
+ max-width: 680px !important;
729
+ }
730
+ }
731
731
 
732
732
  /* NotRecommended Component Styles */
733
733
  .onpe-not-recommended-wrapper {
@@ -615,119 +615,119 @@ body.onpe-modal-open {
615
615
  }
616
616
  }
617
617
 
618
- /* ModalSystemIncompatible Component Styles */
619
- .onpe-modal-system-incompatible-container {
620
- /* Solo contenido - el espaciado lo maneja el Modal base */
621
- width: 100%;
622
- max-width: 680px !important; /* Tamaño específico para este modal */
623
- }
624
-
625
- .onpe-modal-system-incompatible-icon-container {
626
- display: flex;
627
- justify-content: center;
628
- align-items: center;
629
- }
630
-
631
- .onpe-modal-system-incompatible-icon {
632
- width: 84px; /* 5.5rem = 84px */
633
- height: 84px; /* 5.5rem = 84px */
634
- color: var(--onpe-ui-skyblue);
635
- }
636
-
637
- .onpe-modal-system-incompatible-title {
638
- margin-top: 4px; /* mt-4 - Menos espacio entre icono warning y título */
639
- font-size: 14px; /* 0.875rem = 14px */
640
- font-weight: 600; /* font-semibold */
641
- text-align: center;
642
- color: var(--onpe-ui-skyblue);
643
- }
644
-
645
- .onpe-modal-system-incompatible-message {
646
- margin-top: 24px; /* 2rem = 24px - Más espacio entre título y mensaje */
647
- font-size: 14px; /* 0.875rem = 14px */
648
- text-align: center;
649
- }
650
-
651
- .onpe-modal-system-incompatible-systems-container {
652
- display: flex;
653
- align-items: center;
654
- justify-content: center;
655
- gap: 40px; /* 2.5rem = 40px - Más espacio entre iconos de sistemas */
656
- margin-top: 47px; /* 2.5rem = 47px - Más espacio entre mensaje e iconos de sistemas */
657
- }
658
-
659
- .onpe-modal-system-incompatible-system-icon {
660
- width: 32px; /* 2rem = 32px */
661
- height: 32px; /* 2rem = 32px */
662
- color: var(--onpe-ui-skyblue);
663
- }
664
-
665
- /* Estilos específicos para móvil */
666
- @media (max-width: 640px) {
667
- .onpe-modal-system-incompatible-title {
668
- font-size: 16px; /* 1rem = 16px para móvil */
669
- margin-top: 0px; /* mt-3 - Menos espacio entre icono warning y título en móvil */
670
- }
671
-
672
- .onpe-modal-system-incompatible-message {
673
- font-size: 16px; /* 1rem = 16px para móvil */
674
- margin-top: 24px; /* 1.5rem = 24px - Más espacio en móvil */
675
- padding: 0 8px; /* 0.5rem = 8px */
676
- }
677
-
678
- .onpe-modal-system-incompatible-systems-container {
679
- gap: 32px; /* 2rem = 32px - Más espacio entre iconos de sistemas en móvil */
680
- margin-top: 32px; /* 2rem = 32px - Más espacio entre mensaje e iconos de sistemas en móvil */
681
- }
682
-
683
- .onpe-modal-system-incompatible-system-icon {
684
- width: 28px; /* 1.75rem = 28px para móvil */
685
- height: 28px; /* 1.75rem = 28px para móvil */
686
- }
687
-
688
- .onpe-modal-system-incompatible-icon {
689
- width: 64px; /* 4rem = 64px para móvil */
690
- height: 64px; /* 4rem = 64px para móvil */
691
- }
692
- }
693
-
694
- /* Responsive Design */
695
- @media (min-width: 640px) {
696
-
697
- }
698
-
699
- @media (min-width: 768px) {
700
- .onpe-modal-system-incompatible-container {
701
- /* Desktop: Tamaño específico de 680px */
702
- max-width: 680px !important;
703
- }
704
- }
705
-
706
- @media (min-width: 640px) {
707
- .onpe-modal-system-incompatible-title {
708
- font-size: 24px; /* 1.5rem = 24px para tablet y desktop */
709
- }
710
-
711
- .onpe-modal-system-incompatible-message {
712
- font-size: 18px; /* 1.125rem = 18px para tablet y desktop */
713
- }
714
-
715
- .onpe-modal-system-incompatible-systems-container {
716
- gap: 48px; /* 3rem = 48px para tablet y desktop */
717
- }
718
-
719
- .onpe-modal-system-incompatible-system-icon {
720
- width: 48px; /* 3rem = 48px para tablet y desktop */
721
- height: 48px; /* 3rem = 48px para tablet y desktop */
722
- }
723
- }
724
-
725
- @media (min-width: 1024px) {
726
- .onpe-modal-system-incompatible-container {
727
- /* Desktop grande: Tamaño específico de 680px */
728
- max-width: 680px !important;
729
- }
730
- }
618
+ /* ModalSystemIncompatible Component Styles */
619
+ .onpe-modal-system-incompatible-container {
620
+ /* Solo contenido - el espaciado lo maneja el Modal base */
621
+ width: 100%;
622
+ max-width: 680px !important; /* Tamaño específico para este modal */
623
+ }
624
+
625
+ .onpe-modal-system-incompatible-icon-container {
626
+ display: flex;
627
+ justify-content: center;
628
+ align-items: center;
629
+ }
630
+
631
+ .onpe-modal-system-incompatible-icon {
632
+ width: 84px; /* 5.5rem = 84px */
633
+ height: 84px; /* 5.5rem = 84px */
634
+ color: var(--onpe-ui-skyblue);
635
+ }
636
+
637
+ .onpe-modal-system-incompatible-title {
638
+ margin-top: 4px; /* mt-4 - Menos espacio entre icono warning y título */
639
+ font-size: 14px; /* 0.875rem = 14px */
640
+ font-weight: 600; /* font-semibold */
641
+ text-align: center;
642
+ color: var(--onpe-ui-skyblue);
643
+ }
644
+
645
+ .onpe-modal-system-incompatible-message {
646
+ margin-top: 24px; /* 2rem = 24px - Más espacio entre título y mensaje */
647
+ font-size: 14px; /* 0.875rem = 14px */
648
+ text-align: center;
649
+ }
650
+
651
+ .onpe-modal-system-incompatible-systems-container {
652
+ display: flex;
653
+ align-items: center;
654
+ justify-content: center;
655
+ gap: 40px; /* 2.5rem = 40px - Más espacio entre iconos de sistemas */
656
+ margin-top: 47px; /* 2.5rem = 47px - Más espacio entre mensaje e iconos de sistemas */
657
+ }
658
+
659
+ .onpe-modal-system-incompatible-system-icon {
660
+ width: 32px; /* 2rem = 32px */
661
+ height: 32px; /* 2rem = 32px */
662
+ color: var(--onpe-ui-skyblue);
663
+ }
664
+
665
+ /* Estilos específicos para móvil */
666
+ @media (max-width: 640px) {
667
+ .onpe-modal-system-incompatible-title {
668
+ font-size: 16px; /* 1rem = 16px para móvil */
669
+ margin-top: 0px; /* mt-3 - Menos espacio entre icono warning y título en móvil */
670
+ }
671
+
672
+ .onpe-modal-system-incompatible-message {
673
+ font-size: 16px; /* 1rem = 16px para móvil */
674
+ margin-top: 24px; /* 1.5rem = 24px - Más espacio en móvil */
675
+ padding: 0 8px; /* 0.5rem = 8px */
676
+ }
677
+
678
+ .onpe-modal-system-incompatible-systems-container {
679
+ gap: 32px; /* 2rem = 32px - Más espacio entre iconos de sistemas en móvil */
680
+ margin-top: 32px; /* 2rem = 32px - Más espacio entre mensaje e iconos de sistemas en móvil */
681
+ }
682
+
683
+ .onpe-modal-system-incompatible-system-icon {
684
+ width: 28px; /* 1.75rem = 28px para móvil */
685
+ height: 28px; /* 1.75rem = 28px para móvil */
686
+ }
687
+
688
+ .onpe-modal-system-incompatible-icon {
689
+ width: 64px; /* 4rem = 64px para móvil */
690
+ height: 64px; /* 4rem = 64px para móvil */
691
+ }
692
+ }
693
+
694
+ /* Responsive Design */
695
+ @media (min-width: 640px) {
696
+
697
+ }
698
+
699
+ @media (min-width: 768px) {
700
+ .onpe-modal-system-incompatible-container {
701
+ /* Desktop: Tamaño específico de 680px */
702
+ max-width: 680px !important;
703
+ }
704
+ }
705
+
706
+ @media (min-width: 640px) {
707
+ .onpe-modal-system-incompatible-title {
708
+ font-size: 24px; /* 1.5rem = 24px para tablet y desktop */
709
+ }
710
+
711
+ .onpe-modal-system-incompatible-message {
712
+ font-size: 18px; /* 1.125rem = 18px para tablet y desktop */
713
+ }
714
+
715
+ .onpe-modal-system-incompatible-systems-container {
716
+ gap: 48px; /* 3rem = 48px para tablet y desktop */
717
+ }
718
+
719
+ .onpe-modal-system-incompatible-system-icon {
720
+ width: 48px; /* 3rem = 48px para tablet y desktop */
721
+ height: 48px; /* 3rem = 48px para tablet y desktop */
722
+ }
723
+ }
724
+
725
+ @media (min-width: 1024px) {
726
+ .onpe-modal-system-incompatible-container {
727
+ /* Desktop grande: Tamaño específico de 680px */
728
+ max-width: 680px !important;
729
+ }
730
+ }
731
731
 
732
732
  /* NotRecommended Component Styles */
733
733
  .onpe-not-recommended-wrapper {