@inglorious/ui 7.0.0 → 7.1.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/README.md +32 -0
- package/package.json +6 -6
- 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.0",
|
|
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",
|
|
@@ -302,8 +302,8 @@
|
|
|
302
302
|
"peerDependencies": {
|
|
303
303
|
"@inglorious/charts": "10.0.0",
|
|
304
304
|
"@inglorious/store": "11.0.0",
|
|
305
|
-
"@inglorious/
|
|
306
|
-
"@inglorious/
|
|
305
|
+
"@inglorious/utils": "3.8.0",
|
|
306
|
+
"@inglorious/web": "6.4.0"
|
|
307
307
|
},
|
|
308
308
|
"devDependencies": {
|
|
309
309
|
"@fontsource/material-symbols-outlined": "^5.2.36",
|
|
@@ -318,10 +318,10 @@
|
|
|
318
318
|
"vite": "^7.3.1",
|
|
319
319
|
"vitest": "^4.0.15",
|
|
320
320
|
"@inglorious/eslint-config": "1.1.2",
|
|
321
|
-
"@inglorious/web": "6.4.0",
|
|
322
|
-
"@inglorious/vite-plugin-vue": "1.0.1",
|
|
323
321
|
"@inglorious/vite-plugin-jsx": "2.0.0",
|
|
324
|
-
"@inglorious/store": "11.0.0"
|
|
322
|
+
"@inglorious/store": "11.0.0",
|
|
323
|
+
"@inglorious/vite-plugin-vue": "1.0.1",
|
|
324
|
+
"@inglorious/web": "6.4.0"
|
|
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
|
+
}
|