@bagelink/vue 0.0.1041 → 0.0.1043

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.
@@ -3,374 +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;
64
- --bgl-range-thumb-size: 20px;
65
- --bgl-range-track-height: 10px;
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: 8px;
66
66
  }
67
67
 
68
68
  /* MISC */
69
69
  :root {
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%);
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%);
74
74
  }
75
75
 
76
76
  /* OTHER COLORS */
77
77
  :root {
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;
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;
91
91
  }
92
92
 
93
93
  .testMe * {
94
- outline: 1px dotted red;
94
+ outline: 1px dotted red;
95
95
  }
96
96
 
97
97
  .Vue-Toastification__toast {
98
- border-radius: var(--card-border-radius);
99
- box-shadow: none;
98
+ border-radius: var(--card-border-radius);
99
+ box-shadow: none;
100
100
  }
101
101
 
102
102
  .Vue-Toastification__toast--default {
103
- background: var(--bgl-primary);
103
+ background: var(--bgl-primary);
104
104
  }
105
105
 
106
106
  .Vue-Toastification__close-button {
107
- height: 1.5rem;
108
- line-height: 1rem;
107
+ height: 1.5rem;
108
+ line-height: 1rem;
109
109
  }
110
110
 
111
111
  ::-moz-selection {
112
- color: var(--bgl-selection-color);
113
- background: var(--bgl-selection-bg);
112
+ color: var(--bgl-selection-color);
113
+ background: var(--bgl-selection-bg);
114
114
  }
115
115
 
116
116
  ::selection {
117
- color: var(--bgl-selection-color);
118
- background: var(--bgl-selection-bg);
117
+ color: var(--bgl-selection-color);
118
+ background: var(--bgl-selection-bg);
119
119
  }
120
120
 
121
121
  .popup {
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;
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;
128
128
  }
129
129
 
130
130
  .tabs {
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;
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;
143
143
  }
144
144
 
145
145
  .tab {
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;
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;
156
156
  }
157
157
 
158
158
  .tab.active {
159
- color: var(--bgl-primary);
160
- border-bottom: 2px solid var(--bgl-primary);
159
+ color: var(--bgl-primary);
160
+ border-bottom: 2px solid var(--bgl-primary);
161
161
  }
162
162
 
163
163
  .tab:hover {
164
- color: var(--bgl-primary);
164
+ color: var(--bgl-primary);
165
165
  }
166
166
 
167
167
  .tab:active {
168
- -webkit-filter: brightness(70%);
169
- filter: brightness(70%);
168
+ -webkit-filter: brightness(70%);
169
+ filter: brightness(70%);
170
170
  }
171
171
 
172
172
  .router-tab {
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;
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;
183
183
  }
184
184
 
185
185
  .router-tab.router-link-active {
186
- color: var(--bgl-primary);
187
- border-bottom: 2px solid var(--bgl-primary);
186
+ color: var(--bgl-primary);
187
+ border-bottom: 2px solid var(--bgl-primary);
188
188
  }
189
189
 
190
190
  .router-tab:hover {
191
- color: var(--bgl-primary);
191
+ color: var(--bgl-primary);
192
192
  }
193
193
 
194
194
  .router-tab:active {
195
- -webkit-filter: brightness(70%);
196
- filter: brightness(70%);
195
+ -webkit-filter: brightness(70%);
196
+ filter: brightness(70%);
197
197
  }
198
198
 
199
199
  .entity-container {
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);
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);
213
213
  }
214
214
 
215
215
  .detail-main {
216
- overflow-y: auto;
216
+ overflow-y: auto;
217
217
  }
218
218
 
219
219
  .content-row p {
220
- margin: 0 0 10px 0;
220
+ margin: 0 0 10px 0;
221
221
  }
222
222
 
223
223
  .id {
224
- color: var(--bgl-gray);
225
- font-size: 9px;
224
+ color: var(--bgl-gray);
225
+ font-size: 9px;
226
226
  }
227
227
 
228
228
  .field {
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;
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;
234
234
  }
235
235
 
236
236
  .detail-view-inner {
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;
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;
243
243
  }
244
244
 
245
245
  .detail-view-inner-wrap {
246
- height: 100%;
247
- overflow: hidden;
248
- transition: var(--bgl-transition);
246
+ height: 100%;
247
+ overflow: hidden;
248
+ transition: var(--bgl-transition);
249
249
  }
250
250
 
251
251
  .table-list-wrap {
252
- overflow: auto;
252
+ overflow: auto;
253
253
  }
254
254
 
255
255
  [dir='rtl'] .data-row .bgl_icon-font,
256
256
  [dir='rtl'] .embedded-field .bgl_icon-font {
257
- transform: rotateY(180deg) !important;
257
+ transform: rotateY(180deg) !important;
258
258
  }
259
259
 
260
260
  .copy-url {
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;
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;
269
269
  }
270
270
 
271
271
  .copy-url a {
272
- margin: 0;
273
- font-size: 12px;
274
- opacity: 0.8;
275
- color: var(--bgl-text-color);
276
- 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;
277
277
  }
278
278
 
279
279
  .list-view {
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);
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);
287
287
  }
288
288
 
289
289
  .shekel {
290
- line-height: 0;
290
+ line-height: 0;
291
291
  }
292
292
 
293
293
  .view-wrapper {
294
- height: 100%;
295
- position: relative;
296
- overflow: hidden;
294
+ height: 100%;
295
+ position: relative;
296
+ overflow: hidden;
297
297
  }
298
298
 
299
299
  @media screen and (max-width: 1000px) {
300
- .entity-container {
301
- grid-template-columns: minmax(22vw, 1fr) 2fr;
302
- }
300
+ .entity-container {
301
+ grid-template-columns: minmax(22vw, 1fr) 2fr;
302
+ }
303
303
  }
304
304
 
305
305
  @media screen and (max-width: 910px) {
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
- }
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
+ }