inertiax-ui 0.0.2 → 0.0.4
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/Modal.svelte +4 -54
- package/README.md +18 -1
- package/dark.css +54 -0
- package/package.json +4 -2
package/Modal.svelte
CHANGED
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
</script>
|
|
42
42
|
|
|
43
43
|
<script>
|
|
44
|
-
import { fade
|
|
44
|
+
import { fade } from 'svelte/transition';
|
|
45
45
|
const { src, close } = $props()
|
|
46
46
|
</script>
|
|
47
47
|
|
|
48
|
-
<div class="modal_wrapper">
|
|
48
|
+
<div class="inx-modal_wrapper">
|
|
49
49
|
<!-- svelte-ignore a11y_click_events_have_key_events,a11y_no_static_element_interactions -->
|
|
50
|
-
<div class="modal_bg" onclick={close} transition:fade></div>
|
|
51
|
-
<div class="modal
|
|
50
|
+
<div class="inx-modal_bg" onclick={close} transition:fade={{duration: 200}}></div>
|
|
51
|
+
<div class="inx-modal" aria-modal="true" role="dialog" transition:css>
|
|
52
52
|
<Frame {src} {close} />
|
|
53
53
|
<nav>
|
|
54
54
|
<button onclick={close} aria-label="Close modal">
|
|
@@ -58,53 +58,3 @@
|
|
|
58
58
|
</div>
|
|
59
59
|
</div>
|
|
60
60
|
|
|
61
|
-
<style>
|
|
62
|
-
.modal_wrapper {
|
|
63
|
-
display: grid;
|
|
64
|
-
place-items: center;
|
|
65
|
-
position: fixed;
|
|
66
|
-
top: 0;
|
|
67
|
-
left: 0;
|
|
68
|
-
width: 100%;
|
|
69
|
-
height: 100%;
|
|
70
|
-
}
|
|
71
|
-
.modal_bg {
|
|
72
|
-
position: absolute;
|
|
73
|
-
background: rgba(0, 0, 0, 0.7);
|
|
74
|
-
top: 0;
|
|
75
|
-
left: 0;
|
|
76
|
-
width: 100%;
|
|
77
|
-
height: 100%;
|
|
78
|
-
/* z-index: -1; */
|
|
79
|
-
}
|
|
80
|
-
nav {
|
|
81
|
-
grid-area: header;
|
|
82
|
-
display: flex;
|
|
83
|
-
justify-content: flex-end;
|
|
84
|
-
button {
|
|
85
|
-
font-size: 1.5rem;
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
.modal {
|
|
90
|
-
position: fixed;
|
|
91
|
-
bottom: 0;
|
|
92
|
-
transform: translateY(calc((1 - var(--progress)) * 100%));
|
|
93
|
-
background-color: #00000022;
|
|
94
|
-
border: 1px solid #333;
|
|
95
|
-
border-top-left-radius: 2rem;
|
|
96
|
-
border-top-right-radius: 2rem;
|
|
97
|
-
backdrop-filter: blur(8px);
|
|
98
|
-
min-height: 70%;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@media (min-width: 640px) {
|
|
102
|
-
.modal {
|
|
103
|
-
max-width: 400px;
|
|
104
|
-
position: static;
|
|
105
|
-
transform: scale(calc(var(--progress) * 0.3 + 0.7));
|
|
106
|
-
opacity: var(--progress);
|
|
107
|
-
border-radius: 2rem;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
</style>
|
package/README.md
CHANGED
|
@@ -25,4 +25,21 @@ The Modal component passes a `close` function down to its page component as a pr
|
|
|
25
25
|
const { close } = $props()
|
|
26
26
|
</script>
|
|
27
27
|
|
|
28
|
-
<button onclick={close}>Close</button>
|
|
28
|
+
<button onclick={close}>Close</button>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Styling
|
|
32
|
+
|
|
33
|
+
Inertia X UI ships with a default dark style that displays the modal as a bottom sheet.
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
import 'inertiax-ui/dark.css'
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
For full control, you can of course bring your own CSS styling. The key classes to target are:
|
|
40
|
+
|
|
41
|
+
| Class | Element |
|
|
42
|
+
|-------|---------|
|
|
43
|
+
| `.inx-modal_wrapper` | Full-screen overlay container |
|
|
44
|
+
| `.inx-modal_bg` | Clickable backdrop |
|
|
45
|
+
| `.inx-modal` | The modal panel itself |
|
package/dark.css
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/* InertiaX UI — Modal styles */
|
|
2
|
+
/* Import this file to get the default modal styling, or use it as a base to override. */
|
|
3
|
+
|
|
4
|
+
.inx-modal_wrapper {
|
|
5
|
+
display: grid;
|
|
6
|
+
place-items: center;
|
|
7
|
+
position: fixed;
|
|
8
|
+
top: 0;
|
|
9
|
+
left: 0;
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.inx-modal_bg {
|
|
15
|
+
position: absolute;
|
|
16
|
+
background: var(--inx-modal-backdrop, rgba(0, 0, 0, 0.7));
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.inx-modal nav {
|
|
24
|
+
padding: 1rem;
|
|
25
|
+
grid-area: header;
|
|
26
|
+
display: flex;
|
|
27
|
+
justify-content: flex-end;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.inx-modal nav button {
|
|
31
|
+
font-size: 1.5rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.inx-modal {
|
|
35
|
+
position: fixed;
|
|
36
|
+
bottom: 0;
|
|
37
|
+
transform: translateY(calc((1 - var(--progress)) * 100%));
|
|
38
|
+
background-color: var(--inx-modal-bg, rgba(0, 0, 0, 0.13));
|
|
39
|
+
border: 1px solid var(--inx-modal-border, #333);
|
|
40
|
+
border-top-left-radius: var(--inx-modal-radius, 2rem);
|
|
41
|
+
border-top-right-radius: var(--inx-modal-radius, 2rem);
|
|
42
|
+
backdrop-filter: blur(var(--inx-modal-blur, 8px));
|
|
43
|
+
min-height: var(--inx-modal-min-height, 70%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@media (min-width: 640px) {
|
|
47
|
+
.inx-modal {
|
|
48
|
+
max-width: var(--inx-modal-max-width, 400px);
|
|
49
|
+
position: static;
|
|
50
|
+
transform: scale(calc(var(--progress) * 0.3 + 0.7));
|
|
51
|
+
opacity: var(--progress);
|
|
52
|
+
border-radius: var(--inx-modal-radius, 2rem);
|
|
53
|
+
}
|
|
54
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "inertiax-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "UI component library for Inertia X",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -15,11 +15,13 @@
|
|
|
15
15
|
"svelte": "./Modal.svelte",
|
|
16
16
|
"default": "./index.js"
|
|
17
17
|
},
|
|
18
|
-
"./Modal.svelte": "./Modal.svelte"
|
|
18
|
+
"./Modal.svelte": "./Modal.svelte",
|
|
19
|
+
"./dark.css": "./dark.css"
|
|
19
20
|
},
|
|
20
21
|
"files": [
|
|
21
22
|
"index.js",
|
|
22
23
|
"Modal.svelte",
|
|
24
|
+
"dark.css",
|
|
23
25
|
"index.d.ts"
|
|
24
26
|
],
|
|
25
27
|
"peerDependencies": {
|