@zkpassport/ui 0.14.2 → 0.15.0-alpha.1
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/cjs/index.cjs +16 -12
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/react.cjs +16 -12
- package/dist/cjs/react.cjs.map +1 -1
- package/dist/esm/index.js +16 -12
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react.js +16 -12
- package/dist/esm/react.js.map +1 -1
- package/dist/styles.css +14 -10
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
--zkp-brand: #2139a3;
|
|
10
10
|
--zkp-success: #16a34a;
|
|
11
11
|
--zkp-error: #dc2626;
|
|
12
|
+
--zkp-qr-padding: 0px;
|
|
12
13
|
|
|
13
14
|
all: revert;
|
|
14
15
|
position: relative;
|
|
@@ -38,6 +39,7 @@
|
|
|
38
39
|
--zkp-brand: #6b86d8;
|
|
39
40
|
--zkp-success: #4ade80;
|
|
40
41
|
--zkp-error: #f87171;
|
|
42
|
+
--zkp-qr-padding: 12px;
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
@media (prefers-color-scheme: dark) {
|
|
@@ -93,14 +95,14 @@
|
|
|
93
95
|
.zkp-app-icon-slot {
|
|
94
96
|
max-width: 96px;
|
|
95
97
|
min-width: 32px;
|
|
98
|
+
overflow: hidden;
|
|
96
99
|
}
|
|
97
100
|
.zkp-app-icon {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
width: auto;
|
|
101
|
-
|
|
102
|
-
object-fit: contain;
|
|
103
|
-
display: block;
|
|
101
|
+
display: block !important;
|
|
102
|
+
height: 32px !important;
|
|
103
|
+
width: auto !important;
|
|
104
|
+
max-width: 96px !important;
|
|
105
|
+
object-fit: contain !important;
|
|
104
106
|
}
|
|
105
107
|
.zkp-header-dots {
|
|
106
108
|
display: flex;
|
|
@@ -167,21 +169,23 @@
|
|
|
167
169
|
margin: 10px 0 14px;
|
|
168
170
|
}
|
|
169
171
|
|
|
170
|
-
/* QR slot */
|
|
171
172
|
.zkp-qr-slot {
|
|
172
173
|
position: relative;
|
|
173
174
|
width: 100%;
|
|
174
175
|
aspect-ratio: 1;
|
|
175
176
|
margin: 16px 0 0;
|
|
176
|
-
background:
|
|
177
|
+
background: #ffffff;
|
|
177
178
|
display: grid;
|
|
178
179
|
place-items: center;
|
|
179
180
|
overflow: hidden;
|
|
181
|
+
border-radius: 8px;
|
|
180
182
|
}
|
|
181
183
|
.zkp-qr {
|
|
182
184
|
width: 100%;
|
|
183
185
|
height: 100%;
|
|
184
|
-
color:
|
|
186
|
+
color: #000000;
|
|
187
|
+
background: #ffffff;
|
|
188
|
+
padding: var(--zkp-qr-padding);
|
|
185
189
|
transition:
|
|
186
190
|
opacity 200ms ease,
|
|
187
191
|
transform 200ms ease;
|
|
@@ -198,7 +202,7 @@
|
|
|
198
202
|
transform: translate(-50%, -50%);
|
|
199
203
|
width: 14%;
|
|
200
204
|
aspect-ratio: 1;
|
|
201
|
-
background:
|
|
205
|
+
background: #ffffff;
|
|
202
206
|
padding: 3px;
|
|
203
207
|
border-radius: 50%;
|
|
204
208
|
display: grid;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zkpassport/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0-alpha.1",
|
|
4
4
|
"description": "Drop-in QR verification card for ZKPassport. Vanilla JS by default; React component available at @zkpassport/ui/react.",
|
|
5
5
|
"author": "ZKPassport",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"qrcode": "^1.5.4"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
|
-
"@zkpassport/sdk": "^0.
|
|
68
|
+
"@zkpassport/sdk": "^0.15.0-alpha.1",
|
|
69
69
|
"react": ">=18",
|
|
70
70
|
"react-dom": ">=18",
|
|
71
71
|
"typescript": "^5.0.0"
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"@types/qrcode": "^1.5.5",
|
|
83
83
|
"@types/react": "^18.3.0",
|
|
84
84
|
"@types/react-dom": "^18.3.0",
|
|
85
|
-
"@zkpassport/sdk": "0.
|
|
85
|
+
"@zkpassport/sdk": "0.15.0-alpha.1",
|
|
86
86
|
"preact": "^10.22.0",
|
|
87
87
|
"react": "^18.3.0",
|
|
88
88
|
"react-dom": "^18.3.0"
|