@keenmate/pure-admin-core 1.4.0 → 1.5.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 +8 -8
- package/dist/css/main.css +167 -65
- package/package.json +6 -5
- package/snippets/buttons.html +4 -4
- package/snippets/forms.html +534 -534
- package/snippets/layout.html +11 -11
- package/snippets/tables.html +8 -8
- package/snippets/tabs.html +6 -6
- package/snippets/timeline.html +24 -24
- package/snippets/tooltips.html +2 -2
- package/snippets/typography.html +101 -101
- package/snippets/utilities.html +3 -3
- package/src/scss/core-components/_buttons.scss +2 -2
- package/src/scss/core-components/_cards.scss +41 -0
- package/src/scss/core-components/_detail-panel.scss +7 -2
- package/src/scss/core-components/_pagers.scss +4 -4
- package/src/scss/core-components/_tables.scss +54 -4
- package/src/scss/core-components/_tabs.scss +0 -2
- package/src/scss/core-components/_timeline.scss +4 -4
- package/src/scss/core-components/_tooltips.scss +1 -2
- package/src/scss/core-components/_utilities.scss +24 -11
- package/src/scss/core-components/layout/_layout-container.scss +7 -7
- package/src/scss/core-components/layout/_navbar-elements.scss +5 -5
- package/src/scss/core-components/layout/_navbar.scss +3 -3
- package/src/scss/utilities.scss +0 -8
- package/src/scss/variables/_system.scss +1 -0
package/snippets/forms.html
CHANGED
|
@@ -1,534 +1,534 @@
|
|
|
1
|
-
<!-- ================================
|
|
2
|
-
FORM SNIPPETS
|
|
3
|
-
Pure Admin Visual Framework
|
|
4
|
-
================================ -->
|
|
5
|
-
|
|
6
|
-
<!-- BASIC FORM ELEMENTS -->
|
|
7
|
-
|
|
8
|
-
<!-- Text Input -->
|
|
9
|
-
<div class="pa-form-group">
|
|
10
|
-
<label class="pa-form-label" for="username">Username</label>
|
|
11
|
-
<input type="text" class="pa-input" id="username" placeholder="Enter username">
|
|
12
|
-
</div>
|
|
13
|
-
|
|
14
|
-
<!-- Email Input -->
|
|
15
|
-
<div class="pa-form-group">
|
|
16
|
-
<label class="pa-form-label" for="email">Email</label>
|
|
17
|
-
<input type="email" class="pa-input" id="email" placeholder="your@email.com">
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<!-- Password Input -->
|
|
21
|
-
<div class="pa-form-group">
|
|
22
|
-
<label class="pa-form-label" for="password">Password</label>
|
|
23
|
-
<input type="password" class="pa-input" id="password" placeholder="Enter password">
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<!-- Textarea -->
|
|
27
|
-
<div class="pa-form-group">
|
|
28
|
-
<label class="pa-form-label" for="message">Message</label>
|
|
29
|
-
<textarea class="pa-textarea" id="message" rows="4" placeholder="Enter your message"></textarea>
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<!-- Select -->
|
|
33
|
-
<div class="pa-form-group">
|
|
34
|
-
<label class="pa-form-label" for="country">Country</label>
|
|
35
|
-
<select class="pa-select" id="country">
|
|
36
|
-
<option>United States</option>
|
|
37
|
-
<option>United Kingdom</option>
|
|
38
|
-
<option>Canada</option>
|
|
39
|
-
</select>
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<!-- INPUT SIZES -->
|
|
44
|
-
|
|
45
|
-
<!-- Extra Small Input -->
|
|
46
|
-
<input type="text" class="pa-input pa-input--xs" placeholder="Extra small">
|
|
47
|
-
|
|
48
|
-
<!-- Small Input -->
|
|
49
|
-
<input type="text" class="pa-input pa-input--sm" placeholder="Small">
|
|
50
|
-
|
|
51
|
-
<!-- Default Input -->
|
|
52
|
-
<input type="text" class="pa-input" placeholder="Default">
|
|
53
|
-
|
|
54
|
-
<!-- Large Input -->
|
|
55
|
-
<input type="text" class="pa-input pa-input--lg" placeholder="Large">
|
|
56
|
-
|
|
57
|
-
<!-- Extra Large Input -->
|
|
58
|
-
<input type="text" class="pa-input pa-input--xl" placeholder="Extra large">
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<!-- INPUT STATES -->
|
|
62
|
-
|
|
63
|
-
<!-- Disabled Input -->
|
|
64
|
-
<input type="text" class="pa-input" disabled value="Disabled input">
|
|
65
|
-
|
|
66
|
-
<!-- Readonly Input -->
|
|
67
|
-
<input type="text" class="pa-input" readonly value="Readonly input">
|
|
68
|
-
|
|
69
|
-
<!-- Required Input -->
|
|
70
|
-
<div class="pa-form-group pa-form-group--required">
|
|
71
|
-
<label class="pa-form-label" for="required-field">Required Field</label>
|
|
72
|
-
<input type="text" class="pa-input" id="required-field" required>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<!-- VALIDATION STATES -->
|
|
77
|
-
|
|
78
|
-
<!-- Success State -->
|
|
79
|
-
<div class="pa-form-group pa-form-group--success">
|
|
80
|
-
<label class="pa-form-label" for="valid-input">Valid Input</label>
|
|
81
|
-
<input type="text" class="pa-input" id="valid-input" value="Valid value">
|
|
82
|
-
<small class="pa-form-help pa-form-help--success">Looks good!</small>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
<!-- Warning State -->
|
|
86
|
-
<div class="pa-form-group pa-form-group--warning">
|
|
87
|
-
<label class="pa-form-label" for="warning-input">Warning Input</label>
|
|
88
|
-
<input type="text" class="pa-input" id="warning-input" value="Check this">
|
|
89
|
-
<small class="pa-form-help pa-form-help--warning">Please verify this field.</small>
|
|
90
|
-
</div>
|
|
91
|
-
|
|
92
|
-
<!-- Error State -->
|
|
93
|
-
<div class="pa-form-group pa-form-group--error">
|
|
94
|
-
<label class="pa-form-label" for="invalid-input">Invalid Input</label>
|
|
95
|
-
<input type="text" class="pa-input" id="invalid-input" value="Invalid value">
|
|
96
|
-
<small class="pa-form-help pa-form-help--error">Please provide a valid value.</small>
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<!-- THEME COLOR VARIANTS -->
|
|
101
|
-
<!-- Use --pa-color-1 through --pa-color-9 CSS variables (set by theme) -->
|
|
102
|
-
|
|
103
|
-
<!-- Color 1 with matching help text -->
|
|
104
|
-
<div class="pa-form-group">
|
|
105
|
-
<label class="pa-form-label" for="color1-input">Color 1</label>
|
|
106
|
-
<input type="text" class="pa-input pa-input--color-1" id="color1-input" value="Color 1 input">
|
|
107
|
-
<small class="pa-form-help pa-form-help--color-1">Colored help text</small>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<!-- Color 2 with matching help text -->
|
|
111
|
-
<div class="pa-form-group">
|
|
112
|
-
<label class="pa-form-label" for="color2-input">Color 2</label>
|
|
113
|
-
<input type="text" class="pa-input pa-input--color-2" id="color2-input" value="Color 2 input">
|
|
114
|
-
<small class="pa-form-help pa-form-help--color-2">Colored help text</small>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<!-- Color 3 with gray help text (no color class) -->
|
|
118
|
-
<div class="pa-form-group">
|
|
119
|
-
<label class="pa-form-label" for="color3-input">Color 3</label>
|
|
120
|
-
<input type="text" class="pa-input pa-input--color-3" id="color3-input" value="Color 3 input">
|
|
121
|
-
<small class="pa-form-help">Gray help text (no color class)</small>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
<!-- Select with color variant -->
|
|
125
|
-
<div class="pa-form-group">
|
|
126
|
-
<label class="pa-form-label" for="color-select">Color Select</label>
|
|
127
|
-
<select class="pa-select pa-select--color-1" id="color-select">
|
|
128
|
-
<option>Option 1</option>
|
|
129
|
-
<option>Option 2</option>
|
|
130
|
-
</select>
|
|
131
|
-
</div>
|
|
132
|
-
|
|
133
|
-
<!-- Textarea with color variant -->
|
|
134
|
-
<div class="pa-form-group">
|
|
135
|
-
<label class="pa-form-label" for="color-textarea">Color Textarea</label>
|
|
136
|
-
<textarea class="pa-textarea pa-textarea--color-2" id="color-textarea">Color 2 textarea</textarea>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<!-- CUSTOM TRI-STATE CHECKBOXES -->
|
|
141
|
-
<!-- States: unchecked, checked, indeterminate (set via JS: checkbox.indeterminate = true) -->
|
|
142
|
-
|
|
143
|
-
<!-- Basic Checkbox -->
|
|
144
|
-
<label class="pa-checkbox">
|
|
145
|
-
<input type="checkbox">
|
|
146
|
-
<span class="pa-checkbox__box"></span>
|
|
147
|
-
<span class="pa-checkbox__label">Unchecked option</span>
|
|
148
|
-
</label>
|
|
149
|
-
|
|
150
|
-
<!-- Checked Checkbox -->
|
|
151
|
-
<label class="pa-checkbox">
|
|
152
|
-
<input type="checkbox" checked>
|
|
153
|
-
<span class="pa-checkbox__box"></span>
|
|
154
|
-
<span class="pa-checkbox__label">Checked option</span>
|
|
155
|
-
</label>
|
|
156
|
-
|
|
157
|
-
<!-- Indeterminate Checkbox (set via JavaScript) -->
|
|
158
|
-
<label class="pa-checkbox">
|
|
159
|
-
<input type="checkbox" id="my-indeterminate-checkbox">
|
|
160
|
-
<span class="pa-checkbox__box"></span>
|
|
161
|
-
<span class="pa-checkbox__label">Indeterminate (partial selection)</span>
|
|
162
|
-
</label>
|
|
163
|
-
<script>document.getElementById('my-indeterminate-checkbox').indeterminate = true;</script>
|
|
164
|
-
|
|
165
|
-
<!-- Disabled Checkbox -->
|
|
166
|
-
<label class="pa-checkbox pa-checkbox--disabled">
|
|
167
|
-
<input type="checkbox" disabled>
|
|
168
|
-
<span class="pa-checkbox__box"></span>
|
|
169
|
-
<span class="pa-checkbox__label">Disabled unchecked</span>
|
|
170
|
-
</label>
|
|
171
|
-
|
|
172
|
-
<label class="pa-checkbox pa-checkbox--disabled">
|
|
173
|
-
<input type="checkbox" checked disabled>
|
|
174
|
-
<span class="pa-checkbox__box"></span>
|
|
175
|
-
<span class="pa-checkbox__label">Disabled checked</span>
|
|
176
|
-
</label>
|
|
177
|
-
|
|
178
|
-
<!-- Checkbox Sizes -->
|
|
179
|
-
<label class="pa-checkbox pa-checkbox--xs">
|
|
180
|
-
<input type="checkbox" checked>
|
|
181
|
-
<span class="pa-checkbox__box"></span>
|
|
182
|
-
<span class="pa-checkbox__label">Extra Small (xs)</span>
|
|
183
|
-
</label>
|
|
184
|
-
|
|
185
|
-
<label class="pa-checkbox pa-checkbox--sm">
|
|
186
|
-
<input type="checkbox" checked>
|
|
187
|
-
<span class="pa-checkbox__box"></span>
|
|
188
|
-
<span class="pa-checkbox__label">Small (sm)</span>
|
|
189
|
-
</label>
|
|
190
|
-
|
|
191
|
-
<label class="pa-checkbox">
|
|
192
|
-
<input type="checkbox" checked>
|
|
193
|
-
<span class="pa-checkbox__box"></span>
|
|
194
|
-
<span class="pa-checkbox__label">Default</span>
|
|
195
|
-
</label>
|
|
196
|
-
|
|
197
|
-
<label class="pa-checkbox pa-checkbox--lg">
|
|
198
|
-
<input type="checkbox" checked>
|
|
199
|
-
<span class="pa-checkbox__box"></span>
|
|
200
|
-
<span class="pa-checkbox__label">Large (lg)</span>
|
|
201
|
-
</label>
|
|
202
|
-
|
|
203
|
-
<label class="pa-checkbox pa-checkbox--xl">
|
|
204
|
-
<input type="checkbox" checked>
|
|
205
|
-
<span class="pa-checkbox__box"></span>
|
|
206
|
-
<span class="pa-checkbox__label">Extra Large (xl)</span>
|
|
207
|
-
</label>
|
|
208
|
-
|
|
209
|
-
<!-- Checkbox Group (vertical stack) -->
|
|
210
|
-
<div class="pa-checkbox-group">
|
|
211
|
-
<label class="pa-checkbox">
|
|
212
|
-
<input type="checkbox" checked>
|
|
213
|
-
<span class="pa-checkbox__box"></span>
|
|
214
|
-
<span class="pa-checkbox__label">Option A</span>
|
|
215
|
-
</label>
|
|
216
|
-
<label class="pa-checkbox">
|
|
217
|
-
<input type="checkbox">
|
|
218
|
-
<span class="pa-checkbox__box"></span>
|
|
219
|
-
<span class="pa-checkbox__label">Option B</span>
|
|
220
|
-
</label>
|
|
221
|
-
<label class="pa-checkbox">
|
|
222
|
-
<input type="checkbox">
|
|
223
|
-
<span class="pa-checkbox__box"></span>
|
|
224
|
-
<span class="pa-checkbox__label">Option C</span>
|
|
225
|
-
</label>
|
|
226
|
-
</div>
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
<!-- RADIO BUTTONS (native styling) -->
|
|
230
|
-
|
|
231
|
-
<!-- Radio Button Group -->
|
|
232
|
-
<div class="pa-radio-group">
|
|
233
|
-
<label class="pa-radio">
|
|
234
|
-
<input type="radio" name="radioGroup" checked>
|
|
235
|
-
Option 1 (selected)
|
|
236
|
-
</label>
|
|
237
|
-
<label class="pa-radio">
|
|
238
|
-
<input type="radio" name="radioGroup">
|
|
239
|
-
Option 2
|
|
240
|
-
</label>
|
|
241
|
-
<label class="pa-radio">
|
|
242
|
-
<input type="radio" name="radioGroup" disabled>
|
|
243
|
-
Option 3 (disabled)
|
|
244
|
-
</label>
|
|
245
|
-
</div>
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
<!-- INPUT GROUPS -->
|
|
249
|
-
|
|
250
|
-
<!-- Prepend only -->
|
|
251
|
-
<div class="pa-input-group">
|
|
252
|
-
<span class="pa-input-group__prepend">@</span>
|
|
253
|
-
<input type="text" class="pa-input" placeholder="Username">
|
|
254
|
-
</div>
|
|
255
|
-
|
|
256
|
-
<!-- Append only -->
|
|
257
|
-
<div class="pa-input-group">
|
|
258
|
-
<input type="text" class="pa-input" placeholder="Amount">
|
|
259
|
-
<span class="pa-input-group__append">USD</span>
|
|
260
|
-
</div>
|
|
261
|
-
|
|
262
|
-
<!-- Prepend and Append -->
|
|
263
|
-
<div class="pa-input-group">
|
|
264
|
-
<span class="pa-input-group__prepend">$</span>
|
|
265
|
-
<input type="text" class="pa-input" placeholder="0.00">
|
|
266
|
-
<span class="pa-input-group__append">.00</span>
|
|
267
|
-
</div>
|
|
268
|
-
|
|
269
|
-
<!-- Input with Button -->
|
|
270
|
-
<div class="pa-input-group">
|
|
271
|
-
<input type="text" class="pa-input" placeholder="Search...">
|
|
272
|
-
<button class="pa-input-group__button pa-btn pa-btn--primary">Search</button>
|
|
273
|
-
</div>
|
|
274
|
-
|
|
275
|
-
<!-- Prepend + Input + Button -->
|
|
276
|
-
<div class="pa-input-group">
|
|
277
|
-
<span class="pa-input-group__prepend">🔍</span>
|
|
278
|
-
<input type="text" class="pa-input" placeholder="Search...">
|
|
279
|
-
<button class="pa-input-group__button pa-btn pa-btn--primary">Go</button>
|
|
280
|
-
</div>
|
|
281
|
-
|
|
282
|
-
<!-- Input + Append + Button -->
|
|
283
|
-
<div class="pa-input-group">
|
|
284
|
-
<input type="text" class="pa-input" placeholder="Enter amount">
|
|
285
|
-
<span class="pa-input-group__append">USD</span>
|
|
286
|
-
<button class="pa-input-group__button pa-btn pa-btn--success">Convert</button>
|
|
287
|
-
</div>
|
|
288
|
-
|
|
289
|
-
<!-- Button + Input + Append -->
|
|
290
|
-
<div class="pa-input-group">
|
|
291
|
-
<button class="pa-input-group__button pa-btn pa-btn--secondary">-</button>
|
|
292
|
-
<input type="number" class="pa-input" value="1">
|
|
293
|
-
<span class="pa-input-group__append">items</span>
|
|
294
|
-
</div>
|
|
295
|
-
|
|
296
|
-
<!-- Prepend + Input + Append + Button -->
|
|
297
|
-
<div class="pa-input-group">
|
|
298
|
-
<span class="pa-input-group__prepend">https://</span>
|
|
299
|
-
<input type="text" class="pa-input" placeholder="example.com">
|
|
300
|
-
<span class="pa-input-group__append">.com</span>
|
|
301
|
-
<button class="pa-input-group__button pa-btn pa-btn--primary">Visit</button>
|
|
302
|
-
</div>
|
|
303
|
-
|
|
304
|
-
<!-- Button + Input + Button (quantity controls) -->
|
|
305
|
-
<div class="pa-input-group">
|
|
306
|
-
<button class="pa-input-group__button pa-btn pa-btn--secondary">-</button>
|
|
307
|
-
<input type="number" class="pa-input text-center" value="1">
|
|
308
|
-
<button class="pa-input-group__button pa-btn pa-btn--secondary">+</button>
|
|
309
|
-
</div>
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
<!-- FORM LAYOUTS -->
|
|
313
|
-
|
|
314
|
-
<!-- Inline Form -->
|
|
315
|
-
<form class="pa-form pa-form--inline">
|
|
316
|
-
<input type="text" class="pa-input" placeholder="Username">
|
|
317
|
-
<input type="password" class="pa-input" placeholder="Password">
|
|
318
|
-
<button class="pa-btn pa-btn--primary">Sign in</button>
|
|
319
|
-
</form>
|
|
320
|
-
|
|
321
|
-
<!-- Horizontal Form Groups (label left, input right) -->
|
|
322
|
-
|
|
323
|
-
<!-- Single Horizontal Field -->
|
|
324
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
325
|
-
<label for="email">Email</label>
|
|
326
|
-
<input type="email" id="email" class="pa-input" placeholder="your@email.com">
|
|
327
|
-
</div>
|
|
328
|
-
|
|
329
|
-
<!-- Horizontal Field with Select -->
|
|
330
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
331
|
-
<label for="department">Department</label>
|
|
332
|
-
<select id="department" class="pa-select">
|
|
333
|
-
<option>Engineering</option>
|
|
334
|
-
<option>Marketing</option>
|
|
335
|
-
<option>Sales</option>
|
|
336
|
-
</select>
|
|
337
|
-
</div>
|
|
338
|
-
|
|
339
|
-
<!-- Horizontal Field with Textarea -->
|
|
340
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
341
|
-
<label for="notes">Notes</label>
|
|
342
|
-
<textarea id="notes" class="pa-textarea" rows="3" placeholder="Additional notes..."></textarea>
|
|
343
|
-
</div>
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
<!-- HORIZONTAL FORM LAYOUTS WITH GRIDS -->
|
|
347
|
-
|
|
348
|
-
<!-- Multi-Column Horizontal Form (3 equal columns) -->
|
|
349
|
-
<form class="pa-form">
|
|
350
|
-
<div class="pa-row">
|
|
351
|
-
<div class="pa-col-100 pa-col-md-1-3">
|
|
352
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
353
|
-
<label for="fname">First Name</label>
|
|
354
|
-
<input type="text" id="fname" class="pa-input" placeholder="John">
|
|
355
|
-
</div>
|
|
356
|
-
</div>
|
|
357
|
-
|
|
358
|
-
<div class="pa-col-100 pa-col-md-1-3">
|
|
359
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
360
|
-
<label for="lname">Last Name</label>
|
|
361
|
-
<input type="text" id="lname" class="pa-input" placeholder="Doe">
|
|
362
|
-
</div>
|
|
363
|
-
</div>
|
|
364
|
-
|
|
365
|
-
<div class="pa-col-100 pa-col-md-1-3">
|
|
366
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
367
|
-
<label for="email">Email</label>
|
|
368
|
-
<input type="email" id="email" class="pa-input" placeholder="john@example.com">
|
|
369
|
-
</div>
|
|
370
|
-
</div>
|
|
371
|
-
</div>
|
|
372
|
-
</form>
|
|
373
|
-
|
|
374
|
-
<!-- Multi-Column Horizontal Form (varying widths) -->
|
|
375
|
-
<form class="pa-form">
|
|
376
|
-
<div class="pa-row">
|
|
377
|
-
<!-- Phone (smaller - 25%) -->
|
|
378
|
-
<div class="pa-col-100 pa-col-md-25">
|
|
379
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
380
|
-
<label for="phone">Phone</label>
|
|
381
|
-
<input type="tel" id="phone" class="pa-input" placeholder="+1 555-0123">
|
|
382
|
-
</div>
|
|
383
|
-
</div>
|
|
384
|
-
|
|
385
|
-
<!-- Department (larger - 50%) -->
|
|
386
|
-
<div class="pa-col-100 pa-col-md-50">
|
|
387
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
388
|
-
<label for="dept">Department</label>
|
|
389
|
-
<select id="dept" class="pa-select">
|
|
390
|
-
<option>Select...</option>
|
|
391
|
-
<option>Engineering</option>
|
|
392
|
-
<option>Marketing</option>
|
|
393
|
-
</select>
|
|
394
|
-
</div>
|
|
395
|
-
</div>
|
|
396
|
-
|
|
397
|
-
<!-- Job Title (medium - 25%) -->
|
|
398
|
-
<div class="pa-col-100 pa-col-md-25">
|
|
399
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
400
|
-
<label for="title">Job Title</label>
|
|
401
|
-
<input type="text" id="title" class="pa-input" placeholder="Senior Developer">
|
|
402
|
-
</div>
|
|
403
|
-
</div>
|
|
404
|
-
</div>
|
|
405
|
-
</form>
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
<!-- COMPLETE HORIZONTAL FORM EXAMPLE -->
|
|
409
|
-
<div class="pa-card">
|
|
410
|
-
<div class="pa-card__header">
|
|
411
|
-
<h3>Employee Information</h3>
|
|
412
|
-
</div>
|
|
413
|
-
<div class="pa-card__body">
|
|
414
|
-
<form class="pa-form">
|
|
415
|
-
<!-- Line 1: Personal Info -->
|
|
416
|
-
<div class="pa-row">
|
|
417
|
-
<div class="pa-col-100 pa-col-md-1-3">
|
|
418
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
419
|
-
<label for="first">First Name</label>
|
|
420
|
-
<input type="text" id="first" class="pa-input" placeholder="John">
|
|
421
|
-
</div>
|
|
422
|
-
</div>
|
|
423
|
-
<div class="pa-col-100 pa-col-md-1-3">
|
|
424
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
425
|
-
<label for="last">Last Name</label>
|
|
426
|
-
<input type="text" id="last" class="pa-input" placeholder="Doe">
|
|
427
|
-
</div>
|
|
428
|
-
</div>
|
|
429
|
-
<div class="pa-col-100 pa-col-md-1-3">
|
|
430
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
431
|
-
<label for="mail">Email</label>
|
|
432
|
-
<input type="email" id="mail" class="pa-input" placeholder="john.doe@company.com">
|
|
433
|
-
</div>
|
|
434
|
-
</div>
|
|
435
|
-
</div>
|
|
436
|
-
|
|
437
|
-
<!-- Line 2: Address -->
|
|
438
|
-
<div class="pa-row">
|
|
439
|
-
<div class="pa-col-100 pa-col-md-50">
|
|
440
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
441
|
-
<label for="address">Address</label>
|
|
442
|
-
<input type="text" id="address" class="pa-input" placeholder="123 Main Street">
|
|
443
|
-
</div>
|
|
444
|
-
</div>
|
|
445
|
-
<div class="pa-col-100 pa-col-md-1-3">
|
|
446
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
447
|
-
<label for="city">City</label>
|
|
448
|
-
<input type="text" id="city" class="pa-input" placeholder="San Francisco">
|
|
449
|
-
</div>
|
|
450
|
-
</div>
|
|
451
|
-
<div class="pa-col-100 pa-col-md-20">
|
|
452
|
-
<div class="pa-form-group pa-form-group--horizontal">
|
|
453
|
-
<label for="zip">Zip</label>
|
|
454
|
-
<input type="text" id="zip" class="pa-input" placeholder="94102">
|
|
455
|
-
</div>
|
|
456
|
-
</div>
|
|
457
|
-
</div>
|
|
458
|
-
|
|
459
|
-
<!-- Submit Buttons -->
|
|
460
|
-
<div class="pa-row">
|
|
461
|
-
<div class="pa-col-100 text-
|
|
462
|
-
<button type="button" class="pa-btn pa-btn--secondary">Cancel</button>
|
|
463
|
-
<button type="submit" class="pa-btn pa-btn--primary">Submit</button>
|
|
464
|
-
</div>
|
|
465
|
-
</div>
|
|
466
|
-
</form>
|
|
467
|
-
</div>
|
|
468
|
-
</div>
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
<!-- ================================
|
|
472
|
-
COMPONENT REFERENCE
|
|
473
|
-
================================ -->
|
|
474
|
-
|
|
475
|
-
<!--
|
|
476
|
-
FORM ELEMENTS:
|
|
477
|
-
- .pa-form: Form container
|
|
478
|
-
- .pa-form--inline: Inline form layout
|
|
479
|
-
- .pa-form-group: Form group wrapper
|
|
480
|
-
- .pa-form-group--required: Shows required indicator
|
|
481
|
-
- .pa-form-group--horizontal: Label-left, input-right layout
|
|
482
|
-
- .pa-form-group--success: Success validation state
|
|
483
|
-
- .pa-form-group--warning: Warning validation state
|
|
484
|
-
- .pa-form-group--error: Error validation state
|
|
485
|
-
- .pa-form-label: Form label
|
|
486
|
-
|
|
487
|
-
INPUTS:
|
|
488
|
-
- .pa-input: Text input base class
|
|
489
|
-
- .pa-input--xs, --sm, --lg, --xl: Size variants
|
|
490
|
-
- .pa-input--success, --warning, --error: Validation states
|
|
491
|
-
- .pa-input--color-1 through --color-9: Theme color variants
|
|
492
|
-
|
|
493
|
-
TEXTAREA:
|
|
494
|
-
- .pa-textarea: Textarea element
|
|
495
|
-
- .pa-textarea--xs, --sm, --lg, --xl: Size variants
|
|
496
|
-
- .pa-textarea--success, --warning, --error: Validation states
|
|
497
|
-
- .pa-textarea--color-1 through --color-9: Theme color variants
|
|
498
|
-
|
|
499
|
-
SELECT:
|
|
500
|
-
- .pa-select: Select dropdown
|
|
501
|
-
- .pa-select--xs, --sm, --lg, --xl: Size variants
|
|
502
|
-
- .pa-select--success, --warning, --error: Validation states
|
|
503
|
-
- .pa-select--color-1 through --color-9: Theme color variants
|
|
504
|
-
|
|
505
|
-
CHECKBOXES (custom tri-state):
|
|
506
|
-
- .pa-checkbox: Checkbox wrapper label
|
|
507
|
-
- .pa-checkbox__box: Custom checkbox visual
|
|
508
|
-
- .pa-checkbox__label: Checkbox label text
|
|
509
|
-
- .pa-checkbox--xs, --sm, --lg, --xl: Size variants
|
|
510
|
-
- .pa-checkbox--disabled: Disabled state
|
|
511
|
-
- .pa-checkbox-group: Vertical checkbox group
|
|
512
|
-
|
|
513
|
-
RADIO BUTTONS:
|
|
514
|
-
- .pa-radio: Radio wrapper label
|
|
515
|
-
- .pa-radio-group: Vertical radio group
|
|
516
|
-
|
|
517
|
-
INPUT GROUPS:
|
|
518
|
-
- .pa-input-group: Input group container
|
|
519
|
-
- .pa-input-group__prepend: Left addon
|
|
520
|
-
- .pa-input-group__append: Right addon
|
|
521
|
-
- .pa-input-group__button: Button addon
|
|
522
|
-
|
|
523
|
-
HELP TEXT:
|
|
524
|
-
- .pa-form-help: Help/hint text below inputs
|
|
525
|
-
- .pa-form-help--success: Success message
|
|
526
|
-
- .pa-form-help--warning: Warning message
|
|
527
|
-
- .pa-form-help--error: Error message
|
|
528
|
-
- .pa-form-help--color-1 through --color-9: Theme color variants
|
|
529
|
-
|
|
530
|
-
GRID LAYOUT (for multi-column forms):
|
|
531
|
-
- .pa-row: Row container (flexbox)
|
|
532
|
-
- .pa-col-100: Full width on mobile
|
|
533
|
-
- .pa-col-md-25, .pa-col-md-50, .pa-col-md-1-3, etc.: Responsive column widths
|
|
534
|
-
-->
|
|
1
|
+
<!-- ================================
|
|
2
|
+
FORM SNIPPETS
|
|
3
|
+
Pure Admin Visual Framework
|
|
4
|
+
================================ -->
|
|
5
|
+
|
|
6
|
+
<!-- BASIC FORM ELEMENTS -->
|
|
7
|
+
|
|
8
|
+
<!-- Text Input -->
|
|
9
|
+
<div class="pa-form-group">
|
|
10
|
+
<label class="pa-form-label" for="username">Username</label>
|
|
11
|
+
<input type="text" class="pa-input" id="username" placeholder="Enter username">
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<!-- Email Input -->
|
|
15
|
+
<div class="pa-form-group">
|
|
16
|
+
<label class="pa-form-label" for="email">Email</label>
|
|
17
|
+
<input type="email" class="pa-input" id="email" placeholder="your@email.com">
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<!-- Password Input -->
|
|
21
|
+
<div class="pa-form-group">
|
|
22
|
+
<label class="pa-form-label" for="password">Password</label>
|
|
23
|
+
<input type="password" class="pa-input" id="password" placeholder="Enter password">
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<!-- Textarea -->
|
|
27
|
+
<div class="pa-form-group">
|
|
28
|
+
<label class="pa-form-label" for="message">Message</label>
|
|
29
|
+
<textarea class="pa-textarea" id="message" rows="4" placeholder="Enter your message"></textarea>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!-- Select -->
|
|
33
|
+
<div class="pa-form-group">
|
|
34
|
+
<label class="pa-form-label" for="country">Country</label>
|
|
35
|
+
<select class="pa-select" id="country">
|
|
36
|
+
<option>United States</option>
|
|
37
|
+
<option>United Kingdom</option>
|
|
38
|
+
<option>Canada</option>
|
|
39
|
+
</select>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
<!-- INPUT SIZES -->
|
|
44
|
+
|
|
45
|
+
<!-- Extra Small Input -->
|
|
46
|
+
<input type="text" class="pa-input pa-input--xs" placeholder="Extra small">
|
|
47
|
+
|
|
48
|
+
<!-- Small Input -->
|
|
49
|
+
<input type="text" class="pa-input pa-input--sm" placeholder="Small">
|
|
50
|
+
|
|
51
|
+
<!-- Default Input -->
|
|
52
|
+
<input type="text" class="pa-input" placeholder="Default">
|
|
53
|
+
|
|
54
|
+
<!-- Large Input -->
|
|
55
|
+
<input type="text" class="pa-input pa-input--lg" placeholder="Large">
|
|
56
|
+
|
|
57
|
+
<!-- Extra Large Input -->
|
|
58
|
+
<input type="text" class="pa-input pa-input--xl" placeholder="Extra large">
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
<!-- INPUT STATES -->
|
|
62
|
+
|
|
63
|
+
<!-- Disabled Input -->
|
|
64
|
+
<input type="text" class="pa-input" disabled value="Disabled input">
|
|
65
|
+
|
|
66
|
+
<!-- Readonly Input -->
|
|
67
|
+
<input type="text" class="pa-input" readonly value="Readonly input">
|
|
68
|
+
|
|
69
|
+
<!-- Required Input -->
|
|
70
|
+
<div class="pa-form-group pa-form-group--required">
|
|
71
|
+
<label class="pa-form-label" for="required-field">Required Field</label>
|
|
72
|
+
<input type="text" class="pa-input" id="required-field" required>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
<!-- VALIDATION STATES -->
|
|
77
|
+
|
|
78
|
+
<!-- Success State -->
|
|
79
|
+
<div class="pa-form-group pa-form-group--success">
|
|
80
|
+
<label class="pa-form-label" for="valid-input">Valid Input</label>
|
|
81
|
+
<input type="text" class="pa-input" id="valid-input" value="Valid value">
|
|
82
|
+
<small class="pa-form-help pa-form-help--success">Looks good!</small>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- Warning State -->
|
|
86
|
+
<div class="pa-form-group pa-form-group--warning">
|
|
87
|
+
<label class="pa-form-label" for="warning-input">Warning Input</label>
|
|
88
|
+
<input type="text" class="pa-input" id="warning-input" value="Check this">
|
|
89
|
+
<small class="pa-form-help pa-form-help--warning">Please verify this field.</small>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<!-- Error State -->
|
|
93
|
+
<div class="pa-form-group pa-form-group--error">
|
|
94
|
+
<label class="pa-form-label" for="invalid-input">Invalid Input</label>
|
|
95
|
+
<input type="text" class="pa-input" id="invalid-input" value="Invalid value">
|
|
96
|
+
<small class="pa-form-help pa-form-help--error">Please provide a valid value.</small>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
<!-- THEME COLOR VARIANTS -->
|
|
101
|
+
<!-- Use --pa-color-1 through --pa-color-9 CSS variables (set by theme) -->
|
|
102
|
+
|
|
103
|
+
<!-- Color 1 with matching help text -->
|
|
104
|
+
<div class="pa-form-group">
|
|
105
|
+
<label class="pa-form-label" for="color1-input">Color 1</label>
|
|
106
|
+
<input type="text" class="pa-input pa-input--color-1" id="color1-input" value="Color 1 input">
|
|
107
|
+
<small class="pa-form-help pa-form-help--color-1">Colored help text</small>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<!-- Color 2 with matching help text -->
|
|
111
|
+
<div class="pa-form-group">
|
|
112
|
+
<label class="pa-form-label" for="color2-input">Color 2</label>
|
|
113
|
+
<input type="text" class="pa-input pa-input--color-2" id="color2-input" value="Color 2 input">
|
|
114
|
+
<small class="pa-form-help pa-form-help--color-2">Colored help text</small>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- Color 3 with gray help text (no color class) -->
|
|
118
|
+
<div class="pa-form-group">
|
|
119
|
+
<label class="pa-form-label" for="color3-input">Color 3</label>
|
|
120
|
+
<input type="text" class="pa-input pa-input--color-3" id="color3-input" value="Color 3 input">
|
|
121
|
+
<small class="pa-form-help">Gray help text (no color class)</small>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<!-- Select with color variant -->
|
|
125
|
+
<div class="pa-form-group">
|
|
126
|
+
<label class="pa-form-label" for="color-select">Color Select</label>
|
|
127
|
+
<select class="pa-select pa-select--color-1" id="color-select">
|
|
128
|
+
<option>Option 1</option>
|
|
129
|
+
<option>Option 2</option>
|
|
130
|
+
</select>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<!-- Textarea with color variant -->
|
|
134
|
+
<div class="pa-form-group">
|
|
135
|
+
<label class="pa-form-label" for="color-textarea">Color Textarea</label>
|
|
136
|
+
<textarea class="pa-textarea pa-textarea--color-2" id="color-textarea">Color 2 textarea</textarea>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
<!-- CUSTOM TRI-STATE CHECKBOXES -->
|
|
141
|
+
<!-- States: unchecked, checked, indeterminate (set via JS: checkbox.indeterminate = true) -->
|
|
142
|
+
|
|
143
|
+
<!-- Basic Checkbox -->
|
|
144
|
+
<label class="pa-checkbox">
|
|
145
|
+
<input type="checkbox">
|
|
146
|
+
<span class="pa-checkbox__box"></span>
|
|
147
|
+
<span class="pa-checkbox__label">Unchecked option</span>
|
|
148
|
+
</label>
|
|
149
|
+
|
|
150
|
+
<!-- Checked Checkbox -->
|
|
151
|
+
<label class="pa-checkbox">
|
|
152
|
+
<input type="checkbox" checked>
|
|
153
|
+
<span class="pa-checkbox__box"></span>
|
|
154
|
+
<span class="pa-checkbox__label">Checked option</span>
|
|
155
|
+
</label>
|
|
156
|
+
|
|
157
|
+
<!-- Indeterminate Checkbox (set via JavaScript) -->
|
|
158
|
+
<label class="pa-checkbox">
|
|
159
|
+
<input type="checkbox" id="my-indeterminate-checkbox">
|
|
160
|
+
<span class="pa-checkbox__box"></span>
|
|
161
|
+
<span class="pa-checkbox__label">Indeterminate (partial selection)</span>
|
|
162
|
+
</label>
|
|
163
|
+
<script>document.getElementById('my-indeterminate-checkbox').indeterminate = true;</script>
|
|
164
|
+
|
|
165
|
+
<!-- Disabled Checkbox -->
|
|
166
|
+
<label class="pa-checkbox pa-checkbox--disabled">
|
|
167
|
+
<input type="checkbox" disabled>
|
|
168
|
+
<span class="pa-checkbox__box"></span>
|
|
169
|
+
<span class="pa-checkbox__label">Disabled unchecked</span>
|
|
170
|
+
</label>
|
|
171
|
+
|
|
172
|
+
<label class="pa-checkbox pa-checkbox--disabled">
|
|
173
|
+
<input type="checkbox" checked disabled>
|
|
174
|
+
<span class="pa-checkbox__box"></span>
|
|
175
|
+
<span class="pa-checkbox__label">Disabled checked</span>
|
|
176
|
+
</label>
|
|
177
|
+
|
|
178
|
+
<!-- Checkbox Sizes -->
|
|
179
|
+
<label class="pa-checkbox pa-checkbox--xs">
|
|
180
|
+
<input type="checkbox" checked>
|
|
181
|
+
<span class="pa-checkbox__box"></span>
|
|
182
|
+
<span class="pa-checkbox__label">Extra Small (xs)</span>
|
|
183
|
+
</label>
|
|
184
|
+
|
|
185
|
+
<label class="pa-checkbox pa-checkbox--sm">
|
|
186
|
+
<input type="checkbox" checked>
|
|
187
|
+
<span class="pa-checkbox__box"></span>
|
|
188
|
+
<span class="pa-checkbox__label">Small (sm)</span>
|
|
189
|
+
</label>
|
|
190
|
+
|
|
191
|
+
<label class="pa-checkbox">
|
|
192
|
+
<input type="checkbox" checked>
|
|
193
|
+
<span class="pa-checkbox__box"></span>
|
|
194
|
+
<span class="pa-checkbox__label">Default</span>
|
|
195
|
+
</label>
|
|
196
|
+
|
|
197
|
+
<label class="pa-checkbox pa-checkbox--lg">
|
|
198
|
+
<input type="checkbox" checked>
|
|
199
|
+
<span class="pa-checkbox__box"></span>
|
|
200
|
+
<span class="pa-checkbox__label">Large (lg)</span>
|
|
201
|
+
</label>
|
|
202
|
+
|
|
203
|
+
<label class="pa-checkbox pa-checkbox--xl">
|
|
204
|
+
<input type="checkbox" checked>
|
|
205
|
+
<span class="pa-checkbox__box"></span>
|
|
206
|
+
<span class="pa-checkbox__label">Extra Large (xl)</span>
|
|
207
|
+
</label>
|
|
208
|
+
|
|
209
|
+
<!-- Checkbox Group (vertical stack) -->
|
|
210
|
+
<div class="pa-checkbox-group">
|
|
211
|
+
<label class="pa-checkbox">
|
|
212
|
+
<input type="checkbox" checked>
|
|
213
|
+
<span class="pa-checkbox__box"></span>
|
|
214
|
+
<span class="pa-checkbox__label">Option A</span>
|
|
215
|
+
</label>
|
|
216
|
+
<label class="pa-checkbox">
|
|
217
|
+
<input type="checkbox">
|
|
218
|
+
<span class="pa-checkbox__box"></span>
|
|
219
|
+
<span class="pa-checkbox__label">Option B</span>
|
|
220
|
+
</label>
|
|
221
|
+
<label class="pa-checkbox">
|
|
222
|
+
<input type="checkbox">
|
|
223
|
+
<span class="pa-checkbox__box"></span>
|
|
224
|
+
<span class="pa-checkbox__label">Option C</span>
|
|
225
|
+
</label>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
<!-- RADIO BUTTONS (native styling) -->
|
|
230
|
+
|
|
231
|
+
<!-- Radio Button Group -->
|
|
232
|
+
<div class="pa-radio-group">
|
|
233
|
+
<label class="pa-radio">
|
|
234
|
+
<input type="radio" name="radioGroup" checked>
|
|
235
|
+
Option 1 (selected)
|
|
236
|
+
</label>
|
|
237
|
+
<label class="pa-radio">
|
|
238
|
+
<input type="radio" name="radioGroup">
|
|
239
|
+
Option 2
|
|
240
|
+
</label>
|
|
241
|
+
<label class="pa-radio">
|
|
242
|
+
<input type="radio" name="radioGroup" disabled>
|
|
243
|
+
Option 3 (disabled)
|
|
244
|
+
</label>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
<!-- INPUT GROUPS -->
|
|
249
|
+
|
|
250
|
+
<!-- Prepend only -->
|
|
251
|
+
<div class="pa-input-group">
|
|
252
|
+
<span class="pa-input-group__prepend">@</span>
|
|
253
|
+
<input type="text" class="pa-input" placeholder="Username">
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<!-- Append only -->
|
|
257
|
+
<div class="pa-input-group">
|
|
258
|
+
<input type="text" class="pa-input" placeholder="Amount">
|
|
259
|
+
<span class="pa-input-group__append">USD</span>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<!-- Prepend and Append -->
|
|
263
|
+
<div class="pa-input-group">
|
|
264
|
+
<span class="pa-input-group__prepend">$</span>
|
|
265
|
+
<input type="text" class="pa-input" placeholder="0.00">
|
|
266
|
+
<span class="pa-input-group__append">.00</span>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<!-- Input with Button -->
|
|
270
|
+
<div class="pa-input-group">
|
|
271
|
+
<input type="text" class="pa-input" placeholder="Search...">
|
|
272
|
+
<button class="pa-input-group__button pa-btn pa-btn--primary">Search</button>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<!-- Prepend + Input + Button -->
|
|
276
|
+
<div class="pa-input-group">
|
|
277
|
+
<span class="pa-input-group__prepend">🔍</span>
|
|
278
|
+
<input type="text" class="pa-input" placeholder="Search...">
|
|
279
|
+
<button class="pa-input-group__button pa-btn pa-btn--primary">Go</button>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<!-- Input + Append + Button -->
|
|
283
|
+
<div class="pa-input-group">
|
|
284
|
+
<input type="text" class="pa-input" placeholder="Enter amount">
|
|
285
|
+
<span class="pa-input-group__append">USD</span>
|
|
286
|
+
<button class="pa-input-group__button pa-btn pa-btn--success">Convert</button>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
289
|
+
<!-- Button + Input + Append -->
|
|
290
|
+
<div class="pa-input-group">
|
|
291
|
+
<button class="pa-input-group__button pa-btn pa-btn--secondary">-</button>
|
|
292
|
+
<input type="number" class="pa-input" value="1">
|
|
293
|
+
<span class="pa-input-group__append">items</span>
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<!-- Prepend + Input + Append + Button -->
|
|
297
|
+
<div class="pa-input-group">
|
|
298
|
+
<span class="pa-input-group__prepend">https://</span>
|
|
299
|
+
<input type="text" class="pa-input" placeholder="example.com">
|
|
300
|
+
<span class="pa-input-group__append">.com</span>
|
|
301
|
+
<button class="pa-input-group__button pa-btn pa-btn--primary">Visit</button>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<!-- Button + Input + Button (quantity controls) -->
|
|
305
|
+
<div class="pa-input-group">
|
|
306
|
+
<button class="pa-input-group__button pa-btn pa-btn--secondary">-</button>
|
|
307
|
+
<input type="number" class="pa-input text-center" value="1">
|
|
308
|
+
<button class="pa-input-group__button pa-btn pa-btn--secondary">+</button>
|
|
309
|
+
</div>
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
<!-- FORM LAYOUTS -->
|
|
313
|
+
|
|
314
|
+
<!-- Inline Form -->
|
|
315
|
+
<form class="pa-form pa-form--inline">
|
|
316
|
+
<input type="text" class="pa-input" placeholder="Username">
|
|
317
|
+
<input type="password" class="pa-input" placeholder="Password">
|
|
318
|
+
<button class="pa-btn pa-btn--primary">Sign in</button>
|
|
319
|
+
</form>
|
|
320
|
+
|
|
321
|
+
<!-- Horizontal Form Groups (label left, input right) -->
|
|
322
|
+
|
|
323
|
+
<!-- Single Horizontal Field -->
|
|
324
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
325
|
+
<label for="email">Email</label>
|
|
326
|
+
<input type="email" id="email" class="pa-input" placeholder="your@email.com">
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<!-- Horizontal Field with Select -->
|
|
330
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
331
|
+
<label for="department">Department</label>
|
|
332
|
+
<select id="department" class="pa-select">
|
|
333
|
+
<option>Engineering</option>
|
|
334
|
+
<option>Marketing</option>
|
|
335
|
+
<option>Sales</option>
|
|
336
|
+
</select>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<!-- Horizontal Field with Textarea -->
|
|
340
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
341
|
+
<label for="notes">Notes</label>
|
|
342
|
+
<textarea id="notes" class="pa-textarea" rows="3" placeholder="Additional notes..."></textarea>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
|
|
346
|
+
<!-- HORIZONTAL FORM LAYOUTS WITH GRIDS -->
|
|
347
|
+
|
|
348
|
+
<!-- Multi-Column Horizontal Form (3 equal columns) -->
|
|
349
|
+
<form class="pa-form">
|
|
350
|
+
<div class="pa-row">
|
|
351
|
+
<div class="pa-col-100 pa-col-md-1-3">
|
|
352
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
353
|
+
<label for="fname">First Name</label>
|
|
354
|
+
<input type="text" id="fname" class="pa-input" placeholder="John">
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<div class="pa-col-100 pa-col-md-1-3">
|
|
359
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
360
|
+
<label for="lname">Last Name</label>
|
|
361
|
+
<input type="text" id="lname" class="pa-input" placeholder="Doe">
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
|
|
365
|
+
<div class="pa-col-100 pa-col-md-1-3">
|
|
366
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
367
|
+
<label for="email">Email</label>
|
|
368
|
+
<input type="email" id="email" class="pa-input" placeholder="john@example.com">
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
</form>
|
|
373
|
+
|
|
374
|
+
<!-- Multi-Column Horizontal Form (varying widths) -->
|
|
375
|
+
<form class="pa-form">
|
|
376
|
+
<div class="pa-row">
|
|
377
|
+
<!-- Phone (smaller - 25%) -->
|
|
378
|
+
<div class="pa-col-100 pa-col-md-25">
|
|
379
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
380
|
+
<label for="phone">Phone</label>
|
|
381
|
+
<input type="tel" id="phone" class="pa-input" placeholder="+1 555-0123">
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
|
|
385
|
+
<!-- Department (larger - 50%) -->
|
|
386
|
+
<div class="pa-col-100 pa-col-md-50">
|
|
387
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
388
|
+
<label for="dept">Department</label>
|
|
389
|
+
<select id="dept" class="pa-select">
|
|
390
|
+
<option>Select...</option>
|
|
391
|
+
<option>Engineering</option>
|
|
392
|
+
<option>Marketing</option>
|
|
393
|
+
</select>
|
|
394
|
+
</div>
|
|
395
|
+
</div>
|
|
396
|
+
|
|
397
|
+
<!-- Job Title (medium - 25%) -->
|
|
398
|
+
<div class="pa-col-100 pa-col-md-25">
|
|
399
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
400
|
+
<label for="title">Job Title</label>
|
|
401
|
+
<input type="text" id="title" class="pa-input" placeholder="Senior Developer">
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</form>
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
<!-- COMPLETE HORIZONTAL FORM EXAMPLE -->
|
|
409
|
+
<div class="pa-card">
|
|
410
|
+
<div class="pa-card__header">
|
|
411
|
+
<h3>Employee Information</h3>
|
|
412
|
+
</div>
|
|
413
|
+
<div class="pa-card__body">
|
|
414
|
+
<form class="pa-form">
|
|
415
|
+
<!-- Line 1: Personal Info -->
|
|
416
|
+
<div class="pa-row">
|
|
417
|
+
<div class="pa-col-100 pa-col-md-1-3">
|
|
418
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
419
|
+
<label for="first">First Name</label>
|
|
420
|
+
<input type="text" id="first" class="pa-input" placeholder="John">
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
<div class="pa-col-100 pa-col-md-1-3">
|
|
424
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
425
|
+
<label for="last">Last Name</label>
|
|
426
|
+
<input type="text" id="last" class="pa-input" placeholder="Doe">
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
<div class="pa-col-100 pa-col-md-1-3">
|
|
430
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
431
|
+
<label for="mail">Email</label>
|
|
432
|
+
<input type="email" id="mail" class="pa-input" placeholder="john.doe@company.com">
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
|
|
437
|
+
<!-- Line 2: Address -->
|
|
438
|
+
<div class="pa-row">
|
|
439
|
+
<div class="pa-col-100 pa-col-md-50">
|
|
440
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
441
|
+
<label for="address">Address</label>
|
|
442
|
+
<input type="text" id="address" class="pa-input" placeholder="123 Main Street">
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
<div class="pa-col-100 pa-col-md-1-3">
|
|
446
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
447
|
+
<label for="city">City</label>
|
|
448
|
+
<input type="text" id="city" class="pa-input" placeholder="San Francisco">
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
451
|
+
<div class="pa-col-100 pa-col-md-20">
|
|
452
|
+
<div class="pa-form-group pa-form-group--horizontal">
|
|
453
|
+
<label for="zip">Zip</label>
|
|
454
|
+
<input type="text" id="zip" class="pa-input" placeholder="94102">
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
|
|
459
|
+
<!-- Submit Buttons -->
|
|
460
|
+
<div class="pa-row">
|
|
461
|
+
<div class="pa-col-100 text-end">
|
|
462
|
+
<button type="button" class="pa-btn pa-btn--secondary">Cancel</button>
|
|
463
|
+
<button type="submit" class="pa-btn pa-btn--primary">Submit</button>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
</form>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
<!-- ================================
|
|
472
|
+
COMPONENT REFERENCE
|
|
473
|
+
================================ -->
|
|
474
|
+
|
|
475
|
+
<!--
|
|
476
|
+
FORM ELEMENTS:
|
|
477
|
+
- .pa-form: Form container
|
|
478
|
+
- .pa-form--inline: Inline form layout
|
|
479
|
+
- .pa-form-group: Form group wrapper
|
|
480
|
+
- .pa-form-group--required: Shows required indicator
|
|
481
|
+
- .pa-form-group--horizontal: Label-left, input-right layout
|
|
482
|
+
- .pa-form-group--success: Success validation state
|
|
483
|
+
- .pa-form-group--warning: Warning validation state
|
|
484
|
+
- .pa-form-group--error: Error validation state
|
|
485
|
+
- .pa-form-label: Form label
|
|
486
|
+
|
|
487
|
+
INPUTS:
|
|
488
|
+
- .pa-input: Text input base class
|
|
489
|
+
- .pa-input--xs, --sm, --lg, --xl: Size variants
|
|
490
|
+
- .pa-input--success, --warning, --error: Validation states
|
|
491
|
+
- .pa-input--color-1 through --color-9: Theme color variants
|
|
492
|
+
|
|
493
|
+
TEXTAREA:
|
|
494
|
+
- .pa-textarea: Textarea element
|
|
495
|
+
- .pa-textarea--xs, --sm, --lg, --xl: Size variants
|
|
496
|
+
- .pa-textarea--success, --warning, --error: Validation states
|
|
497
|
+
- .pa-textarea--color-1 through --color-9: Theme color variants
|
|
498
|
+
|
|
499
|
+
SELECT:
|
|
500
|
+
- .pa-select: Select dropdown
|
|
501
|
+
- .pa-select--xs, --sm, --lg, --xl: Size variants
|
|
502
|
+
- .pa-select--success, --warning, --error: Validation states
|
|
503
|
+
- .pa-select--color-1 through --color-9: Theme color variants
|
|
504
|
+
|
|
505
|
+
CHECKBOXES (custom tri-state):
|
|
506
|
+
- .pa-checkbox: Checkbox wrapper label
|
|
507
|
+
- .pa-checkbox__box: Custom checkbox visual
|
|
508
|
+
- .pa-checkbox__label: Checkbox label text
|
|
509
|
+
- .pa-checkbox--xs, --sm, --lg, --xl: Size variants
|
|
510
|
+
- .pa-checkbox--disabled: Disabled state
|
|
511
|
+
- .pa-checkbox-group: Vertical checkbox group
|
|
512
|
+
|
|
513
|
+
RADIO BUTTONS:
|
|
514
|
+
- .pa-radio: Radio wrapper label
|
|
515
|
+
- .pa-radio-group: Vertical radio group
|
|
516
|
+
|
|
517
|
+
INPUT GROUPS:
|
|
518
|
+
- .pa-input-group: Input group container
|
|
519
|
+
- .pa-input-group__prepend: Left addon
|
|
520
|
+
- .pa-input-group__append: Right addon
|
|
521
|
+
- .pa-input-group__button: Button addon
|
|
522
|
+
|
|
523
|
+
HELP TEXT:
|
|
524
|
+
- .pa-form-help: Help/hint text below inputs
|
|
525
|
+
- .pa-form-help--success: Success message
|
|
526
|
+
- .pa-form-help--warning: Warning message
|
|
527
|
+
- .pa-form-help--error: Error message
|
|
528
|
+
- .pa-form-help--color-1 through --color-9: Theme color variants
|
|
529
|
+
|
|
530
|
+
GRID LAYOUT (for multi-column forms):
|
|
531
|
+
- .pa-row: Row container (flexbox)
|
|
532
|
+
- .pa-col-100: Full width on mobile
|
|
533
|
+
- .pa-col-md-25, .pa-col-md-50, .pa-col-md-1-3, etc.: Responsive column widths
|
|
534
|
+
-->
|