innoboxrr-form-core 2.1.0 → 2.2.0
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/package.json +1 -1
- package/src/components.css +92 -0
package/package.json
CHANGED
package/src/components.css
CHANGED
|
@@ -72,6 +72,98 @@
|
|
|
72
72
|
color: var(--fe-danger);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
+
/* ============================================================
|
|
76
|
+
TOOLTIP
|
|
77
|
+
============================================================ */
|
|
78
|
+
|
|
79
|
+
/*
|
|
80
|
+
* Sin una linea de JavaScript.
|
|
81
|
+
*
|
|
82
|
+
* Los diez tooltips del ecosistema son texto plano —la ayuda de un campo,
|
|
83
|
+
* «This action is not authorized», «Buscar»—, asi que no hacen falta ni
|
|
84
|
+
* posicionamiento dinamico ni contenido rico. Antes los pintaba `uk-tooltip`,
|
|
85
|
+
* que es un componente de UIkit: para una cadena de ayuda arrastraba un
|
|
86
|
+
* framework entero.
|
|
87
|
+
*
|
|
88
|
+
* <span data-tooltip="Texto de ayuda">…</span>
|
|
89
|
+
* <span data-tooltip="Texto" data-tooltip-pos="right">…</span>
|
|
90
|
+
*
|
|
91
|
+
* Aparece con el raton y **tambien con el foco**, para que exista para quien
|
|
92
|
+
* navega con teclado. Un disparador que no sea enfocable de por si necesita
|
|
93
|
+
* `tabindex="0"`.
|
|
94
|
+
*
|
|
95
|
+
* Un lector de pantalla no anuncia el contenido de un `::after`: cuando el
|
|
96
|
+
* tooltip es la unica etiqueta —un icono suelto— hay que poner ademas un
|
|
97
|
+
* `aria-label` en el disparador. Es lo que hacen los componentes.
|
|
98
|
+
*/
|
|
99
|
+
|
|
100
|
+
[data-tooltip] {
|
|
101
|
+
position: relative;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
[data-tooltip]::after {
|
|
105
|
+
content: attr(data-tooltip);
|
|
106
|
+
position: absolute;
|
|
107
|
+
z-index: 60;
|
|
108
|
+
bottom: calc(100% + var(--fe-space-2));
|
|
109
|
+
left: 50%;
|
|
110
|
+
transform: translateX(-50%);
|
|
111
|
+
width: max-content;
|
|
112
|
+
max-width: 16rem;
|
|
113
|
+
padding: var(--fe-space-1) var(--fe-space-2);
|
|
114
|
+
font-family: var(--fe-font);
|
|
115
|
+
font-size: var(--fe-text-xs);
|
|
116
|
+
font-weight: 400;
|
|
117
|
+
line-height: 1.4;
|
|
118
|
+
white-space: normal;
|
|
119
|
+
text-align: left;
|
|
120
|
+
color: var(--fe-text-inverse);
|
|
121
|
+
background: var(--fe-text);
|
|
122
|
+
border-radius: var(--fe-radius-sm);
|
|
123
|
+
box-shadow: var(--fe-shadow);
|
|
124
|
+
opacity: 0;
|
|
125
|
+
visibility: hidden;
|
|
126
|
+
transition: opacity var(--fe-transition), visibility var(--fe-transition);
|
|
127
|
+
pointer-events: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
[data-tooltip]:hover::after,
|
|
131
|
+
[data-tooltip]:focus-visible::after {
|
|
132
|
+
opacity: 1;
|
|
133
|
+
visibility: visible;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Un tooltip vacio no debe dibujar una caja negra de dos pixeles. */
|
|
137
|
+
[data-tooltip='']::after {
|
|
138
|
+
content: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[data-tooltip-pos='right']::after {
|
|
142
|
+
bottom: auto;
|
|
143
|
+
top: 50%;
|
|
144
|
+
left: calc(100% + var(--fe-space-2));
|
|
145
|
+
transform: translateY(-50%);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
[data-tooltip-pos='left']::after {
|
|
149
|
+
bottom: auto;
|
|
150
|
+
top: 50%;
|
|
151
|
+
left: auto;
|
|
152
|
+
right: calc(100% + var(--fe-space-2));
|
|
153
|
+
transform: translateY(-50%);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
[data-tooltip-pos='bottom']::after {
|
|
157
|
+
bottom: auto;
|
|
158
|
+
top: calc(100% + var(--fe-space-2));
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@media (prefers-reduced-motion: reduce) {
|
|
162
|
+
[data-tooltip]::after {
|
|
163
|
+
transition: none;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
75
167
|
/* ============================================================
|
|
76
168
|
CONTROLES
|
|
77
169
|
============================================================ */
|