@bagelink/vue 1.8.71 → 1.8.76

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