innoboxrr-form-core 2.1.0 → 2.3.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 +115 -0
- package/src/icons.js +11 -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
|
============================================================ */
|
|
@@ -443,6 +535,29 @@
|
|
|
443
535
|
box-shadow: var(--fe-shadow);
|
|
444
536
|
}
|
|
445
537
|
|
|
538
|
+
/*
|
|
539
|
+
* Un menú que vive en la capa superior del navegador, con el atributo
|
|
540
|
+
* `popover`. El navegador ya se encarga de abrirlo, cerrarlo al pulsar fuera,
|
|
541
|
+
* cerrarlo con Escape y sacarlo por encima de todo; aquí solo hay que quitarle
|
|
542
|
+
* los estilos que trae de fábrica para que Floating UI pueda colocarlo.
|
|
543
|
+
*/
|
|
544
|
+
.fe-menu[popover] {
|
|
545
|
+
position: fixed;
|
|
546
|
+
inset: auto;
|
|
547
|
+
margin: 0;
|
|
548
|
+
overflow: visible;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.fe-menu[popover]:popover-open {
|
|
552
|
+
animation: fe-fade-in 120ms ease;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.fe-menu-list {
|
|
556
|
+
list-style: none;
|
|
557
|
+
margin: 0;
|
|
558
|
+
padding: 0;
|
|
559
|
+
}
|
|
560
|
+
|
|
446
561
|
.fe-menu-item {
|
|
447
562
|
display: flex;
|
|
448
563
|
align-items: center;
|
package/src/icons.js
CHANGED
|
@@ -64,6 +64,17 @@ export const defaultIcons = {
|
|
|
64
64
|
users: 'fa6-solid:users',
|
|
65
65
|
gift: 'fa6-solid:gift',
|
|
66
66
|
file: 'fa6-solid:file',
|
|
67
|
+
media: 'fa6-solid:photo-film',
|
|
68
|
+
|
|
69
|
+
// EDICION
|
|
70
|
+
save: 'fa6-solid:floppy-disk',
|
|
71
|
+
copy: 'fa6-solid:clone',
|
|
72
|
+
drag: 'fa6-solid:grip-vertical',
|
|
73
|
+
|
|
74
|
+
// GRABACION
|
|
75
|
+
record: 'fa6-solid:microphone',
|
|
76
|
+
pause: 'fa6-solid:pause',
|
|
77
|
+
play: 'fa6-solid:play',
|
|
67
78
|
}
|
|
68
79
|
|
|
69
80
|
/** @type {IconMap} */
|