@zevra/ui 0.3.1 → 0.3.2
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/README.md +17 -0
- package/package.json +1 -1
- package/src/overlays.css +20 -4
package/README.md
CHANGED
|
@@ -143,6 +143,23 @@ maquettes, où la simplicité prime.
|
|
|
143
143
|
|
|
144
144
|
---
|
|
145
145
|
|
|
146
|
+
## Ouvrir un enrobage
|
|
147
|
+
|
|
148
|
+
Tiroir et modale s'ouvrent par un état porté sur le conteneur. Deux écritures
|
|
149
|
+
équivalentes, selon le gabarit :
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
<div class="zv-drawer" data-open> <!-- HTML, Astro -->
|
|
153
|
+
<div class="zv-drawer zv-drawer--open"> <!-- React, Vue -->
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
⚠️ En React, **ne pas écrire `data-open={ouvert}`** : il rend
|
|
157
|
+
`data-open="false"`, que le sélecteur d'attribut considère comme présent — le
|
|
158
|
+
panneau resterait ouvert. C'est précisément pour cela que la variante en
|
|
159
|
+
classe existe.
|
|
160
|
+
|
|
161
|
+
Fermer sur Échap relève du gabarit : le CSS ne sait pas le faire.
|
|
162
|
+
|
|
146
163
|
## Les règles qui ne se négocient pas
|
|
147
164
|
|
|
148
165
|
Elles viennent de la passation. Les ignorer produit du « presque Zevra », qui
|
package/package.json
CHANGED
package/src/overlays.css
CHANGED
|
@@ -14,6 +14,18 @@
|
|
|
14
14
|
*
|
|
15
15
|
* Empilement, dans l'ordre : voile 60, tiroir 80, modale 90, notification 100.
|
|
16
16
|
* Les couches inférieures (2, 5, 40, 50) sont dans layout.css.
|
|
17
|
+
*
|
|
18
|
+
* OUVERTURE — deux écritures équivalentes, au choix du gabarit :
|
|
19
|
+
*
|
|
20
|
+
* <div class="zv-drawer" data-open> en HTML, en Astro
|
|
21
|
+
* <div class="zv-drawer zv-drawer--open"> en React, en Vue
|
|
22
|
+
*
|
|
23
|
+
* La seconde existe parce que la première est pénible à écrire en JSX : un
|
|
24
|
+
* attribut booléen y demande `{...(ouvert ? {'data-open': ''} : {})}`, là où
|
|
25
|
+
* une classe conditionnelle est le geste habituel. Ne PAS employer
|
|
26
|
+
* `data-open={ouvert}` en React : il rend `data-open="false"`, que le
|
|
27
|
+
* sélecteur d'attribut considère comme présent — le panneau resterait
|
|
28
|
+
* ouvert.
|
|
17
29
|
*/
|
|
18
30
|
|
|
19
31
|
/* ─── Voile ─────────────────────────────────────────────────────────────
|
|
@@ -44,7 +56,8 @@
|
|
|
44
56
|
transition: visibility 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
45
57
|
}
|
|
46
58
|
|
|
47
|
-
.zv-drawer[data-open]
|
|
59
|
+
.zv-drawer[data-open],
|
|
60
|
+
.zv-drawer--open {
|
|
48
61
|
visibility: visible;
|
|
49
62
|
}
|
|
50
63
|
|
|
@@ -61,7 +74,8 @@
|
|
|
61
74
|
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
62
75
|
}
|
|
63
76
|
|
|
64
|
-
.zv-drawer[data-open] .zv-scrim
|
|
77
|
+
.zv-drawer[data-open] .zv-scrim,
|
|
78
|
+
.zv-drawer--open .zv-scrim {
|
|
65
79
|
opacity: 1;
|
|
66
80
|
}
|
|
67
81
|
|
|
@@ -92,7 +106,8 @@
|
|
|
92
106
|
transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
93
107
|
}
|
|
94
108
|
|
|
95
|
-
.zv-drawer[data-open] .zv-drawer__panel
|
|
109
|
+
.zv-drawer[data-open] .zv-drawer__panel,
|
|
110
|
+
.zv-drawer--open .zv-drawer__panel {
|
|
96
111
|
transform: translateX(0);
|
|
97
112
|
}
|
|
98
113
|
|
|
@@ -151,7 +166,8 @@
|
|
|
151
166
|
padding: 16px;
|
|
152
167
|
}
|
|
153
168
|
|
|
154
|
-
.zv-modal[data-open]
|
|
169
|
+
.zv-modal[data-open],
|
|
170
|
+
.zv-modal--open {
|
|
155
171
|
display: flex;
|
|
156
172
|
}
|
|
157
173
|
|