@bagelink/vue 1.4.79 → 1.4.81

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 (22) hide show
  1. package/dist/components/Btn.vue.d.ts +6 -1
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/components/Modal.vue.d.ts.map +1 -1
  4. package/dist/components/ModalForm.vue.d.ts +3 -1
  5. package/dist/components/ModalForm.vue.d.ts.map +1 -1
  6. package/dist/components/Slider.vue.d.ts +4 -4
  7. package/dist/components/Slider.vue.d.ts.map +1 -1
  8. package/dist/index.cjs +4 -4
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.mjs +4 -4
  12. package/dist/style.css +1 -1
  13. package/dist/utils/elementUtils.d.ts +104 -0
  14. package/dist/utils/elementUtils.d.ts.map +1 -0
  15. package/package.json +1 -1
  16. package/src/components/Btn.vue +137 -101
  17. package/src/components/Modal.vue +11 -29
  18. package/src/components/ModalForm.vue +8 -24
  19. package/src/components/Slider.vue +2 -2
  20. package/src/index.ts +1 -0
  21. package/src/styles/theme.css +487 -279
  22. package/src/utils/elementUtils.ts +544 -0
package/src/styles/theme.css CHANGED
@@ -2,396 +2,604 @@
2
2
 
3
3
  /* TEHEME */
4
4
  :root {
5
- --bgl-primary: var(--bgl-blue);
6
- --bgl-primary-tint: #2e5bff80;
7
- --bgl-primary-light: #eef6ff;
8
- --bgl-black: #282929;
9
- --bgl-black-tint: #28292980;
10
- --bgl-white: #fff;
11
- --bgl-gray: #b7b7b7;
12
- --bgl-gray-light: #f5f8fa;
13
- --bgl-gray-80: #e8ecef;
14
- --bgl-gray-20: rgba(183, 183, 183, 0.2);
15
- --bgl-gray-40: rgba(183, 183, 183, 0.4);
16
- --bgl-accent-color: var(--bgl-primary);
17
- --bgl-bg: #f4f6fa;
18
- --bgl-shadow: #00000031;
19
- --border-color: #00000020;
20
- --placeholder-color: #00000040;
21
- --label-color: #00000080;
22
- --input-bg: #f5f8fa;
23
- --input-color: #000000;
24
- --bgl-box-bg: var(--bgl-white);
25
- --bgl-popup-bg: var(--bgl-white);
26
- --bgl-popup-text: var(--bgl-black);
27
- --bgl-text-color: var(--bgl-black);
28
- --bgl-light-text: var(--bgl-white);
29
- --bgl-richtext-color: var(--bgl-white);
30
- --bgl-code-bg: var(--bgl-black);
31
- --bgl-code-color: var(--bgl-white);
32
- --bgl-dark-bg: rgba(0, 0, 0, 0.7);
33
- --bgl-selection-bg: var(--bgl-blue-dark);
34
- --bgl-selection-color: var(--bgl-white);
35
- --bgl-scrollbar-thumb: var(--bgl-gray);
36
- --bgl-scrollbar-size: 0.5rem;
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
- --bgl-range-thumb-color: var(--bgl-white);
5
+ --bgl-primary: var(--bgl-blue);
6
+ --bgl-primary-tint: #2e5bff80;
7
+ --bgl-primary-light: #eef6ff;
8
+ --bgl-black: #282929;
9
+ --bgl-black-tint: #28292980;
10
+ --bgl-white: #fff;
11
+ --bgl-gray: #b7b7b7;
12
+ --bgl-gray-light: #f5f8fa;
13
+ --bgl-gray-80: #e8ecef;
14
+ --bgl-gray-20: rgba(183, 183, 183, 0.2);
15
+ --bgl-gray-40: rgba(183, 183, 183, 0.4);
16
+ --bgl-accent-color: var(--bgl-primary);
17
+ --bgl-bg: #f4f6fa;
18
+ --bgl-shadow: #00000031;
19
+ --border-color: #00000020;
20
+ --placeholder-color: #00000040;
21
+ --label-color: #00000080;
22
+ --input-bg: #f5f8fa;
23
+ --input-color: #000000;
24
+ --bgl-box-bg: var(--bgl-white);
25
+ --bgl-popup-bg: var(--bgl-white);
26
+ --bgl-popup-text: var(--bgl-black);
27
+ --bgl-text-color: var(--bgl-black);
28
+ --bgl-light-text: var(--bgl-white);
29
+ --bgl-richtext-color: var(--bgl-white);
30
+ --bgl-code-bg: var(--bgl-black);
31
+ --bgl-code-color: var(--bgl-white);
32
+ --bgl-dark-bg: rgba(0, 0, 0, 0.7);
33
+ --bgl-selection-bg: var(--bgl-blue-dark);
34
+ --bgl-selection-color: var(--bgl-white);
35
+ --bgl-scrollbar-thumb: var(--bgl-gray);
36
+ --bgl-scrollbar-size: 0.5rem;
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
+ --bgl-range-thumb-color: var(--bgl-white);
43
+ }
44
+
45
+ /* OTHER COLORS */
46
+ :root {
47
+ --bgl-blue: #2e5bff;
48
+ --bgl-blue-20: rgba(46, 91, 255, 20%);
49
+ --bgl-blue-dark: #191c30;
50
+ --bgl-blue-light: #eef6ff;
51
+ --bgl-pink: #f1416c;
52
+ --bgl-pink-light: #fde8f0;
53
+ --bgl-red: #ed6c6f;
54
+ --bgl-red-tint: #fbe2e2;
55
+ --bgl-red-light: #fde8e8;
56
+ --bgl-yellow: #ffbb00;
57
+ --bgl-yellow-light: #fff6d5;
58
+ --bgl-green: #75c98f;
59
+ --bgl-green-light: #e8f7f0;
60
+ --bgl-purple: #8a4baf;
61
+ --bgl-purple-light: #f0e8f7;
62
+ --bgl-brown: #a67c52;
63
+ --bgl-brown-light: #f9f4f0;
64
+ --bgl-orange: #ff8c00;
65
+ --bgl-orange-light: #ffebd9;
66
+ --bgl-turquoise: #00d8c0;
67
+ --bgl-turquoise-light: #e8f9f7;
68
+ --whatsapp-gray: #89959f;
69
+ --whatsapp-green: #e0fcd6;
70
+ --whatsapp-blue: #71bce6;
43
71
  }
44
72
 
45
73
  /* TYPE */
46
74
  :root {
47
- --bgl-font: 'Lexend', 'Ploni', sans-serif;
48
- --input-font-size: 16px;
75
+ --bgl-font: 'Lexend', 'Ploni', sans-serif;
76
+ --input-font-size: 16px;
49
77
  }
50
78
 
51
79
  /* DIMENSIONS */
52
80
  :root {
53
- --bgl-font-size: 16px;
54
- --input-height: 40px;
55
- --label-font-size: 12px;
56
- --pill-font-size: 12px;
57
- --input-border-radius: 7px;
58
- --card-border-radius: 12px;
59
- --btn-border-radius: 10px;
60
- --btn-padding: 30px;
61
- --btn-height: 40px;
62
- --pill-border-radius: 8px;
63
- --pill-height: 20px;
64
- --skeleton-radius: 0.25rem;
65
- --skeleton-margin: 1rem;
66
- --bgl-range-thumb-size: 20px;
67
- --bgl-range-track-height: 8px;
81
+ --bgl-font-size: 16px;
82
+ --input-height: 40px;
83
+ --label-font-size: 12px;
84
+ --pill-font-size: 12px;
85
+ --input-border-radius: 7px;
86
+ --card-border-radius: 12px;
87
+ --btn-border-radius: 10px;
88
+ --btn-padding: 30px;
89
+ --btn-height: 40px;
90
+ --pill-border-radius: 8px;
91
+ --pill-height: 20px;
92
+ --skeleton-radius: 0.25rem;
93
+ --skeleton-margin: 1rem;
94
+ --bgl-range-thumb-size: 20px;
95
+ --bgl-range-track-height: 8px;
68
96
  }
69
97
 
70
98
  /* MISC */
71
99
  :root {
72
- --bgl-transition: all 200ms ease;
73
- --bgl-transition-400: all 400ms ease;
74
- --bgl-hover-filter: brightness(90%);
75
- --bgl-active-filter: brightness(70%);
100
+ --bgl-transition: all 200ms ease;
101
+ --bgl-transition-400: all 400ms ease;
102
+ --bgl-hover-filter: brightness(90%);
103
+ --bgl-active-filter: brightness(70%);
76
104
  }
77
105
 
78
- /* OTHER COLORS */
106
+ /* Base Colors */
107
+ :root {
108
+ --bgl-blue: #2e5bff;
109
+ --bgl-green: #75c98f;
110
+ --bgl-red: #ed6c6f;
111
+ --bgl-yellow: #ffbb00;
112
+ --bgl-purple: #8a4baf;
113
+ --bgl-brown: #a67c52;
114
+ --bgl-orange: #ff8c00;
115
+ --bgl-turquoise: #00d8c0;
116
+ --bgl-gray: #b7b7b7;
117
+ --bgl-black: #282929;
118
+ --bgl-pink: #f1416c;
119
+ }
120
+
121
+ /* 10% tints (lightest) */
122
+ :root {
123
+ --bgl-blue-10: #f7f9ff;
124
+ --bgl-green-10: #f7fcf9;
125
+ --bgl-red-10: #fef8f8;
126
+ --bgl-yellow-10: #fffbf0;
127
+ --bgl-purple-10: #faf7fb;
128
+ --bgl-brown-10: #faf8f6;
129
+ --bgl-orange-10: #fff8f0;
130
+ --bgl-turquoise-10: #f0fffe;
131
+ --bgl-gray-10: #fafafa;
132
+ --bgl-black-10: #f8f8f8;
133
+ --bgl-pink-10: #fef7f9;
134
+ }
135
+
136
+ /* 20% tints */
137
+ :root {
138
+ --bgl-blue-20: #eef6ff;
139
+ --bgl-green-20: #eef9f2;
140
+ --bgl-red-20: #fdf1f1;
141
+ --bgl-yellow-20: #fff7e0;
142
+ --bgl-purple-20: #f5eff7;
143
+ --bgl-brown-20: #f5f1ed;
144
+ --bgl-orange-20: #fff1e0;
145
+ --bgl-turquoise-20: #e0fffc;
146
+ --bgl-gray-20: #f5f5f5;
147
+ --bgl-black-20: #f0f0f0;
148
+ --bgl-pink-20: #fceff2;
149
+ }
150
+
151
+ /* 30% tints */
152
+ :root {
153
+ --bgl-blue-30: #e0ebff;
154
+ --bgl-green-30: #ddf3e5;
155
+ --bgl-red-30: #fae5e6;
156
+ --bgl-yellow-30: #fff0cc;
157
+ --bgl-purple-30: #ede2f0;
158
+ --bgl-brown-30: #ebe2db;
159
+ --bgl-orange-30: #ffe6cc;
160
+ --bgl-turquoise-30: #ccfff9;
161
+ --bgl-gray-30: #ebebeb;
162
+ --bgl-black-30: #e5e5e5;
163
+ --bgl-pink-30: #f9e2e8;
164
+ }
165
+
166
+ /* 40% tints */
167
+ :root {
168
+ --bgl-blue-40: #c2d7ff;
169
+ --bgl-green-40: #bfebcf;
170
+ --bgl-red-40: #f4d1d2;
171
+ --bgl-yellow-40: #ffe699;
172
+ --bgl-purple-40: #dccbe1;
173
+ --bgl-brown-40: #dcc9ba;
174
+ --bgl-orange-40: #ffcc99;
175
+ --bgl-turquoise-40: #99fff0;
176
+ --bgl-gray-40: #d8d8d8;
177
+ --bgl-black-40: #d2d2d2;
178
+ --bgl-pink-40: #f4c9d4;
179
+ }
180
+
181
+ /* 50% tints */
182
+ :root {
183
+ --bgl-blue-50: #94adff;
184
+ --bgl-green-50: #9ae0b7;
185
+ --bgl-red-50: #eeb4b6;
186
+ --bgl-yellow-50: #ffdd66;
187
+ --bgl-purple-50: #c4a8cd;
188
+ --bgl-brown-50: #caa68b;
189
+ --bgl-orange-50: #ffb366;
190
+ --bgl-turquoise-50: #66ffe0;
191
+ --bgl-gray-50: #c4c4c4;
192
+ --bgl-black-50: #b8b8b8;
193
+ --bgl-pink-50: #eea4b6;
194
+ }
195
+
196
+ /* 60% tints */
79
197
  :root {
80
- --bgl-blue: #2e5bff;
81
- --bgl-blue-20: rgba(46, 91, 255, 20%);
82
- --bgl-blue-dark: #191c30;
83
- --bgl-blue-light: #eef6ff;
84
- --bgl-pink: #f1416c;
85
- --bgl-pink-light: #fde8f0;
86
- --bgl-red: #ed6c6f;
87
- --bgl-red-tint: #fbe2e2;
88
- --bgl-red-light: #fde8e8;
89
- --bgl-yellow: #ffbb00;
90
- --bgl-yellow-light: #fff6d5;
91
- --bgl-green: #75c98f;
92
- --bgl-green-light: #e8f7f0;
93
- --bgl-purple: #8a4baf;
94
- --bgl-purple-light: #f0e8f7;
95
- --bgl-brown: #a67c52;
96
- --bgl-brown-light: #f9f4f0;
97
- --bgl-orange: #ff8c00;
98
- --bgl-orange-light: #ffebd9;
99
- --bgl-turquoise: #00d8c0;
100
- --bgl-turquoise-light: #e8f9f7;
101
- --whatsapp-gray: #89959f;
102
- --whatsapp-green: #e0fcd6;
103
- --whatsapp-blue: #71bce6;
198
+ --bgl-blue-60: #6690ff;
199
+ --bgl-green-60: #87d4a7;
200
+ --bgl-red-60: #e99799;
201
+ --bgl-yellow-60: #ffd433;
202
+ --bgl-purple-60: #b696c0;
203
+ --bgl-brown-60: #bb9374;
204
+ --bgl-orange-60: #ff9933;
205
+ --bgl-turquoise-60: #33ffd0;
206
+ --bgl-gray-60: #cecece;
207
+ --bgl-black-60: #9e9e9e;
208
+ --bgl-pink-60: #e88399;
209
+ }
210
+
211
+ /* 70% tints */
212
+ :root {
213
+ --bgl-blue-70: #527aff;
214
+ --bgl-green-70: #7ec99f;
215
+ --bgl-red-70: #e4898c;
216
+ --bgl-yellow-70: #ffcc00;
217
+ --bgl-purple-70: #a884b3;
218
+ --bgl-brown-70: #ad805d;
219
+ --bgl-orange-70: #ff8000;
220
+ --bgl-turquoise-70: #00ffc0;
221
+ --bgl-gray-70: #c0c0c0;
222
+ --bgl-black-70: #858585;
223
+ --bgl-pink-70: #e2627c;
224
+ }
225
+
226
+ /* 80% tints */
227
+ :root {
228
+ --bgl-blue-80: #3e63ff;
229
+ --bgl-green-80: #7cbf97;
230
+ --bgl-red-80: #e07b7f;
231
+ --bgl-yellow-80: #ffc300;
232
+ --bgl-purple-80: #9a72a6;
233
+ --bgl-brown-80: #9f6d46;
234
+ --bgl-orange-80: #ff6600;
235
+ --bgl-turquoise-80: #00efb0;
236
+ --bgl-gray-80: #b2b2b2;
237
+ --bgl-black-80: #6b6b6b;
238
+ --bgl-pink-80: #dc415f;
239
+ }
240
+
241
+ /* 90% tints */
242
+ :root {
243
+ --bgl-blue-90: #3456ff;
244
+ --bgl-green-90: #7ab58f;
245
+ --bgl-red-90: #dc6d72;
246
+ --bgl-yellow-90: #ffba00;
247
+ --bgl-purple-90: #8c6099;
248
+ --bgl-brown-90: #915a2f;
249
+ --bgl-orange-90: #ff4d00;
250
+ --bgl-turquoise-90: #00e5a0;
251
+ --bgl-gray-90: #a4a4a4;
252
+ --bgl-black-90: #525252;
253
+ --bgl-pink-90: #d62042;
254
+ }
255
+
256
+ /* Base Colors */
257
+ :root {
258
+ --bgl-blue-100: #2e5bff;
259
+ --bgl-green-100: #75c98f;
260
+ --bgl-red-100: #ed6c6f;
261
+ --bgl-yellow-100: #ffbb00;
262
+ --bgl-purple-100: #8a4baf;
263
+ --bgl-brown-100: #a67c52;
264
+ --bgl-orange-100: #ff8c00;
265
+ --bgl-turquoise-100: #00d8c0;
266
+ --bgl-gray-100: #b7b7b7;
267
+ --bgl-black-100: #282929;
268
+ --bgl-pink-100: #f1416c;
269
+ }
270
+
271
+ /* 110% shades (darker than base) */
272
+ :root {
273
+ --bgl-blue-110: #1a42cc;
274
+ --bgl-green-110: #5aa572;
275
+ --bgl-red-110: #c5565a;
276
+ --bgl-yellow-110: #cc9600;
277
+ --bgl-purple-110: #6d3a88;
278
+ --bgl-brown-110: #7a4f3e;
279
+ --bgl-orange-110: #cc6f00;
280
+ --bgl-turquoise-110: #00a699;
281
+ --bgl-gray-110: #949494;
282
+ --bgl-black-110: #1f2020;
283
+ --bgl-pink-110: #bf2f55;
284
+ }
285
+
286
+ /* 120% shades */
287
+ :root {
288
+ --bgl-blue-120: #0f2e99;
289
+ --bgl-green-120: #459555;
290
+ --bgl-red-120: #ae3f43;
291
+ --bgl-yellow-120: #997200;
292
+ --bgl-purple-120: #4e1f61;
293
+ --bgl-brown-120: #63442d;
294
+ --bgl-orange-120: #995200;
295
+ --bgl-turquoise-120: #007d72;
296
+ --bgl-gray-120: #808080;
297
+ --bgl-black-120: #161717;
298
+ --bgl-pink-120: #a81e3e;
299
+ }
300
+
301
+ /* 130% shades (darkest) */
302
+ :root {
303
+ --bgl-blue-130: #041a66;
304
+ --bgl-green-130: #308538;
305
+ --bgl-red-130: #97282c;
306
+ --bgl-yellow-130: #664e00;
307
+ --bgl-purple-130: #2f043a;
308
+ --bgl-brown-130: #4c391c;
309
+ --bgl-orange-130: #663500;
310
+ --bgl-turquoise-130: #00544b;
311
+ --bgl-gray-130: #6c6c6c;
312
+ --bgl-black-130: #0d0e0e;
313
+ --bgl-pink-130: #910d27;
104
314
  }
105
315
 
106
316
  .testMe * {
107
- outline: 1px dotted red;
317
+ outline: 1px dotted red;
108
318
  }
109
319
 
110
320
  .Vue-Toastification__toast {
111
- border-radius: var(--card-border-radius);
112
- box-shadow: none;
321
+ border-radius: var(--card-border-radius);
322
+ box-shadow: none;
113
323
  }
114
324
 
115
325
  .Vue-Toastification__toast--default {
116
- background: var(--bgl-primary);
326
+ background: var(--bgl-primary);
117
327
  }
118
328
 
119
329
  .Vue-Toastification__close-button {
120
- height: 1.5rem;
121
- line-height: 1rem;
330
+ height: 1.5rem;
331
+ line-height: 1rem;
122
332
  }
123
333
 
124
334
  ::-moz-selection {
125
- color: var(--bgl-selection-color);
126
- background: var(--bgl-selection-bg);
335
+ color: var(--bgl-selection-color);
336
+ background: var(--bgl-selection-bg);
127
337
  }
128
338
 
129
339
  ::selection {
130
- color: var(--bgl-selection-color);
131
- background: var(--bgl-selection-bg);
340
+ color: var(--bgl-selection-color);
341
+ background: var(--bgl-selection-bg);
132
342
  }
133
343
 
134
344
  .popup {
135
- border-radius: 15px;
136
- background: var(--bgl-popup-bg);
137
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
138
- padding: 2rem;
139
- min-width: 300px;
140
- text-align: center;
345
+ border-radius: 15px;
346
+ background: var(--bgl-popup-bg);
347
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
348
+ padding: 2rem;
349
+ min-width: 300px;
350
+ text-align: center;
141
351
  }
142
352
 
143
353
  .tabs {
144
- -moz-column-gap: 1rem;
145
- column-gap: 1rem;
146
- margin-top: 20px;
147
- margin-bottom: -2rem;
148
- border-top: 1px solid var(--border-color);
149
- width: calc(100% + 4rem);
150
- -webkit-margin-start: -2rem;
151
- margin-inline-start: -2rem;
152
- -webkit-padding-start: 2rem;
153
- padding-inline-start: 2rem;
154
- overflow: auto;
155
- display: flex;
354
+ -moz-column-gap: 1rem;
355
+ column-gap: 1rem;
356
+ margin-top: 20px;
357
+ margin-bottom: -2rem;
358
+ border-top: 1px solid var(--border-color);
359
+ width: calc(100% + 4rem);
360
+ -webkit-margin-start: -2rem;
361
+ margin-inline-start: -2rem;
362
+ -webkit-padding-start: 2rem;
363
+ padding-inline-start: 2rem;
364
+ overflow: auto;
365
+ display: flex;
156
366
  }
157
367
 
158
368
  .tab {
159
- font-size: 14px;
160
- font-weight: 600;
161
- line-height: 2.5;
162
- cursor: pointer;
163
- transition: var(--bgl-transition);
164
- border-bottom: 2px solid transparent;
165
- padding: 0 5px;
166
- white-space: nowrap;
167
- text-decoration: none;
168
- color: inherit;
369
+ font-size: 14px;
370
+ font-weight: 600;
371
+ line-height: 2.5;
372
+ cursor: pointer;
373
+ transition: var(--bgl-transition);
374
+ border-bottom: 2px solid transparent;
375
+ padding: 0 5px;
376
+ white-space: nowrap;
377
+ text-decoration: none;
378
+ color: inherit;
169
379
  }
170
380
 
171
381
  .tab.active {
172
- color: var(--bgl-primary);
173
- border-bottom: 2px solid var(--bgl-primary);
382
+ color: var(--bgl-primary);
383
+ border-bottom: 2px solid var(--bgl-primary);
174
384
  }
175
385
 
176
386
  .tab:hover {
177
- color: var(--bgl-primary);
387
+ color: var(--bgl-primary);
178
388
  }
179
389
 
180
390
  .tab:active {
181
- -webkit-filter: brightness(70%);
182
- filter: brightness(70%);
391
+ -webkit-filter: brightness(70%);
392
+ filter: brightness(70%);
183
393
  }
184
394
 
185
395
  .router-tab {
186
- font-size: 14px;
187
- font-weight: 600;
188
- line-height: 2.5;
189
- cursor: pointer;
190
- transition: var(--bgl-transition);
191
- border-bottom: 2px solid transparent;
192
- padding: 0 5px;
193
- white-space: nowrap;
194
- text-decoration: none;
195
- color: inherit;
396
+ font-size: 14px;
397
+ font-weight: 600;
398
+ line-height: 2.5;
399
+ cursor: pointer;
400
+ transition: var(--bgl-transition);
401
+ border-bottom: 2px solid transparent;
402
+ padding: 0 5px;
403
+ white-space: nowrap;
404
+ text-decoration: none;
405
+ color: inherit;
196
406
  }
197
407
 
198
408
  .router-tab.router-link-active {
199
- color: var(--bgl-primary);
200
- border-bottom: 2px solid var(--bgl-primary);
409
+ color: var(--bgl-primary);
410
+ border-bottom: 2px solid var(--bgl-primary);
201
411
  }
202
412
 
203
413
  .router-tab:hover {
204
- color: var(--bgl-primary);
414
+ color: var(--bgl-primary);
205
415
  }
206
416
 
207
417
  .router-tab:active {
208
- -webkit-filter: brightness(70%);
209
- filter: brightness(70%);
418
+ -webkit-filter: brightness(70%);
419
+ filter: brightness(70%);
210
420
  }
211
421
 
212
422
  .entity-container {
213
- display: grid;
214
- height: 100%;
215
- grid-template-columns: minmax(300px, 1fr) 3fr;
216
- grid-gap: 1rem;
217
- -moz-column-gap: 1rem;
218
- column-gap: 1rem;
219
- grid-template-rows: 1fr;
220
- grid-template-areas: 'list-view detail-view';
221
- transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
222
- transition:
223
- grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
224
- -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
225
- transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
423
+ display: grid;
424
+ height: 100%;
425
+ grid-template-columns: minmax(300px, 1fr) 3fr;
426
+ grid-gap: 1rem;
427
+ -moz-column-gap: 1rem;
428
+ column-gap: 1rem;
429
+ grid-template-rows: 1fr;
430
+ grid-template-areas: 'list-view detail-view';
431
+ transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
432
+ transition:
433
+ grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
434
+ -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
435
+ transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
226
436
  }
227
437
 
228
438
  .detail-main {
229
- overflow-y: auto;
439
+ overflow-y: auto;
230
440
  }
231
441
 
232
442
  .content-row p {
233
- margin: 0 0 10px 0;
443
+ margin: 0 0 10px 0;
234
444
  }
235
445
 
236
446
  .id {
237
- color: var(--bgl-gray);
238
- font-size: 9px;
447
+ color: var(--bgl-gray);
448
+ font-size: 9px;
239
449
  }
240
450
 
241
451
  .field {
242
- --field-count: 1;
243
- --width: calc(100% / var(--field-count));
244
- grid-auto-columns: minmax(var(--width), var(--width));
245
- font-size: 10px;
246
- text-align: z;
452
+ --field-count: 1;
453
+ --width: calc(100% / var(--field-count));
454
+ grid-auto-columns: minmax(var(--width), var(--width));
455
+ font-size: 10px;
456
+ text-align: z;
247
457
  }
248
458
 
249
459
  .detail-view-inner {
250
- display: grid;
251
- height: 100%;
252
- overflow: hidden;
253
- grid-template-rows: -webkit-max-content 1fr;
254
- grid-template-rows: max-content 1fr;
255
- gap: 1rem;
460
+ display: grid;
461
+ height: 100%;
462
+ overflow: hidden;
463
+ grid-template-rows: -webkit-max-content 1fr;
464
+ grid-template-rows: max-content 1fr;
465
+ gap: 1rem;
256
466
  }
257
467
 
258
468
  .detail-view-inner-wrap {
259
- height: 100%;
260
- overflow: hidden;
261
- transition: var(--bgl-transition);
469
+ height: 100%;
470
+ overflow: hidden;
471
+ transition: var(--bgl-transition);
262
472
  }
263
473
 
264
474
  .table-list-wrap {
265
- overflow: auto;
475
+ overflow: auto;
266
476
  }
267
477
 
268
478
  .copy-url {
269
- background-color: var(--bgl-gray-light);
270
- border-radius: var(--btn-border-radius);
271
- padding: 0.5rem 1rem;
272
- align-items: center;
273
- justify-content: flex-start;
274
- margin-bottom: 1rem;
275
- display: flex;
276
- justify-content: space-between;
479
+ background-color: var(--bgl-gray-light);
480
+ border-radius: var(--btn-border-radius);
481
+ padding: 0.5rem 1rem;
482
+ align-items: center;
483
+ justify-content: flex-start;
484
+ margin-bottom: 1rem;
485
+ display: flex;
486
+ justify-content: space-between;
277
487
  }
278
488
 
279
489
  .copy-url a {
280
- margin: 0;
281
- font-size: 12px;
282
- opacity: 0.8;
283
- color: var(--bgl-text-color);
284
- word-break: break-all;
490
+ margin: 0;
491
+ font-size: 12px;
492
+ opacity: 0.8;
493
+ color: var(--bgl-text-color);
494
+ word-break: break-all;
285
495
  }
286
496
 
287
497
  .list-view {
288
- grid-area: list-view;
289
- grid-template-areas: 'list-header''list-content';
290
- grid-template-columns: 1fr;
291
- overflow-y: auto;
292
- grid-template-rows: -webkit-max-content 1fr;
293
- grid-template-rows: max-content 1fr;
294
- transition: var(--transition);
498
+ grid-area: list-view;
499
+ grid-template-areas: 'list-header' 'list-content';
500
+ grid-template-columns: 1fr;
501
+ overflow-y: auto;
502
+ grid-template-rows: -webkit-max-content 1fr;
503
+ grid-template-rows: max-content 1fr;
504
+ transition: var(--transition);
295
505
  }
296
506
 
297
507
  .shekel {
298
- line-height: 0;
508
+ line-height: 0;
299
509
  }
300
510
 
301
511
  .view-wrapper {
302
- height: 100%;
303
- position: relative;
304
- overflow: hidden;
512
+ height: 100%;
513
+ position: relative;
514
+ overflow: hidden;
305
515
  }
306
516
 
307
517
  .extraOptions {
308
- max-height: 30px;
309
- overflow: hidden;
310
- transition: all 0.2s 30s ease;
518
+ max-height: 30px;
519
+ overflow: hidden;
520
+ transition: all 0.2s 30s ease;
311
521
  }
312
522
 
313
-
314
523
  .extraOptions:hover {
315
- max-height: 200vh;
316
- transition: 0.2s all 0.2s ease;
317
-
524
+ max-height: 200vh;
525
+ transition: 0.2s all 0.2s ease;
318
526
  }
319
527
 
320
528
  @media screen and (max-width: 1000px) {
321
- .entity-container {
322
- grid-template-columns: minmax(22vw, 1fr) 2fr;
323
- }
529
+ .entity-container {
530
+ grid-template-columns: minmax(22vw, 1fr) 2fr;
531
+ }
324
532
  }
325
533
 
326
534
  @media screen and (max-width: 910px) {
327
- .tab {
328
- font-size: 12px;
329
- }
330
-
331
- .entity-container {
332
- grid-template-columns: 1fr;
333
- gap: 0;
334
- }
335
-
336
- .detail-view-inner {
337
- border-radius: var(--card-border-radius);
338
- background: var(--bgl-box-bg);
339
- }
340
-
341
- .detail-view-inner-wrap {
342
- position: absolute;
343
- height: 100%;
344
- width: 100%;
345
- background: var(--bgl-bg);
346
- }
347
-
348
- .detail-view-inner-wrap.bgl_card {
349
- background: var(--bgl-box-bg);
350
- }
351
-
352
- .bgl_card {
353
- padding: 1rem 1rem;
354
- }
355
-
356
- .tabs {
357
- -moz-column-gap: 10px;
358
- column-gap: 10px;
359
- margin-top: 10px;
360
- margin-bottom: -15px;
361
- box-sizing: border-box;
362
- -webkit-margin-start: -1rem;
363
- margin-inline-start: -1rem;
364
- -webkit-padding-start: 1rem;
365
- padding-inline-start: 1rem;
366
- max-width: calc(100vw - 2rem);
367
- }
368
-
369
- .popup {
370
- border-radius: 15px;
371
- background: var(--bgl-popup-bg);
372
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
373
- padding: 2rem;
374
- min-width: 0;
375
- max-width: 90%;
376
- max-height: 90vh;
377
- overflow-x: auto;
378
- text-align: center;
379
- }
380
-
381
- .detail-main {
382
- overflow-y: unset;
383
- }
384
-
385
- .detail-section {
386
- height: -webkit-fit-content;
387
- height: -moz-fit-content;
388
- height: fit-content;
389
- }
390
-
391
- .field {
392
- display: flex;
393
- flex-wrap: wrap;
394
- gap: 0.5rem;
395
- align-items: center;
396
- }
397
- }
535
+ .tab {
536
+ font-size: 12px;
537
+ }
538
+
539
+ .entity-container {
540
+ grid-template-columns: 1fr;
541
+ gap: 0;
542
+ }
543
+
544
+ .detail-view-inner {
545
+ border-radius: var(--card-border-radius);
546
+ background: var(--bgl-box-bg);
547
+ }
548
+
549
+ .detail-view-inner-wrap {
550
+ position: absolute;
551
+ height: 100%;
552
+ width: 100%;
553
+ background: var(--bgl-bg);
554
+ }
555
+
556
+ .detail-view-inner-wrap.bgl_card {
557
+ background: var(--bgl-box-bg);
558
+ }
559
+
560
+ .bgl_card {
561
+ padding: 1rem 1rem;
562
+ }
563
+
564
+ .tabs {
565
+ -moz-column-gap: 10px;
566
+ column-gap: 10px;
567
+ margin-top: 10px;
568
+ margin-bottom: -15px;
569
+ box-sizing: border-box;
570
+ -webkit-margin-start: -1rem;
571
+ margin-inline-start: -1rem;
572
+ -webkit-padding-start: 1rem;
573
+ padding-inline-start: 1rem;
574
+ max-width: calc(100vw - 2rem);
575
+ }
576
+
577
+ .popup {
578
+ border-radius: 15px;
579
+ background: var(--bgl-popup-bg);
580
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
581
+ padding: 2rem;
582
+ min-width: 0;
583
+ max-width: 90%;
584
+ max-height: 90vh;
585
+ overflow-x: auto;
586
+ text-align: center;
587
+ }
588
+
589
+ .detail-main {
590
+ overflow-y: unset;
591
+ }
592
+
593
+ .detail-section {
594
+ height: -webkit-fit-content;
595
+ height: -moz-fit-content;
596
+ height: fit-content;
597
+ }
598
+
599
+ .field {
600
+ display: flex;
601
+ flex-wrap: wrap;
602
+ gap: 0.5rem;
603
+ align-items: center;
604
+ }
605
+ }