@bagelink/vue 1.4.81 → 1.4.87

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