@neo-design/foundations 1.0.0-rc.7 → 1.0.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 +1 -2
- package/css/drawer.css +126 -0
- package/css/index.css +3 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,5 +15,4 @@ The `css/` sheets resolve their variables against the two token sheets, so those
|
|
|
15
15
|
|
|
16
16
|
**How to mount it, and the full reference, are in [the Neo repository](https://github.com/jzamorano-ui/neo-ds)** —
|
|
17
17
|
[Integration](https://github.com/jzamorano-ui/neo-ds/blob/main/docs/dev/INTEGRATION.md) covers installation and mounting, and `docs/dev/` covers the token dictionary, the layout
|
|
18
|
-
recipe and the composition examples.
|
|
19
|
-
`npm i @neo-design/foundations@next`.
|
|
18
|
+
recipe and the composition examples. Install it with `npm i @neo-design/foundations`.
|
package/css/drawer.css
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
/* packages/foundations/css/drawer.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
|
|
2
|
+
|
|
3
|
+
.drawer {
|
|
4
|
+
position: fixed;
|
|
5
|
+
top: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
bottom: 0;
|
|
8
|
+
z-index: 1300;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
align-items: flex-start;
|
|
12
|
+
width: 540px;
|
|
13
|
+
max-width: 100vw;
|
|
14
|
+
height: 100dvh;
|
|
15
|
+
background: var(--surface--base--default);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
.drawer > * {
|
|
20
|
+
align-self: stretch;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.drawer__header {
|
|
24
|
+
flex: 0 0 auto;
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
align-items: flex-end;
|
|
29
|
+
gap: var(--neo-space-md-rem);
|
|
30
|
+
padding-inline: var(--neo-space-xl-rem);
|
|
31
|
+
padding-block: var(--neo-space-lg-rem);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.drawer[data-scroll="top"] .drawer__header,
|
|
35
|
+
.drawer[data-scroll="mid"] .drawer__header,
|
|
36
|
+
.drawer[data-scroll="bottom"] .drawer__header {
|
|
37
|
+
border-bottom: var(--neo-stroke-xs) solid var(--border--base--secondary);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.drawer__header > * {
|
|
41
|
+
align-self: stretch;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.drawer__title-row {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
height: 48px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.drawer__title {
|
|
52
|
+
margin: 0;
|
|
53
|
+
flex: 1 1 auto;
|
|
54
|
+
min-width: 0;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
color: var(--text--base--default);
|
|
59
|
+
font-size: var(--neo-type-title-sm-bold-size-rem);
|
|
60
|
+
font-weight: var(--neo-type-title-sm-bold-weight);
|
|
61
|
+
line-height: var(--neo-type-title-sm-bold-line-height-rem);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.drawer__close {
|
|
65
|
+
flex: 0 0 auto;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.drawer__content {
|
|
69
|
+
flex: 1 1 auto;
|
|
70
|
+
overflow-y: auto;
|
|
71
|
+
padding-inline: var(--neo-space-xl-rem);
|
|
72
|
+
padding-block: 0 var(--neo-space-lg-rem);
|
|
73
|
+
color: var(--text--base--default);
|
|
74
|
+
font-size: var(--neo-type-body-lg-regular-size-rem);
|
|
75
|
+
font-weight: var(--neo-type-body-lg-regular-weight);
|
|
76
|
+
line-height: var(--neo-type-body-lg-regular-line-height-rem);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.drawer__content:focus-visible {
|
|
80
|
+
outline: none;
|
|
81
|
+
box-shadow:
|
|
82
|
+
inset 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--ring--default),
|
|
83
|
+
inset 0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--gap--default);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.drawer__image {
|
|
87
|
+
display: block;
|
|
88
|
+
height: 224px;
|
|
89
|
+
margin-inline: calc(-1 * var(--neo-space-xl-rem));
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
img.drawer__image,
|
|
94
|
+
.drawer__image > img,
|
|
95
|
+
.drawer__image > picture,
|
|
96
|
+
.drawer__image > video {
|
|
97
|
+
width: calc(100% + 2 * var(--neo-space-xl-rem));
|
|
98
|
+
object-fit: cover;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.drawer__image > img,
|
|
102
|
+
.drawer__image > picture,
|
|
103
|
+
.drawer__image > video {
|
|
104
|
+
display: block;
|
|
105
|
+
width: 100%;
|
|
106
|
+
height: 100%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.drawer__actions {
|
|
110
|
+
flex: 0 0 auto;
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
gap: var(--neo-space-md-rem);
|
|
114
|
+
padding-inline: var(--neo-space-xl-rem);
|
|
115
|
+
padding-block: var(--neo-space-lg-rem) var(--neo-space-2xl-rem);
|
|
116
|
+
background: var(--surface--base--default);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.drawer__actions .btn {
|
|
120
|
+
width: 100%;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.drawer__actions[data-scroll="top"],
|
|
124
|
+
.drawer__actions[data-scroll="mid"] {
|
|
125
|
+
border-top: var(--neo-stroke-xs) solid var(--border--base--secondary);
|
|
126
|
+
}
|
package/css/index.css
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
@import './chips.css';
|
|
12
12
|
@import './chips-group.css';
|
|
13
13
|
@import './combobox.css';
|
|
14
|
+
@import './drawer.css';
|
|
14
15
|
@import './empty-state.css';
|
|
15
16
|
@import './link.css';
|
|
16
17
|
@import './menu.css';
|
|
@@ -27,10 +28,10 @@
|
|
|
27
28
|
@import './tooltip.css';
|
|
28
29
|
|
|
29
30
|
.alert, .aspect-ratio, .badge, .notification, .banner, .btn, .checkbox, .checkbox-group,
|
|
30
|
-
.bottom-sheet, .chip, .chips-group, .combobox, .empty-state, .empty-state-shell, .link, .menu-item, .menu-list, .menu-divider, .modal-overlay, .modal-dialog,
|
|
31
|
+
.bottom-sheet, .chip, .chips-group, .combobox, .drawer, .empty-state, .empty-state-shell, .link, .menu-item, .menu-list, .menu-divider, .modal-overlay, .modal-dialog,
|
|
31
32
|
.modal-full, .radio, .radio-group, .select, .snackbar, .spinner, .tabs, .tag, .field, .toggle, .tooltip,
|
|
32
33
|
.alert *, .aspect-ratio *, .badge *, .banner *, .btn *, .checkbox *, .chip *, .combobox *,
|
|
33
|
-
.bottom-sheet *, .empty-state *, .menu-item *, .menu-list *, .modal-dialog *, .modal-full *, .radio *, .select *, .snackbar *, .tabs *,
|
|
34
|
+
.bottom-sheet *, .drawer *, .empty-state *, .menu-item *, .menu-list *, .modal-dialog *, .modal-full *, .radio *, .select *, .snackbar *, .tabs *,
|
|
34
35
|
.tag *, .field *, .toggle *, .tooltip *,
|
|
35
36
|
[role="tablist"], [role="tab"] {
|
|
36
37
|
box-sizing: border-box;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo-design/foundations",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Neo — the system foundations: semantic tokens in JS and CSS, icons and the plain CSS layer. It does not depend on React or Material UI.",
|
|
5
5
|
"homepage": "https://github.com/jzamorano-ui/neo-ds/blob/main/docs/dev/INTEGRATION.md",
|
|
6
6
|
"repository": {
|