@teseor/css 1.11.0 → 1.13.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/dist/compiled.css +1 -1
- package/dist/index.css +7 -6
- package/package.json +1 -1
- package/src/components/content/scroll-area/index.scss +1 -1
- package/src/components/content/scroll-area/scroll-area.api.json +1 -1
- package/src/components/data-display/card/card-visual.png +0 -0
- package/src/components/data-display/card/card.api.json +7 -0
- package/src/components/data-display/card/card.docs.json +118 -16
- package/src/components/data-display/card/index.scss +27 -0
- package/src/components/feedback/skeleton/skeleton-visual.png +0 -0
- package/src/components/feedback/skeleton/skeleton.docs.json +16 -0
- package/src/components/feedback/toast/toast-visual.png +0 -0
- package/src/components/feedback/toast/toast.docs.json +137 -0
- package/src/components/forms/checkbox/checkbox.docs.json +1 -6
- package/src/components/forms/field/field-visual.png +0 -0
- package/src/components/forms/field/field.api.json +3 -0
- package/src/components/forms/field/field.docs.json +98 -12
- package/src/components/forms/field/index.scss +29 -0
- package/src/components/forms/input/input.api.json +21 -1
- package/src/components/forms/radio/radio.docs.json +3 -8
- package/src/components/forms/textarea/index.scss +8 -0
- package/src/components/forms/textarea/textarea-visual.png +0 -0
- package/src/components/forms/textarea/textarea.api.json +3 -0
- package/src/components/forms/textarea/textarea.docs.json +33 -1
- package/src/components/navigation/breadcrumb/breadcrumb-visual.png +0 -0
- package/src/components/navigation/breadcrumb/breadcrumb.docs.json +70 -0
- package/src/components/navigation/nav/nav.api.json +10 -1
- package/src/components/navigation/tabs/tabs.api.json +14 -2
- package/src/components/overlays/drawer/drawer-visual.png +0 -0
- package/src/components/overlays/drawer/drawer.docs.json +25 -0
- package/src/components/overlays/modal/modal-visual.png +0 -0
- package/src/components/overlays/modal/modal.docs.json +89 -0
- package/src/components/overlays/popover/popover-visual.png +0 -0
- package/src/components/overlays/popover/popover.docs.json +46 -3
- package/src/config/tokens/semantic/colors/index.scss +20 -44
- package/src/config/tokens/theming.docs.json +135 -26
- package/src/layout/center/center.api.json +5 -1
- package/src/layout/center/index.scss +1 -0
- package/src/layout/column/column-visual.png +0 -0
- package/src/layout/column/column.docs.json +26 -0
- package/src/layout/grid/grid-visual.png +0 -0
- package/src/layout/grid/grid.api.json +9 -0
- package/src/layout/grid/grid.docs.json +378 -1
- package/src/layout/grid/index.scss +30 -0
- package/src/layout/row/row-visual.png +0 -0
- package/src/layout/row/row.docs.json +108 -0
- package/src/layout/sidebar-nav/sidebar-nav.docs.json +9 -3
- package/src/utilities/container/container.api.json +6 -0
- package/src/utilities/container/container.docs.json +121 -0
- package/src/utilities/container/index.scss +18 -0
- package/src/utilities/index.scss +1 -0
- package/src/utilities/scroll-snap/scroll-snap.docs.json +193 -4
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
"tag": "label",
|
|
19
19
|
"class": "ui-label",
|
|
20
20
|
"text": "Email",
|
|
21
|
-
"attrs": {
|
|
21
|
+
"attrs": {
|
|
22
|
+
"for": "email"
|
|
23
|
+
}
|
|
22
24
|
},
|
|
23
25
|
{
|
|
24
26
|
"tag": "div",
|
|
@@ -27,7 +29,11 @@
|
|
|
27
29
|
{
|
|
28
30
|
"tag": "input",
|
|
29
31
|
"class": "ui-input",
|
|
30
|
-
"attrs": {
|
|
32
|
+
"attrs": {
|
|
33
|
+
"type": "email",
|
|
34
|
+
"id": "email",
|
|
35
|
+
"placeholder": "Enter email"
|
|
36
|
+
}
|
|
31
37
|
}
|
|
32
38
|
]
|
|
33
39
|
}
|
|
@@ -51,7 +57,9 @@
|
|
|
51
57
|
"tag": "label",
|
|
52
58
|
"class": "ui-label",
|
|
53
59
|
"text": "Password",
|
|
54
|
-
"attrs": {
|
|
60
|
+
"attrs": {
|
|
61
|
+
"for": "password"
|
|
62
|
+
}
|
|
55
63
|
},
|
|
56
64
|
{
|
|
57
65
|
"tag": "div",
|
|
@@ -60,7 +68,10 @@
|
|
|
60
68
|
{
|
|
61
69
|
"tag": "input",
|
|
62
70
|
"class": "ui-input",
|
|
63
|
-
"attrs": {
|
|
71
|
+
"attrs": {
|
|
72
|
+
"type": "password",
|
|
73
|
+
"id": "password"
|
|
74
|
+
}
|
|
64
75
|
},
|
|
65
76
|
{
|
|
66
77
|
"tag": "span",
|
|
@@ -89,7 +100,9 @@
|
|
|
89
100
|
"tag": "label",
|
|
90
101
|
"class": "ui-label",
|
|
91
102
|
"text": "Username",
|
|
92
|
-
"attrs": {
|
|
103
|
+
"attrs": {
|
|
104
|
+
"for": "username"
|
|
105
|
+
}
|
|
93
106
|
},
|
|
94
107
|
{
|
|
95
108
|
"tag": "div",
|
|
@@ -98,7 +111,11 @@
|
|
|
98
111
|
{
|
|
99
112
|
"tag": "input",
|
|
100
113
|
"class": "ui-input ui-input--error",
|
|
101
|
-
"attrs": {
|
|
114
|
+
"attrs": {
|
|
115
|
+
"type": "text",
|
|
116
|
+
"id": "username",
|
|
117
|
+
"value": "ab"
|
|
118
|
+
}
|
|
102
119
|
},
|
|
103
120
|
{
|
|
104
121
|
"tag": "span",
|
|
@@ -129,7 +146,9 @@
|
|
|
129
146
|
"tag": "label",
|
|
130
147
|
"class": "ui-label ui-field__label",
|
|
131
148
|
"text": "Full Name",
|
|
132
|
-
"attrs": {
|
|
149
|
+
"attrs": {
|
|
150
|
+
"for": "name"
|
|
151
|
+
}
|
|
133
152
|
},
|
|
134
153
|
{
|
|
135
154
|
"tag": "div",
|
|
@@ -138,9 +157,16 @@
|
|
|
138
157
|
{
|
|
139
158
|
"tag": "input",
|
|
140
159
|
"class": "ui-input",
|
|
141
|
-
"attrs": {
|
|
160
|
+
"attrs": {
|
|
161
|
+
"type": "text",
|
|
162
|
+
"id": "name"
|
|
163
|
+
}
|
|
142
164
|
},
|
|
143
|
-
{
|
|
165
|
+
{
|
|
166
|
+
"tag": "span",
|
|
167
|
+
"class": "ui-form-helper",
|
|
168
|
+
"text": "As it appears on your ID"
|
|
169
|
+
}
|
|
144
170
|
]
|
|
145
171
|
}
|
|
146
172
|
]
|
|
@@ -150,6 +176,56 @@
|
|
|
150
176
|
}
|
|
151
177
|
]
|
|
152
178
|
},
|
|
179
|
+
{
|
|
180
|
+
"title": "Responsive Layout",
|
|
181
|
+
"description": "Auto-switches to horizontal layout when container is wide enough (>= 30rem). Requires a parent with container-type: inline-size (use ui-container-inline utility).",
|
|
182
|
+
"examples": [
|
|
183
|
+
{
|
|
184
|
+
"items": [
|
|
185
|
+
{
|
|
186
|
+
"tag": "div",
|
|
187
|
+
"class": "ui-container-inline",
|
|
188
|
+
"children": [
|
|
189
|
+
{
|
|
190
|
+
"tag": "div",
|
|
191
|
+
"class": "ui-field ui-field--responsive",
|
|
192
|
+
"children": [
|
|
193
|
+
{
|
|
194
|
+
"tag": "label",
|
|
195
|
+
"class": "ui-label ui-field__label",
|
|
196
|
+
"text": "Full Name",
|
|
197
|
+
"attrs": {
|
|
198
|
+
"for": "resp-name"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"tag": "div",
|
|
203
|
+
"class": "ui-field__control",
|
|
204
|
+
"children": [
|
|
205
|
+
{
|
|
206
|
+
"tag": "input",
|
|
207
|
+
"class": "ui-input",
|
|
208
|
+
"attrs": {
|
|
209
|
+
"type": "text",
|
|
210
|
+
"id": "resp-name"
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
"tag": "span",
|
|
215
|
+
"class": "ui-form-helper",
|
|
216
|
+
"text": "Stacks vertically in narrow containers, horizontal at >= 30rem"
|
|
217
|
+
}
|
|
218
|
+
]
|
|
219
|
+
}
|
|
220
|
+
]
|
|
221
|
+
}
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
],
|
|
225
|
+
"code": "<div class=\"ui-container-inline\">\n <div class=\"ui-field ui-field--responsive\">\n <label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label>\n <div class=\"ui-field__control\">\n <input type=\"text\" id=\"name\" class=\"ui-input\">\n </div>\n </div>\n</div>"
|
|
226
|
+
}
|
|
227
|
+
]
|
|
228
|
+
},
|
|
153
229
|
{
|
|
154
230
|
"title": "Required Field",
|
|
155
231
|
"examples": [
|
|
@@ -163,7 +239,9 @@
|
|
|
163
239
|
"tag": "label",
|
|
164
240
|
"class": "ui-label ui-label--required",
|
|
165
241
|
"text": "Required Field",
|
|
166
|
-
"attrs": {
|
|
242
|
+
"attrs": {
|
|
243
|
+
"for": "req"
|
|
244
|
+
}
|
|
167
245
|
},
|
|
168
246
|
{
|
|
169
247
|
"tag": "div",
|
|
@@ -172,7 +250,11 @@
|
|
|
172
250
|
{
|
|
173
251
|
"tag": "input",
|
|
174
252
|
"class": "ui-input",
|
|
175
|
-
"attrs": {
|
|
253
|
+
"attrs": {
|
|
254
|
+
"type": "text",
|
|
255
|
+
"id": "req",
|
|
256
|
+
"required": ""
|
|
257
|
+
}
|
|
176
258
|
}
|
|
177
259
|
]
|
|
178
260
|
}
|
|
@@ -185,6 +267,10 @@
|
|
|
185
267
|
}
|
|
186
268
|
],
|
|
187
269
|
"customization": [
|
|
188
|
-
{
|
|
270
|
+
{
|
|
271
|
+
"token": "--ui-field-gap",
|
|
272
|
+
"default": "0",
|
|
273
|
+
"description": "Gap between field elements"
|
|
274
|
+
}
|
|
189
275
|
]
|
|
190
276
|
}
|
|
@@ -45,4 +45,33 @@
|
|
|
45
45
|
|
|
46
46
|
min-inline-size: calc(#{t.$unit} * 20);
|
|
47
47
|
}
|
|
48
|
+
|
|
49
|
+
// Auto-switch to horizontal when container is wide enough
|
|
50
|
+
// @modifier boolean responsive
|
|
51
|
+
.field--responsive {
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
|
|
54
|
+
@container (inline-size >= 30rem) {
|
|
55
|
+
flex-direction: row;
|
|
56
|
+
flex-wrap: wrap;
|
|
57
|
+
align-items: flex-start;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.field--responsive > .field__label {
|
|
62
|
+
@container (inline-size >= 30rem) {
|
|
63
|
+
flex: 0 0 auto;
|
|
64
|
+
|
|
65
|
+
min-inline-size: calc(#{t.$unit} * 15);
|
|
66
|
+
padding-block-start: calc(#{t.$unit} * 1);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.field--responsive > .field__control {
|
|
71
|
+
@container (inline-size >= 30rem) {
|
|
72
|
+
flex: 1 1 0;
|
|
73
|
+
|
|
74
|
+
min-inline-size: calc(#{t.$unit} * 20);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
48
77
|
}
|
|
@@ -19,8 +19,28 @@
|
|
|
19
19
|
"relatedComponents": [
|
|
20
20
|
{
|
|
21
21
|
"name": "input-group",
|
|
22
|
+
"modifiers": {
|
|
23
|
+
"has-prefix": {
|
|
24
|
+
"type": "boolean"
|
|
25
|
+
},
|
|
26
|
+
"has-suffix": {
|
|
27
|
+
"type": "boolean"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
22
30
|
"elements": {
|
|
23
|
-
"addon": {
|
|
31
|
+
"addon": {
|
|
32
|
+
"modifiers": {
|
|
33
|
+
"start": {
|
|
34
|
+
"type": "boolean"
|
|
35
|
+
},
|
|
36
|
+
"end": {
|
|
37
|
+
"type": "boolean"
|
|
38
|
+
},
|
|
39
|
+
"interactive": {
|
|
40
|
+
"type": "boolean"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
24
44
|
}
|
|
25
45
|
}
|
|
26
46
|
],
|
|
@@ -28,23 +28,18 @@
|
|
|
28
28
|
{
|
|
29
29
|
"layout": "row",
|
|
30
30
|
"items": [
|
|
31
|
-
{
|
|
32
|
-
"tag": "input",
|
|
33
|
-
"class": "ui-radio ui-radio--sm",
|
|
34
|
-
"attrs": { "type": "radio", "name": "sizes", "checked": "" }
|
|
35
|
-
},
|
|
36
31
|
{
|
|
37
32
|
"tag": "input",
|
|
38
33
|
"class": "ui-radio",
|
|
39
|
-
"attrs": { "type": "radio", "name": "
|
|
34
|
+
"attrs": { "type": "radio", "name": "sizes", "checked": "" }
|
|
40
35
|
},
|
|
41
36
|
{
|
|
42
37
|
"tag": "input",
|
|
43
38
|
"class": "ui-radio ui-radio--lg",
|
|
44
|
-
"attrs": { "type": "radio", "name": "
|
|
39
|
+
"attrs": { "type": "radio", "name": "sizes2", "checked": "" }
|
|
45
40
|
}
|
|
46
41
|
],
|
|
47
|
-
"code": "<input type=\"radio\" class=\"ui-radio
|
|
42
|
+
"code": "<input type=\"radio\" class=\"ui-radio\" checked>\n<input type=\"radio\" class=\"ui-radio ui-radio--lg\" checked>"
|
|
48
43
|
}
|
|
49
44
|
]
|
|
50
45
|
},
|
|
Binary file
|
|
@@ -121,13 +121,45 @@
|
|
|
121
121
|
"class": "ui-textarea ui-textarea--resize-none",
|
|
122
122
|
"attrs": { "placeholder": "No resize" }
|
|
123
123
|
},
|
|
124
|
+
{
|
|
125
|
+
"tag": "textarea",
|
|
126
|
+
"class": "ui-textarea ui-textarea--resize-horizontal",
|
|
127
|
+
"attrs": { "placeholder": "Horizontal resize only" }
|
|
128
|
+
},
|
|
124
129
|
{
|
|
125
130
|
"tag": "textarea",
|
|
126
131
|
"class": "ui-textarea ui-textarea--resize-both",
|
|
127
132
|
"attrs": { "placeholder": "Resize both directions" }
|
|
128
133
|
}
|
|
129
134
|
],
|
|
130
|
-
"code": "<textarea class=\"ui-textarea\">Vertical (default)</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-none\">No resize</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-both\">Both directions</textarea>"
|
|
135
|
+
"code": "<textarea class=\"ui-textarea\">Vertical (default)</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-none\">No resize</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-horizontal\">Horizontal only</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-both\">Both directions</textarea>"
|
|
136
|
+
}
|
|
137
|
+
]
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"title": "Auto Size",
|
|
141
|
+
"description": "Automatically grows to fit content using field-sizing: content. Falls back to fixed min-height in unsupported browsers.",
|
|
142
|
+
"examples": [
|
|
143
|
+
{
|
|
144
|
+
"layout": "column",
|
|
145
|
+
"items": [
|
|
146
|
+
{
|
|
147
|
+
"tag": "textarea",
|
|
148
|
+
"class": "ui-textarea ui-textarea--auto-size",
|
|
149
|
+
"attrs": { "placeholder": "Type to grow..." }
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"tag": "textarea",
|
|
153
|
+
"class": "ui-textarea ui-textarea--auto-size ui-textarea--sm",
|
|
154
|
+
"attrs": { "placeholder": "Small auto-size" }
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"tag": "textarea",
|
|
158
|
+
"class": "ui-textarea ui-textarea--auto-size ui-textarea--lg",
|
|
159
|
+
"attrs": { "placeholder": "Large auto-size" }
|
|
160
|
+
}
|
|
161
|
+
],
|
|
162
|
+
"code": "<textarea class=\"ui-textarea ui-textarea--auto-size\" placeholder=\"Type to grow...\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--auto-size ui-textarea--sm\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--auto-size ui-textarea--lg\"></textarea>"
|
|
131
163
|
}
|
|
132
164
|
]
|
|
133
165
|
}
|
|
Binary file
|
|
@@ -133,6 +133,76 @@
|
|
|
133
133
|
"code": "<ol class=\"ui-breadcrumb\">\n <li class=\"ui-breadcrumb__item\">\n <a href=\"#\" class=\"ui-breadcrumb__link\">\n <svg class=\"ui-icon\">...</svg>\n </a>\n </li>\n ...\n</ol>"
|
|
134
134
|
}
|
|
135
135
|
]
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"title": "Overflow with Ellipsis",
|
|
139
|
+
"description": "Truncate long breadcrumbs with hidden items and an ellipsis indicator.",
|
|
140
|
+
"examples": [
|
|
141
|
+
{
|
|
142
|
+
"items": [
|
|
143
|
+
{
|
|
144
|
+
"tag": "nav",
|
|
145
|
+
"attrs": { "aria-label": "Breadcrumb" },
|
|
146
|
+
"children": [
|
|
147
|
+
{
|
|
148
|
+
"tag": "ol",
|
|
149
|
+
"class": "ui-breadcrumb",
|
|
150
|
+
"children": [
|
|
151
|
+
{
|
|
152
|
+
"tag": "li",
|
|
153
|
+
"class": "ui-breadcrumb__item",
|
|
154
|
+
"children": [
|
|
155
|
+
{
|
|
156
|
+
"tag": "a",
|
|
157
|
+
"class": "ui-breadcrumb__link",
|
|
158
|
+
"attrs": { "href": "#" },
|
|
159
|
+
"text": "Home"
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"tag": "li",
|
|
165
|
+
"class": "ui-breadcrumb__item ui-breadcrumb__item--hidden",
|
|
166
|
+
"children": [
|
|
167
|
+
{
|
|
168
|
+
"tag": "a",
|
|
169
|
+
"class": "ui-breadcrumb__link",
|
|
170
|
+
"attrs": { "href": "#" },
|
|
171
|
+
"text": "Category"
|
|
172
|
+
}
|
|
173
|
+
]
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"tag": "li",
|
|
177
|
+
"class": "ui-breadcrumb__item",
|
|
178
|
+
"children": [
|
|
179
|
+
{
|
|
180
|
+
"tag": "span",
|
|
181
|
+
"class": "ui-breadcrumb__ellipsis",
|
|
182
|
+
"text": "..."
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"tag": "li",
|
|
188
|
+
"class": "ui-breadcrumb__item",
|
|
189
|
+
"children": [
|
|
190
|
+
{
|
|
191
|
+
"tag": "span",
|
|
192
|
+
"class": "ui-breadcrumb__current",
|
|
193
|
+
"attrs": { "aria-current": "page" },
|
|
194
|
+
"text": "Current Page"
|
|
195
|
+
}
|
|
196
|
+
]
|
|
197
|
+
}
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
],
|
|
203
|
+
"code": "<ol class=\"ui-breadcrumb\">\n <li class=\"ui-breadcrumb__item\"><a href=\"#\">Home</a></li>\n <li class=\"ui-breadcrumb__item ui-breadcrumb__item--hidden\"><a href=\"#\">Category</a></li>\n <li class=\"ui-breadcrumb__item\"><span class=\"ui-breadcrumb__ellipsis\">...</span></li>\n <li class=\"ui-breadcrumb__item\"><span aria-current=\"page\">Current</span></li>\n</ol>"
|
|
204
|
+
}
|
|
205
|
+
]
|
|
136
206
|
}
|
|
137
207
|
],
|
|
138
208
|
"customization": [
|
|
@@ -12,8 +12,20 @@
|
|
|
12
12
|
},
|
|
13
13
|
"elements": {
|
|
14
14
|
"list": {},
|
|
15
|
-
"tab": {
|
|
16
|
-
|
|
15
|
+
"tab": {
|
|
16
|
+
"modifiers": {
|
|
17
|
+
"active": {
|
|
18
|
+
"type": "boolean"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"panel": {
|
|
23
|
+
"modifiers": {
|
|
24
|
+
"active": {
|
|
25
|
+
"type": "boolean"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
17
29
|
},
|
|
18
30
|
"cssVars": [
|
|
19
31
|
{
|
|
Binary file
|
|
@@ -245,6 +245,31 @@
|
|
|
245
245
|
}
|
|
246
246
|
],
|
|
247
247
|
"layout": "column"
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"items": [
|
|
251
|
+
{
|
|
252
|
+
"tag": "div",
|
|
253
|
+
"attrs": {
|
|
254
|
+
"style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
|
|
255
|
+
},
|
|
256
|
+
"children": [
|
|
257
|
+
{
|
|
258
|
+
"tag": "div",
|
|
259
|
+
"class": "ui-drawer ui-drawer--end ui-drawer--full",
|
|
260
|
+
"attrs": { "style": "position:absolute", "data-state": "open" },
|
|
261
|
+
"children": [
|
|
262
|
+
{
|
|
263
|
+
"tag": "div",
|
|
264
|
+
"class": "ui-drawer__body",
|
|
265
|
+
"children": [{ "tag": "p", "text": "Full-size drawer" }]
|
|
266
|
+
}
|
|
267
|
+
]
|
|
268
|
+
}
|
|
269
|
+
]
|
|
270
|
+
}
|
|
271
|
+
],
|
|
272
|
+
"layout": "column"
|
|
248
273
|
}
|
|
249
274
|
]
|
|
250
275
|
}
|
|
Binary file
|
|
@@ -72,6 +72,95 @@
|
|
|
72
72
|
}
|
|
73
73
|
]
|
|
74
74
|
},
|
|
75
|
+
{
|
|
76
|
+
"title": "Large",
|
|
77
|
+
"examples": [
|
|
78
|
+
{
|
|
79
|
+
"items": [
|
|
80
|
+
{
|
|
81
|
+
"tag": "div",
|
|
82
|
+
"attrs": {
|
|
83
|
+
"style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
|
|
84
|
+
},
|
|
85
|
+
"children": [
|
|
86
|
+
{
|
|
87
|
+
"tag": "div",
|
|
88
|
+
"class": "ui-modal ui-modal--lg ui-modal--visible",
|
|
89
|
+
"attrs": { "style": "position: absolute;" },
|
|
90
|
+
"children": [
|
|
91
|
+
{
|
|
92
|
+
"tag": "div",
|
|
93
|
+
"class": "ui-modal__content",
|
|
94
|
+
"children": [{ "tag": "p", "text": "Large modal" }]
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"title": "Full",
|
|
106
|
+
"examples": [
|
|
107
|
+
{
|
|
108
|
+
"items": [
|
|
109
|
+
{
|
|
110
|
+
"tag": "div",
|
|
111
|
+
"attrs": {
|
|
112
|
+
"style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
|
|
113
|
+
},
|
|
114
|
+
"children": [
|
|
115
|
+
{
|
|
116
|
+
"tag": "div",
|
|
117
|
+
"class": "ui-modal ui-modal--full ui-modal--visible",
|
|
118
|
+
"attrs": { "style": "position: absolute;" },
|
|
119
|
+
"children": [
|
|
120
|
+
{
|
|
121
|
+
"tag": "div",
|
|
122
|
+
"class": "ui-modal__content",
|
|
123
|
+
"children": [{ "tag": "p", "text": "Full-screen modal" }]
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
]
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"title": "Entering Animation",
|
|
135
|
+
"description": "Apply entering modifier for open transition.",
|
|
136
|
+
"examples": [
|
|
137
|
+
{
|
|
138
|
+
"items": [
|
|
139
|
+
{
|
|
140
|
+
"tag": "div",
|
|
141
|
+
"attrs": {
|
|
142
|
+
"style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
|
|
143
|
+
},
|
|
144
|
+
"children": [
|
|
145
|
+
{
|
|
146
|
+
"tag": "div",
|
|
147
|
+
"class": "ui-modal ui-modal--visible ui-modal--entering",
|
|
148
|
+
"attrs": { "style": "position: absolute;" },
|
|
149
|
+
"children": [
|
|
150
|
+
{
|
|
151
|
+
"tag": "div",
|
|
152
|
+
"class": "ui-modal__content",
|
|
153
|
+
"children": [{ "tag": "p", "text": "Entering modal" }]
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
],
|
|
160
|
+
"code": "<div class=\"ui-modal ui-modal--entering\">\n <div class=\"ui-modal__content\">...</div>\n</div>"
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
},
|
|
75
164
|
{
|
|
76
165
|
"title": "With Scrollable Content",
|
|
77
166
|
"examples": [
|
|
Binary file
|