@quandis/qbo4.ui 4.0.1-CI-20241101-213502 → 4.0.1-CI-20241104-183949

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.
Files changed (18) hide show
  1. package/package.json +2 -2
  2. package/scss/qbo.scss +380 -2
  3. package/src/qbo/styles.d.ts +1 -0
  4. package/src/qbo/styles.js +2 -1
  5. package/src/qbo/styles.ts +3 -1
  6. package/wwwroot/css/qbo.css +374 -2
  7. package/wwwroot/css/qbo.css.map +1 -1
  8. package/wwwroot/css/qbo.min.css +1 -1
  9. package/wwwroot/css/qboui.css +374 -2
  10. package/wwwroot/css/qboui.css.map +1 -1
  11. package/wwwroot/css/qboui.min.css +1 -1
  12. package/wwwroot/js/esm/qbo4.ui.js +7 -3
  13. package/wwwroot/js/esm/qbo4.ui.min.js +63 -63
  14. package/wwwroot/js/esm/qbo4.ui.min.js.map +1 -1
  15. package/wwwroot/js/qbo4.ui.js +5 -2
  16. package/wwwroot/js/qbo4.ui.min.js +63 -63
  17. package/wwwroot/js/qbo4.ui.min.js.map +1 -1
  18. package/wwwroot/menu.html +140 -46
package/wwwroot/css/qbo.css CHANGED
@@ -1,5 +1,377 @@
1
- *:not(:defined) {
2
- display: none;
1
+ :root {
2
+ --qbo-font: Arial, sans-serif;
3
+ --qbo-color: #333;
4
+ --qbo-border-color: #dee2e6;
5
+ --qbo-border-radius: 4px;
6
+ --qbo-background-color: #ffffff;
7
+ --qbo-padding-horizontal: 0.75rem;
8
+ --qbo-padding-vertical: 0.375rem;
9
+ --qbo-padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
10
+ --qbo-margin: 0.5rem;
11
+ --qbo-margin-horizontal: 0.5rem;
12
+ --qbo-margin-vertical: 0.5rem;
13
+ --qbo-focus-border-color: #80bdff;
14
+ --qbo-focus-box-shadow: rgba(0, 123, 255, 0.25);
15
+ --qbo-button-bg: #007bff;
16
+ --qbo-button-border: #007bff;
17
+ --qbo-button-bg-hover: #0056b3;
18
+ --qbo-button-border-hover: #004085;
19
+ --qbo-button-color: #ffffff;
20
+ --qbo-button-padding: var(--qbo-padding);
21
+ --qbo-button-border-radius: var(--qbo-border-radius);
22
+ --qbo-nav-color: #ffffff;
23
+ --qbo-nav-background-color: #000;
24
+ /* Primary */
25
+ --qbo-primary-bg: #007bff;
26
+ --qbo-primary-color: #ffffff;
27
+ --qbo-primary-border: #007bff;
28
+ --qbo-primary-hover-bg: #0056b3;
29
+ --qbo-primary-hover-border: #004085;
30
+ /* Secondary */
31
+ --qbo-secondary-bg: #6c757d;
32
+ --qbo-secondary-color: #ffffff;
33
+ --qbo-secondary-border: #6c757d;
34
+ --qbo-secondary-hover-bg: #5a6268;
35
+ --qbo-secondary-hover-border: #545b62;
36
+ /* Success */
37
+ --qbo-success-bg: #28a745;
38
+ --qbo-success-color: #ffffff;
39
+ --qbo-success-border: #28a745;
40
+ --qbo-success-hover-bg: #218838;
41
+ --qbo-success-hover-border: #1e7e34;
42
+ /* Danger */
43
+ --qbo-danger-bg: #dc3545;
44
+ --qbo-danger-color: #ffffff;
45
+ --qbo-danger-border: #dc3545;
46
+ --qbo-danger-hover-bg: #c82333;
47
+ --qbo-danger-hover-border: #bd2130;
48
+ /* Info */
49
+ --qbo-info-bg: #17a2b8;
50
+ --qbo-info-color: #ffffff;
51
+ --qbo-info-border: #17a2b8;
52
+ --qbo-info-hover-bg: #138496;
53
+ --qbo-info-hover-border: #117a8b;
54
+ /* Light */
55
+ --qbo-light-bg: #f8f9fa;
56
+ --qbo-light-color: #212529;
57
+ --qbo-light-border: #f8f9fa;
58
+ --qbo-light-hover-bg: #e2e6ea;
59
+ --qbo-light-hover-border: #dae0e5;
60
+ /* Dark */
61
+ --qbo-dark-bg: #343a40;
62
+ --qbo-dark-color: #ffffff;
63
+ --qbo-dark-border: #343a40;
64
+ --qbo-dark-hover-bg: #23272b;
65
+ --qbo-dark-hover-border: #1d2124;
66
+ }
67
+
68
+ .qbo-dark {
69
+ --qbo-color: #e0e0e0;
70
+ --qbo-border-color: grey;
71
+ --qbo-background-color: #121212;
72
+ --qbo-nav-color: #000;
73
+ --qbo-nav-background-color: #fff;
74
+ --qbo-svg-filter: brightness(0) invert(1);
75
+ }
76
+
77
+ /* Use variables in a class */
78
+ .qbo {
79
+ font-family: var(--qbo-font);
80
+ color: var(--qbo-color);
81
+ border: 1px solid var(--qbo-border-color);
82
+ padding: var(--qbo-padding);
83
+ border-radius: var(--qbo-border-radius);
84
+ background-color: var(--qbo-background-color);
85
+ }
86
+
87
+ .qbo-row {
88
+ display: flex;
89
+ flex-wrap: wrap;
90
+ gap: var(--qbo-margin);
91
+ }
92
+
93
+ /* Default column styling */
94
+ .qbo-col {
95
+ flex: 1 0 0;
96
+ border: 1px solid var(--qbo-border-color);
97
+ max-width: 100%;
98
+ box-sizing: border-box;
99
+ }
100
+
101
+ .qbo-row {
102
+ display: flex;
103
+ flex-wrap: wrap;
104
+ gap: var(--qbo-margin); /* Use --qbo-margin as the gap */
105
+ }
106
+
107
+ .qbo-col-1 {
108
+ flex: 0 0 calc(8.33% - var(--qbo-margin) / 2);
109
+ max-width: calc(8.33% - var(--qbo-margin) / 2);
110
+ }
111
+
112
+ .qbo-col-2 {
113
+ flex: 0 0 calc(16.66% - var(--qbo-margin) / 2);
114
+ max-width: calc(16.66% - var(--qbo-margin) / 2);
115
+ }
116
+
117
+ .qbo-col-3 {
118
+ flex: 0 0 calc(25% - var(--qbo-margin) / 2);
119
+ max-width: calc(25% - var(--qbo-margin) / 2);
120
+ }
121
+
122
+ .qbo-col-4 {
123
+ flex: 0 0 calc(33.33% - var(--qbo-margin) / 2);
124
+ max-width: calc(33.33% - var(--qbo-margin) / 2);
125
+ }
126
+
127
+ .qbo-col-5 {
128
+ flex: 0 0 calc(41.66% - var(--qbo-margin) / 2);
129
+ max-width: calc(41.66% - var(--qbo-margin) / 2);
130
+ }
131
+
132
+ .qbo-col-6 {
133
+ flex: 0 0 calc(50% - var(--qbo-margin) / 2);
134
+ max-width: calc(50% - var(--qbo-margin) / 2);
135
+ }
136
+
137
+ .qbo-col-7 {
138
+ flex: 0 0 calc(58.33% - var(--qbo-margin) / 2);
139
+ max-width: calc(58.33% - var(--qbo-margin) / 2);
140
+ }
141
+
142
+ .qbo-col-8 {
143
+ flex: 0 0 calc(66.66% - var(--qbo-margin) / 2);
144
+ max-width: calc(66.66% - var(--qbo-margin) / 2);
145
+ }
146
+
147
+ .qbo-col-9 {
148
+ flex: 0 0 calc(75% - var(--qbo-margin) / 2);
149
+ max-width: calc(75% - var(--qbo-margin) / 2);
150
+ }
151
+
152
+ .qbo-col-10 {
153
+ flex: 0 0 calc(83.33% - var(--qbo-margin) / 2);
154
+ max-width: calc(83.33% - var(--qbo-margin) / 2);
155
+ }
156
+
157
+ .qbo-col-11 {
158
+ flex: 0 0 calc(91.66% - var(--qbo-margin) / 2);
159
+ max-width: calc(91.66% - var(--qbo-margin) / 2);
160
+ }
161
+
162
+ .qbo-col-12 {
163
+ flex: 0 0 calc(100% - var(--qbo-margin) / 2);
164
+ max-width: calc(100% - var(--qbo-margin) / 2);
165
+ }
166
+
167
+ svg {
168
+ height: 1rem;
169
+ width: 1rem;
170
+ }
171
+
172
+ .icon {
173
+ height: 1rem;
174
+ width: 1rem;
175
+ filter: var(--qbo-svg-filter);
176
+ }
177
+ .icon use {
178
+ display: block;
179
+ }
180
+
181
+ .qbo-row {
182
+ display: flex;
183
+ flex-wrap: wrap;
184
+ gap: var(--qbo-margin);
185
+ }
186
+
187
+ /* Default column styling */
188
+ .qbo-col {
189
+ flex: 1 0 0;
190
+ xborder: 1px solid var(--qbo-border-color);
191
+ max-width: 100%;
192
+ box-sizing: border-box;
193
+ }
194
+
195
+ .qbo-row {
196
+ display: flex;
197
+ flex-wrap: wrap;
198
+ gap: var(--qbo-margin); /* Use --qbo-margin as the gap */
199
+ }
200
+
201
+ .qbo-col-1 {
202
+ flex: 0 0 calc(8.33% - var(--qbo-margin) / 2);
203
+ max-width: calc(8.33% - var(--qbo-margin) / 2);
204
+ }
205
+
206
+ .qbo-col-2 {
207
+ flex: 0 0 calc(16.66% - var(--qbo-margin) / 2);
208
+ max-width: calc(16.66% - var(--qbo-margin) / 2);
209
+ }
210
+
211
+ .qbo-col-3 {
212
+ flex: 0 0 calc(25% - var(--qbo-margin) / 2);
213
+ max-width: calc(25% - var(--qbo-margin) / 2);
214
+ }
215
+
216
+ .qbo-col-4 {
217
+ flex: 0 0 calc(33.33% - var(--qbo-margin) / 2);
218
+ max-width: calc(33.33% - var(--qbo-margin) / 2);
219
+ }
220
+
221
+ .qbo-col-5 {
222
+ flex: 0 0 calc(41.66% - var(--qbo-margin) / 2);
223
+ max-width: calc(41.66% - var(--qbo-margin) / 2);
224
+ }
225
+
226
+ .qbo-col-6 {
227
+ flex: 0 0 calc(50% - var(--qbo-margin) / 2);
228
+ max-width: calc(50% - var(--qbo-margin) / 2);
229
+ }
230
+
231
+ .qbo-col-7 {
232
+ flex: 0 0 calc(58.33% - var(--qbo-margin) / 2);
233
+ max-width: calc(58.33% - var(--qbo-margin) / 2);
234
+ }
235
+
236
+ .qbo-col-8 {
237
+ flex: 0 0 calc(66.66% - var(--qbo-margin) / 2);
238
+ max-width: calc(66.66% - var(--qbo-margin) / 2);
239
+ }
240
+
241
+ .qbo-col-9 {
242
+ flex: 0 0 calc(75% - var(--qbo-margin) / 2);
243
+ max-width: calc(75% - var(--qbo-margin) / 2);
244
+ }
245
+
246
+ .qbo-col-10 {
247
+ flex: 0 0 calc(83.33% - var(--qbo-margin) / 2);
248
+ max-width: calc(83.33% - var(--qbo-margin) / 2);
249
+ }
250
+
251
+ .qbo-col-11 {
252
+ flex: 0 0 calc(91.66% - var(--qbo-margin) / 2);
253
+ max-width: calc(91.66% - var(--qbo-margin) / 2);
254
+ }
255
+
256
+ .qbo-col-12 {
257
+ flex: 0 0 calc(100% - var(--qbo-margin) / 2);
258
+ max-width: calc(100% - var(--qbo-margin) / 2);
259
+ }
260
+
261
+ .qbo-form {
262
+ margin: 0 auto;
263
+ padding: var(--qbo-padding);
264
+ }
265
+
266
+ .qbo-form label {
267
+ display: flex;
268
+ flex-direction: column;
269
+ font-size: 0.9rem;
270
+ font-weight: 100;
271
+ color: var(--qbo-color);
272
+ font-family: var(--qbo-font);
273
+ margin-top: calc(var(--qbo-margin) * 1.5);
274
+ margin-bottom: calc(var(--qbo-margin) * 0.25);
275
+ }
276
+
277
+ .qbo-form small {
278
+ display: block;
279
+ font-size: 0.8rem;
280
+ color: color-mix(in srgb, var(--qbo-color) 60%, transparent);
281
+ }
282
+
283
+ .qbo-form input,
284
+ .qbo-form select,
285
+ .qbo-form textarea {
286
+ width: 100%;
287
+ box-sizing: border-box;
288
+ padding: var(--qbo-padding);
289
+ font-size: 1rem;
290
+ line-height: 1;
291
+ color: var(--qbo-color);
292
+ background-color: var(--qbo-background-color);
293
+ background-clip: padding-box;
294
+ border: 1px solid var(--qbo-border-color);
295
+ border-radius: var(--qbo-border-radius);
296
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
297
+ font-family: var(--qbo-font);
298
+ margin-top: 0.1rem;
299
+ margin-right: 1rem;
300
+ }
301
+
302
+ .qbo-form input[type=color] {
303
+ width: 3rem;
304
+ height: calc(1.5em + 0.75rem + 0px); /* Matches the height of standard Bootstrap inputs */
305
+ padding: 0.375rem; /* Adds padding for alignment */
306
+ background-color: transparent; /* Clears the background color */
307
+ border: 1px solid #ced4da; /* Light gray border to match other form controls */
308
+ border-radius: 0.25rem; /* Slight border radius for rounded corners */
309
+ -webkit-appearance: none; /* Removes default styling in WebKit-based browsers */
310
+ }
311
+
312
+ .qbo-form input:focus,
313
+ .qbo-form select:focus,
314
+ .qbo-form textarea:focus {
315
+ color: var(--qbo-color);
316
+ border-color: var(--qbo-focus-border-color);
317
+ outline: 0;
318
+ box-shadow: 0 0 0 0.2rem var(--qbo-focus-box-shadow);
319
+ }
320
+
321
+ .qbo-form input[disabled],
322
+ .qbo-form textarea[disabled],
323
+ .qbo-form select[disabled] {
324
+ xbackground-color: color-mix(in oklab, 15%, --qbo-color);
325
+ color: color-mix(in oklab, var(--qbo-color) 50%, var(--qbo-background-color));
326
+ cursor: not-allowed;
327
+ opacity: 1;
328
+ }
329
+
330
+ /* input grouping */
331
+ .qbo-form div {
332
+ display: flex;
333
+ align-items: center;
334
+ }
335
+
336
+ .qbo-form div span {
337
+ display: inline-flex;
338
+ font-weight: 100;
339
+ align-items: center;
340
+ padding: 0.375rem 0.75rem;
341
+ font-size: 1rem;
342
+ text-align: center;
343
+ text-wrap-mode: nowrap;
344
+ border-right: none;
345
+ border-radius: 0.25rem 0 0 0.25rem;
346
+ }
347
+
348
+ .qbo-form div input,
349
+ .qbo-form div select,
350
+ .qbo-form div textarea {
351
+ flex: 1 1 auto;
352
+ padding: 0.375rem 0.75rem;
353
+ font-size: 1rem;
354
+ background-clip: padding-box;
355
+ margin: 0;
356
+ xborder-radius: 0 0;
357
+ }
358
+
359
+ .qbo-form .form-check {
360
+ display: flex;
361
+ align-items: center;
362
+ margin-bottom: 1rem;
363
+ }
364
+
365
+ .qbo-form .form-check input[type=checkbox],
366
+ .qbo-form .form-check input[type=radio] {
367
+ width: auto;
368
+ margin-right: 0.5rem;
369
+ }
370
+
371
+ .qbo-form .form-check label {
372
+ margin-bottom: 0;
373
+ font-weight: 400;
374
+ color: var(--qbo-color);
3
375
  }
4
376
 
5
377
  /*# sourceMappingURL=qbo.css.map */
package/wwwroot/css/qbo.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../scss/qbo.scss","qbo.css"],"names":[],"mappings":"AAAC;EACG,aAAA;ACCJ","file":"qbo.css"}
1
+ {"version":3,"sources":["../../scss/qbo.scss","qbo.css"],"names":[],"mappings":"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","file":"qbo.css"}
package/wwwroot/css/qbo.min.css CHANGED
@@ -1 +1 @@
1
- :not(:defined){display:none}
1
+ :root{--qbo-font:Arial,sans-serif;--qbo-color:#333;--qbo-border-color:#dee2e6;--qbo-border-radius:4px;--qbo-background-color:#ffffff;--qbo-padding-horizontal:0.75rem;--qbo-padding-vertical:0.375rem;--qbo-padding:var(--qbo-padding-vertical) var(--qbo-padding-horizontal);--qbo-margin:0.5rem;--qbo-margin-horizontal:0.5rem;--qbo-margin-vertical:0.5rem;--qbo-focus-border-color:#80bdff;--qbo-focus-box-shadow:rgba(0, 123, 255, 0.25);--qbo-button-bg:#007bff;--qbo-button-border:#007bff;--qbo-button-bg-hover:#0056b3;--qbo-button-border-hover:#004085;--qbo-button-color:#ffffff;--qbo-button-padding:var(--qbo-padding);--qbo-button-border-radius:var(--qbo-border-radius);--qbo-nav-color:#ffffff;--qbo-nav-background-color:#000;--qbo-primary-bg:#007bff;--qbo-primary-color:#ffffff;--qbo-primary-border:#007bff;--qbo-primary-hover-bg:#0056b3;--qbo-primary-hover-border:#004085;--qbo-secondary-bg:#6c757d;--qbo-secondary-color:#ffffff;--qbo-secondary-border:#6c757d;--qbo-secondary-hover-bg:#5a6268;--qbo-secondary-hover-border:#545b62;--qbo-success-bg:#28a745;--qbo-success-color:#ffffff;--qbo-success-border:#28a745;--qbo-success-hover-bg:#218838;--qbo-success-hover-border:#1e7e34;--qbo-danger-bg:#dc3545;--qbo-danger-color:#ffffff;--qbo-danger-border:#dc3545;--qbo-danger-hover-bg:#c82333;--qbo-danger-hover-border:#bd2130;--qbo-info-bg:#17a2b8;--qbo-info-color:#ffffff;--qbo-info-border:#17a2b8;--qbo-info-hover-bg:#138496;--qbo-info-hover-border:#117a8b;--qbo-light-bg:#f8f9fa;--qbo-light-color:#212529;--qbo-light-border:#f8f9fa;--qbo-light-hover-bg:#e2e6ea;--qbo-light-hover-border:#dae0e5;--qbo-dark-bg:#343a40;--qbo-dark-color:#ffffff;--qbo-dark-border:#343a40;--qbo-dark-hover-bg:#23272b;--qbo-dark-hover-border:#1d2124}.qbo-dark{--qbo-color:#e0e0e0;--qbo-border-color:grey;--qbo-background-color:#121212;--qbo-nav-color:#000;--qbo-nav-background-color:#fff;--qbo-svg-filter:brightness(0) invert(1)}.qbo{font-family:var(--qbo-font);color:var(--qbo-color);border:1px solid var(--qbo-border-color);padding:var(--qbo-padding);border-radius:var(--qbo-border-radius);background-color:var(--qbo-background-color)}.qbo-row{display:flex;flex-wrap:wrap;gap:var(--qbo-margin)}.qbo-col{flex:1 0 0;border:1px solid var(--qbo-border-color);max-width:100%;box-sizing:border-box}.qbo-row{display:flex;flex-wrap:wrap;gap:var(--qbo-margin)}.qbo-col-1{flex:0 0 calc(8.33% - var(--qbo-margin)/ 2);max-width:calc(8.33% - var(--qbo-margin)/ 2)}.qbo-col-2{flex:0 0 calc(16.66% - var(--qbo-margin)/ 2);max-width:calc(16.66% - var(--qbo-margin)/ 2)}.qbo-col-3{flex:0 0 calc(25% - var(--qbo-margin)/ 2);max-width:calc(25% - var(--qbo-margin)/ 2)}.qbo-col-4{flex:0 0 calc(33.33% - var(--qbo-margin)/ 2);max-width:calc(33.33% - var(--qbo-margin)/ 2)}.qbo-col-5{flex:0 0 calc(41.66% - var(--qbo-margin)/ 2);max-width:calc(41.66% - var(--qbo-margin)/ 2)}.qbo-col-6{flex:0 0 calc(50% - var(--qbo-margin)/ 2);max-width:calc(50% - var(--qbo-margin)/ 2)}.qbo-col-7{flex:0 0 calc(58.33% - var(--qbo-margin)/ 2);max-width:calc(58.33% - var(--qbo-margin)/ 2)}.qbo-col-8{flex:0 0 calc(66.66% - var(--qbo-margin)/ 2);max-width:calc(66.66% - var(--qbo-margin)/ 2)}.qbo-col-9{flex:0 0 calc(75% - var(--qbo-margin)/ 2);max-width:calc(75% - var(--qbo-margin)/ 2)}.qbo-col-10{flex:0 0 calc(83.33% - var(--qbo-margin)/ 2);max-width:calc(83.33% - var(--qbo-margin)/ 2)}.qbo-col-11{flex:0 0 calc(91.66% - var(--qbo-margin)/ 2);max-width:calc(91.66% - var(--qbo-margin)/ 2)}.qbo-col-12{flex:0 0 calc(100% - var(--qbo-margin)/ 2);max-width:calc(100% - var(--qbo-margin)/ 2)}svg{height:1rem;width:1rem}.icon{height:1rem;width:1rem;filter:var(--qbo-svg-filter)}.icon use{display:block}.qbo-row{display:flex;flex-wrap:wrap;gap:var(--qbo-margin)}.qbo-col{flex:1 0 0;xborder:1px solid var(--qbo-border-color);max-width:100%;box-sizing:border-box}.qbo-row{display:flex;flex-wrap:wrap;gap:var(--qbo-margin)}.qbo-col-1{flex:0 0 calc(8.33% - var(--qbo-margin)/ 2);max-width:calc(8.33% - var(--qbo-margin)/ 2)}.qbo-col-2{flex:0 0 calc(16.66% - var(--qbo-margin)/ 2);max-width:calc(16.66% - var(--qbo-margin)/ 2)}.qbo-col-3{flex:0 0 calc(25% - var(--qbo-margin)/ 2);max-width:calc(25% - var(--qbo-margin)/ 2)}.qbo-col-4{flex:0 0 calc(33.33% - var(--qbo-margin)/ 2);max-width:calc(33.33% - var(--qbo-margin)/ 2)}.qbo-col-5{flex:0 0 calc(41.66% - var(--qbo-margin)/ 2);max-width:calc(41.66% - var(--qbo-margin)/ 2)}.qbo-col-6{flex:0 0 calc(50% - var(--qbo-margin)/ 2);max-width:calc(50% - var(--qbo-margin)/ 2)}.qbo-col-7{flex:0 0 calc(58.33% - var(--qbo-margin)/ 2);max-width:calc(58.33% - var(--qbo-margin)/ 2)}.qbo-col-8{flex:0 0 calc(66.66% - var(--qbo-margin)/ 2);max-width:calc(66.66% - var(--qbo-margin)/ 2)}.qbo-col-9{flex:0 0 calc(75% - var(--qbo-margin)/ 2);max-width:calc(75% - var(--qbo-margin)/ 2)}.qbo-col-10{flex:0 0 calc(83.33% - var(--qbo-margin)/ 2);max-width:calc(83.33% - var(--qbo-margin)/ 2)}.qbo-col-11{flex:0 0 calc(91.66% - var(--qbo-margin)/ 2);max-width:calc(91.66% - var(--qbo-margin)/ 2)}.qbo-col-12{flex:0 0 calc(100% - var(--qbo-margin)/ 2);max-width:calc(100% - var(--qbo-margin)/ 2)}.qbo-form{margin:0 auto;padding:var(--qbo-padding)}.qbo-form label{display:flex;flex-direction:column;font-size:.9rem;font-weight:100;color:var(--qbo-color);font-family:var(--qbo-font);margin-top:calc(var(--qbo-margin) * 1.5);margin-bottom:calc(var(--qbo-margin) * .25)}.qbo-form small{display:block;font-size:.8rem;color:color-mix(in srgb,var(--qbo-color) 60%,transparent)}.qbo-form input,.qbo-form select,.qbo-form textarea{width:100%;box-sizing:border-box;padding:var(--qbo-padding);font-size:1rem;line-height:1;color:var(--qbo-color);background-color:var(--qbo-background-color);background-clip:padding-box;border:1px solid var(--qbo-border-color);border-radius:var(--qbo-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;font-family:var(--qbo-font);margin-top:.1rem;margin-right:1rem}.qbo-form input[type=color]{width:3rem;height:calc(1.5em + .75rem + 0px);padding:.375rem;background-color:transparent;border:1px solid #ced4da;border-radius:.25rem;-webkit-appearance:none}.qbo-form input:focus,.qbo-form select:focus,.qbo-form textarea:focus{color:var(--qbo-color);border-color:var(--qbo-focus-border-color);outline:0;box-shadow:0 0 0 .2rem var(--qbo-focus-box-shadow)}.qbo-form input[disabled],.qbo-form select[disabled],.qbo-form textarea[disabled]{xbackground-color:color-mix(in oklab,15%,--qbo-color);color:color-mix(in oklab,var(--qbo-color) 50%,var(--qbo-background-color));cursor:not-allowed;opacity:1}.qbo-form div{display:flex;align-items:center}.qbo-form div span{display:inline-flex;font-weight:100;align-items:center;padding:.375rem .75rem;font-size:1rem;text-align:center;text-wrap-mode:nowrap;border-right:none;border-radius:.25rem 0 0 .25rem}.qbo-form div input,.qbo-form div select,.qbo-form div textarea{flex:1 1 auto;padding:.375rem .75rem;font-size:1rem;background-clip:padding-box;margin:0;xborder-radius:0 0}.qbo-form .form-check{display:flex;align-items:center;margin-bottom:1rem}.qbo-form .form-check input[type=checkbox],.qbo-form .form-check input[type=radio]{width:auto;margin-right:.5rem}.qbo-form .form-check label{margin-bottom:0;font-weight:400;color:var(--qbo-color)}