ywana-core8 0.1.94 → 0.1.95
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 +38 -6
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/html/textfield2.css +38 -6
- package/test-textfield2-icons.html +150 -0
package/package.json
CHANGED
package/src/html/textfield2.css
CHANGED
|
@@ -97,18 +97,27 @@
|
|
|
97
97
|
.textfield2-clear,
|
|
98
98
|
.textfield2-password-toggle {
|
|
99
99
|
position: absolute;
|
|
100
|
-
|
|
100
|
+
/* Centrado respecto al input, no al contenedor completo */
|
|
101
|
+
top: calc(1.5rem + 1.25rem); /* padding-top del contenedor + mitad de la altura del input */
|
|
101
102
|
transform: translateY(-50%);
|
|
102
103
|
right: 0.75rem; /* Más espacio desde el borde */
|
|
103
104
|
color: var(--text-color-light, #666);
|
|
104
105
|
cursor: pointer;
|
|
105
106
|
transition: color 0.2s ease;
|
|
106
107
|
z-index: 2;
|
|
108
|
+
/* Asegurar que el icono tenga el tamaño correcto */
|
|
109
|
+
width: 1.5rem;
|
|
110
|
+
height: 1.5rem;
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
justify-content: center;
|
|
107
114
|
}
|
|
108
115
|
|
|
109
116
|
/* Icons positioning for outlined variant */
|
|
110
117
|
.textfield2-outlined .textfield2-clear,
|
|
111
118
|
.textfield2-outlined .textfield2-password-toggle {
|
|
119
|
+
/* Para outlined, centramos respecto al input que tiene padding de 1rem */
|
|
120
|
+
top: 50%;
|
|
112
121
|
right: 0.75rem; /* Alineado con el padding del input */
|
|
113
122
|
}
|
|
114
123
|
|
|
@@ -117,10 +126,11 @@
|
|
|
117
126
|
color: var(--text-color, #333);
|
|
118
127
|
}
|
|
119
128
|
|
|
120
|
-
/* For fields without labels,
|
|
129
|
+
/* For fields without labels, ajustar posición */
|
|
121
130
|
.textfield2.no-label .textfield2-clear,
|
|
122
131
|
.textfield2.no-label .textfield2-password-toggle {
|
|
123
|
-
/*
|
|
132
|
+
/* Para campos sin label, centramos respecto al input directamente */
|
|
133
|
+
top: calc(0.5rem + 1.25rem); /* padding-top reducido + mitad altura input */
|
|
124
134
|
}
|
|
125
135
|
|
|
126
136
|
.textfield2-password-toggle {
|
|
@@ -375,21 +385,43 @@
|
|
|
375
385
|
.textfield2 {
|
|
376
386
|
padding-top: 1.25rem;
|
|
377
387
|
}
|
|
378
|
-
|
|
388
|
+
|
|
379
389
|
.textfield2 > input,
|
|
380
390
|
.textfield2 > textarea {
|
|
381
391
|
font-size: 0.9rem;
|
|
382
392
|
padding: 8px 8px 8px 0.4rem;
|
|
383
393
|
}
|
|
384
|
-
|
|
394
|
+
|
|
385
395
|
.textfield2 > label {
|
|
386
396
|
font-size: 0.8rem;
|
|
387
397
|
left: 0.3rem;
|
|
388
398
|
}
|
|
389
|
-
|
|
399
|
+
|
|
390
400
|
.textfield2-helper {
|
|
391
401
|
font-size: 0.7rem;
|
|
392
402
|
}
|
|
403
|
+
|
|
404
|
+
/* Ajustar posición de iconos en móvil */
|
|
405
|
+
.textfield2-clear,
|
|
406
|
+
.textfield2-password-toggle {
|
|
407
|
+
top: calc(1.25rem + 1.2rem); /* padding-top móvil + mitad altura input móvil */
|
|
408
|
+
right: 0.5rem;
|
|
409
|
+
width: 1.3rem;
|
|
410
|
+
height: 1.3rem;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.textfield2.no-label .textfield2-clear,
|
|
414
|
+
.textfield2.no-label .textfield2-password-toggle {
|
|
415
|
+
top: calc(0.5rem + 1.2rem); /* padding-top reducido + mitad altura input móvil */
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.textfield2-password-toggle {
|
|
419
|
+
right: 2.2rem;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.textfield2.textfield2-password .textfield2-clear {
|
|
423
|
+
right: 2.2rem;
|
|
424
|
+
}
|
|
393
425
|
}
|
|
394
426
|
|
|
395
427
|
/* High contrast mode support */
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="es">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Test TextField2 Icons Centering</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
8
|
+
<link rel="stylesheet" href="src/html/textfield2.css">
|
|
9
|
+
<link rel="stylesheet" href="src/html/icon.css">
|
|
10
|
+
<style>
|
|
11
|
+
body {
|
|
12
|
+
font-family: Arial, sans-serif;
|
|
13
|
+
padding: 2rem;
|
|
14
|
+
background: #f5f5f5;
|
|
15
|
+
}
|
|
16
|
+
.test-container {
|
|
17
|
+
max-width: 600px;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
background: white;
|
|
20
|
+
padding: 2rem;
|
|
21
|
+
border-radius: 8px;
|
|
22
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
23
|
+
}
|
|
24
|
+
.test-section {
|
|
25
|
+
margin-bottom: 2rem;
|
|
26
|
+
padding: 1rem;
|
|
27
|
+
border: 1px solid #e0e0e0;
|
|
28
|
+
border-radius: 4px;
|
|
29
|
+
}
|
|
30
|
+
.test-section h3 {
|
|
31
|
+
margin-top: 0;
|
|
32
|
+
color: #333;
|
|
33
|
+
}
|
|
34
|
+
.field-group {
|
|
35
|
+
margin-bottom: 1.5rem;
|
|
36
|
+
}
|
|
37
|
+
/* Variables CSS básicas */
|
|
38
|
+
:root {
|
|
39
|
+
--text-color: #333;
|
|
40
|
+
--text-color-light: #666;
|
|
41
|
+
--primary-color: #2196f3;
|
|
42
|
+
--error-color: #f44336;
|
|
43
|
+
--paper-color: #fff;
|
|
44
|
+
--divider-color: #e0e0e0;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<div class="test-container">
|
|
50
|
+
<h1>Test de Centrado de Iconos en TextField2</h1>
|
|
51
|
+
|
|
52
|
+
<div class="test-section">
|
|
53
|
+
<h3>1. TextField2 Normal con Label</h3>
|
|
54
|
+
<div class="field-group">
|
|
55
|
+
<div class="textfield2">
|
|
56
|
+
<input type="text" id="test1" value="Texto de prueba">
|
|
57
|
+
<i class="textfield2-clear material-icons">close</i>
|
|
58
|
+
<label for="test1">Campo de texto</label>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="test-section">
|
|
64
|
+
<h3>2. TextField2 Password con Toggle</h3>
|
|
65
|
+
<div class="field-group">
|
|
66
|
+
<div class="textfield2 textfield2-password">
|
|
67
|
+
<input type="password" id="test2" value="password123">
|
|
68
|
+
<i class="textfield2-clear material-icons">close</i>
|
|
69
|
+
<i class="textfield2-password-toggle material-icons">visibility</i>
|
|
70
|
+
<label for="test2">Contraseña</label>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div class="test-section">
|
|
76
|
+
<h3>3. TextField2 Sin Label</h3>
|
|
77
|
+
<div class="field-group">
|
|
78
|
+
<div class="textfield2 no-label">
|
|
79
|
+
<input type="text" id="test3" value="Sin etiqueta" placeholder="Placeholder text">
|
|
80
|
+
<i class="textfield2-clear material-icons">close</i>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="test-section">
|
|
86
|
+
<h3>4. TextField2 Outlined</h3>
|
|
87
|
+
<div class="field-group">
|
|
88
|
+
<div class="textfield2 textfield2-outlined">
|
|
89
|
+
<input type="text" id="test4" value="Texto outlined">
|
|
90
|
+
<i class="textfield2-clear material-icons">close</i>
|
|
91
|
+
<label for="test4">Campo outlined</label>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="test-section">
|
|
97
|
+
<h3>5. TextField2 Outlined Password</h3>
|
|
98
|
+
<div class="field-group">
|
|
99
|
+
<div class="textfield2 textfield2-outlined textfield2-password">
|
|
100
|
+
<input type="password" id="test5" value="password123">
|
|
101
|
+
<i class="textfield2-clear material-icons">close</i>
|
|
102
|
+
<i class="textfield2-password-toggle material-icons">visibility</i>
|
|
103
|
+
<label for="test5">Contraseña outlined</label>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="test-section">
|
|
109
|
+
<h3>6. TextArea2</h3>
|
|
110
|
+
<div class="field-group">
|
|
111
|
+
<div class="textfield2">
|
|
112
|
+
<textarea id="test6" rows="3">Texto en área de texto
|
|
113
|
+
Segunda línea
|
|
114
|
+
Tercera línea</textarea>
|
|
115
|
+
<i class="textfield2-clear material-icons">close</i>
|
|
116
|
+
<label for="test6">Área de texto</label>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<script>
|
|
123
|
+
// Simular funcionalidad de los iconos
|
|
124
|
+
document.querySelectorAll('.textfield2-clear').forEach(icon => {
|
|
125
|
+
icon.addEventListener('click', function() {
|
|
126
|
+
const input = this.parentElement.querySelector('input, textarea');
|
|
127
|
+
if (input) {
|
|
128
|
+
input.value = '';
|
|
129
|
+
input.focus();
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
document.querySelectorAll('.textfield2-password-toggle').forEach(icon => {
|
|
135
|
+
icon.addEventListener('click', function() {
|
|
136
|
+
const input = this.parentElement.querySelector('input');
|
|
137
|
+
if (input) {
|
|
138
|
+
if (input.type === 'password') {
|
|
139
|
+
input.type = 'text';
|
|
140
|
+
this.textContent = 'visibility_off';
|
|
141
|
+
} else {
|
|
142
|
+
input.type = 'password';
|
|
143
|
+
this.textContent = 'visibility';
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
});
|
|
148
|
+
</script>
|
|
149
|
+
</body>
|
|
150
|
+
</html>
|