@muibook/components 1.2.1 → 1.3.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/dist/esm/agent/keywords/index.js +23 -0
- package/dist/esm/agent/prompts/index.js +315 -0
- package/dist/esm/components/mui-heading/index.js +0 -1
- package/dist/esm/components/mui-quote/index.js +0 -1
- package/dist/esm/css/mui-base.css +130 -0
- package/dist/esm/css/mui-reset.css +287 -0
- package/dist/esm/css/mui-tokens.css +623 -0
- package/dist/types/agent/keywords/index.d.ts +1 -0
- package/dist/types/agent/prompts/index.d.ts +4 -0
- package/package.json +17 -3
- package/readme.md +16 -1
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const t = {
|
|
2
|
+
alert: ["alert", "success", "info", "warning", "error", "message", "banner", "notification"],
|
|
3
|
+
message: ["message", "notice", "notification", "alert", "info", "positive", "neutral", "warning", "attention"],
|
|
4
|
+
badge: ["badge", "label", "tag", "notification"],
|
|
5
|
+
button: ["button", "click", "action", "submit", "cta", "primary", "secondary", "tertiary", "attention"],
|
|
6
|
+
"button-group": ["button group", "buttons", "actions", "group", "right", "align"],
|
|
7
|
+
icon: ["icon", "glyph", "symbol", "add", "plus"],
|
|
8
|
+
link: ["link", "anchor", "hyperlink", "navigation", "primary", "secondary", "tertiary", "attention"],
|
|
9
|
+
tab: ["tab", "tab bar", "tab controller", "tab panel", "navigation", "tabs"],
|
|
10
|
+
carousel: ["carousel", "slider", "carousel controller", "carousel panel", "carousel item", "carousel tabs"],
|
|
11
|
+
card: ["card", "panel", "box", "tile"],
|
|
12
|
+
stack: ["stack", "v-stack", "h-stack", "vertical", "horizontal", "spacing"],
|
|
13
|
+
grid: ["grid", "columns", "rows", "layout", "container"],
|
|
14
|
+
container: ["container", "wrapper", "layout", "section"],
|
|
15
|
+
responsive: ["responsive", "breakpoint", "mobile", "desktop", "showAbove", "showBelow"],
|
|
16
|
+
rule: ["rule", "divider", "separator", "line", "hr"],
|
|
17
|
+
heading: ["heading", "title", "h1", "h2", "h3", "level"],
|
|
18
|
+
body: ["body", "text", "paragraph", "copy"],
|
|
19
|
+
list: ["list", "items", "ul", "li"]
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
t as muiKeywords
|
|
23
|
+
};
|
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
const t = [
|
|
2
|
+
{
|
|
3
|
+
role: "system",
|
|
4
|
+
content: "You are an assistant that converts UI prompts into MUI-style web components using custom tags like <mui-v-stack> and <mui-button>. Each user message may include tags like [button], [card], etc. Use these to help determine intent."
|
|
5
|
+
},
|
|
6
|
+
{ role: "user", content: "[card] Create a vertical stack with two cards" },
|
|
7
|
+
{
|
|
8
|
+
role: "assistant",
|
|
9
|
+
content: `<mui-v-stack space="var(--space-400)">
|
|
10
|
+
<mui-card>...</mui-card>
|
|
11
|
+
<mui-card>...</mui-card>
|
|
12
|
+
</mui-v-stack>`
|
|
13
|
+
},
|
|
14
|
+
// CONTAINER
|
|
15
|
+
{ role: "user", content: "[layout] Create a small container" },
|
|
16
|
+
{ role: "assistant", content: "<mui-container small>...</mui-container>" },
|
|
17
|
+
{ role: "user", content: "[layout] Create a medium container" },
|
|
18
|
+
{ role: "assistant", content: "<mui-container medium>...</mui-container>" },
|
|
19
|
+
{ role: "user", content: "[layout] Create a large container" },
|
|
20
|
+
{ role: "assistant", content: "<mui-container large>...</mui-container>" },
|
|
21
|
+
{ role: "user", content: "[layout] Create a fluid container" },
|
|
22
|
+
{ role: "assistant", content: "<mui-container fluid>...</mui-container>" },
|
|
23
|
+
{ role: "user", content: "[layout] Create a small container and centered" },
|
|
24
|
+
{ role: "assistant", content: "<mui-container small center>...</mui-container>" },
|
|
25
|
+
{ role: "user", content: "[button] Create a primary button" },
|
|
26
|
+
{ role: "assistant", content: "<mui-button variant='primary'>...</mui-button>" },
|
|
27
|
+
// NEW TAGGED PROMPTS
|
|
28
|
+
{
|
|
29
|
+
role: "user",
|
|
30
|
+
content: "[input] Add a field to enter an email address"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
role: "assistant",
|
|
34
|
+
content: `<mui-field label="Email">
|
|
35
|
+
<mui-input type="email" placeholder="you@example.com"></mui-input>
|
|
36
|
+
</mui-field>`
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
role: "user",
|
|
40
|
+
content: "[table] Show a table with 3 columns and 2 rows"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
role: "assistant",
|
|
44
|
+
content: `<mui-table>
|
|
45
|
+
<mui-row-group heading>
|
|
46
|
+
<mui-row columns="1fr 1fr 1fr">
|
|
47
|
+
<mui-cell>Heading 1</mui-cell>
|
|
48
|
+
<mui-cell>Heading 2</mui-cell>
|
|
49
|
+
<mui-cell>Heading 3</mui-cell>
|
|
50
|
+
</mui-row>
|
|
51
|
+
</mui-row-group>
|
|
52
|
+
<mui-row-group>
|
|
53
|
+
<mui-row columns="1fr 1fr 1fr">
|
|
54
|
+
<mui-cell>Row 1</mui-cell>
|
|
55
|
+
<mui-cell>Row 1</mui-cell>
|
|
56
|
+
<mui-cell>Row 1</mui-cell>
|
|
57
|
+
</mui-row>
|
|
58
|
+
<mui-row columns="1fr 1fr 1fr">
|
|
59
|
+
<mui-cell>Row 2</mui-cell>
|
|
60
|
+
<mui-cell>Row 2</mui-cell>
|
|
61
|
+
<mui-cell>Row 2</mui-cell>
|
|
62
|
+
</mui-row>
|
|
63
|
+
</mui-row-group>
|
|
64
|
+
</mui-table>`
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
role: "user",
|
|
68
|
+
content: "[accordion] Add a block accordion with two sections"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
role: "assistant",
|
|
72
|
+
content: `<mui-accordion-group>
|
|
73
|
+
<mui-accordion-block heading="Section A">
|
|
74
|
+
<div slot="detail">Details A</div>
|
|
75
|
+
</mui-accordion-block>
|
|
76
|
+
<mui-accordion-block heading="Section B">
|
|
77
|
+
<div slot="detail">Details B</div>
|
|
78
|
+
</mui-accordion-block>
|
|
79
|
+
</mui-accordion-group>`
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
role: "user",
|
|
83
|
+
content: "[icon] Add an accessibility icon"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
role: "assistant",
|
|
87
|
+
content: "<mui-icon-accessibility></mui-icon-accessibility>"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
role: "user",
|
|
91
|
+
content: "[image] Show an image with a caption"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
role: "assistant",
|
|
95
|
+
content: `<mui-image>
|
|
96
|
+
<img slot="image" src="..." alt="Descriptive alt text" />
|
|
97
|
+
<figcaption slot="caption">This is a caption</figcaption>
|
|
98
|
+
</mui-image>`
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
role: "user",
|
|
102
|
+
content: "[stack] Create a horizontal stack with two cards and spacing"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
role: "assistant",
|
|
106
|
+
content: `<mui-h-stack space="var(--space-500)">
|
|
107
|
+
<mui-card>...</mui-card>
|
|
108
|
+
<mui-card>...</mui-card>
|
|
109
|
+
</mui-h-stack>`
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
role: "user",
|
|
113
|
+
content: "[stack] Create a vertical stack with two cards and spacing"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
role: "assistant",
|
|
117
|
+
content: `<mui-v-stack space="var(--space-500)">
|
|
118
|
+
<mui-card>...</mui-card>
|
|
119
|
+
<mui-card>...</mui-card>
|
|
120
|
+
</mui-v-stack>`
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
role: "user",
|
|
124
|
+
content: "[layout] Create a grid with 2 columns and card content"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
role: "assistant",
|
|
128
|
+
content: `<mui-grid col="1fr 1fr" space="var(--space-200)">
|
|
129
|
+
<mui-card>...</mui-card>
|
|
130
|
+
<mui-card>...</mui-card>
|
|
131
|
+
</mui-grid>`
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
role: "user",
|
|
135
|
+
content: "[responsive] Show a div above 600px and a different one below"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
role: "assistant",
|
|
139
|
+
content: `<mui-responsive breakpoint="600">
|
|
140
|
+
<div slot="showAbove">...</div>
|
|
141
|
+
<div slot="showBelow">...</div>
|
|
142
|
+
</mui-responsive>`
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
role: "user",
|
|
146
|
+
content: "[rule] Insert a horizontal divider"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
role: "assistant",
|
|
150
|
+
content: '<mui-rule direction="horizontal" length="100%"></mui-rule>'
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
role: "user",
|
|
154
|
+
content: "[rule] Insert a vertical rule of 100px"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
role: "assistant",
|
|
158
|
+
content: '<mui-rule direction="vertical" length="100px"></mui-rule>'
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
role: "user",
|
|
162
|
+
content: "[card] Create a card with heading and footer actions"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
role: "assistant",
|
|
166
|
+
content: `<mui-card>
|
|
167
|
+
<mui-card-header>
|
|
168
|
+
<mui-heading size="3">...</mui-heading>
|
|
169
|
+
</mui-card-header>
|
|
170
|
+
<mui-card-body>...</mui-card-body>
|
|
171
|
+
<mui-card-footer>
|
|
172
|
+
<mui-button-group right>
|
|
173
|
+
<mui-button variant="secondary">Cancel</mui-button>
|
|
174
|
+
<mui-button variant="primary">Submit</mui-button>
|
|
175
|
+
</mui-button-group>
|
|
176
|
+
</mui-card-footer>
|
|
177
|
+
</mui-card>`
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
role: "user",
|
|
181
|
+
content: "[table] Show a table with heading row and add buttons"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
role: "assistant",
|
|
185
|
+
content: `<mui-card>
|
|
186
|
+
<mui-card-header>
|
|
187
|
+
<mui-heading size="3">Title</mui-heading>
|
|
188
|
+
</mui-card-header>
|
|
189
|
+
<mui-rule></mui-rule>
|
|
190
|
+
<mui-card-body>
|
|
191
|
+
<mui-table>
|
|
192
|
+
<mui-row-group heading>
|
|
193
|
+
<mui-row columns="1fr 1fr 1fr auto">
|
|
194
|
+
<mui-cell heading>Office</mui-cell>
|
|
195
|
+
<mui-cell heading>Revenue</mui-cell>
|
|
196
|
+
<mui-cell heading>Cost</mui-cell>
|
|
197
|
+
<mui-cell heading action></mui-cell>
|
|
198
|
+
</mui-row>
|
|
199
|
+
</mui-row-group>
|
|
200
|
+
<mui-row-group>
|
|
201
|
+
<mui-row columns="1fr 1fr 1fr auto">
|
|
202
|
+
<mui-cell>Whalen</mui-cell>
|
|
203
|
+
<mui-cell>$4,400.00</mui-cell>
|
|
204
|
+
<mui-cell>$1,100.00</mui-cell>
|
|
205
|
+
<mui-cell action>
|
|
206
|
+
<mui-button variant="tertiary">
|
|
207
|
+
<mui-icon-add size="small"></mui-icon-add>
|
|
208
|
+
</mui-button>
|
|
209
|
+
</mui-cell>
|
|
210
|
+
</mui-row>
|
|
211
|
+
</mui-row-group>
|
|
212
|
+
</mui-table>
|
|
213
|
+
</mui-card-body>
|
|
214
|
+
</mui-card>`
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
role: "system",
|
|
218
|
+
content: "You are an assistant that converts UI prompts into MUI-style web components using custom tags like <mui-button>, <mui-alert>, <mui-message>, <mui-badge>, <mui-tab-controller>, and <mui-carousel-controller>. Each user message may include tags like [button], [alert], [tab], etc. Use these to help determine intent."
|
|
219
|
+
},
|
|
220
|
+
// Alerts
|
|
221
|
+
{ role: "user", content: "[alert] Show a success alert" },
|
|
222
|
+
{ role: "assistant", content: '<mui-alert variant="success">...</mui-alert>' },
|
|
223
|
+
{ role: "user", content: "[alert] Show an error alert" },
|
|
224
|
+
{ role: "assistant", content: '<mui-alert variant="error">...</mui-alert>' },
|
|
225
|
+
// Messages
|
|
226
|
+
{ role: "user", content: "[message] Create an info message with heading and body" },
|
|
227
|
+
{
|
|
228
|
+
role: "assistant",
|
|
229
|
+
content: `<mui-message heading="Message heading" variant="info">
|
|
230
|
+
<mui-body>...</mui-body>
|
|
231
|
+
</mui-message>`
|
|
232
|
+
},
|
|
233
|
+
{ role: "user", content: "[message] Create a positive message with link" },
|
|
234
|
+
{
|
|
235
|
+
role: "assistant",
|
|
236
|
+
content: `<mui-message heading="Message heading" variant="positive">
|
|
237
|
+
<mui-body>The report has been...</mui-body>
|
|
238
|
+
<mui-link>Download Your Report</mui-link>
|
|
239
|
+
</mui-message>`
|
|
240
|
+
},
|
|
241
|
+
{ role: "user", content: "[message] Create a message with a list" },
|
|
242
|
+
{
|
|
243
|
+
role: "assistant",
|
|
244
|
+
content: `<mui-message heading="Message heading">
|
|
245
|
+
<mui-list as="ul">
|
|
246
|
+
<mui-list-item size="small">Item 1</mui-list-item>
|
|
247
|
+
<mui-list-item size="small">Item 2</mui-list-item>
|
|
248
|
+
</mui-list>
|
|
249
|
+
</mui-message>`
|
|
250
|
+
},
|
|
251
|
+
// Badges
|
|
252
|
+
{ role: "user", content: "[badge] Show a warning badge" },
|
|
253
|
+
{ role: "assistant", content: '<mui-badge variant="warning">...</mui-badge>' },
|
|
254
|
+
// Buttons
|
|
255
|
+
{ role: "user", content: "[button] Create a primary button" },
|
|
256
|
+
{ role: "assistant", content: '<mui-button variant="primary">...</mui-button>' },
|
|
257
|
+
{ role: "user", content: "[button-group] Create a right-aligned button group with cancel and submit" },
|
|
258
|
+
{
|
|
259
|
+
role: "assistant",
|
|
260
|
+
content: `<mui-button-group right>
|
|
261
|
+
<mui-button variant="secondary">Cancel</mui-button>
|
|
262
|
+
<mui-button variant="primary">Submit</mui-button>
|
|
263
|
+
</mui-button-group>`
|
|
264
|
+
},
|
|
265
|
+
{ role: "user", content: "[button] Create a tertiary button with add icon" },
|
|
266
|
+
{
|
|
267
|
+
role: "assistant",
|
|
268
|
+
content: `<mui-button variant="tertiary">
|
|
269
|
+
<mui-icon-add></mui-icon-add>
|
|
270
|
+
</mui-button>`
|
|
271
|
+
},
|
|
272
|
+
// Links
|
|
273
|
+
{ role: "user", content: "[link] Create a primary link" },
|
|
274
|
+
{ role: "assistant", content: '<mui-link variant="primary" href="links.html">...</mui-link>' },
|
|
275
|
+
{ role: "user", content: "[link] Create a small sized link" },
|
|
276
|
+
{ role: "assistant", content: '<mui-link size="small">Link text</mui-link>' },
|
|
277
|
+
// Tabs
|
|
278
|
+
{ role: "user", content: "[tab] Create a tab controller with three tabs" },
|
|
279
|
+
{
|
|
280
|
+
role: "assistant",
|
|
281
|
+
content: `<mui-tab-controller>
|
|
282
|
+
<mui-tab-bar>
|
|
283
|
+
<mui-tab-item active id="item1">Item 1</mui-tab-item>
|
|
284
|
+
<mui-tab-item id="item2">Item 2</mui-tab-item>
|
|
285
|
+
<mui-tab-item id="item3">Item 3</mui-tab-item>
|
|
286
|
+
</mui-tab-bar>
|
|
287
|
+
<mui-tab-panel item="item1">Content 1</mui-tab-panel>
|
|
288
|
+
<mui-tab-panel item="item2">Content 2</mui-tab-panel>
|
|
289
|
+
<mui-tab-panel item="item3">Content 3</mui-tab-panel>
|
|
290
|
+
</mui-tab-controller>`
|
|
291
|
+
},
|
|
292
|
+
// Carousel
|
|
293
|
+
{ role: "user", content: "[carousel] Create a carousel controller with tabs and panels" },
|
|
294
|
+
{
|
|
295
|
+
role: "assistant",
|
|
296
|
+
content: `<mui-carousel-controller>
|
|
297
|
+
<mui-tab-bar slot="controls">
|
|
298
|
+
<mui-tab-item active id="one">1</mui-tab-item>
|
|
299
|
+
<!-- Add other tabs -->
|
|
300
|
+
</mui-tab-bar>
|
|
301
|
+
<mui-carousel-panel slot="item" item="one">
|
|
302
|
+
<mui-grid col="1fr" style="padding-bottom: var(--carousel-tab-offset);">
|
|
303
|
+
<mui-v-stack style="padding: var(--space-500) var(--space-600);">
|
|
304
|
+
<mui-heading level="3" size="2">Item 1</mui-heading>
|
|
305
|
+
<mui-body>Content...</mui-body>
|
|
306
|
+
</mui-v-stack>
|
|
307
|
+
</mui-grid>
|
|
308
|
+
</mui-carousel-panel>
|
|
309
|
+
<!-- Add other panels -->
|
|
310
|
+
</mui-carousel-controller>`
|
|
311
|
+
}
|
|
312
|
+
];
|
|
313
|
+
export {
|
|
314
|
+
t as muiPrompts
|
|
315
|
+
};
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/* ==================== */
|
|
2
|
+
/* __ __ _ _ ___ */
|
|
3
|
+
/* | \/ | | | |_ _| */
|
|
4
|
+
/* | |\/| | | | || | */
|
|
5
|
+
/* | | | | |_| || | */
|
|
6
|
+
/* |_| |_|\___/|___| */
|
|
7
|
+
/* */
|
|
8
|
+
/* michael.ui.system */
|
|
9
|
+
/* ==================== */
|
|
10
|
+
|
|
11
|
+
/* Typography:
|
|
12
|
+
=======================================================================================*/
|
|
13
|
+
sub,
|
|
14
|
+
sup,
|
|
15
|
+
small {
|
|
16
|
+
font-size: var(--text-font-size-xs);
|
|
17
|
+
line-height: var(--text-line-height-xs);
|
|
18
|
+
}
|
|
19
|
+
sub {
|
|
20
|
+
bottom: -0.25em;
|
|
21
|
+
}
|
|
22
|
+
sup {
|
|
23
|
+
top: -0.5em;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Description list
|
|
27
|
+
=======================================================================================*/
|
|
28
|
+
dt {
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Formalize:
|
|
33
|
+
=======================================================================================*/
|
|
34
|
+
|
|
35
|
+
label {
|
|
36
|
+
margin-bottom: var(--space-100);
|
|
37
|
+
}
|
|
38
|
+
input,
|
|
39
|
+
textarea {
|
|
40
|
+
border-radius: var(--radius-000);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
input[type='text'],
|
|
44
|
+
input[type='email'],
|
|
45
|
+
input[type='number'],
|
|
46
|
+
input[type='password'],
|
|
47
|
+
input[type='file'],
|
|
48
|
+
input[type='search'],
|
|
49
|
+
input[type='range'],
|
|
50
|
+
input[type='button'],
|
|
51
|
+
input[type='submit'],
|
|
52
|
+
input[type='reset'],
|
|
53
|
+
button,
|
|
54
|
+
textarea,
|
|
55
|
+
fieldset {
|
|
56
|
+
border: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
input[type='text'],
|
|
60
|
+
input[type='email'],
|
|
61
|
+
input[type='number'],
|
|
62
|
+
input[type='password'],
|
|
63
|
+
input[type='search'],
|
|
64
|
+
input[type='range'] {
|
|
65
|
+
height: 4.2rem;
|
|
66
|
+
padding: var(--space-000) var(--space-400);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
input[type='text'],
|
|
70
|
+
input[type='email'],
|
|
71
|
+
input[type='number'],
|
|
72
|
+
input[type='password'],
|
|
73
|
+
input[type='file'],
|
|
74
|
+
input[type='search'],
|
|
75
|
+
input[type='range'],
|
|
76
|
+
textarea,
|
|
77
|
+
fieldset {
|
|
78
|
+
box-shadow: inset 0 0 0 2px #e0e0e0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Textarea styles */
|
|
82
|
+
textarea {
|
|
83
|
+
padding: var(--space-400);
|
|
84
|
+
height: calc(6em + 0.375em);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Legend */
|
|
88
|
+
legend {
|
|
89
|
+
padding: var(--space-000) var(--space-200);
|
|
90
|
+
margin-left: -0.8rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Fieldset styles & File Upload style */
|
|
94
|
+
fieldset {
|
|
95
|
+
border-radius: 0.3125em;
|
|
96
|
+
padding: var(--space-300) var(--space-500);
|
|
97
|
+
padding-bottom: var(--space-000);
|
|
98
|
+
}
|
|
99
|
+
fieldset ul {
|
|
100
|
+
list-style: none;
|
|
101
|
+
margin-bottom: var(--space-000);
|
|
102
|
+
}
|
|
103
|
+
fieldset ul label {
|
|
104
|
+
margin-bottom: var(--space-000);
|
|
105
|
+
}
|
|
106
|
+
fieldset li {
|
|
107
|
+
margin-bottom: var(--space-400);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Select */
|
|
111
|
+
select {
|
|
112
|
+
height: 1.875em;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Radio & Checklist Styles */
|
|
116
|
+
input[type='checkbox'],
|
|
117
|
+
input[type='radio'] {
|
|
118
|
+
margin: 0 var(--space-200) 0 0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
input[type='file'] {
|
|
122
|
+
font-size: var(--text-font-size-xs);
|
|
123
|
+
padding: var(--space-400);
|
|
124
|
+
margin-bottom: var(--space-500);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
button:focus,
|
|
128
|
+
input[type='submit']:focus {
|
|
129
|
+
box-shadow: inset 0 0 0 1px white;
|
|
130
|
+
}
|