testio-tailwind 3.27.2 → 3.27.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI_DESIGN_SYSTEM_REFERENCE.md +20 -3454
- package/CLAUDE.md +41 -0
- package/Dockerfile +4 -8
- package/README.md +1 -5
- package/ai-reference/00-index.md +54 -0
- package/ai-reference/01-setup-colors-typography.md +164 -0
- package/ai-reference/02-layout-patterns.md +253 -0
- package/ai-reference/03-buttons.md +106 -0
- package/ai-reference/04-cards.md +104 -0
- package/ai-reference/05-forms.md +414 -0
- package/ai-reference/06-overlays.md +119 -0
- package/ai-reference/07-feedback.md +147 -0
- package/ai-reference/08-data-display.md +106 -0
- package/ai-reference/09-lists-splitview.md +233 -0
- package/ai-reference/10-chat-charts-status.md +311 -0
- package/ai-reference/11-agenticqa.md +538 -0
- package/ai-reference/12-dark-mode.md +111 -0
- package/ai-reference/13-best-practices.md +73 -0
- package/package.json +1 -1
- package/src/assets/scripts/modules/colors.js +28 -2
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# Card Components
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Basic Card Structure
|
|
6
|
+
```html
|
|
7
|
+
<div class="card">
|
|
8
|
+
<div class="card-header">
|
|
9
|
+
<h3 class="card-title">Card Title</h3>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="card-body">
|
|
12
|
+
<p>Card content goes here</p>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="card-footer">
|
|
15
|
+
<button class="btn btn-primary btn-block">Action</button>
|
|
16
|
+
<button class="btn btn-secondary btn-block">Cancel</button>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Card Sizes
|
|
22
|
+
```html
|
|
23
|
+
<div class="card card-sm">...</div> <!-- 11.25rem on sm+ screens -->
|
|
24
|
+
<div class="card card-md">...</div> <!-- 17.5rem -->
|
|
25
|
+
<div class="card card-lg">...</div> <!-- 23.75rem -->
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Card Variants
|
|
29
|
+
```html
|
|
30
|
+
<!-- Highlighted card (info blue background) -->
|
|
31
|
+
<div class="card highlight">...</div>
|
|
32
|
+
|
|
33
|
+
<!-- Card with highlighted header only -->
|
|
34
|
+
<div class="card">
|
|
35
|
+
<div class="card-header highlight">
|
|
36
|
+
<h3 class="card-title">Highlighted Header</h3>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="card-body">Regular content</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<!-- Card with image -->
|
|
42
|
+
<div class="card">
|
|
43
|
+
<img src="image.jpg" alt="Card image" class="card-image">
|
|
44
|
+
<div class="card-header">
|
|
45
|
+
<h3 class="card-title">Card with Image</h3>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="card-body">Content</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- Card with icon header -->
|
|
51
|
+
<div class="card">
|
|
52
|
+
<div class="card-icon-header">
|
|
53
|
+
<i class="icon icon-star"></i>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="card-body">
|
|
56
|
+
<h3 class="card-title">Icon Card</h3>
|
|
57
|
+
<p>Content below icon</p>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- Centered card content -->
|
|
62
|
+
<div class="card text-center">...</div>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Card with Info Popover
|
|
66
|
+
```html
|
|
67
|
+
<div class="card">
|
|
68
|
+
<details class="popover-wrapper dropright card-info-popover">
|
|
69
|
+
<summary>
|
|
70
|
+
<div class="btn btn-sm btn-square">
|
|
71
|
+
<div class="icon icon-info"></div>
|
|
72
|
+
</div>
|
|
73
|
+
</summary>
|
|
74
|
+
<div class="popover-menu info">
|
|
75
|
+
<div class="popover-title">Popover title</div>
|
|
76
|
+
<div class="popover-content">Popover content...</div>
|
|
77
|
+
</div>
|
|
78
|
+
</details>
|
|
79
|
+
<div class="card-header">
|
|
80
|
+
<h3 class="card-title">Card with info popover</h3>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="card-body">Content</div>
|
|
83
|
+
</div>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Card Layouts
|
|
87
|
+
```html
|
|
88
|
+
<!-- Grid of cards (responsive) -->
|
|
89
|
+
<div class="grid-cards">
|
|
90
|
+
<div class="card">...</div>
|
|
91
|
+
<div class="card">...</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<!-- List of cards (horizontal wrap) -->
|
|
95
|
+
<div class="list-cards">
|
|
96
|
+
<div class="card card-sm">...</div>
|
|
97
|
+
<div class="card card-sm">...</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Achievements grid (6 columns on 2xl screens) -->
|
|
101
|
+
<div class="grid-cards-achievements">
|
|
102
|
+
<div class="card">...</div>
|
|
103
|
+
</div>
|
|
104
|
+
```
|
|
@@ -0,0 +1,414 @@
|
|
|
1
|
+
# Form Components
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Form Group Structure
|
|
6
|
+
|
|
7
|
+
### Horizontal Form Group (Default)
|
|
8
|
+
```html
|
|
9
|
+
<div class="form-group">
|
|
10
|
+
<label class="form-label">Email Address</label>
|
|
11
|
+
<input type="email" class="form-control" placeholder="Enter email">
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<!-- Optional field -->
|
|
15
|
+
<div class="form-group">
|
|
16
|
+
<label class="form-label optional">Phone Number</label>
|
|
17
|
+
<input type="tel" class="form-control">
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<!-- Optional field with custom translation -->
|
|
21
|
+
<div class="form-group">
|
|
22
|
+
<label class="form-label optional-non-en" data-optional-non-en="(freiwillig)">Phone Number</label>
|
|
23
|
+
<input type="tel" class="form-control">
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<!-- Inverted (for dark backgrounds) -->
|
|
27
|
+
<div class="form-group inverted">
|
|
28
|
+
<label class="form-label">Email Address</label>
|
|
29
|
+
<input type="email" class="form-control" placeholder="Enter email">
|
|
30
|
+
</div>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Vertical Form Group
|
|
34
|
+
Use in tight spaces and narrow containers where horizontal layout cannot fit.
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<div class="form-group vertical">
|
|
38
|
+
<label class="form-label">Email Address</label>
|
|
39
|
+
<input type="email" class="form-control" placeholder="Enter email">
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<!-- Inverted vertical -->
|
|
43
|
+
<div class="form-group vertical inverted">
|
|
44
|
+
<label class="form-label">Email Address</label>
|
|
45
|
+
<input type="email" class="form-control" placeholder="Enter email">
|
|
46
|
+
</div>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Form Inputs
|
|
52
|
+
```html
|
|
53
|
+
<input type="text" class="form-control" placeholder="Enter text">
|
|
54
|
+
<textarea class="form-control" rows="4" placeholder="Enter description"></textarea>
|
|
55
|
+
<input type="text" class="form-control" disabled value="Read only">
|
|
56
|
+
|
|
57
|
+
<!-- With validation error -->
|
|
58
|
+
<div class="form-group">
|
|
59
|
+
<label class="form-label">Username</label>
|
|
60
|
+
<div class="field_with_errors">
|
|
61
|
+
<input type="text" class="form-control">
|
|
62
|
+
</div>
|
|
63
|
+
<div class="form-hint error">Username is required</div>
|
|
64
|
+
</div>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Form Hints
|
|
70
|
+
```html
|
|
71
|
+
<div class="form-hint">This field is optional</div>
|
|
72
|
+
<div class="form-hint error">Please enter a valid email</div>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Collapsable Form Hints
|
|
76
|
+
```html
|
|
77
|
+
<div class="form-group">
|
|
78
|
+
<label class="form-label">Your Project</label>
|
|
79
|
+
<div class="col">
|
|
80
|
+
<input class="form-control" type="text" placeholder="Some delicious placeholder text">
|
|
81
|
+
<details class="form-hint-collapsable">
|
|
82
|
+
<summary>
|
|
83
|
+
<div class="form-hint">
|
|
84
|
+
<span>
|
|
85
|
+
This is a help text.
|
|
86
|
+
<span class="form-hint-trigger form-hint-collapsed-text">Learn more</span>
|
|
87
|
+
<span class="form-hint-trigger form-hint-expanded-text">Close</span>
|
|
88
|
+
</span>
|
|
89
|
+
</div>
|
|
90
|
+
</summary>
|
|
91
|
+
<div class="form-hint-collapsable-message">Good examples are "Java wrapper lib for our 5-endpoint REST API"</div>
|
|
92
|
+
</details>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Form Grid Layout
|
|
100
|
+
```html
|
|
101
|
+
<div class="form-grid">
|
|
102
|
+
<div class="form-group">...</div>
|
|
103
|
+
<div class="form-group">...</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<!-- Single column -->
|
|
107
|
+
<div class="form-grid single">
|
|
108
|
+
<div class="form-group">...</div>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<!-- Narrow single column -->
|
|
112
|
+
<div class="form-grid single narrow">
|
|
113
|
+
<div class="form-group">...</div>
|
|
114
|
+
</div>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Checkboxes
|
|
120
|
+
```html
|
|
121
|
+
<div class="form-check">
|
|
122
|
+
<input id="check1" type="checkbox">
|
|
123
|
+
<label for="check1">Checkbox</label>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="form-check">
|
|
127
|
+
<input id="check2" type="checkbox" checked="true">
|
|
128
|
+
<label for="check2">Checked</label>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="form-check sm">
|
|
132
|
+
<input id="check3" type="checkbox">
|
|
133
|
+
<label for="check3">Checkbox SM</label>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div class="form-check disabled">
|
|
137
|
+
<input id="check4" type="checkbox" disabled="true">
|
|
138
|
+
<label for="check4">Disabled</label>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<!-- With error state -->
|
|
142
|
+
<div class="form-check">
|
|
143
|
+
<div class="field_with_errors">
|
|
144
|
+
<input id="check5" type="checkbox">
|
|
145
|
+
</div>
|
|
146
|
+
<label for="check5">Checkbox with error</label>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<!-- Inverted -->
|
|
150
|
+
<div class="form-check inverted">
|
|
151
|
+
<input id="check6" type="checkbox">
|
|
152
|
+
<label for="check6">Inverted</label>
|
|
153
|
+
</div>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Radio Buttons
|
|
159
|
+
```html
|
|
160
|
+
<div class="form-radio">
|
|
161
|
+
<input id="radio1" type="radio" name="radio-group" value="1" checked="true">
|
|
162
|
+
<label for="radio1">Option 1</label>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="form-radio">
|
|
165
|
+
<input id="radio2" type="radio" name="radio-group" value="2">
|
|
166
|
+
<label for="radio2">Option 2</label>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div class="form-radio sm">
|
|
170
|
+
<input id="radio4" type="radio" name="radio-sm" value="1">
|
|
171
|
+
<label for="radio4">SM Option 1</label>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="form-radio disabled">
|
|
175
|
+
<input id="radio5" type="radio" name="radio-group" value="4" disabled="true">
|
|
176
|
+
<label for="radio5">Disabled</label>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="form-radio inverted">
|
|
180
|
+
<input id="radio6" type="radio" name="radio-inv" value="1">
|
|
181
|
+
<label for="radio6">Inverted Option</label>
|
|
182
|
+
</div>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## Toggle Switch
|
|
188
|
+
```html
|
|
189
|
+
<div class="form-toggle">
|
|
190
|
+
<label class="toggle-switch" for="toggle1">
|
|
191
|
+
<input id="toggle1" type="checkbox">
|
|
192
|
+
<span class="slider"></span>
|
|
193
|
+
</label>
|
|
194
|
+
<label class="toggle-switch-label" for="toggle1">Toggle Switch</label>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<!-- Active toggle -->
|
|
198
|
+
<div class="form-toggle">
|
|
199
|
+
<label class="toggle-switch" for="toggle2">
|
|
200
|
+
<input id="toggle2" type="checkbox" checked="true">
|
|
201
|
+
<span class="slider"></span>
|
|
202
|
+
</label>
|
|
203
|
+
<label class="toggle-switch-label" for="toggle2">Active Toggle</label>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<!-- Small toggle -->
|
|
207
|
+
<div class="form-toggle sm">
|
|
208
|
+
<label class="toggle-switch" for="toggle3">
|
|
209
|
+
<input id="toggle3" type="checkbox">
|
|
210
|
+
<span class="slider"></span>
|
|
211
|
+
</label>
|
|
212
|
+
<label class="toggle-switch-label" for="toggle3">Toggle SM</label>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<!-- Disabled toggle -->
|
|
216
|
+
<div class="form-toggle">
|
|
217
|
+
<label class="toggle-switch disabled" for="toggle4">
|
|
218
|
+
<input id="toggle4" type="checkbox" disabled="disabled">
|
|
219
|
+
<span class="slider"></span>
|
|
220
|
+
</label>
|
|
221
|
+
<label class="toggle-switch-label" for="toggle4">Disabled</label>
|
|
222
|
+
</div>
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
## Select Inputs
|
|
228
|
+
|
|
229
|
+
### Native Select
|
|
230
|
+
```html
|
|
231
|
+
<select class="form-control">
|
|
232
|
+
<option>Choose an option</option>
|
|
233
|
+
<option value="1">Option 1</option>
|
|
234
|
+
<option value="2">Option 2</option>
|
|
235
|
+
</select>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### Select2 Enhanced Select
|
|
239
|
+
```html
|
|
240
|
+
<div class="form-group form-select">
|
|
241
|
+
<label class="form-label">Select</label>
|
|
242
|
+
<select class="select2" placeholder="Please select">
|
|
243
|
+
<option value="Option 1">Option 1</option>
|
|
244
|
+
<option value="Option 2">Option 2</option>
|
|
245
|
+
</select>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<!-- Multi-select -->
|
|
249
|
+
<div class="form-group multi-select">
|
|
250
|
+
<label class="form-label">Select multiple</label>
|
|
251
|
+
<select class="select2" multiple="true" placeholder="Please select">
|
|
252
|
+
<option>Option 1</option>
|
|
253
|
+
<option>Option 2</option>
|
|
254
|
+
</select>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<!-- With optgroup -->
|
|
258
|
+
<div class="form-group form-select">
|
|
259
|
+
<label class="form-label">Optgroup select</label>
|
|
260
|
+
<select class="select2" placeholder="Please select">
|
|
261
|
+
<optgroup label="Category Label">
|
|
262
|
+
<option>Option 1</option>
|
|
263
|
+
<option>Option 2</option>
|
|
264
|
+
</optgroup>
|
|
265
|
+
</select>
|
|
266
|
+
</div>
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### Tom Select Enhanced Select
|
|
270
|
+
```html
|
|
271
|
+
<div class="form-group form-select">
|
|
272
|
+
<label class="form-label">Select</label>
|
|
273
|
+
<select class="tom-select" placeholder="Please select">
|
|
274
|
+
<option value=""></option>
|
|
275
|
+
<option value="Option 1">Option 1</option>
|
|
276
|
+
<option value="Option 2">Option 2</option>
|
|
277
|
+
</select>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
<!-- Multi-select -->
|
|
281
|
+
<div class="form-group multi-select">
|
|
282
|
+
<label class="form-label">Select multiple</label>
|
|
283
|
+
<select class="tom-select-multi" multiple="true" placeholder="Please select">
|
|
284
|
+
<option>Option 1</option>
|
|
285
|
+
<option>Option 2</option>
|
|
286
|
+
</select>
|
|
287
|
+
</div>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
## Date & Time Picker (Flatpickr)
|
|
293
|
+
```html
|
|
294
|
+
<!-- Date picker -->
|
|
295
|
+
<div class="form-group">
|
|
296
|
+
<label class="form-label">Select Date</label>
|
|
297
|
+
<div class="form-date">
|
|
298
|
+
<input class="form-control flatpickr" type="date" placeholder="Choose a date">
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
<!-- Date and time picker -->
|
|
303
|
+
<div class="form-group">
|
|
304
|
+
<label class="form-label">Select Date & Time</label>
|
|
305
|
+
<div class="form-date">
|
|
306
|
+
<input class="form-control flatpickr-time" type="datetime-local" placeholder="Choose date and time">
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
---
|
|
312
|
+
|
|
313
|
+
## Selectable Tokens
|
|
314
|
+
```html
|
|
315
|
+
<ul class="list-inline flex">
|
|
316
|
+
<li class="selectable-token">
|
|
317
|
+
<input id="token1" type="checkbox" checked="true">
|
|
318
|
+
<label for="token1">
|
|
319
|
+
<span class="icon icon-chrome mr-icon-spacing"></span>
|
|
320
|
+
Selectable token
|
|
321
|
+
</label>
|
|
322
|
+
</li>
|
|
323
|
+
<li class="selectable-token">
|
|
324
|
+
<input id="token2" type="checkbox">
|
|
325
|
+
<label for="token2">
|
|
326
|
+
<span class="icon icon-firefox mr-icon-spacing"></span>
|
|
327
|
+
Another token
|
|
328
|
+
</label>
|
|
329
|
+
</li>
|
|
330
|
+
<li class="selectable-token disabled">
|
|
331
|
+
<input id="token3" type="checkbox" disabled="true">
|
|
332
|
+
<label for="token3">Disabled token</label>
|
|
333
|
+
</li>
|
|
334
|
+
</ul>
|
|
335
|
+
|
|
336
|
+
<!-- Inverted (for dark backgrounds) -->
|
|
337
|
+
<li class="selectable-token inverted">...</li>
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
---
|
|
341
|
+
|
|
342
|
+
## Form with Addon
|
|
343
|
+
```html
|
|
344
|
+
<!-- Text addon (e.g., currency) -->
|
|
345
|
+
<div class="form-group with-addon">
|
|
346
|
+
<label class="form-label">Price</label>
|
|
347
|
+
<input type="number" class="form-control" placeholder="0.00">
|
|
348
|
+
<div class="form-addon">
|
|
349
|
+
<span class="text-label">EUR</span>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
<!-- Icon addon (e.g., validation status) -->
|
|
354
|
+
<div class="form-group with-addon">
|
|
355
|
+
<label class="form-label">Email Address</label>
|
|
356
|
+
<input type="email" class="form-control" placeholder="Enter email">
|
|
357
|
+
<div class="form-addon">
|
|
358
|
+
<span class="icon icon-check-circle-filled text-success"></span>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
---
|
|
364
|
+
|
|
365
|
+
## Form Card
|
|
366
|
+
A card component containing a form. Useful for collapsable form sections or multi-form layouts.
|
|
367
|
+
|
|
368
|
+
```html
|
|
369
|
+
<div class="form-card">
|
|
370
|
+
<div class="form-card-heading">
|
|
371
|
+
<div class="form-card-title">Form Card Title</div>
|
|
372
|
+
<div class="form-card-actions">
|
|
373
|
+
<button class="btn btn-square btn-sm btn-primary">
|
|
374
|
+
<i class="icon icon-arrow-upward"></i>
|
|
375
|
+
</button>
|
|
376
|
+
<button class="btn btn-square btn-sm btn-primary">
|
|
377
|
+
<i class="icon icon-arrow-downward"></i>
|
|
378
|
+
</button>
|
|
379
|
+
<button class="btn btn-square btn-sm btn-primary">
|
|
380
|
+
<i class="icon icon-remove"></i>
|
|
381
|
+
</button>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="form-grid">
|
|
385
|
+
<div class="form-group">
|
|
386
|
+
<label class="form-label">Input</label>
|
|
387
|
+
<input class="form-control" type="text" placeholder="Enter text">
|
|
388
|
+
</div>
|
|
389
|
+
<div class="form-group">
|
|
390
|
+
<label class="form-label">Textarea</label>
|
|
391
|
+
<textarea class="form-control" rows="4" placeholder="Enter description"></textarea>
|
|
392
|
+
</div>
|
|
393
|
+
<div class="form-group form-select">
|
|
394
|
+
<label class="form-label">Select</label>
|
|
395
|
+
<select class="tom-select" placeholder="Please select">
|
|
396
|
+
<option value=""></option>
|
|
397
|
+
<option value="Option 1">Option 1</option>
|
|
398
|
+
<option value="Option 2">Option 2</option>
|
|
399
|
+
</select>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
---
|
|
406
|
+
|
|
407
|
+
## Inverted Forms (for dark backgrounds)
|
|
408
|
+
```html
|
|
409
|
+
<div class="form-group inverted">
|
|
410
|
+
<label class="form-label">Email</label>
|
|
411
|
+
<input type="email" class="form-control" placeholder="Enter email">
|
|
412
|
+
<div class="form-hint">We'll never share your email</div>
|
|
413
|
+
</div>
|
|
414
|
+
```
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
# Overlay Components (Modal & Drawer)
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Modal Component
|
|
6
|
+
|
|
7
|
+
Modals display content in a layer above the main content. Use for forms, confirmations, and interactive content.
|
|
8
|
+
|
|
9
|
+
### Basic Modal
|
|
10
|
+
```html
|
|
11
|
+
<details class="modal-wrapper">
|
|
12
|
+
<summary class="modal-trigger">
|
|
13
|
+
<div class="btn btn-primary">Open modal</div>
|
|
14
|
+
</summary>
|
|
15
|
+
<div class="modal-container">
|
|
16
|
+
<div class="modal">
|
|
17
|
+
<div class="modal-header">
|
|
18
|
+
<h2 class="modal-title">Modal Title</h2>
|
|
19
|
+
<div class="btn btn-square close-btn">
|
|
20
|
+
<div class="icon icon-cross"></div>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="modal-content">
|
|
24
|
+
<p>Modal content goes here...</p>
|
|
25
|
+
<div class="form-grid">
|
|
26
|
+
<div class="form-group">
|
|
27
|
+
<label class="form-label">Input</label>
|
|
28
|
+
<input class="form-control" type="text" placeholder="">
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="modal-footer">
|
|
33
|
+
<a class="btn btn-primary" href="">Primary</a>
|
|
34
|
+
<a class="btn btn-secondary close-btn" href="">Close</a>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</details>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Modal Sizes
|
|
42
|
+
```html
|
|
43
|
+
<div class="modal modal-lg">...</div> <!-- Large modal -->
|
|
44
|
+
<div class="modal modal-sm">...</div> <!-- Small modal (confirmation dialog) -->
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Modal with Disabled Background Close
|
|
48
|
+
```html
|
|
49
|
+
<!-- Prevents closing when clicking outside the modal -->
|
|
50
|
+
<details class="modal-wrapper fade-close-disabled">
|
|
51
|
+
<summary class="modal-trigger">
|
|
52
|
+
<div class="btn btn-primary">Open modal</div>
|
|
53
|
+
</summary>
|
|
54
|
+
<div class="modal-container">
|
|
55
|
+
<div class="modal">...</div>
|
|
56
|
+
</div>
|
|
57
|
+
</details>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## Drawer Component
|
|
63
|
+
|
|
64
|
+
Drawers are side panels that slide in from the edge of the screen. Alternative to modals for additional content.
|
|
65
|
+
|
|
66
|
+
### Basic Drawer
|
|
67
|
+
```html
|
|
68
|
+
<details class="drawer-wrapper">
|
|
69
|
+
<summary class="drawer-trigger">
|
|
70
|
+
<div class="btn btn-primary">Open Drawer</div>
|
|
71
|
+
</summary>
|
|
72
|
+
<div class="drawer">
|
|
73
|
+
<div class="drawer-header">
|
|
74
|
+
<div class="drawer-title">Drawer title</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="drawer-content">
|
|
77
|
+
<p>Drawer content goes here...</p>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="drawer-footer">
|
|
80
|
+
<div class="btn btn-primary">Primary</div>
|
|
81
|
+
<div class="btn btn-secondary">Secondary</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</details>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Drawer with Close Button
|
|
88
|
+
```html
|
|
89
|
+
<details class="drawer-wrapper">
|
|
90
|
+
<summary class="drawer-trigger">
|
|
91
|
+
<div class="btn btn-primary">Open Drawer</div>
|
|
92
|
+
<button class="btn btn-square close-btn">
|
|
93
|
+
<div class="icon icon-cross"></div>
|
|
94
|
+
</button>
|
|
95
|
+
</summary>
|
|
96
|
+
<div class="drawer">
|
|
97
|
+
<!-- Drawer content -->
|
|
98
|
+
<div class="drawer-footer">
|
|
99
|
+
<div class="btn btn-primary">Primary</div>
|
|
100
|
+
<div class="btn btn-secondary close-btn">Close</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</details>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Filter Drawer
|
|
107
|
+
```html
|
|
108
|
+
<details class="drawer-wrapper">
|
|
109
|
+
<summary class="drawer-trigger">
|
|
110
|
+
<div class="btn btn-secondary">
|
|
111
|
+
<span class="icon icon-filter mr-icon-spacing"></span>
|
|
112
|
+
Filter
|
|
113
|
+
</div>
|
|
114
|
+
</summary>
|
|
115
|
+
<div class="drawer drawer-filter">
|
|
116
|
+
<!-- Filter form content -->
|
|
117
|
+
</div>
|
|
118
|
+
</details>
|
|
119
|
+
```
|