@bagelink/vue 0.0.1016 → 0.0.1023

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 (26) hide show
  1. package/dist/components/Btn.vue.d.ts +3 -0
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/components/form/BglField.vue.d.ts.map +1 -1
  4. package/dist/components/form/FieldArray.vue.d.ts.map +1 -1
  5. package/dist/components/form/inputs/RangeInput.vue.d.ts +11 -14
  6. package/dist/components/form/inputs/RangeInput.vue.d.ts.map +1 -1
  7. package/dist/components/form/inputs/RichText/index.vue.d.ts.map +1 -1
  8. package/dist/components/form/inputs/TelInput.vue.d.ts +2 -2
  9. package/dist/components/layout/TabsBody.vue.d.ts.map +1 -1
  10. package/dist/components/layout/TabsNav.vue.d.ts +25 -1
  11. package/dist/components/layout/TabsNav.vue.d.ts.map +1 -1
  12. package/dist/components/lightbox/index.d.ts.map +1 -1
  13. package/dist/index.cjs +273 -246
  14. package/dist/index.mjs +273 -246
  15. package/dist/style.css +373 -338
  16. package/package.json +1 -1
  17. package/src/components/Btn.vue +5 -3
  18. package/src/components/form/BglField.vue +9 -0
  19. package/src/components/form/FieldArray.vue +31 -23
  20. package/src/components/form/inputs/RangeInput.vue +142 -77
  21. package/src/components/form/inputs/RichText/index.vue +2 -2
  22. package/src/components/layout/TabsBody.vue +2 -2
  23. package/src/components/layout/TabsNav.vue +14 -12
  24. package/src/components/lightbox/index.ts +0 -1
  25. package/src/styles/appearance.css +8 -0
  26. package/src/styles/theme.css +258 -256
package/src/styles/theme.css CHANGED
@@ -3,372 +3,374 @@
3
3
 
4
4
  /* TEHEME */
5
5
  :root {
6
- --bgl-primary: var(--bgl-blue);
7
- --bgl-primary-tint: #2e5bff80;
8
- --bgl-primary-light: #eef6ff;
9
- --bgl-black: #282929;
10
- --bgl-black-tint: #28292980;
11
- --bgl-white: #fff;
12
- --bgl-gray: #b7b7b7;
13
- --bgl-gray-light: #f5f8fa;
14
- --bgl-gray-80: #e8ecef;
15
- --bgl-gray-20: rgba(183, 183, 183, 0.2);
16
- --bgl-gray-40: rgba(183, 183, 183, 0.4);
17
- --bgl-accent-color: var(--bgl-primary);
18
- --bgl-bg: #f4f6fa;
19
- --bgl-shadow: #00000031;
20
- --border-color: #00000020;
21
- --placeholder-color: #00000040;
22
- --label-color: #00000080;
23
- --input-bg: #f5f8fa;
24
- --input-color: #000000;
25
- --bgl-box-bg: var(--bgl-white);
26
- --bgl-popup-bg: var(--bgl-white);
27
- --bgl-popup-text: var(--bgl-black);
28
- --bgl-text-color: var(--bgl-black);
29
- --bgl-light-text: var(--bgl-white);
30
- --bgl-richtext-color: var(--bgl-white);
31
- --bgl-code-bg: var(--bgl-black);
32
- --bgl-code-color: var(--bgl-white);
33
- --bgl-dark-bg: rgba(0, 0, 0, 0.7);
34
- --bgl-selection-bg: var(--bgl-blue-dark);
35
- --bgl-selection-color: var(--bgl-white);
36
- --bgl-scrollbar-thumb: var(--bgl-gray);
37
- --pill-btn-color: var(--bgl-white);
38
- --pill-btn-bg: var(--placeholder-color);
39
- --bgl-selected: var(--bgl-gray-light);
40
- --skeleton-bg: #f0f0f0;
41
- --skeleton-pulse: var(--bgl-bg);
6
+ --bgl-primary: var(--bgl-blue);
7
+ --bgl-primary-tint: #2e5bff80;
8
+ --bgl-primary-light: #eef6ff;
9
+ --bgl-black: #282929;
10
+ --bgl-black-tint: #28292980;
11
+ --bgl-white: #fff;
12
+ --bgl-gray: #b7b7b7;
13
+ --bgl-gray-light: #f5f8fa;
14
+ --bgl-gray-80: #e8ecef;
15
+ --bgl-gray-20: rgba(183, 183, 183, 0.2);
16
+ --bgl-gray-40: rgba(183, 183, 183, 0.4);
17
+ --bgl-accent-color: var(--bgl-primary);
18
+ --bgl-bg: #f4f6fa;
19
+ --bgl-shadow: #00000031;
20
+ --border-color: #00000020;
21
+ --placeholder-color: #00000040;
22
+ --label-color: #00000080;
23
+ --input-bg: #f5f8fa;
24
+ --input-color: #000000;
25
+ --bgl-box-bg: var(--bgl-white);
26
+ --bgl-popup-bg: var(--bgl-white);
27
+ --bgl-popup-text: var(--bgl-black);
28
+ --bgl-text-color: var(--bgl-black);
29
+ --bgl-light-text: var(--bgl-white);
30
+ --bgl-richtext-color: var(--bgl-white);
31
+ --bgl-code-bg: var(--bgl-black);
32
+ --bgl-code-color: var(--bgl-white);
33
+ --bgl-dark-bg: rgba(0, 0, 0, 0.7);
34
+ --bgl-selection-bg: var(--bgl-blue-dark);
35
+ --bgl-selection-color: var(--bgl-white);
36
+ --bgl-scrollbar-thumb: var(--bgl-gray);
37
+ --pill-btn-color: var(--bgl-white);
38
+ --pill-btn-bg: var(--placeholder-color);
39
+ --bgl-selected: var(--bgl-gray-light);
40
+ --skeleton-bg: #f0f0f0;
41
+ --skeleton-pulse: var(--bgl-bg);
42
42
  }
43
43
 
44
44
  /* TYPE */
45
45
  :root {
46
- --bgl-font: 'Lexend', 'Ploni', sans-serif;
47
- --input-font-size: 16px;
46
+ --bgl-font: 'Lexend', 'Ploni', sans-serif;
47
+ --input-font-size: 16px;
48
48
  }
49
49
 
50
50
  /* DIMENSIONS */
51
51
  :root {
52
- --bgl-font-size: 16px;
53
- --input-height: 40px;
54
- --label-font-size: 12px;
55
- --input-border-radius: 7px;
56
- --card-border-radius: 12px;
57
- --btn-border-radius: 10px;
58
- --btn-padding: 30px;
59
- --btn-height: 40px;
60
- --pill-border-radius: 8px;
61
- --pill-height: 30px;
62
- --skeleton-radius: 0.25rem;
63
- --skeleton-margin: 1rem;
52
+ --bgl-font-size: 16px;
53
+ --input-height: 40px;
54
+ --label-font-size: 12px;
55
+ --input-border-radius: 7px;
56
+ --card-border-radius: 12px;
57
+ --btn-border-radius: 10px;
58
+ --btn-padding: 30px;
59
+ --btn-height: 40px;
60
+ --pill-border-radius: 8px;
61
+ --pill-height: 30px;
62
+ --skeleton-radius: 0.25rem;
63
+ --skeleton-margin: 1rem;
64
+ --bgl-range-thumb-size: 20px;
65
+ --bgl-range-track-height: 10px;
64
66
  }
65
67
 
66
68
  /* MISC */
67
69
  :root {
68
- --bgl-transition: all 200ms ease;
69
- --bgl-transition-400: all 400ms ease;
70
- --bgl-hover-filter: brightness(90%);
71
- --bgl-active-filter: brightness(70%);
70
+ --bgl-transition: all 200ms ease;
71
+ --bgl-transition-400: all 400ms ease;
72
+ --bgl-hover-filter: brightness(90%);
73
+ --bgl-active-filter: brightness(70%);
72
74
  }
73
75
 
74
76
  /* OTHER COLORS */
75
77
  :root {
76
- --bgl-blue: #2e5bff;
77
- --bgl-blue-20: rgba(46, 91, 255, 20%);
78
- --bgl-blue-dark: #191c30;
79
- --bgl-blue-light: #eef6ff;
80
- --bgl-pink: #f1416c;
81
- --bgl-red: #ed6c6f;
82
- --bgl-red-tint: #fbe2e2;
83
- --bgl-yellow: #ffbb00;
84
- --bgl-yellow-light: #fff6d5;
85
- --bgl-green: #75c98f;
86
- --whatsapp-gray: #89959f;
87
- --whatsapp-green: #e0fcd6;
88
- --whatsapp-blue: #71bce6;
78
+ --bgl-blue: #2e5bff;
79
+ --bgl-blue-20: rgba(46, 91, 255, 20%);
80
+ --bgl-blue-dark: #191c30;
81
+ --bgl-blue-light: #eef6ff;
82
+ --bgl-pink: #f1416c;
83
+ --bgl-red: #ed6c6f;
84
+ --bgl-red-tint: #fbe2e2;
85
+ --bgl-yellow: #ffbb00;
86
+ --bgl-yellow-light: #fff6d5;
87
+ --bgl-green: #75c98f;
88
+ --whatsapp-gray: #89959f;
89
+ --whatsapp-green: #e0fcd6;
90
+ --whatsapp-blue: #71bce6;
89
91
  }
90
92
 
91
93
  .testMe * {
92
- outline: 1px dotted red;
94
+ outline: 1px dotted red;
93
95
  }
94
96
 
95
97
  .Vue-Toastification__toast {
96
- border-radius: var(--card-border-radius);
97
- box-shadow: none;
98
+ border-radius: var(--card-border-radius);
99
+ box-shadow: none;
98
100
  }
99
101
 
100
102
  .Vue-Toastification__toast--default {
101
- background: var(--bgl-primary);
103
+ background: var(--bgl-primary);
102
104
  }
103
105
 
104
106
  .Vue-Toastification__close-button {
105
- height: 1.5rem;
106
- line-height: 1rem;
107
+ height: 1.5rem;
108
+ line-height: 1rem;
107
109
  }
108
110
 
109
111
  ::-moz-selection {
110
- color: var(--bgl-selection-color);
111
- background: var(--bgl-selection-bg);
112
+ color: var(--bgl-selection-color);
113
+ background: var(--bgl-selection-bg);
112
114
  }
113
115
 
114
116
  ::selection {
115
- color: var(--bgl-selection-color);
116
- background: var(--bgl-selection-bg);
117
+ color: var(--bgl-selection-color);
118
+ background: var(--bgl-selection-bg);
117
119
  }
118
120
 
119
121
  .popup {
120
- border-radius: 15px;
121
- background: var(--bgl-popup-bg);
122
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
123
- padding: 2rem;
124
- min-width: 300px;
125
- text-align: center;
122
+ border-radius: 15px;
123
+ background: var(--bgl-popup-bg);
124
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
125
+ padding: 2rem;
126
+ min-width: 300px;
127
+ text-align: center;
126
128
  }
127
129
 
128
130
  .tabs {
129
- -moz-column-gap: 1rem;
130
- column-gap: 1rem;
131
- margin-top: 20px;
132
- margin-bottom: -2rem;
133
- border-top: 1px solid var(--border-color);
134
- width: calc(100% + 4rem);
135
- -webkit-margin-start: -2rem;
136
- margin-inline-start: -2rem;
137
- -webkit-padding-start: 2rem;
138
- padding-inline-start: 2rem;
139
- overflow: auto;
140
- display: flex;
131
+ -moz-column-gap: 1rem;
132
+ column-gap: 1rem;
133
+ margin-top: 20px;
134
+ margin-bottom: -2rem;
135
+ border-top: 1px solid var(--border-color);
136
+ width: calc(100% + 4rem);
137
+ -webkit-margin-start: -2rem;
138
+ margin-inline-start: -2rem;
139
+ -webkit-padding-start: 2rem;
140
+ padding-inline-start: 2rem;
141
+ overflow: auto;
142
+ display: flex;
141
143
  }
142
144
 
143
145
  .tab {
144
- font-size: 14px;
145
- font-weight: 600;
146
- line-height: 2.5;
147
- cursor: pointer;
148
- transition: var(--bgl-transition);
149
- border-bottom: 2px solid transparent;
150
- padding: 0 5px;
151
- white-space: nowrap;
152
- text-decoration: none;
153
- color: inherit;
146
+ font-size: 14px;
147
+ font-weight: 600;
148
+ line-height: 2.5;
149
+ cursor: pointer;
150
+ transition: var(--bgl-transition);
151
+ border-bottom: 2px solid transparent;
152
+ padding: 0 5px;
153
+ white-space: nowrap;
154
+ text-decoration: none;
155
+ color: inherit;
154
156
  }
155
157
 
156
158
  .tab.active {
157
- color: var(--bgl-primary);
158
- border-bottom: 2px solid var(--bgl-primary);
159
+ color: var(--bgl-primary);
160
+ border-bottom: 2px solid var(--bgl-primary);
159
161
  }
160
162
 
161
163
  .tab:hover {
162
- color: var(--bgl-primary);
164
+ color: var(--bgl-primary);
163
165
  }
164
166
 
165
167
  .tab:active {
166
- -webkit-filter: brightness(70%);
167
- filter: brightness(70%);
168
+ -webkit-filter: brightness(70%);
169
+ filter: brightness(70%);
168
170
  }
169
171
 
170
172
  .router-tab {
171
- font-size: 14px;
172
- font-weight: 600;
173
- line-height: 2.5;
174
- cursor: pointer;
175
- transition: var(--bgl-transition);
176
- border-bottom: 2px solid transparent;
177
- padding: 0 5px;
178
- white-space: nowrap;
179
- text-decoration: none;
180
- color: inherit;
173
+ font-size: 14px;
174
+ font-weight: 600;
175
+ line-height: 2.5;
176
+ cursor: pointer;
177
+ transition: var(--bgl-transition);
178
+ border-bottom: 2px solid transparent;
179
+ padding: 0 5px;
180
+ white-space: nowrap;
181
+ text-decoration: none;
182
+ color: inherit;
181
183
  }
182
184
 
183
185
  .router-tab.router-link-active {
184
- color: var(--bgl-primary);
185
- border-bottom: 2px solid var(--bgl-primary);
186
+ color: var(--bgl-primary);
187
+ border-bottom: 2px solid var(--bgl-primary);
186
188
  }
187
189
 
188
190
  .router-tab:hover {
189
- color: var(--bgl-primary);
191
+ color: var(--bgl-primary);
190
192
  }
191
193
 
192
194
  .router-tab:active {
193
- -webkit-filter: brightness(70%);
194
- filter: brightness(70%);
195
+ -webkit-filter: brightness(70%);
196
+ filter: brightness(70%);
195
197
  }
196
198
 
197
199
  .entity-container {
198
- display: grid;
199
- height: 100%;
200
- grid-template-columns: minmax(300px, 1fr) 3fr;
201
- grid-gap: 1rem;
202
- -moz-column-gap: 1rem;
203
- column-gap: 1rem;
204
- grid-template-rows: 1fr;
205
- grid-template-areas: 'list-view detail-view';
206
- transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
207
- transition:
208
- grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
209
- -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
210
- transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
200
+ display: grid;
201
+ height: 100%;
202
+ grid-template-columns: minmax(300px, 1fr) 3fr;
203
+ grid-gap: 1rem;
204
+ -moz-column-gap: 1rem;
205
+ column-gap: 1rem;
206
+ grid-template-rows: 1fr;
207
+ grid-template-areas: 'list-view detail-view';
208
+ transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
209
+ transition:
210
+ grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
211
+ -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
212
+ transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
211
213
  }
212
214
 
213
215
  .detail-main {
214
- overflow-y: auto;
216
+ overflow-y: auto;
215
217
  }
216
218
 
217
219
  .content-row p {
218
- margin: 0 0 10px 0;
220
+ margin: 0 0 10px 0;
219
221
  }
220
222
 
221
223
  .id {
222
- color: var(--bgl-gray);
223
- font-size: 9px;
224
+ color: var(--bgl-gray);
225
+ font-size: 9px;
224
226
  }
225
227
 
226
228
  .field {
227
- --field-count: 1;
228
- --width: calc(100% / var(--field-count));
229
- grid-auto-columns: minmax(var(--width), var(--width));
230
- font-size: 10px;
231
- text-align: z;
229
+ --field-count: 1;
230
+ --width: calc(100% / var(--field-count));
231
+ grid-auto-columns: minmax(var(--width), var(--width));
232
+ font-size: 10px;
233
+ text-align: z;
232
234
  }
233
235
 
234
236
  .detail-view-inner {
235
- display: grid;
236
- height: 100%;
237
- overflow: hidden;
238
- grid-template-rows: -webkit-max-content 1fr;
239
- grid-template-rows: max-content 1fr;
240
- gap: 1rem;
237
+ display: grid;
238
+ height: 100%;
239
+ overflow: hidden;
240
+ grid-template-rows: -webkit-max-content 1fr;
241
+ grid-template-rows: max-content 1fr;
242
+ gap: 1rem;
241
243
  }
242
244
 
243
245
  .detail-view-inner-wrap {
244
- height: 100%;
245
- overflow: hidden;
246
- transition: var(--bgl-transition);
246
+ height: 100%;
247
+ overflow: hidden;
248
+ transition: var(--bgl-transition);
247
249
  }
248
250
 
249
251
  .table-list-wrap {
250
- overflow: auto;
252
+ overflow: auto;
251
253
  }
252
254
 
253
255
  [dir='rtl'] .data-row .bgl_icon-font,
254
256
  [dir='rtl'] .embedded-field .bgl_icon-font {
255
- transform: rotateY(180deg) !important;
257
+ transform: rotateY(180deg) !important;
256
258
  }
257
259
 
258
260
  .copy-url {
259
- background-color: var(--bgl-gray-light);
260
- border-radius: var(--btn-border-radius);
261
- padding: 0.5rem 1rem;
262
- align-items: center;
263
- justify-content: flex-start;
264
- margin-bottom: 1rem;
265
- display: flex;
266
- justify-content: space-between;
261
+ background-color: var(--bgl-gray-light);
262
+ border-radius: var(--btn-border-radius);
263
+ padding: 0.5rem 1rem;
264
+ align-items: center;
265
+ justify-content: flex-start;
266
+ margin-bottom: 1rem;
267
+ display: flex;
268
+ justify-content: space-between;
267
269
  }
268
270
 
269
271
  .copy-url a {
270
- margin: 0;
271
- font-size: 12px;
272
- opacity: 0.8;
273
- color: var(--bgl-text-color);
274
- word-break: break-all;
272
+ margin: 0;
273
+ font-size: 12px;
274
+ opacity: 0.8;
275
+ color: var(--bgl-text-color);
276
+ word-break: break-all;
275
277
  }
276
278
 
277
279
  .list-view {
278
- grid-area: list-view;
279
- grid-template-areas: 'list-header' 'list-content';
280
- grid-template-columns: 1fr;
281
- overflow-y: auto;
282
- grid-template-rows: -webkit-max-content 1fr;
283
- grid-template-rows: max-content 1fr;
284
- transition: var(--transition);
280
+ grid-area: list-view;
281
+ grid-template-areas: 'list-header''list-content';
282
+ grid-template-columns: 1fr;
283
+ overflow-y: auto;
284
+ grid-template-rows: -webkit-max-content 1fr;
285
+ grid-template-rows: max-content 1fr;
286
+ transition: var(--transition);
285
287
  }
286
288
 
287
289
  .shekel {
288
- line-height: 0;
290
+ line-height: 0;
289
291
  }
290
292
 
291
293
  .view-wrapper {
292
- height: 100%;
293
- position: relative;
294
- overflow: hidden;
294
+ height: 100%;
295
+ position: relative;
296
+ overflow: hidden;
295
297
  }
296
298
 
297
299
  @media screen and (max-width: 1000px) {
298
- .entity-container {
299
- grid-template-columns: minmax(22vw, 1fr) 2fr;
300
- }
300
+ .entity-container {
301
+ grid-template-columns: minmax(22vw, 1fr) 2fr;
302
+ }
301
303
  }
302
304
 
303
305
  @media screen and (max-width: 910px) {
304
- .tab {
305
- font-size: 12px;
306
- }
307
-
308
- .entity-container {
309
- grid-template-columns: 1fr;
310
- gap: 0;
311
- }
312
-
313
- .detail-view-inner {
314
- border-radius: var(--card-border-radius);
315
- background: var(--bgl-box-bg);
316
- }
317
-
318
- .detail-view-inner-wrap {
319
- position: absolute;
320
- height: 100%;
321
- width: 100%;
322
- background: var(--bgl-bg);
323
- }
324
-
325
- .detail-view-inner-wrap.bgl_card {
326
- background: var(--bgl-box-bg);
327
- }
328
-
329
- .bgl_card {
330
- padding: 1rem 1rem;
331
- }
332
-
333
- .tabs {
334
- -moz-column-gap: 10px;
335
- column-gap: 10px;
336
- margin-top: 10px;
337
- margin-bottom: -15px;
338
- box-sizing: border-box;
339
- -webkit-margin-start: -1rem;
340
- margin-inline-start: -1rem;
341
- -webkit-padding-start: 1rem;
342
- padding-inline-start: 1rem;
343
- max-width: calc(100vw - 2rem);
344
- }
345
-
346
- .popup {
347
- border-radius: 15px;
348
- background: var(--bgl-popup-bg);
349
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
350
- padding: 2rem;
351
- min-width: 0;
352
- max-width: 90%;
353
- max-height: 90vh;
354
- overflow-x: auto;
355
- text-align: center;
356
- }
357
-
358
- .detail-main {
359
- overflow-y: unset;
360
- }
361
-
362
- .detail-section {
363
- height: -webkit-fit-content;
364
- height: -moz-fit-content;
365
- height: fit-content;
366
- }
367
-
368
- .field {
369
- display: flex;
370
- flex-wrap: wrap;
371
- gap: 0.5rem;
372
- align-items: center;
373
- }
374
- }
306
+ .tab {
307
+ font-size: 12px;
308
+ }
309
+
310
+ .entity-container {
311
+ grid-template-columns: 1fr;
312
+ gap: 0;
313
+ }
314
+
315
+ .detail-view-inner {
316
+ border-radius: var(--card-border-radius);
317
+ background: var(--bgl-box-bg);
318
+ }
319
+
320
+ .detail-view-inner-wrap {
321
+ position: absolute;
322
+ height: 100%;
323
+ width: 100%;
324
+ background: var(--bgl-bg);
325
+ }
326
+
327
+ .detail-view-inner-wrap.bgl_card {
328
+ background: var(--bgl-box-bg);
329
+ }
330
+
331
+ .bgl_card {
332
+ padding: 1rem 1rem;
333
+ }
334
+
335
+ .tabs {
336
+ -moz-column-gap: 10px;
337
+ column-gap: 10px;
338
+ margin-top: 10px;
339
+ margin-bottom: -15px;
340
+ box-sizing: border-box;
341
+ -webkit-margin-start: -1rem;
342
+ margin-inline-start: -1rem;
343
+ -webkit-padding-start: 1rem;
344
+ padding-inline-start: 1rem;
345
+ max-width: calc(100vw - 2rem);
346
+ }
347
+
348
+ .popup {
349
+ border-radius: 15px;
350
+ background: var(--bgl-popup-bg);
351
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
352
+ padding: 2rem;
353
+ min-width: 0;
354
+ max-width: 90%;
355
+ max-height: 90vh;
356
+ overflow-x: auto;
357
+ text-align: center;
358
+ }
359
+
360
+ .detail-main {
361
+ overflow-y: unset;
362
+ }
363
+
364
+ .detail-section {
365
+ height: -webkit-fit-content;
366
+ height: -moz-fit-content;
367
+ height: fit-content;
368
+ }
369
+
370
+ .field {
371
+ display: flex;
372
+ flex-wrap: wrap;
373
+ gap: 0.5rem;
374
+ align-items: center;
375
+ }
376
+ }