@beterdichtbij/component-library 0.72.4-beta.0 → 0.72.4

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 (69) hide show
  1. package/README.md +12 -12
  2. package/dist/bd-component-lib.cjs.js +55 -55
  3. package/dist/bd-component-lib.css +1 -1
  4. package/dist/bd-component-lib.es.js +11 -11
  5. package/dist/bd-component-lib.umd.js +56 -56
  6. package/dist/locales/en.json +79 -79
  7. package/dist/locales/nl.json +180 -180
  8. package/dist/scss/_active-filters.scss +65 -65
  9. package/dist/scss/_alert.scss +11 -9
  10. package/dist/scss/_article.scss +31 -31
  11. package/dist/scss/_assign-conversation-modal.scss +13 -13
  12. package/dist/scss/_attachments.scss +107 -107
  13. package/dist/scss/_badge.scss +18 -18
  14. package/dist/scss/_button.scss +80 -80
  15. package/dist/scss/_card.scss +62 -61
  16. package/dist/scss/_chatcloud.scss +99 -101
  17. package/dist/scss/_collapsable-card.scss +103 -103
  18. package/dist/scss/_content-library-card-message-template.scss +136 -136
  19. package/dist/scss/_content-library-card.scss +158 -158
  20. package/dist/scss/_content-library-modal.scss +8 -8
  21. package/dist/scss/_content-library-overview.scss +4 -4
  22. package/dist/scss/_content-library-split-button.scss +23 -23
  23. package/dist/scss/_conversation-to-text-modal.scss +36 -36
  24. package/dist/scss/_dropdown.scss +113 -113
  25. package/dist/scss/_extern.scss +1 -1
  26. package/dist/scss/_file-upload-preview.scss +53 -53
  27. package/dist/scss/_file-upload.scss +26 -26
  28. package/dist/scss/_filter-card.scss +64 -64
  29. package/dist/scss/_form-field.scss +12 -12
  30. package/dist/scss/_form-multiple-checkbox.scss +51 -51
  31. package/dist/scss/_forms.scss +3 -3
  32. package/dist/scss/_header.scss +170 -170
  33. package/dist/scss/_icon-luscii-logo.scss +31 -31
  34. package/dist/scss/_icons.scss +38 -38
  35. package/dist/scss/_image-attachment-modal.scss +91 -91
  36. package/dist/scss/_input-group.scss +2 -2
  37. package/dist/scss/_loader.scss +59 -59
  38. package/dist/scss/_markdown-editor.scss +114 -114
  39. package/dist/scss/_message-template-form-modal.scss +47 -47
  40. package/dist/scss/_mixins.scss +78 -78
  41. package/dist/scss/_mobile-menu.scss +91 -91
  42. package/dist/scss/_modal.scss +182 -182
  43. package/dist/scss/_notification-button.scss +29 -29
  44. package/dist/scss/_pagination.scss +56 -56
  45. package/dist/scss/_phone-number-edit-modal.scss +35 -35
  46. package/dist/scss/_pill-container.scss +26 -26
  47. package/dist/scss/_pill.scss +63 -63
  48. package/dist/scss/_profile-image.scss +34 -34
  49. package/dist/scss/_table-sort-header.scss +13 -13
  50. package/dist/scss/_table.scss +16 -16
  51. package/dist/scss/_templates.scss +264 -294
  52. package/dist/scss/_toast.scss +69 -69
  53. package/dist/scss/_user-information.scss +34 -34
  54. package/dist/scss/_user.scss +21 -21
  55. package/dist/scss/_video-call-toast.scss +100 -100
  56. package/dist/scss/_zoomslider.scss +77 -77
  57. package/dist/scss/base/variables.scss +210 -210
  58. package/dist/scss/extern/_bootstrap.scss +14 -14
  59. package/dist/scss/extern/_prime-vue.scss +551 -551
  60. package/dist/scss/forms/_form-check.scss +16 -16
  61. package/dist/scss/forms/_form-input.scss +9 -9
  62. package/dist/scss/forms/_form-select.scss +4 -4
  63. package/dist/scss/main.scss +52 -52
  64. package/dist/scss/templates/_change-password-template.scss +8 -8
  65. package/dist/scss/templates/_content-library-template.scss +135 -135
  66. package/dist/scss/templates/_not-found-template.scss +35 -36
  67. package/dist/scss/templates/_video-call-template.scss +225 -225
  68. package/dist/stores/SessionTimeOutStore.ts +46 -46
  69. package/package.json +133 -133
@@ -1,552 +1,552 @@
1
- :root {
2
- --p-fileupload-color: #394156;
3
- --p-border-radius-none: 0;
4
- --p-border-radius-xs: 2px;
5
- --p-border-radius-sm: 4px;
6
- --p-border-radius-md: 6px;
7
- --p-border-radius-lg: 8px;
8
- --p-border-radius-xl: 12px;
9
- --p-emerald-50: #ecfdf5;
10
- --p-emerald-100: #d1fae5;
11
- --p-emerald-200: #a7f3d0;
12
- --p-emerald-300: #6ee7b7;
13
- --p-emerald-400: #34d399;
14
- --p-emerald-500: #10b981;
15
- --p-emerald-600: #059669;
16
- --p-emerald-700: #047857;
17
- --p-emerald-800: #065f46;
18
- --p-emerald-900: #064e3b;
19
- --p-emerald-950: #022c22;
20
- --p-green-50: #f0fdf4;
21
- --p-green-100: #dcfce7;
22
- --p-green-200: #bbf7d0;
23
- --p-green-300: #86efac;
24
- --p-green-400: #4ade80;
25
- --p-green-500: #22c55e;
26
- --p-green-600: #16a34a;
27
- --p-green-700: #15803d;
28
- --p-green-800: #166534;
29
- --p-green-900: #14532d;
30
- --p-green-950: #052e16;
31
- --p-lime-50: #f7fee7;
32
- --p-lime-100: #ecfccb;
33
- --p-lime-200: #d9f99d;
34
- --p-lime-300: #bef264;
35
- --p-lime-400: #a3e635;
36
- --p-lime-500: #84cc16;
37
- --p-lime-600: #65a30d;
38
- --p-lime-700: #4d7c0f;
39
- --p-lime-800: #3f6212;
40
- --p-lime-900: #365314;
41
- --p-lime-950: #1a2e05;
42
- --p-red-50: #fef2f2;
43
- --p-red-100: #fee2e2;
44
- --p-red-200: #fecaca;
45
- --p-red-300: #fca5a5;
46
- --p-red-400: #f87171;
47
- --p-red-500: #ef4444;
48
- --p-red-600: #dc2626;
49
- --p-red-700: #b91c1c;
50
- --p-red-800: #991b1b;
51
- --p-red-900: #7f1d1d;
52
- --p-red-950: #450a0a;
53
- --p-orange-50: #fff7ed;
54
- --p-orange-100: #ffedd5;
55
- --p-orange-200: #fed7aa;
56
- --p-orange-300: #fdba74;
57
- --p-orange-400: #fb923c;
58
- --p-orange-500: #f97316;
59
- --p-orange-600: #ea580c;
60
- --p-orange-700: #c2410c;
61
- --p-orange-800: #9a3412;
62
- --p-orange-900: #7c2d12;
63
- --p-orange-950: #431407;
64
- --p-amber-50: #fffbeb;
65
- --p-amber-100: #fef3c7;
66
- --p-amber-200: #fde68a;
67
- --p-amber-300: #fcd34d;
68
- --p-amber-400: #fbbf24;
69
- --p-amber-500: #f59e0b;
70
- --p-amber-600: #d97706;
71
- --p-amber-700: #b45309;
72
- --p-amber-800: #92400e;
73
- --p-amber-900: #78350f;
74
- --p-amber-950: #451a03;
75
- --p-yellow-50: #fefce8;
76
- --p-yellow-100: #fef9c3;
77
- --p-yellow-200: #fef08a;
78
- --p-yellow-300: #fde047;
79
- --p-yellow-400: #facc15;
80
- --p-yellow-500: #eab308;
81
- --p-yellow-600: #ca8a04;
82
- --p-yellow-700: #a16207;
83
- --p-yellow-800: #854d0e;
84
- --p-yellow-900: #713f12;
85
- --p-yellow-950: #422006;
86
- --p-teal-50: #f0fdfa;
87
- --p-teal-100: #ccfbf1;
88
- --p-teal-200: #99f6e4;
89
- --p-teal-300: #5eead4;
90
- --p-teal-400: #2dd4bf;
91
- --p-teal-500: #14b8a6;
92
- --p-teal-600: #0d9488;
93
- --p-teal-700: #0f766e;
94
- --p-teal-800: #115e59;
95
- --p-teal-900: #134e4a;
96
- --p-teal-950: #042f2e;
97
- --p-cyan-50: #ecfeff;
98
- --p-cyan-100: #cffafe;
99
- --p-cyan-200: #a5f3fc;
100
- --p-cyan-300: #67e8f9;
101
- --p-cyan-400: #22d3ee;
102
- --p-cyan-500: #06b6d4;
103
- --p-cyan-600: #0891b2;
104
- --p-cyan-700: #0e7490;
105
- --p-cyan-800: #155e75;
106
- --p-cyan-900: #164e63;
107
- --p-cyan-950: #083344;
108
- --p-sky-50: #f0f9ff;
109
- --p-sky-100: #e0f2fe;
110
- --p-sky-200: #bae6fd;
111
- --p-sky-300: #7dd3fc;
112
- --p-sky-400: #38bdf8;
113
- --p-sky-500: #0ea5e9;
114
- --p-sky-600: #0284c7;
115
- --p-sky-700: #0369a1;
116
- --p-sky-800: #075985;
117
- --p-sky-900: #0c4a6e;
118
- --p-sky-950: #082f49;
119
- --p-blue-50: #eff6ff;
120
- --p-blue-100: #dbeafe;
121
- --p-blue-200: #bfdbfe;
122
- --p-blue-300: #93c5fd;
123
- --p-blue-400: #60a5fa;
124
- --p-blue-500: #3b82f6;
125
- --p-blue-600: #2563eb;
126
- --p-blue-700: #1d4ed8;
127
- --p-blue-800: #1e40af;
128
- --p-blue-900: #1e3a8a;
129
- --p-blue-950: #172554;
130
- --p-indigo-50: #eef2ff;
131
- --p-indigo-100: #e0e7ff;
132
- --p-indigo-200: #c7d2fe;
133
- --p-indigo-300: #a5b4fc;
134
- --p-indigo-400: #818cf8;
135
- --p-indigo-500: #6366f1;
136
- --p-indigo-600: #4f46e5;
137
- --p-indigo-700: #4338ca;
138
- --p-indigo-800: #3730a3;
139
- --p-indigo-900: #312e81;
140
- --p-indigo-950: #1e1b4b;
141
- --p-violet-50: #f5f3ff;
142
- --p-violet-100: #ede9fe;
143
- --p-violet-200: #ddd6fe;
144
- --p-violet-300: #c4b5fd;
145
- --p-violet-400: #a78bfa;
146
- --p-violet-500: #8b5cf6;
147
- --p-violet-600: #7c3aed;
148
- --p-violet-700: #6d28d9;
149
- --p-violet-800: #5b21b6;
150
- --p-violet-900: #4c1d95;
151
- --p-violet-950: #2e1065;
152
- --p-purple-50: #faf5ff;
153
- --p-purple-100: #f3e8ff;
154
- --p-purple-200: #e9d5ff;
155
- --p-purple-300: #d8b4fe;
156
- --p-purple-400: #c084fc;
157
- --p-purple-500: #a855f7;
158
- --p-purple-600: #9333ea;
159
- --p-purple-700: #7e22ce;
160
- --p-purple-800: #6b21a8;
161
- --p-purple-900: #581c87;
162
- --p-purple-950: #3b0764;
163
- --p-fuchsia-50: #fdf4ff;
164
- --p-fuchsia-100: #fae8ff;
165
- --p-fuchsia-200: #f5d0fe;
166
- --p-fuchsia-300: #f0abfc;
167
- --p-fuchsia-400: #e879f9;
168
- --p-fuchsia-500: #d946ef;
169
- --p-fuchsia-600: #c026d3;
170
- --p-fuchsia-700: #a21caf;
171
- --p-fuchsia-800: #86198f;
172
- --p-fuchsia-900: #701a75;
173
- --p-fuchsia-950: #4a044e;
174
- --p-pink-50: #fdf2f8;
175
- --p-pink-100: #fce7f3;
176
- --p-pink-200: #fbcfe8;
177
- --p-pink-300: #f9a8d4;
178
- --p-pink-400: #f472b6;
179
- --p-pink-500: #ec4899;
180
- --p-pink-600: #db2777;
181
- --p-pink-700: #be185d;
182
- --p-pink-800: #9d174d;
183
- --p-pink-900: #831843;
184
- --p-pink-950: #500724;
185
- --p-rose-50: #fff1f2;
186
- --p-rose-100: #ffe4e6;
187
- --p-rose-200: #fecdd3;
188
- --p-rose-300: #fda4af;
189
- --p-rose-400: #fb7185;
190
- --p-rose-500: #f43f5e;
191
- --p-rose-600: #e11d48;
192
- --p-rose-700: #be123c;
193
- --p-rose-800: #9f1239;
194
- --p-rose-900: #881337;
195
- --p-rose-950: #4c0519;
196
- --p-slate-50: #f8fafc;
197
- --p-slate-100: #f1f5f9;
198
- --p-slate-200: #e2e8f0;
199
- --p-slate-300: #cbd5e1;
200
- --p-slate-400: #94a3b8;
201
- --p-slate-500: #64748b;
202
- --p-slate-600: #475569;
203
- --p-slate-700: #334155;
204
- --p-slate-800: #1e293b;
205
- --p-slate-900: #0f172a;
206
- --p-slate-950: #020617;
207
- --p-gray-50: #f9fafb;
208
- --p-gray-100: #f3f4f6;
209
- --p-gray-200: #e5e7eb;
210
- --p-gray-300: #d1d5db;
211
- --p-gray-400: #9ca3af;
212
- --p-gray-500: #6b7280;
213
- --p-gray-600: #4b5563;
214
- --p-gray-700: #374151;
215
- --p-gray-800: #1f2937;
216
- --p-gray-900: #111827;
217
- --p-gray-950: #030712;
218
- --p-zinc-50: #fafafa;
219
- --p-zinc-100: #f4f4f5;
220
- --p-zinc-200: #e4e4e7;
221
- --p-zinc-300: #d4d4d8;
222
- --p-zinc-400: #a1a1aa;
223
- --p-zinc-500: #71717a;
224
- --p-zinc-600: #52525b;
225
- --p-zinc-700: #3f3f46;
226
- --p-zinc-800: #27272a;
227
- --p-zinc-900: #18181b;
228
- --p-zinc-950: #09090b;
229
- --p-neutral-50: #fafafa;
230
- --p-neutral-100: #f5f5f5;
231
- --p-neutral-200: #e5e5e5;
232
- --p-neutral-300: #d4d4d4;
233
- --p-neutral-400: #a3a3a3;
234
- --p-neutral-500: #737373;
235
- --p-neutral-600: #525252;
236
- --p-neutral-700: #404040;
237
- --p-neutral-800: #262626;
238
- --p-neutral-900: #171717;
239
- --p-neutral-950: #0a0a0a;
240
- --p-stone-50: #fafaf9;
241
- --p-stone-100: #f5f5f4;
242
- --p-stone-200: #e7e5e4;
243
- --p-stone-300: #d6d3d1;
244
- --p-stone-400: #a8a29e;
245
- --p-stone-500: #78716c;
246
- --p-stone-600: #57534e;
247
- --p-stone-700: #44403c;
248
- --p-stone-800: #292524;
249
- --p-stone-900: #1c1917;
250
- --p-stone-950: #0c0a09;
251
- }
252
-
253
- :root {
254
- --p-ripple-background: rgba(0, 0, 0, 0.1);
255
- }
256
-
257
- :root {
258
- --p-button-border-radius: var(--p-form-field-border-radius);
259
- --p-button-rounded-border-radius: 2rem;
260
- --p-button-gap: 0.5rem;
261
- --p-button-padding-x: var(--p-form-field-padding-x);
262
- --p-button-padding-y: var(--p-form-field-padding-y);
263
- --p-button-icon-only-width: 2.5rem;
264
- --p-button-sm-font-size: var(--p-form-field-sm-font-size);
265
- --p-button-sm-padding-x: var(--p-form-field-sm-padding-x);
266
- --p-button-sm-padding-y: var(--p-form-field-sm-padding-y);
267
- --p-button-sm-icon-only-width: 2rem;
268
- --p-button-lg-font-size: var(--p-form-field-lg-font-size);
269
- --p-button-lg-padding-x: var(--p-form-field-lg-padding-x);
270
- --p-button-lg-padding-y: var(--p-form-field-lg-padding-y);
271
- --p-button-lg-icon-only-width: 3rem;
272
- --p-button-label-font-weight: 500;
273
- --p-button-raised-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
274
- --p-button-focus-ring-width: var(--p-focus-ring-width);
275
- --p-button-focus-ring-style: var(--p-focus-ring-style);
276
- --p-button-focus-ring-offset: var(--p-focus-ring-offset);
277
- --p-button-badge-size: 1rem;
278
- --p-button-transition-duration: var(--p-form-field-transition-duration);
279
- --p-button-primary-background: var(--p-primary-color);
280
- --p-button-primary-hover-background: var(--p-primary-hover-color);
281
- --p-button-primary-active-background: var(--p-primary-active-color);
282
- --p-button-primary-border-color: var(--p-primary-color);
283
- --p-button-primary-hover-border-color: var(--p-primary-hover-color);
284
- --p-button-primary-active-border-color: var(--p-primary-active-color);
285
- --p-button-primary-color: var(--p-primary-contrast-color);
286
- --p-button-primary-hover-color: var(--p-primary-contrast-color);
287
- --p-button-primary-active-color: var(--p-primary-contrast-color);
288
- --p-button-primary-focus-ring-color: var(--p-primary-color);
289
- --p-button-primary-focus-ring-shadow: none;
290
- --p-button-secondary-background: var(--p-surface-100);
291
- --p-button-secondary-hover-background: var(--p-surface-200);
292
- --p-button-secondary-active-background: var(--p-surface-300);
293
- --p-button-secondary-border-color: var(--p-surface-100);
294
- --p-button-secondary-hover-border-color: var(--p-surface-200);
295
- --p-button-secondary-active-border-color: var(--p-surface-300);
296
- --p-button-secondary-color: var(--p-surface-600);
297
- --p-button-secondary-hover-color: var(--p-surface-700);
298
- --p-button-secondary-active-color: var(--p-surface-800);
299
- --p-button-secondary-focus-ring-color: var(--p-surface-600);
300
- --p-button-secondary-focus-ring-shadow: none;
301
- --p-button-info-background: var(--p-sky-500);
302
- --p-button-info-hover-background: var(--p-sky-600);
303
- --p-button-info-active-background: var(--p-sky-700);
304
- --p-button-info-border-color: var(--p-sky-500);
305
- --p-button-info-hover-border-color: var(--p-sky-600);
306
- --p-button-info-active-border-color: var(--p-sky-700);
307
- --p-button-info-color: #ffffff;
308
- --p-button-info-hover-color: #ffffff;
309
- --p-button-info-active-color: #ffffff;
310
- --p-button-info-focus-ring-color: var(--p-sky-500);
311
- --p-button-info-focus-ring-shadow: none;
312
- --p-button-success-background: var(--p-green-500);
313
- --p-button-success-hover-background: var(--p-green-600);
314
- --p-button-success-active-background: var(--p-green-700);
315
- --p-button-success-border-color: var(--p-green-500);
316
- --p-button-success-hover-border-color: var(--p-green-600);
317
- --p-button-success-active-border-color: var(--p-green-700);
318
- --p-button-success-color: #ffffff;
319
- --p-button-success-hover-color: #ffffff;
320
- --p-button-success-active-color: #ffffff;
321
- --p-button-success-focus-ring-color: var(--p-green-500);
322
- --p-button-success-focus-ring-shadow: none;
323
- --p-button-warn-background: var(--p-orange-500);
324
- --p-button-warn-hover-background: var(--p-orange-600);
325
- --p-button-warn-active-background: var(--p-orange-700);
326
- --p-button-warn-border-color: var(--p-orange-500);
327
- --p-button-warn-hover-border-color: var(--p-orange-600);
328
- --p-button-warn-active-border-color: var(--p-orange-700);
329
- --p-button-warn-color: #ffffff;
330
- --p-button-warn-hover-color: #ffffff;
331
- --p-button-warn-active-color: #ffffff;
332
- --p-button-warn-focus-ring-color: var(--p-orange-500);
333
- --p-button-warn-focus-ring-shadow: none;
334
- --p-button-help-background: var(--p-purple-500);
335
- --p-button-help-hover-background: var(--p-purple-600);
336
- --p-button-help-active-background: var(--p-purple-700);
337
- --p-button-help-border-color: var(--p-purple-500);
338
- --p-button-help-hover-border-color: var(--p-purple-600);
339
- --p-button-help-active-border-color: var(--p-purple-700);
340
- --p-button-help-color: #ffffff;
341
- --p-button-help-hover-color: #ffffff;
342
- --p-button-help-active-color: #ffffff;
343
- --p-button-help-focus-ring-color: var(--p-purple-500);
344
- --p-button-help-focus-ring-shadow: none;
345
- --p-button-danger-background: var(--p-red-500);
346
- --p-button-danger-hover-background: var(--p-red-600);
347
- --p-button-danger-active-background: var(--p-red-700);
348
- --p-button-danger-border-color: var(--p-red-500);
349
- --p-button-danger-hover-border-color: var(--p-red-600);
350
- --p-button-danger-active-border-color: var(--p-red-700);
351
- --p-button-danger-color: #ffffff;
352
- --p-button-danger-hover-color: #ffffff;
353
- --p-button-danger-active-color: #ffffff;
354
- --p-button-danger-focus-ring-color: var(--p-red-500);
355
- --p-button-danger-focus-ring-shadow: none;
356
- --p-button-contrast-background: var(--p-surface-950);
357
- --p-button-contrast-hover-background: var(--p-surface-900);
358
- --p-button-contrast-active-background: var(--p-surface-800);
359
- --p-button-contrast-border-color: var(--p-surface-950);
360
- --p-button-contrast-hover-border-color: var(--p-surface-900);
361
- --p-button-contrast-active-border-color: var(--p-surface-800);
362
- --p-button-contrast-color: var(--p-surface-0);
363
- --p-button-contrast-hover-color: var(--p-surface-0);
364
- --p-button-contrast-active-color: var(--p-surface-0);
365
- --p-button-contrast-focus-ring-color: var(--p-surface-950);
366
- --p-button-contrast-focus-ring-shadow: none;
367
- --p-button-outlined-primary-hover-background: var(--p-primary-50);
368
- --p-button-outlined-primary-active-background: var(--p-primary-100);
369
- --p-button-outlined-primary-border-color: var(--p-primary-200);
370
- --p-button-outlined-primary-color: var(--p-primary-color);
371
- --p-button-outlined-secondary-hover-background: var(--p-surface-50);
372
- --p-button-outlined-secondary-active-background: var(--p-surface-100);
373
- --p-button-outlined-secondary-border-color: var(--p-surface-200);
374
- --p-button-outlined-secondary-color: var(--p-surface-500);
375
- --p-button-outlined-success-hover-background: var(--p-green-50);
376
- --p-button-outlined-success-active-background: var(--p-green-100);
377
- --p-button-outlined-success-border-color: var(--p-green-200);
378
- --p-button-outlined-success-color: var(--p-green-500);
379
- --p-button-outlined-info-hover-background: var(--p-sky-50);
380
- --p-button-outlined-info-active-background: var(--p-sky-100);
381
- --p-button-outlined-info-border-color: var(--p-sky-200);
382
- --p-button-outlined-info-color: var(--p-sky-500);
383
- --p-button-outlined-warn-hover-background: var(--p-orange-50);
384
- --p-button-outlined-warn-active-background: var(--p-orange-100);
385
- --p-button-outlined-warn-border-color: var(--p-orange-200);
386
- --p-button-outlined-warn-color: var(--p-orange-500);
387
- --p-button-outlined-help-hover-background: var(--p-purple-50);
388
- --p-button-outlined-help-active-background: var(--p-purple-100);
389
- --p-button-outlined-help-border-color: var(--p-purple-200);
390
- --p-button-outlined-help-color: var(--p-purple-500);
391
- --p-button-outlined-danger-hover-background: var(--p-red-50);
392
- --p-button-outlined-danger-active-background: var(--p-red-100);
393
- --p-button-outlined-danger-border-color: var(--p-red-200);
394
- --p-button-outlined-danger-color: var(--p-red-500);
395
- --p-button-outlined-contrast-hover-background: var(--p-surface-50);
396
- --p-button-outlined-contrast-active-background: var(--p-surface-100);
397
- --p-button-outlined-contrast-border-color: var(--p-surface-700);
398
- --p-button-outlined-contrast-color: var(--p-surface-950);
399
- --p-button-outlined-plain-hover-background: var(--p-surface-50);
400
- --p-button-outlined-plain-active-background: var(--p-surface-100);
401
- --p-button-outlined-plain-border-color: var(--p-surface-200);
402
- --p-button-outlined-plain-color: var(--p-surface-700);
403
- --p-button-text-primary-hover-background: var(--p-primary-50);
404
- --p-button-text-primary-active-background: var(--p-primary-100);
405
- --p-button-text-primary-color: var(--p-primary-color);
406
- --p-button-text-secondary-hover-background: var(--p-surface-50);
407
- --p-button-text-secondary-active-background: var(--p-surface-100);
408
- --p-button-text-secondary-color: var(--p-surface-500);
409
- --p-button-text-success-hover-background: var(--p-green-50);
410
- --p-button-text-success-active-background: var(--p-green-100);
411
- --p-button-text-success-color: var(--p-green-500);
412
- --p-button-text-info-hover-background: var(--p-sky-50);
413
- --p-button-text-info-active-background: var(--p-sky-100);
414
- --p-button-text-info-color: var(--p-sky-500);
415
- --p-button-text-warn-hover-background: var(--p-orange-50);
416
- --p-button-text-warn-active-background: var(--p-orange-100);
417
- --p-button-text-warn-color: var(--p-orange-500);
418
- --p-button-text-help-hover-background: var(--p-purple-50);
419
- --p-button-text-help-active-background: var(--p-purple-100);
420
- --p-button-text-help-color: var(--p-purple-500);
421
- --p-button-text-danger-hover-background: var(--p-red-50);
422
- --p-button-text-danger-active-background: var(--p-red-100);
423
- --p-button-text-danger-color: var(--p-red-500);
424
- --p-button-text-contrast-hover-background: var(--p-surface-50);
425
- --p-button-text-contrast-active-background: var(--p-surface-100);
426
- --p-button-text-contrast-color: var(--p-surface-950);
427
- --p-button-text-plain-hover-background: var(--p-surface-50);
428
- --p-button-text-plain-active-background: var(--p-surface-100);
429
- --p-button-text-plain-color: var(--p-surface-700);
430
- --p-button-link-color: var(--p-primary-color);
431
- --p-button-link-hover-color: var(--p-primary-color);
432
- --p-button-link-active-color: var(--p-primary-color);
433
- }
434
-
435
- :root {
436
- --p-splitbutton-border-radius: var(--p-form-field-border-radius);
437
- --p-splitbutton-rounded-border-radius: 2rem;
438
- --p-splitbutton-raised-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
439
- }
440
-
441
- :root {
442
- --p-tieredmenu-background: var(--p-content-background);
443
- --p-tieredmenu-border-color: var(--p-content-border-color);
444
- --p-tieredmenu-color: var(--p-content-color);
445
- --p-tieredmenu-border-radius: var(--p-content-border-radius);
446
- --p-tieredmenu-shadow: var(--p-overlay-navigation-shadow);
447
- --p-tieredmenu-transition-duration: var(--p-transition-duration);
448
- --p-tieredmenu-list-padding: var(--p-navigation-list-padding);
449
- --p-tieredmenu-list-gap: var(--p-navigation-list-gap);
450
- --p-tieredmenu-item-focus-background: var(--p-navigation-item-focus-background);
451
- --p-tieredmenu-item-active-background: var(--p-navigation-item-active-background);
452
- --p-tieredmenu-item-color: var(--p-navigation-item-color);
453
- --p-tieredmenu-item-focus-color: var(--p-navigation-item-focus-color);
454
- --p-tieredmenu-item-active-color: var(--p-navigation-item-active-color);
455
- --p-tieredmenu-item-padding: var(--p-navigation-item-padding);
456
- --p-tieredmenu-item-border-radius: var(--p-navigation-item-border-radius);
457
- --p-tieredmenu-item-gap: var(--p-navigation-item-gap);
458
- --p-tieredmenu-item-icon-color: var(--p-navigation-item-icon-color);
459
- --p-tieredmenu-item-icon-focus-color: var(--p-navigation-item-icon-focus-color);
460
- --p-tieredmenu-item-icon-active-color: var(--p-navigation-item-icon-active-color);
461
- --p-tieredmenu-submenu-mobile-indent: 1rem;
462
- --p-tieredmenu-submenu-icon-size: var(--p-navigation-submenu-icon-size);
463
- --p-tieredmenu-submenu-icon-color: var(--p-navigation-submenu-icon-color);
464
- --p-tieredmenu-submenu-icon-focus-color: var(--p-navigation-submenu-icon-focus-color);
465
- --p-tieredmenu-submenu-icon-active-color: var(--p-navigation-submenu-icon-active-color);
466
- --p-tieredmenu-separator-border-color: var(--p-content-border-color);
467
- }
468
-
469
- body {
470
- .p-splitbutton {
471
- border-radius: 8px;
472
-
473
- .p-splitbutton-button {
474
- width: 200px;
475
- padding: 8px;
476
- gap: 8px;
477
- justify-content: left;
478
-
479
- span {
480
- font-weight: 500;
481
- font-size: 15px;
482
- }
483
- }
484
-
485
- .p-button-icon-only {
486
- width: 40px;
487
- }
488
-
489
- .p-button-outlined {
490
- font-weight: $font-normal;
491
- background-color: $color-white;
492
- color: #394156;
493
- border: 1px solid $color-border;
494
-
495
- &.p-splitbutton-button {
496
- border-right-width: 0;
497
-
498
- img {
499
- margin: 0;
500
- }
501
- }
502
-
503
- &.p-button-secondary:hover {
504
- border-color: $color-border;
505
- background-color: $gray-7;
506
- color: #394156;
507
-
508
- svg {
509
- fill: $color-white;
510
- }
511
- }
512
-
513
- .p-button-label {
514
- font-size: 15px;
515
- font-weight: $font-normal;
516
- }
517
-
518
- svg {
519
- margin-right: 0;
520
- margin-top: 5px;
521
- }
522
- }
523
- }
524
-
525
- .p-tieredmenu-overlay {
526
- width: 240px;
527
- z-index: 1055 !important;
528
-
529
- .p-tieredmenu-root-list {
530
- padding: 0 !important;
531
-
532
- a, a:hover {
533
- color: inherit;
534
- text-decoration: none;
535
- }
536
- }
537
-
538
- .menu-item {
539
- display: flex;
540
- align-items: center;
541
- gap: 8px;
542
- padding: 8px;
543
- cursor: pointer;
544
- font-size: 1rem;
545
-
546
- .icon-image {
547
- width: 18px;
548
- height: 18px;
549
- }
550
- }
551
- }
1
+ :root {
2
+ --p-fileupload-color: #394156;
3
+ --p-border-radius-none: 0;
4
+ --p-border-radius-xs: 2px;
5
+ --p-border-radius-sm: 4px;
6
+ --p-border-radius-md: 6px;
7
+ --p-border-radius-lg: 8px;
8
+ --p-border-radius-xl: 12px;
9
+ --p-emerald-50: #ecfdf5;
10
+ --p-emerald-100: #d1fae5;
11
+ --p-emerald-200: #a7f3d0;
12
+ --p-emerald-300: #6ee7b7;
13
+ --p-emerald-400: #34d399;
14
+ --p-emerald-500: #10b981;
15
+ --p-emerald-600: #059669;
16
+ --p-emerald-700: #047857;
17
+ --p-emerald-800: #065f46;
18
+ --p-emerald-900: #064e3b;
19
+ --p-emerald-950: #022c22;
20
+ --p-green-50: #f0fdf4;
21
+ --p-green-100: #dcfce7;
22
+ --p-green-200: #bbf7d0;
23
+ --p-green-300: #86efac;
24
+ --p-green-400: #4ade80;
25
+ --p-green-500: #22c55e;
26
+ --p-green-600: #16a34a;
27
+ --p-green-700: #15803d;
28
+ --p-green-800: #166534;
29
+ --p-green-900: #14532d;
30
+ --p-green-950: #052e16;
31
+ --p-lime-50: #f7fee7;
32
+ --p-lime-100: #ecfccb;
33
+ --p-lime-200: #d9f99d;
34
+ --p-lime-300: #bef264;
35
+ --p-lime-400: #a3e635;
36
+ --p-lime-500: #84cc16;
37
+ --p-lime-600: #65a30d;
38
+ --p-lime-700: #4d7c0f;
39
+ --p-lime-800: #3f6212;
40
+ --p-lime-900: #365314;
41
+ --p-lime-950: #1a2e05;
42
+ --p-red-50: #fef2f2;
43
+ --p-red-100: #fee2e2;
44
+ --p-red-200: #fecaca;
45
+ --p-red-300: #fca5a5;
46
+ --p-red-400: #f87171;
47
+ --p-red-500: #ef4444;
48
+ --p-red-600: #dc2626;
49
+ --p-red-700: #b91c1c;
50
+ --p-red-800: #991b1b;
51
+ --p-red-900: #7f1d1d;
52
+ --p-red-950: #450a0a;
53
+ --p-orange-50: #fff7ed;
54
+ --p-orange-100: #ffedd5;
55
+ --p-orange-200: #fed7aa;
56
+ --p-orange-300: #fdba74;
57
+ --p-orange-400: #fb923c;
58
+ --p-orange-500: #f97316;
59
+ --p-orange-600: #ea580c;
60
+ --p-orange-700: #c2410c;
61
+ --p-orange-800: #9a3412;
62
+ --p-orange-900: #7c2d12;
63
+ --p-orange-950: #431407;
64
+ --p-amber-50: #fffbeb;
65
+ --p-amber-100: #fef3c7;
66
+ --p-amber-200: #fde68a;
67
+ --p-amber-300: #fcd34d;
68
+ --p-amber-400: #fbbf24;
69
+ --p-amber-500: #f59e0b;
70
+ --p-amber-600: #d97706;
71
+ --p-amber-700: #b45309;
72
+ --p-amber-800: #92400e;
73
+ --p-amber-900: #78350f;
74
+ --p-amber-950: #451a03;
75
+ --p-yellow-50: #fefce8;
76
+ --p-yellow-100: #fef9c3;
77
+ --p-yellow-200: #fef08a;
78
+ --p-yellow-300: #fde047;
79
+ --p-yellow-400: #facc15;
80
+ --p-yellow-500: #eab308;
81
+ --p-yellow-600: #ca8a04;
82
+ --p-yellow-700: #a16207;
83
+ --p-yellow-800: #854d0e;
84
+ --p-yellow-900: #713f12;
85
+ --p-yellow-950: #422006;
86
+ --p-teal-50: #f0fdfa;
87
+ --p-teal-100: #ccfbf1;
88
+ --p-teal-200: #99f6e4;
89
+ --p-teal-300: #5eead4;
90
+ --p-teal-400: #2dd4bf;
91
+ --p-teal-500: #14b8a6;
92
+ --p-teal-600: #0d9488;
93
+ --p-teal-700: #0f766e;
94
+ --p-teal-800: #115e59;
95
+ --p-teal-900: #134e4a;
96
+ --p-teal-950: #042f2e;
97
+ --p-cyan-50: #ecfeff;
98
+ --p-cyan-100: #cffafe;
99
+ --p-cyan-200: #a5f3fc;
100
+ --p-cyan-300: #67e8f9;
101
+ --p-cyan-400: #22d3ee;
102
+ --p-cyan-500: #06b6d4;
103
+ --p-cyan-600: #0891b2;
104
+ --p-cyan-700: #0e7490;
105
+ --p-cyan-800: #155e75;
106
+ --p-cyan-900: #164e63;
107
+ --p-cyan-950: #083344;
108
+ --p-sky-50: #f0f9ff;
109
+ --p-sky-100: #e0f2fe;
110
+ --p-sky-200: #bae6fd;
111
+ --p-sky-300: #7dd3fc;
112
+ --p-sky-400: #38bdf8;
113
+ --p-sky-500: #0ea5e9;
114
+ --p-sky-600: #0284c7;
115
+ --p-sky-700: #0369a1;
116
+ --p-sky-800: #075985;
117
+ --p-sky-900: #0c4a6e;
118
+ --p-sky-950: #082f49;
119
+ --p-blue-50: #eff6ff;
120
+ --p-blue-100: #dbeafe;
121
+ --p-blue-200: #bfdbfe;
122
+ --p-blue-300: #93c5fd;
123
+ --p-blue-400: #60a5fa;
124
+ --p-blue-500: #3b82f6;
125
+ --p-blue-600: #2563eb;
126
+ --p-blue-700: #1d4ed8;
127
+ --p-blue-800: #1e40af;
128
+ --p-blue-900: #1e3a8a;
129
+ --p-blue-950: #172554;
130
+ --p-indigo-50: #eef2ff;
131
+ --p-indigo-100: #e0e7ff;
132
+ --p-indigo-200: #c7d2fe;
133
+ --p-indigo-300: #a5b4fc;
134
+ --p-indigo-400: #818cf8;
135
+ --p-indigo-500: #6366f1;
136
+ --p-indigo-600: #4f46e5;
137
+ --p-indigo-700: #4338ca;
138
+ --p-indigo-800: #3730a3;
139
+ --p-indigo-900: #312e81;
140
+ --p-indigo-950: #1e1b4b;
141
+ --p-violet-50: #f5f3ff;
142
+ --p-violet-100: #ede9fe;
143
+ --p-violet-200: #ddd6fe;
144
+ --p-violet-300: #c4b5fd;
145
+ --p-violet-400: #a78bfa;
146
+ --p-violet-500: #8b5cf6;
147
+ --p-violet-600: #7c3aed;
148
+ --p-violet-700: #6d28d9;
149
+ --p-violet-800: #5b21b6;
150
+ --p-violet-900: #4c1d95;
151
+ --p-violet-950: #2e1065;
152
+ --p-purple-50: #faf5ff;
153
+ --p-purple-100: #f3e8ff;
154
+ --p-purple-200: #e9d5ff;
155
+ --p-purple-300: #d8b4fe;
156
+ --p-purple-400: #c084fc;
157
+ --p-purple-500: #a855f7;
158
+ --p-purple-600: #9333ea;
159
+ --p-purple-700: #7e22ce;
160
+ --p-purple-800: #6b21a8;
161
+ --p-purple-900: #581c87;
162
+ --p-purple-950: #3b0764;
163
+ --p-fuchsia-50: #fdf4ff;
164
+ --p-fuchsia-100: #fae8ff;
165
+ --p-fuchsia-200: #f5d0fe;
166
+ --p-fuchsia-300: #f0abfc;
167
+ --p-fuchsia-400: #e879f9;
168
+ --p-fuchsia-500: #d946ef;
169
+ --p-fuchsia-600: #c026d3;
170
+ --p-fuchsia-700: #a21caf;
171
+ --p-fuchsia-800: #86198f;
172
+ --p-fuchsia-900: #701a75;
173
+ --p-fuchsia-950: #4a044e;
174
+ --p-pink-50: #fdf2f8;
175
+ --p-pink-100: #fce7f3;
176
+ --p-pink-200: #fbcfe8;
177
+ --p-pink-300: #f9a8d4;
178
+ --p-pink-400: #f472b6;
179
+ --p-pink-500: #ec4899;
180
+ --p-pink-600: #db2777;
181
+ --p-pink-700: #be185d;
182
+ --p-pink-800: #9d174d;
183
+ --p-pink-900: #831843;
184
+ --p-pink-950: #500724;
185
+ --p-rose-50: #fff1f2;
186
+ --p-rose-100: #ffe4e6;
187
+ --p-rose-200: #fecdd3;
188
+ --p-rose-300: #fda4af;
189
+ --p-rose-400: #fb7185;
190
+ --p-rose-500: #f43f5e;
191
+ --p-rose-600: #e11d48;
192
+ --p-rose-700: #be123c;
193
+ --p-rose-800: #9f1239;
194
+ --p-rose-900: #881337;
195
+ --p-rose-950: #4c0519;
196
+ --p-slate-50: #f8fafc;
197
+ --p-slate-100: #f1f5f9;
198
+ --p-slate-200: #e2e8f0;
199
+ --p-slate-300: #cbd5e1;
200
+ --p-slate-400: #94a3b8;
201
+ --p-slate-500: #64748b;
202
+ --p-slate-600: #475569;
203
+ --p-slate-700: #334155;
204
+ --p-slate-800: #1e293b;
205
+ --p-slate-900: #0f172a;
206
+ --p-slate-950: #020617;
207
+ --p-gray-50: #f9fafb;
208
+ --p-gray-100: #f3f4f6;
209
+ --p-gray-200: #e5e7eb;
210
+ --p-gray-300: #d1d5db;
211
+ --p-gray-400: #9ca3af;
212
+ --p-gray-500: #6b7280;
213
+ --p-gray-600: #4b5563;
214
+ --p-gray-700: #374151;
215
+ --p-gray-800: #1f2937;
216
+ --p-gray-900: #111827;
217
+ --p-gray-950: #030712;
218
+ --p-zinc-50: #fafafa;
219
+ --p-zinc-100: #f4f4f5;
220
+ --p-zinc-200: #e4e4e7;
221
+ --p-zinc-300: #d4d4d8;
222
+ --p-zinc-400: #a1a1aa;
223
+ --p-zinc-500: #71717a;
224
+ --p-zinc-600: #52525b;
225
+ --p-zinc-700: #3f3f46;
226
+ --p-zinc-800: #27272a;
227
+ --p-zinc-900: #18181b;
228
+ --p-zinc-950: #09090b;
229
+ --p-neutral-50: #fafafa;
230
+ --p-neutral-100: #f5f5f5;
231
+ --p-neutral-200: #e5e5e5;
232
+ --p-neutral-300: #d4d4d4;
233
+ --p-neutral-400: #a3a3a3;
234
+ --p-neutral-500: #737373;
235
+ --p-neutral-600: #525252;
236
+ --p-neutral-700: #404040;
237
+ --p-neutral-800: #262626;
238
+ --p-neutral-900: #171717;
239
+ --p-neutral-950: #0a0a0a;
240
+ --p-stone-50: #fafaf9;
241
+ --p-stone-100: #f5f5f4;
242
+ --p-stone-200: #e7e5e4;
243
+ --p-stone-300: #d6d3d1;
244
+ --p-stone-400: #a8a29e;
245
+ --p-stone-500: #78716c;
246
+ --p-stone-600: #57534e;
247
+ --p-stone-700: #44403c;
248
+ --p-stone-800: #292524;
249
+ --p-stone-900: #1c1917;
250
+ --p-stone-950: #0c0a09;
251
+ }
252
+
253
+ :root {
254
+ --p-ripple-background: rgba(0, 0, 0, 0.1);
255
+ }
256
+
257
+ :root {
258
+ --p-button-border-radius: var(--p-form-field-border-radius);
259
+ --p-button-rounded-border-radius: 2rem;
260
+ --p-button-gap: 0.5rem;
261
+ --p-button-padding-x: var(--p-form-field-padding-x);
262
+ --p-button-padding-y: var(--p-form-field-padding-y);
263
+ --p-button-icon-only-width: 2.5rem;
264
+ --p-button-sm-font-size: var(--p-form-field-sm-font-size);
265
+ --p-button-sm-padding-x: var(--p-form-field-sm-padding-x);
266
+ --p-button-sm-padding-y: var(--p-form-field-sm-padding-y);
267
+ --p-button-sm-icon-only-width: 2rem;
268
+ --p-button-lg-font-size: var(--p-form-field-lg-font-size);
269
+ --p-button-lg-padding-x: var(--p-form-field-lg-padding-x);
270
+ --p-button-lg-padding-y: var(--p-form-field-lg-padding-y);
271
+ --p-button-lg-icon-only-width: 3rem;
272
+ --p-button-label-font-weight: 500;
273
+ --p-button-raised-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
274
+ --p-button-focus-ring-width: var(--p-focus-ring-width);
275
+ --p-button-focus-ring-style: var(--p-focus-ring-style);
276
+ --p-button-focus-ring-offset: var(--p-focus-ring-offset);
277
+ --p-button-badge-size: 1rem;
278
+ --p-button-transition-duration: var(--p-form-field-transition-duration);
279
+ --p-button-primary-background: var(--p-primary-color);
280
+ --p-button-primary-hover-background: var(--p-primary-hover-color);
281
+ --p-button-primary-active-background: var(--p-primary-active-color);
282
+ --p-button-primary-border-color: var(--p-primary-color);
283
+ --p-button-primary-hover-border-color: var(--p-primary-hover-color);
284
+ --p-button-primary-active-border-color: var(--p-primary-active-color);
285
+ --p-button-primary-color: var(--p-primary-contrast-color);
286
+ --p-button-primary-hover-color: var(--p-primary-contrast-color);
287
+ --p-button-primary-active-color: var(--p-primary-contrast-color);
288
+ --p-button-primary-focus-ring-color: var(--p-primary-color);
289
+ --p-button-primary-focus-ring-shadow: none;
290
+ --p-button-secondary-background: var(--p-surface-100);
291
+ --p-button-secondary-hover-background: var(--p-surface-200);
292
+ --p-button-secondary-active-background: var(--p-surface-300);
293
+ --p-button-secondary-border-color: var(--p-surface-100);
294
+ --p-button-secondary-hover-border-color: var(--p-surface-200);
295
+ --p-button-secondary-active-border-color: var(--p-surface-300);
296
+ --p-button-secondary-color: var(--p-surface-600);
297
+ --p-button-secondary-hover-color: var(--p-surface-700);
298
+ --p-button-secondary-active-color: var(--p-surface-800);
299
+ --p-button-secondary-focus-ring-color: var(--p-surface-600);
300
+ --p-button-secondary-focus-ring-shadow: none;
301
+ --p-button-info-background: var(--p-sky-500);
302
+ --p-button-info-hover-background: var(--p-sky-600);
303
+ --p-button-info-active-background: var(--p-sky-700);
304
+ --p-button-info-border-color: var(--p-sky-500);
305
+ --p-button-info-hover-border-color: var(--p-sky-600);
306
+ --p-button-info-active-border-color: var(--p-sky-700);
307
+ --p-button-info-color: #ffffff;
308
+ --p-button-info-hover-color: #ffffff;
309
+ --p-button-info-active-color: #ffffff;
310
+ --p-button-info-focus-ring-color: var(--p-sky-500);
311
+ --p-button-info-focus-ring-shadow: none;
312
+ --p-button-success-background: var(--p-green-500);
313
+ --p-button-success-hover-background: var(--p-green-600);
314
+ --p-button-success-active-background: var(--p-green-700);
315
+ --p-button-success-border-color: var(--p-green-500);
316
+ --p-button-success-hover-border-color: var(--p-green-600);
317
+ --p-button-success-active-border-color: var(--p-green-700);
318
+ --p-button-success-color: #ffffff;
319
+ --p-button-success-hover-color: #ffffff;
320
+ --p-button-success-active-color: #ffffff;
321
+ --p-button-success-focus-ring-color: var(--p-green-500);
322
+ --p-button-success-focus-ring-shadow: none;
323
+ --p-button-warn-background: var(--p-orange-500);
324
+ --p-button-warn-hover-background: var(--p-orange-600);
325
+ --p-button-warn-active-background: var(--p-orange-700);
326
+ --p-button-warn-border-color: var(--p-orange-500);
327
+ --p-button-warn-hover-border-color: var(--p-orange-600);
328
+ --p-button-warn-active-border-color: var(--p-orange-700);
329
+ --p-button-warn-color: #ffffff;
330
+ --p-button-warn-hover-color: #ffffff;
331
+ --p-button-warn-active-color: #ffffff;
332
+ --p-button-warn-focus-ring-color: var(--p-orange-500);
333
+ --p-button-warn-focus-ring-shadow: none;
334
+ --p-button-help-background: var(--p-purple-500);
335
+ --p-button-help-hover-background: var(--p-purple-600);
336
+ --p-button-help-active-background: var(--p-purple-700);
337
+ --p-button-help-border-color: var(--p-purple-500);
338
+ --p-button-help-hover-border-color: var(--p-purple-600);
339
+ --p-button-help-active-border-color: var(--p-purple-700);
340
+ --p-button-help-color: #ffffff;
341
+ --p-button-help-hover-color: #ffffff;
342
+ --p-button-help-active-color: #ffffff;
343
+ --p-button-help-focus-ring-color: var(--p-purple-500);
344
+ --p-button-help-focus-ring-shadow: none;
345
+ --p-button-danger-background: var(--p-red-500);
346
+ --p-button-danger-hover-background: var(--p-red-600);
347
+ --p-button-danger-active-background: var(--p-red-700);
348
+ --p-button-danger-border-color: var(--p-red-500);
349
+ --p-button-danger-hover-border-color: var(--p-red-600);
350
+ --p-button-danger-active-border-color: var(--p-red-700);
351
+ --p-button-danger-color: #ffffff;
352
+ --p-button-danger-hover-color: #ffffff;
353
+ --p-button-danger-active-color: #ffffff;
354
+ --p-button-danger-focus-ring-color: var(--p-red-500);
355
+ --p-button-danger-focus-ring-shadow: none;
356
+ --p-button-contrast-background: var(--p-surface-950);
357
+ --p-button-contrast-hover-background: var(--p-surface-900);
358
+ --p-button-contrast-active-background: var(--p-surface-800);
359
+ --p-button-contrast-border-color: var(--p-surface-950);
360
+ --p-button-contrast-hover-border-color: var(--p-surface-900);
361
+ --p-button-contrast-active-border-color: var(--p-surface-800);
362
+ --p-button-contrast-color: var(--p-surface-0);
363
+ --p-button-contrast-hover-color: var(--p-surface-0);
364
+ --p-button-contrast-active-color: var(--p-surface-0);
365
+ --p-button-contrast-focus-ring-color: var(--p-surface-950);
366
+ --p-button-contrast-focus-ring-shadow: none;
367
+ --p-button-outlined-primary-hover-background: var(--p-primary-50);
368
+ --p-button-outlined-primary-active-background: var(--p-primary-100);
369
+ --p-button-outlined-primary-border-color: var(--p-primary-200);
370
+ --p-button-outlined-primary-color: var(--p-primary-color);
371
+ --p-button-outlined-secondary-hover-background: var(--p-surface-50);
372
+ --p-button-outlined-secondary-active-background: var(--p-surface-100);
373
+ --p-button-outlined-secondary-border-color: var(--p-surface-200);
374
+ --p-button-outlined-secondary-color: var(--p-surface-500);
375
+ --p-button-outlined-success-hover-background: var(--p-green-50);
376
+ --p-button-outlined-success-active-background: var(--p-green-100);
377
+ --p-button-outlined-success-border-color: var(--p-green-200);
378
+ --p-button-outlined-success-color: var(--p-green-500);
379
+ --p-button-outlined-info-hover-background: var(--p-sky-50);
380
+ --p-button-outlined-info-active-background: var(--p-sky-100);
381
+ --p-button-outlined-info-border-color: var(--p-sky-200);
382
+ --p-button-outlined-info-color: var(--p-sky-500);
383
+ --p-button-outlined-warn-hover-background: var(--p-orange-50);
384
+ --p-button-outlined-warn-active-background: var(--p-orange-100);
385
+ --p-button-outlined-warn-border-color: var(--p-orange-200);
386
+ --p-button-outlined-warn-color: var(--p-orange-500);
387
+ --p-button-outlined-help-hover-background: var(--p-purple-50);
388
+ --p-button-outlined-help-active-background: var(--p-purple-100);
389
+ --p-button-outlined-help-border-color: var(--p-purple-200);
390
+ --p-button-outlined-help-color: var(--p-purple-500);
391
+ --p-button-outlined-danger-hover-background: var(--p-red-50);
392
+ --p-button-outlined-danger-active-background: var(--p-red-100);
393
+ --p-button-outlined-danger-border-color: var(--p-red-200);
394
+ --p-button-outlined-danger-color: var(--p-red-500);
395
+ --p-button-outlined-contrast-hover-background: var(--p-surface-50);
396
+ --p-button-outlined-contrast-active-background: var(--p-surface-100);
397
+ --p-button-outlined-contrast-border-color: var(--p-surface-700);
398
+ --p-button-outlined-contrast-color: var(--p-surface-950);
399
+ --p-button-outlined-plain-hover-background: var(--p-surface-50);
400
+ --p-button-outlined-plain-active-background: var(--p-surface-100);
401
+ --p-button-outlined-plain-border-color: var(--p-surface-200);
402
+ --p-button-outlined-plain-color: var(--p-surface-700);
403
+ --p-button-text-primary-hover-background: var(--p-primary-50);
404
+ --p-button-text-primary-active-background: var(--p-primary-100);
405
+ --p-button-text-primary-color: var(--p-primary-color);
406
+ --p-button-text-secondary-hover-background: var(--p-surface-50);
407
+ --p-button-text-secondary-active-background: var(--p-surface-100);
408
+ --p-button-text-secondary-color: var(--p-surface-500);
409
+ --p-button-text-success-hover-background: var(--p-green-50);
410
+ --p-button-text-success-active-background: var(--p-green-100);
411
+ --p-button-text-success-color: var(--p-green-500);
412
+ --p-button-text-info-hover-background: var(--p-sky-50);
413
+ --p-button-text-info-active-background: var(--p-sky-100);
414
+ --p-button-text-info-color: var(--p-sky-500);
415
+ --p-button-text-warn-hover-background: var(--p-orange-50);
416
+ --p-button-text-warn-active-background: var(--p-orange-100);
417
+ --p-button-text-warn-color: var(--p-orange-500);
418
+ --p-button-text-help-hover-background: var(--p-purple-50);
419
+ --p-button-text-help-active-background: var(--p-purple-100);
420
+ --p-button-text-help-color: var(--p-purple-500);
421
+ --p-button-text-danger-hover-background: var(--p-red-50);
422
+ --p-button-text-danger-active-background: var(--p-red-100);
423
+ --p-button-text-danger-color: var(--p-red-500);
424
+ --p-button-text-contrast-hover-background: var(--p-surface-50);
425
+ --p-button-text-contrast-active-background: var(--p-surface-100);
426
+ --p-button-text-contrast-color: var(--p-surface-950);
427
+ --p-button-text-plain-hover-background: var(--p-surface-50);
428
+ --p-button-text-plain-active-background: var(--p-surface-100);
429
+ --p-button-text-plain-color: var(--p-surface-700);
430
+ --p-button-link-color: var(--p-primary-color);
431
+ --p-button-link-hover-color: var(--p-primary-color);
432
+ --p-button-link-active-color: var(--p-primary-color);
433
+ }
434
+
435
+ :root {
436
+ --p-splitbutton-border-radius: var(--p-form-field-border-radius);
437
+ --p-splitbutton-rounded-border-radius: 2rem;
438
+ --p-splitbutton-raised-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
439
+ }
440
+
441
+ :root {
442
+ --p-tieredmenu-background: var(--p-content-background);
443
+ --p-tieredmenu-border-color: var(--p-content-border-color);
444
+ --p-tieredmenu-color: var(--p-content-color);
445
+ --p-tieredmenu-border-radius: var(--p-content-border-radius);
446
+ --p-tieredmenu-shadow: var(--p-overlay-navigation-shadow);
447
+ --p-tieredmenu-transition-duration: var(--p-transition-duration);
448
+ --p-tieredmenu-list-padding: var(--p-navigation-list-padding);
449
+ --p-tieredmenu-list-gap: var(--p-navigation-list-gap);
450
+ --p-tieredmenu-item-focus-background: var(--p-navigation-item-focus-background);
451
+ --p-tieredmenu-item-active-background: var(--p-navigation-item-active-background);
452
+ --p-tieredmenu-item-color: var(--p-navigation-item-color);
453
+ --p-tieredmenu-item-focus-color: var(--p-navigation-item-focus-color);
454
+ --p-tieredmenu-item-active-color: var(--p-navigation-item-active-color);
455
+ --p-tieredmenu-item-padding: var(--p-navigation-item-padding);
456
+ --p-tieredmenu-item-border-radius: var(--p-navigation-item-border-radius);
457
+ --p-tieredmenu-item-gap: var(--p-navigation-item-gap);
458
+ --p-tieredmenu-item-icon-color: var(--p-navigation-item-icon-color);
459
+ --p-tieredmenu-item-icon-focus-color: var(--p-navigation-item-icon-focus-color);
460
+ --p-tieredmenu-item-icon-active-color: var(--p-navigation-item-icon-active-color);
461
+ --p-tieredmenu-submenu-mobile-indent: 1rem;
462
+ --p-tieredmenu-submenu-icon-size: var(--p-navigation-submenu-icon-size);
463
+ --p-tieredmenu-submenu-icon-color: var(--p-navigation-submenu-icon-color);
464
+ --p-tieredmenu-submenu-icon-focus-color: var(--p-navigation-submenu-icon-focus-color);
465
+ --p-tieredmenu-submenu-icon-active-color: var(--p-navigation-submenu-icon-active-color);
466
+ --p-tieredmenu-separator-border-color: var(--p-content-border-color);
467
+ }
468
+
469
+ body {
470
+ .p-splitbutton {
471
+ border-radius: 8px;
472
+
473
+ .p-splitbutton-button {
474
+ width: 200px;
475
+ padding: 8px;
476
+ gap: 8px;
477
+ justify-content: left;
478
+
479
+ span {
480
+ font-weight: 500;
481
+ font-size: 15px;
482
+ }
483
+ }
484
+
485
+ .p-button-icon-only {
486
+ width: 40px;
487
+ }
488
+
489
+ .p-button-outlined {
490
+ font-weight: $font-normal;
491
+ background-color: $color-white;
492
+ color: #394156;
493
+ border: 1px solid $color-border;
494
+
495
+ &.p-splitbutton-button {
496
+ border-right-width: 0;
497
+
498
+ img {
499
+ margin: 0;
500
+ }
501
+ }
502
+
503
+ &.p-button-secondary:hover {
504
+ border-color: $color-border;
505
+ background-color: $gray-7;
506
+ color: #394156;
507
+
508
+ svg {
509
+ fill: $color-white;
510
+ }
511
+ }
512
+
513
+ .p-button-label {
514
+ font-size: 15px;
515
+ font-weight: $font-normal;
516
+ }
517
+
518
+ svg {
519
+ margin-right: 0;
520
+ margin-top: 5px;
521
+ }
522
+ }
523
+ }
524
+
525
+ .p-tieredmenu-overlay {
526
+ width: 240px;
527
+ z-index: 1055 !important;
528
+
529
+ .p-tieredmenu-root-list {
530
+ padding: 0 !important;
531
+
532
+ a, a:hover {
533
+ color: inherit;
534
+ text-decoration: none;
535
+ }
536
+ }
537
+
538
+ .menu-item {
539
+ display: flex;
540
+ align-items: center;
541
+ gap: 8px;
542
+ padding: 8px;
543
+ cursor: pointer;
544
+ font-size: 1rem;
545
+
546
+ .icon-image {
547
+ width: 18px;
548
+ height: 18px;
549
+ }
550
+ }
551
+ }
552
552
  }