anima-ds-nucleus 1.0.24 → 1.0.26
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/anima-ds-nucleus.css +1 -1
- package/dist/anima-ds.cjs.js +68 -68
- package/dist/anima-ds.esm.js +1065 -1045
- package/package.json +1 -1
- package/src/components/DataDisplay/Card/CardError.jsx +21 -18
- package/src/components/DataDisplay/Card/CardSkeleton.jsx +7 -7
- package/src/components/DataDisplay/Card/CardTituloCorto.jsx +14 -12
- package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx +15 -13
- package/src/components/DataDisplay/Card/CardTituloLargo.jsx +14 -12
- package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx +15 -13
- package/src/components/DataDisplay/Card/CardVacia.jsx +16 -13
- package/src/components/Views/ForgotPassword/ForgotPassword.jsx +2 -0
- package/src/components/Views/LoginForm/LoginForm.jsx +1 -1
- package/src/components/Views/NewPassword/NewPassword.jsx +4 -0
- package/src/style.css +53 -4
package/package.json
CHANGED
|
@@ -9,32 +9,32 @@ export const CardError = ({
|
|
|
9
9
|
}) => {
|
|
10
10
|
return (
|
|
11
11
|
<div
|
|
12
|
-
className={`bg-white ${className}`}
|
|
12
|
+
className={`bg-white w-full ${className}`}
|
|
13
13
|
style={{
|
|
14
|
-
|
|
15
|
-
height: '476px',
|
|
14
|
+
minHeight: '476px',
|
|
16
15
|
borderRadius: '14px',
|
|
17
16
|
border: '1px solid #C4C4C4',
|
|
18
|
-
opacity: 1
|
|
17
|
+
opacity: 1,
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column'
|
|
19
20
|
}}
|
|
20
21
|
{...props}
|
|
21
22
|
>
|
|
22
23
|
<div
|
|
23
24
|
style={{
|
|
24
|
-
width: '379.5px',
|
|
25
|
-
height: '60px',
|
|
26
25
|
paddingTop: '24px',
|
|
27
26
|
paddingRight: '24px',
|
|
28
27
|
paddingBottom: '6px',
|
|
29
28
|
paddingLeft: '24px',
|
|
30
|
-
opacity: 1
|
|
29
|
+
opacity: 1,
|
|
30
|
+
flexShrink: 0
|
|
31
31
|
}}
|
|
32
32
|
className="flex items-start justify-between"
|
|
33
33
|
>
|
|
34
34
|
<div
|
|
35
35
|
style={{
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
flex: 1,
|
|
37
|
+
minWidth: 0,
|
|
38
38
|
opacity: 1
|
|
39
39
|
}}
|
|
40
40
|
>
|
|
@@ -47,16 +47,19 @@ export const CardError = ({
|
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
49
49
|
<div
|
|
50
|
-
className="flex flex-col items-center justify-center"
|
|
50
|
+
className="flex flex-col items-center justify-center flex-1"
|
|
51
51
|
style={{
|
|
52
52
|
paddingTop: '80px',
|
|
53
53
|
paddingBottom: '24px',
|
|
54
|
+
paddingLeft: '24px',
|
|
55
|
+
paddingRight: '24px',
|
|
54
56
|
display: 'flex',
|
|
55
|
-
justifyContent: 'flex-start'
|
|
57
|
+
justifyContent: 'flex-start',
|
|
58
|
+
minHeight: 0
|
|
56
59
|
}}
|
|
57
60
|
>
|
|
58
61
|
<div
|
|
59
|
-
className="mb-4 flex items-center justify-center border-2 rounded-full"
|
|
62
|
+
className="mb-4 flex items-center justify-center border-2 rounded-full flex-shrink-0"
|
|
60
63
|
style={{
|
|
61
64
|
borderColor: '#374151',
|
|
62
65
|
width: '48px',
|
|
@@ -73,8 +76,8 @@ export const CardError = ({
|
|
|
73
76
|
</div>
|
|
74
77
|
<div
|
|
75
78
|
style={{
|
|
76
|
-
width: '
|
|
77
|
-
|
|
79
|
+
width: '100%',
|
|
80
|
+
maxWidth: '331.5px',
|
|
78
81
|
opacity: 1,
|
|
79
82
|
display: 'flex',
|
|
80
83
|
alignItems: 'center',
|
|
@@ -101,8 +104,9 @@ export const CardError = ({
|
|
|
101
104
|
<div
|
|
102
105
|
className="border flex items-center justify-center"
|
|
103
106
|
style={{
|
|
104
|
-
width: '
|
|
105
|
-
|
|
107
|
+
width: '100%',
|
|
108
|
+
maxWidth: '331.5px',
|
|
109
|
+
minHeight: '128px',
|
|
106
110
|
borderRadius: '10px',
|
|
107
111
|
borderWidth: '1px',
|
|
108
112
|
borderColor: '#EF4444',
|
|
@@ -116,8 +120,7 @@ export const CardError = ({
|
|
|
116
120
|
>
|
|
117
121
|
<div
|
|
118
122
|
style={{
|
|
119
|
-
width: '
|
|
120
|
-
height: '96px',
|
|
123
|
+
width: '100%',
|
|
121
124
|
opacity: 1
|
|
122
125
|
}}
|
|
123
126
|
>
|
|
@@ -4,13 +4,14 @@ export const CardSkeleton = ({
|
|
|
4
4
|
}) => {
|
|
5
5
|
return (
|
|
6
6
|
<div
|
|
7
|
-
className={`bg-white ${className}`}
|
|
7
|
+
className={`bg-white w-full ${className}`}
|
|
8
8
|
style={{
|
|
9
|
-
|
|
10
|
-
height: '476px',
|
|
9
|
+
minHeight: '476px',
|
|
11
10
|
borderRadius: '14px',
|
|
12
11
|
border: '1px solid #C4C4C4',
|
|
13
|
-
opacity: 1
|
|
12
|
+
opacity: 1,
|
|
13
|
+
display: 'flex',
|
|
14
|
+
flexDirection: 'column'
|
|
14
15
|
}}
|
|
15
16
|
{...props}
|
|
16
17
|
>
|
|
@@ -31,13 +32,12 @@ export const CardSkeleton = ({
|
|
|
31
32
|
{/* Header skeleton - placeholder para el título */}
|
|
32
33
|
<div
|
|
33
34
|
style={{
|
|
34
|
-
width: '379.5px',
|
|
35
|
-
height: '60px',
|
|
36
35
|
paddingTop: '24px',
|
|
37
36
|
paddingRight: '24px',
|
|
38
37
|
paddingBottom: '6px',
|
|
39
38
|
paddingLeft: '24px',
|
|
40
|
-
opacity: 1
|
|
39
|
+
opacity: 1,
|
|
40
|
+
flexShrink: 0
|
|
41
41
|
}}
|
|
42
42
|
>
|
|
43
43
|
<div
|
|
@@ -8,32 +8,32 @@ export const CardTituloCorto = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
return (
|
|
10
10
|
<div
|
|
11
|
-
className={`bg-white ${className}`}
|
|
11
|
+
className={`bg-white w-full ${className}`}
|
|
12
12
|
style={{
|
|
13
|
-
|
|
14
|
-
height: '476px',
|
|
13
|
+
minHeight: '476px',
|
|
15
14
|
borderRadius: '14px',
|
|
16
15
|
border: '1px solid #C4C4C4',
|
|
17
|
-
opacity: 1
|
|
16
|
+
opacity: 1,
|
|
17
|
+
display: 'flex',
|
|
18
|
+
flexDirection: 'column'
|
|
18
19
|
}}
|
|
19
20
|
{...props}
|
|
20
21
|
>
|
|
21
22
|
<div
|
|
22
23
|
style={{
|
|
23
|
-
width: '379.5px',
|
|
24
|
-
height: '60px',
|
|
25
24
|
paddingTop: '24px',
|
|
26
25
|
paddingRight: '24px',
|
|
27
26
|
paddingBottom: '6px',
|
|
28
27
|
paddingLeft: '24px',
|
|
29
|
-
opacity: 1
|
|
28
|
+
opacity: 1,
|
|
29
|
+
flexShrink: 0
|
|
30
30
|
}}
|
|
31
31
|
className="flex items-start justify-between"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
34
|
style={{
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
flex: 1,
|
|
36
|
+
minWidth: 0,
|
|
37
37
|
opacity: 1
|
|
38
38
|
}}
|
|
39
39
|
>
|
|
@@ -58,14 +58,16 @@ export const CardTituloCorto = ({
|
|
|
58
58
|
{children && (
|
|
59
59
|
<div
|
|
60
60
|
style={{
|
|
61
|
-
|
|
62
|
-
height: '416px',
|
|
61
|
+
flex: 1,
|
|
63
62
|
paddingRight: '24px',
|
|
64
63
|
paddingLeft: '24px',
|
|
64
|
+
paddingBottom: '24px',
|
|
65
65
|
gap: '16px',
|
|
66
66
|
opacity: 1,
|
|
67
67
|
display: 'flex',
|
|
68
|
-
flexDirection: 'column'
|
|
68
|
+
flexDirection: 'column',
|
|
69
|
+
minHeight: 0,
|
|
70
|
+
overflow: 'auto'
|
|
69
71
|
}}
|
|
70
72
|
>
|
|
71
73
|
{children}
|
|
@@ -9,32 +9,32 @@ export const CardTituloCortoMasEstado = ({
|
|
|
9
9
|
}) => {
|
|
10
10
|
return (
|
|
11
11
|
<div
|
|
12
|
-
className={`bg-white ${className}`}
|
|
12
|
+
className={`bg-white w-full ${className}`}
|
|
13
13
|
style={{
|
|
14
|
-
|
|
15
|
-
height: '476px',
|
|
14
|
+
minHeight: '476px',
|
|
16
15
|
borderRadius: '14px',
|
|
17
16
|
border: '1px solid #C4C4C4',
|
|
18
|
-
opacity: 1
|
|
17
|
+
opacity: 1,
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column'
|
|
19
20
|
}}
|
|
20
21
|
{...props}
|
|
21
22
|
>
|
|
22
23
|
<div
|
|
23
24
|
style={{
|
|
24
|
-
width: '379.5px',
|
|
25
|
-
height: '60px',
|
|
26
25
|
paddingTop: '24px',
|
|
27
26
|
paddingRight: '24px',
|
|
28
27
|
paddingBottom: '6px',
|
|
29
28
|
paddingLeft: '24px',
|
|
30
|
-
opacity: 1
|
|
29
|
+
opacity: 1,
|
|
30
|
+
flexShrink: 0
|
|
31
31
|
}}
|
|
32
32
|
className="flex items-start justify-between"
|
|
33
33
|
>
|
|
34
34
|
<div
|
|
35
35
|
style={{
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
flex: 1,
|
|
37
|
+
minWidth: 0,
|
|
38
38
|
opacity: 1
|
|
39
39
|
}}
|
|
40
40
|
>
|
|
@@ -58,7 +58,7 @@ export const CardTituloCortoMasEstado = ({
|
|
|
58
58
|
<span
|
|
59
59
|
className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
|
|
60
60
|
style={{
|
|
61
|
-
|
|
61
|
+
minWidth: '90px',
|
|
62
62
|
height: '24px',
|
|
63
63
|
borderRadius: '12px',
|
|
64
64
|
paddingTop: '2px',
|
|
@@ -76,14 +76,16 @@ export const CardTituloCortoMasEstado = ({
|
|
|
76
76
|
{children && (
|
|
77
77
|
<div
|
|
78
78
|
style={{
|
|
79
|
-
|
|
80
|
-
height: '416px',
|
|
79
|
+
flex: 1,
|
|
81
80
|
paddingRight: '24px',
|
|
82
81
|
paddingLeft: '24px',
|
|
82
|
+
paddingBottom: '24px',
|
|
83
83
|
gap: '16px',
|
|
84
84
|
opacity: 1,
|
|
85
85
|
display: 'flex',
|
|
86
|
-
flexDirection: 'column'
|
|
86
|
+
flexDirection: 'column',
|
|
87
|
+
minHeight: 0,
|
|
88
|
+
overflow: 'auto'
|
|
87
89
|
}}
|
|
88
90
|
>
|
|
89
91
|
{children}
|
|
@@ -8,32 +8,32 @@ export const CardTituloLargo = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
return (
|
|
10
10
|
<div
|
|
11
|
-
className={`bg-white ${className}`}
|
|
11
|
+
className={`bg-white w-full ${className}`}
|
|
12
12
|
style={{
|
|
13
|
-
|
|
14
|
-
height: '476px',
|
|
13
|
+
minHeight: '476px',
|
|
15
14
|
borderRadius: '14px',
|
|
16
15
|
border: '1px solid #C4C4C4',
|
|
17
|
-
opacity: 1
|
|
16
|
+
opacity: 1,
|
|
17
|
+
display: 'flex',
|
|
18
|
+
flexDirection: 'column'
|
|
18
19
|
}}
|
|
19
20
|
{...props}
|
|
20
21
|
>
|
|
21
22
|
<div
|
|
22
23
|
style={{
|
|
23
|
-
width: '379.5px',
|
|
24
|
-
height: '60px',
|
|
25
24
|
paddingTop: '24px',
|
|
26
25
|
paddingRight: '24px',
|
|
27
26
|
paddingBottom: '6px',
|
|
28
27
|
paddingLeft: '24px',
|
|
29
|
-
opacity: 1
|
|
28
|
+
opacity: 1,
|
|
29
|
+
flexShrink: 0
|
|
30
30
|
}}
|
|
31
31
|
className="flex items-start justify-between"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
34
|
style={{
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
flex: 1,
|
|
36
|
+
minWidth: 0,
|
|
37
37
|
opacity: 1
|
|
38
38
|
}}
|
|
39
39
|
>
|
|
@@ -58,14 +58,16 @@ export const CardTituloLargo = ({
|
|
|
58
58
|
{children && (
|
|
59
59
|
<div
|
|
60
60
|
style={{
|
|
61
|
-
|
|
62
|
-
height: '416px',
|
|
61
|
+
flex: 1,
|
|
63
62
|
paddingRight: '24px',
|
|
64
63
|
paddingLeft: '24px',
|
|
64
|
+
paddingBottom: '24px',
|
|
65
65
|
gap: '16px',
|
|
66
66
|
opacity: 1,
|
|
67
67
|
display: 'flex',
|
|
68
|
-
flexDirection: 'column'
|
|
68
|
+
flexDirection: 'column',
|
|
69
|
+
minHeight: 0,
|
|
70
|
+
overflow: 'auto'
|
|
69
71
|
}}
|
|
70
72
|
>
|
|
71
73
|
{children}
|
|
@@ -9,32 +9,32 @@ export const CardTituloLargoMasEstado = ({
|
|
|
9
9
|
}) => {
|
|
10
10
|
return (
|
|
11
11
|
<div
|
|
12
|
-
className={`bg-white ${className}`}
|
|
12
|
+
className={`bg-white w-full ${className}`}
|
|
13
13
|
style={{
|
|
14
|
-
|
|
15
|
-
height: '476px',
|
|
14
|
+
minHeight: '476px',
|
|
16
15
|
borderRadius: '14px',
|
|
17
16
|
border: '1px solid #C4C4C4',
|
|
18
|
-
opacity: 1
|
|
17
|
+
opacity: 1,
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column'
|
|
19
20
|
}}
|
|
20
21
|
{...props}
|
|
21
22
|
>
|
|
22
23
|
<div
|
|
23
24
|
style={{
|
|
24
|
-
width: '379.5px',
|
|
25
|
-
height: '90px',
|
|
26
25
|
paddingTop: '24px',
|
|
27
26
|
paddingRight: '24px',
|
|
28
27
|
paddingBottom: '6px',
|
|
29
28
|
paddingLeft: '24px',
|
|
30
|
-
opacity: 1
|
|
29
|
+
opacity: 1,
|
|
30
|
+
flexShrink: 0
|
|
31
31
|
}}
|
|
32
32
|
className="flex items-start justify-between"
|
|
33
33
|
>
|
|
34
34
|
<div
|
|
35
35
|
style={{
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
flex: 1,
|
|
37
|
+
minWidth: 0,
|
|
38
38
|
opacity: 1
|
|
39
39
|
}}
|
|
40
40
|
>
|
|
@@ -58,7 +58,7 @@ export const CardTituloLargoMasEstado = ({
|
|
|
58
58
|
<span
|
|
59
59
|
className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
|
|
60
60
|
style={{
|
|
61
|
-
|
|
61
|
+
minWidth: '90px',
|
|
62
62
|
height: '24px',
|
|
63
63
|
borderRadius: '12px',
|
|
64
64
|
paddingTop: '2px',
|
|
@@ -76,14 +76,16 @@ export const CardTituloLargoMasEstado = ({
|
|
|
76
76
|
{children && (
|
|
77
77
|
<div
|
|
78
78
|
style={{
|
|
79
|
-
|
|
80
|
-
height: '416px',
|
|
79
|
+
flex: 1,
|
|
81
80
|
paddingRight: '24px',
|
|
82
81
|
paddingLeft: '24px',
|
|
82
|
+
paddingBottom: '24px',
|
|
83
83
|
gap: '16px',
|
|
84
84
|
opacity: 1,
|
|
85
85
|
display: 'flex',
|
|
86
|
-
flexDirection: 'column'
|
|
86
|
+
flexDirection: 'column',
|
|
87
|
+
minHeight: 0,
|
|
88
|
+
overflow: 'auto'
|
|
87
89
|
}}
|
|
88
90
|
>
|
|
89
91
|
{children}
|
|
@@ -8,32 +8,32 @@ export const CardVacia = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
return (
|
|
10
10
|
<div
|
|
11
|
-
className={`bg-white ${className}`}
|
|
11
|
+
className={`bg-white w-full ${className}`}
|
|
12
12
|
style={{
|
|
13
|
-
|
|
14
|
-
height: '476px',
|
|
13
|
+
minHeight: '476px',
|
|
15
14
|
borderRadius: '14px',
|
|
16
15
|
border: '1px solid #C4C4C4',
|
|
17
|
-
opacity: 1
|
|
16
|
+
opacity: 1,
|
|
17
|
+
display: 'flex',
|
|
18
|
+
flexDirection: 'column'
|
|
18
19
|
}}
|
|
19
20
|
{...props}
|
|
20
21
|
>
|
|
21
22
|
<div
|
|
22
23
|
style={{
|
|
23
|
-
width: '379.5px',
|
|
24
|
-
height: '60px',
|
|
25
24
|
paddingTop: '24px',
|
|
26
25
|
paddingRight: '24px',
|
|
27
26
|
paddingBottom: '6px',
|
|
28
27
|
paddingLeft: '24px',
|
|
29
|
-
opacity: 1
|
|
28
|
+
opacity: 1,
|
|
29
|
+
flexShrink: 0
|
|
30
30
|
}}
|
|
31
31
|
className="flex items-start justify-between"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
34
|
style={{
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
flex: 1,
|
|
36
|
+
minWidth: 0,
|
|
37
37
|
opacity: 1
|
|
38
38
|
}}
|
|
39
39
|
>
|
|
@@ -46,18 +46,21 @@ export const CardVacia = ({
|
|
|
46
46
|
</div>
|
|
47
47
|
</div>
|
|
48
48
|
<div
|
|
49
|
-
className="flex flex-col items-center justify-center"
|
|
49
|
+
className="flex flex-col items-center justify-center flex-1"
|
|
50
50
|
style={{
|
|
51
51
|
paddingTop: '80px',
|
|
52
52
|
paddingBottom: '24px',
|
|
53
|
+
paddingLeft: '24px',
|
|
54
|
+
paddingRight: '24px',
|
|
53
55
|
display: 'flex',
|
|
54
|
-
justifyContent: 'flex-start'
|
|
56
|
+
justifyContent: 'flex-start',
|
|
57
|
+
minHeight: 0
|
|
55
58
|
}}
|
|
56
59
|
>
|
|
57
60
|
<div
|
|
58
|
-
className="mb-4 flex items-center justify-center"
|
|
61
|
+
className="mb-4 flex items-center justify-center flex-shrink-0"
|
|
59
62
|
style={{
|
|
60
|
-
width: '
|
|
63
|
+
width: '64px',
|
|
61
64
|
height: '64px',
|
|
62
65
|
borderRadius: '12px',
|
|
63
66
|
paddingTop: '8px',
|
|
@@ -128,6 +128,8 @@ export const ForgotPassword = ({
|
|
|
128
128
|
<div
|
|
129
129
|
className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
|
|
130
130
|
style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
|
|
131
|
+
data-variant={isHexaLogin ? 'hexa-login' : undefined}
|
|
132
|
+
data-layout={layout}
|
|
131
133
|
{...props}
|
|
132
134
|
>
|
|
133
135
|
<div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
|
|
@@ -77,7 +77,7 @@ export const LoginForm = ({
|
|
|
77
77
|
|
|
78
78
|
return (
|
|
79
79
|
isHexaLogin ? (
|
|
80
|
-
<div className={`anima-loginform__container ${className}`} {...props}>
|
|
80
|
+
<div className={`anima-loginform__container ${className}`} data-variant="hexa-login" {...props}>
|
|
81
81
|
<div className="anima-loginform__card">
|
|
82
82
|
<form onSubmit={handleSubmit}>
|
|
83
83
|
{/* 1) Email */}
|
|
@@ -63,6 +63,8 @@ export const NewPassword = ({
|
|
|
63
63
|
<div
|
|
64
64
|
className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
|
|
65
65
|
style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
|
|
66
|
+
data-variant={isHexaLogin ? 'hexa-login' : undefined}
|
|
67
|
+
data-layout={layout}
|
|
66
68
|
{...props}
|
|
67
69
|
>
|
|
68
70
|
<div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
|
|
@@ -157,6 +159,8 @@ export const NewPassword = ({
|
|
|
157
159
|
<div
|
|
158
160
|
className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
|
|
159
161
|
style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
|
|
162
|
+
data-variant={isHexaLogin ? 'hexa-login' : undefined}
|
|
163
|
+
data-layout={layout}
|
|
160
164
|
{...props}
|
|
161
165
|
>
|
|
162
166
|
<div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
|
package/src/style.css
CHANGED
|
@@ -847,10 +847,59 @@
|
|
|
847
847
|
background: none;
|
|
848
848
|
border: none;
|
|
849
849
|
cursor: pointer;
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
/* ============================================
|
|
853
|
+
ESTILOS PERSONALIZADOS PARA VARIANTE HEXA-LOGIN
|
|
854
|
+
============================================ */
|
|
855
|
+
|
|
856
|
+
/* 1. Tipografía IBM Plex Sans en LoginForm (variante hexa-login) */
|
|
857
|
+
.anima-loginform__container[data-variant="hexa-login"],
|
|
858
|
+
.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__card,
|
|
859
|
+
.anima-loginform__container[data-variant="hexa-login"] p,
|
|
860
|
+
.anima-loginform__container[data-variant="hexa-login"] span,
|
|
861
|
+
.anima-loginform__container[data-variant="hexa-login"] label,
|
|
862
|
+
.anima-loginform__container[data-variant="hexa-login"] button {
|
|
863
|
+
font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !important;
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
/* 2. Tamaño fijo de iconos en botones sociales de LoginForm (variante hexa-login) */
|
|
867
|
+
.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__socialButton svg {
|
|
868
|
+
width: var(--anima-hexa-login-social-icon-size, 18px) !important;
|
|
869
|
+
height: var(--anima-hexa-login-social-icon-size, 18px) !important;
|
|
870
|
+
min-width: var(--anima-hexa-login-social-icon-size, 18px) !important;
|
|
871
|
+
min-height: var(--anima-hexa-login-social-icon-size, 18px) !important;
|
|
872
|
+
max-width: var(--anima-hexa-login-social-icon-size, 18px) !important;
|
|
873
|
+
max-height: var(--anima-hexa-login-social-icon-size, 18px) !important;
|
|
874
|
+
flex-shrink: 0;
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
/* 3. Tipografía IBM Plex Sans en NewPassword y ForgotPassword (variante hexa-login) - títulos y subtítulos */
|
|
878
|
+
[data-variant="hexa-login"] div[class*="mb-8"] h3,
|
|
879
|
+
[data-variant="hexa-login"] div[class*="mb-8"] p,
|
|
880
|
+
[data-variant="hexa-login"] div[class*="text-center"] h3,
|
|
881
|
+
[data-variant="hexa-login"] div[class*="text-center"] p {
|
|
882
|
+
font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !important;
|
|
883
|
+
}
|
|
884
|
+
|
|
885
|
+
/* ============================================
|
|
886
|
+
ESTILOS PERSONALIZADOS PARA VARIANTE LOGIN EN HEADER
|
|
887
|
+
============================================ */
|
|
888
|
+
|
|
889
|
+
/* 4. Responsive: Ocultar icono de idioma en HeaderGeneral (variante login) */
|
|
890
|
+
@media (max-width: var(--anima-login-header-mobile-breakpoint, 768px)) {
|
|
891
|
+
/* Ocultar el icono LanguageIcon en el header de login */
|
|
892
|
+
/* El icono es el primer hijo del contenedor flex dentro del div.relative del selector de idioma */
|
|
893
|
+
header[data-variant="login"] .relative > .flex.items-center > *:first-child:not(button),
|
|
894
|
+
header[data-variant="login"] .relative > div.flex.items-center > *:first-child:not(button) {
|
|
895
|
+
display: none !important;
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
/* Ajustar el contenedor del selector para que no tenga gap cuando el icono desaparece */
|
|
899
|
+
header[data-variant="login"] .relative > .flex.items-center,
|
|
900
|
+
header[data-variant="login"] .relative > div.flex.items-center {
|
|
901
|
+
gap: 0 !important;
|
|
902
|
+
}
|
|
854
903
|
}
|
|
855
904
|
|
|
856
905
|
.anima-passwordfield__toggle:hover {
|