@inglorious/ui 7.0.0 → 7.1.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/README.md +32 -0
- package/package.json +11 -11
- package/src/styles/base.css +1 -0
- package/src/styles/safe-area.css +22 -0
package/README.md
CHANGED
|
@@ -43,3 +43,35 @@ The public CSS exports are:
|
|
|
43
43
|
- `@inglorious/ui/themes/material.css`
|
|
44
44
|
- `@inglorious/ui/themes/bootstrap.css`
|
|
45
45
|
- `@inglorious/ui/all.css`
|
|
46
|
+
|
|
47
|
+
## Safe-area utilities
|
|
48
|
+
|
|
49
|
+
The base styles also expose CSS variables and utility classes for iPhone notch and home-indicator safe areas.
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
:root {
|
|
53
|
+
--safe-area-top: env(safe-area-inset-top, 0px);
|
|
54
|
+
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
55
|
+
--safe-area-left: env(safe-area-inset-left, 0px);
|
|
56
|
+
--safe-area-right: env(safe-area-inset-right, 0px);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
The following utility classes are available:
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
.pt-safe {
|
|
64
|
+
padding-top: var(--safe-area-top);
|
|
65
|
+
}
|
|
66
|
+
.pb-safe {
|
|
67
|
+
padding-bottom: var(--safe-area-bottom);
|
|
68
|
+
}
|
|
69
|
+
.pl-safe {
|
|
70
|
+
padding-left: var(--safe-area-left);
|
|
71
|
+
}
|
|
72
|
+
.pr-safe {
|
|
73
|
+
padding-right: var(--safe-area-right);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
These are useful for mobile layouts that need to respect notches, rounded corners, and the home indicator. They are intentionally generic utilities so apps can opt into them without having to define custom safe-area values repeatedly.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inglorious/ui",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.1",
|
|
4
4
|
"description": "A design system for Inglorious Web with render-function components and customizable themes",
|
|
5
5
|
"author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -300,14 +300,19 @@
|
|
|
300
300
|
"**/*.css"
|
|
301
301
|
],
|
|
302
302
|
"peerDependencies": {
|
|
303
|
-
"@inglorious/charts": "10.0.
|
|
304
|
-
"@inglorious/store": "11.0.
|
|
305
|
-
"@inglorious/
|
|
306
|
-
"@inglorious/
|
|
303
|
+
"@inglorious/charts": "10.0.1",
|
|
304
|
+
"@inglorious/store": "11.0.1",
|
|
305
|
+
"@inglorious/utils": "3.8.0",
|
|
306
|
+
"@inglorious/web": "6.4.1"
|
|
307
307
|
},
|
|
308
308
|
"devDependencies": {
|
|
309
309
|
"@fontsource/material-symbols-outlined": "^5.2.36",
|
|
310
310
|
"@fortawesome/fontawesome-free": "^7.2.0",
|
|
311
|
+
"@inglorious/eslint-config": "1.1.2",
|
|
312
|
+
"@inglorious/vite-plugin-jsx": "2.0.1",
|
|
313
|
+
"@inglorious/vite-plugin-vue": "1.0.2",
|
|
314
|
+
"@inglorious/store": "11.0.1",
|
|
315
|
+
"@inglorious/web": "6.4.1",
|
|
311
316
|
"@storybook/addon-docs": "^10.5.6",
|
|
312
317
|
"@storybook/web-components-vite": "^10.5.6",
|
|
313
318
|
"happy-dom": "^15.11.0",
|
|
@@ -316,12 +321,7 @@
|
|
|
316
321
|
"prettier": "^3.6.2",
|
|
317
322
|
"storybook": "^10.5.6",
|
|
318
323
|
"vite": "^7.3.1",
|
|
319
|
-
"vitest": "^4.0.15"
|
|
320
|
-
"@inglorious/eslint-config": "1.1.2",
|
|
321
|
-
"@inglorious/web": "6.4.0",
|
|
322
|
-
"@inglorious/vite-plugin-vue": "1.0.1",
|
|
323
|
-
"@inglorious/vite-plugin-jsx": "2.0.0",
|
|
324
|
-
"@inglorious/store": "11.0.0"
|
|
324
|
+
"vitest": "^4.0.15"
|
|
325
325
|
},
|
|
326
326
|
"engines": {
|
|
327
327
|
"node": ">= 22"
|
package/src/styles/base.css
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--safe-area-top: env(safe-area-inset-top, 0px);
|
|
3
|
+
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
4
|
+
--safe-area-left: env(safe-area-inset-left, 0px);
|
|
5
|
+
--safe-area-right: env(safe-area-inset-right, 0px);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.pt-safe {
|
|
9
|
+
padding-top: var(--safe-area-top);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.pb-safe {
|
|
13
|
+
padding-bottom: var(--safe-area-bottom);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.pl-safe {
|
|
17
|
+
padding-left: var(--safe-area-left);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.pr-safe {
|
|
21
|
+
padding-right: var(--safe-area-right);
|
|
22
|
+
}
|