@bagelink/vue 0.0.160 → 0.0.164

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 (82) hide show
  1. package/dist/components/Btn.vue.d.ts +2 -2
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/components/Comments.vue.d.ts.map +1 -1
  4. package/dist/components/DropDown.vue.d.ts.map +1 -1
  5. package/dist/components/FileUploader.vue.d.ts.map +1 -1
  6. package/dist/components/LangText.vue.d.ts.map +1 -1
  7. package/dist/components/NavBar.vue.d.ts.map +1 -1
  8. package/dist/components/PersonPreview.vue.d.ts +1 -1
  9. package/dist/components/PersonPreview.vue.d.ts.map +1 -1
  10. package/dist/components/PersonPreviewFormkit.vue.d.ts +1 -1
  11. package/dist/components/PersonPreviewFormkit.vue.d.ts.map +1 -1
  12. package/dist/components/RTXEditor.vue.d.ts.map +1 -1
  13. package/dist/components/TableSchema.vue.d.ts.map +1 -1
  14. package/dist/components/charts/BarChart.vue.d.ts.map +1 -1
  15. package/dist/components/dashboard/Lineart.vue.d.ts +1 -1
  16. package/dist/components/dashboard/Lineart.vue.d.ts.map +1 -1
  17. package/dist/components/form/inputs/CheckInput.vue.d.ts.map +1 -1
  18. package/dist/components/form/inputs/Checkbox.vue.d.ts.map +1 -1
  19. package/dist/components/form/inputs/PasswordInput.vue.d.ts.map +1 -1
  20. package/dist/components/formkit/AddressArray.vue.d.ts.map +1 -1
  21. package/dist/components/formkit/BankDetailsArray.vue.d.ts.map +1 -1
  22. package/dist/components/formkit/ContactArrayFormKit.vue.d.ts.map +1 -1
  23. package/dist/components/formkit/FileUploader.vue.d.ts.map +1 -1
  24. package/dist/components/formkit/MiscFields.vue.d.ts.map +1 -1
  25. package/dist/index.cjs +60 -49
  26. package/dist/index.mjs +60 -49
  27. package/dist/style.css +1468 -1402
  28. package/package.json +2 -2
  29. package/src/components/Btn.vue +127 -132
  30. package/src/components/Comments.vue +155 -169
  31. package/src/components/DropDown.vue +73 -77
  32. package/src/components/FileUploader.vue +133 -141
  33. package/src/components/FormKitTable.vue +191 -205
  34. package/src/components/LangText.vue +14 -14
  35. package/src/components/NavBar.vue +264 -261
  36. package/src/components/PersonPreview.vue +123 -148
  37. package/src/components/PersonPreviewFormkit.vue +124 -148
  38. package/src/components/RTXEditor.vue +91 -91
  39. package/src/components/TableSchema.vue +150 -156
  40. package/src/components/charts/BarChart.vue +212 -227
  41. package/src/components/dashboard/Lineart.vue +117 -130
  42. package/src/components/form/inputs/CheckInput.vue +90 -90
  43. package/src/components/form/inputs/Checkbox.vue +38 -41
  44. package/src/components/form/inputs/PasswordInput.vue +56 -63
  45. package/src/components/formkit/AddressArray.vue +150 -173
  46. package/src/components/formkit/BankDetailsArray.vue +175 -198
  47. package/src/components/formkit/ContactArrayFormKit.vue +124 -142
  48. package/src/components/formkit/FileUploader.vue +256 -260
  49. package/src/components/formkit/MiscFields.vue +42 -42
  50. package/src/components/formkit/Toggle.vue +97 -97
  51. package/src/styles/bagel.css +1 -0
  52. package/src/styles/buttons.css +5 -0
  53. package/src/styles/dark.css +46 -0
  54. package/src/styles/fonts/Ploni.css +8 -8
  55. package/src/styles/inputs.css +57 -13
  56. package/src/styles/layout.css +43 -0
  57. package/src/styles/text.css +83 -10
  58. package/src/styles/theme.css +25 -155
  59. package/src/styles/fonts/Ploni/ploni-black.eot +0 -0
  60. package/src/styles/fonts/Ploni/ploni-black.woff +0 -0
  61. package/src/styles/fonts/Ploni/ploni-black.woff2 +0 -0
  62. package/src/styles/fonts/Ploni/ploni-bold.eot +0 -0
  63. package/src/styles/fonts/Ploni/ploni-bold.woff +0 -0
  64. package/src/styles/fonts/Ploni/ploni-bold.woff2 +0 -0
  65. package/src/styles/fonts/Ploni/ploni-demibold.eot +0 -0
  66. package/src/styles/fonts/Ploni/ploni-demibold.woff +0 -0
  67. package/src/styles/fonts/Ploni/ploni-demibold.woff2 +0 -0
  68. package/src/styles/fonts/Ploni/ploni-light.eot +0 -0
  69. package/src/styles/fonts/Ploni/ploni-light.woff +0 -0
  70. package/src/styles/fonts/Ploni/ploni-light.woff2 +0 -0
  71. package/src/styles/fonts/Ploni/ploni-medium.eot +0 -0
  72. package/src/styles/fonts/Ploni/ploni-medium.woff +0 -0
  73. package/src/styles/fonts/Ploni/ploni-medium.woff2 +0 -0
  74. package/src/styles/fonts/Ploni/ploni-regular.eot +0 -0
  75. package/src/styles/fonts/Ploni/ploni-regular.woff +0 -0
  76. package/src/styles/fonts/Ploni/ploni-regular.woff2 +0 -0
  77. package/src/styles/fonts/Ploni/ploni-ultrabold.eot +0 -0
  78. package/src/styles/fonts/Ploni/ploni-ultrabold.woff +0 -0
  79. package/src/styles/fonts/Ploni/ploni-ultrabold.woff2 +0 -0
  80. package/src/styles/fonts/Ploni/ploni-ultralight.eot +0 -0
  81. package/src/styles/fonts/Ploni/ploni-ultralight.woff +0 -0
  82. package/src/styles/fonts/Ploni/ploni-ultralight.woff2 +0 -0
package/src/components/PersonPreview.vue CHANGED
@@ -1,200 +1,175 @@
1
1
  <template>
2
- <div
3
- @click="onClick"
4
- class="person-card"
5
- v-if="person"
6
- >
7
- <div
8
- class="person-card-edit flex gap-2"
9
- v-if="!onClick"
10
- >
11
- <Btn
12
- round
13
- thin
14
- icon.end="arrow_outward"
15
- value="Profile"
16
- v-if="!$route.path.match('/search')"
17
- is="router-link"
18
- :to="`/search/${person.id}`"
19
- />
20
- <Btn
21
- thin
22
- flat
23
- @click="showEditForm"
24
- icon="edit"
25
- />
26
- </div>
27
- <div class="person-card-icon-wrap">
28
- <p class="person-card-icon">
29
- {{ initials(person.first_name, person.last_name) }}
30
- </p>
31
- <p class="person-card-name txt20">
32
- {{ person.first_name }} {{ person.last_name }}
33
- </p>
34
- </div>
35
-
36
- <div class="person-card-details-wrap">
37
- <div
38
- class="person-card-details"
39
- v-if="person.phone?.length"
40
- >
41
- <MaterialIcon icon="phone" />
42
- <p
43
- v-for="phone in person.phone"
44
- :key="phone.id"
45
- >
46
- {{ phone.phone }}
47
- </p>
48
- </div>
49
- <div
50
- class="person-card-details"
51
- v-if="person.email?.length"
52
- >
53
- <MaterialIcon icon="email" />
54
- <p
55
- v-for="email in person.email"
56
- :key="email.id"
57
- >
58
- {{ email.email }}
59
- </p>
60
- </div>
61
- <div
62
- class="person-card-details badge"
63
- v-if="person.date_of_birth || person.gender"
64
- >
65
- <MaterialIcon icon="badge" />
66
- <p v-if="person.date_of_birth">
67
- {{ person.date_of_birth }}
68
- </p>
69
- <p v-if="person.gender">
70
- {{ person.gender }}
71
- </p>
72
- </div>
73
- </div>
74
- </div>
2
+ <div @click="onClick" class="person-card" v-if="person">
3
+ <div class="person-card-edit flex gap-2" v-if="!onClick">
4
+ <Btn
5
+ round
6
+ thin
7
+ icon.end="arrow_outward"
8
+ value="Profile"
9
+ v-if="!$route.path.match('/search')"
10
+ is="router-link"
11
+ :to="`/search/${person.id}`"
12
+ />
13
+ <Btn thin flat @click="showEditForm" icon="edit" />
14
+ </div>
15
+ <div class="person-card-icon-wrap">
16
+ <p class="person-card-icon">
17
+ {{ initials(person.first_name, person.last_name) }}
18
+ </p>
19
+ <p class="person-card-name txt20">
20
+ {{ person.first_name }} {{ person.last_name }}
21
+ </p>
22
+ </div>
23
+
24
+ <div class="person-card-details-wrap">
25
+ <div class="person-card-details" v-if="person.phone?.length">
26
+ <MaterialIcon icon="phone" />
27
+ <p v-for="phone in person.phone" :key="phone.id">
28
+ {{ phone.phone }}
29
+ </p>
30
+ </div>
31
+ <div class="person-card-details" v-if="person.email?.length">
32
+ <MaterialIcon icon="email" />
33
+ <p v-for="email in person.email" :key="email.id">
34
+ {{ email.email }}
35
+ </p>
36
+ </div>
37
+ <div
38
+ class="person-card-details badge"
39
+ v-if="person.date_of_birth || person.gender"
40
+ >
41
+ <MaterialIcon icon="badge" />
42
+ <p v-if="person.date_of_birth">
43
+ {{ person.date_of_birth }}
44
+ </p>
45
+ <p v-if="person.gender">
46
+ {{ person.gender }}
47
+ </p>
48
+ </div>
49
+ </div>
50
+ </div>
75
51
  </template>
76
52
 
77
53
  <script lang="ts" setup>
78
- import type { FormKitSchemaDefinition } from '@formkit/core';
79
- import type { Person } from '@bagelink/vue';
80
- import { initials, Btn, MaterialIcon } from '@bagelink/vue';
81
- import { useBagel, useModal } from '..';
54
+ import type { FormKitSchemaDefinition } from "@formkit/core";
55
+ import type { Person } from "@bagelink/vue";
56
+ import { initials, Btn, MaterialIcon } from "@bagelink/vue";
57
+ import { useBagel, useModal } from "..";
82
58
 
83
59
  // const toast = useToast(); // TODO: use toast
84
60
  const bagel = useBagel();
85
61
  const { modalForm } = useModal();
86
62
 
87
63
  const props = defineProps<{
88
- person: Person;
89
- // eslint-disable-next-line no-unused-vars
90
- onClick?: ((event: MouseEvent) => void);
91
- personSchema: () => FormKitSchemaDefinition;
64
+ person: Person;
65
+ // eslint-disable-next-line no-unused-vars
66
+ onClick?: (event: MouseEvent) => void;
67
+ personSchema: () => FormKitSchemaDefinition;
92
68
  }>();
93
69
 
94
70
  const showEditForm = async () => {
95
- const { first_name, last_name } = props.person;
96
- modalForm({
97
- side: true,
98
- title: `${first_name} ${last_name}`,
99
- schema: props.personSchema(),
100
- modelValue: props.person,
101
- onSubmit: (newPerson) => bagel
102
- .put('/person', newPerson),
103
- // .then(() => toast.success(i18nT('updatedSuccessfully'))),
104
- });
71
+ const { first_name, last_name } = props.person;
72
+ modalForm({
73
+ side: true,
74
+ title: `${first_name} ${last_name}`,
75
+ schema: props.personSchema(),
76
+ modelValue: props.person,
77
+ onSubmit: (newPerson) => bagel.put("/person", newPerson),
78
+ // .then(() => toast.success(i18nT('updatedSuccessfully'))),
79
+ });
105
80
  };
106
81
  </script>
107
82
  <style>
108
83
  .person-card {
109
- border: 1.1px solid var(--border-color);
110
- /* background: var(--input-bg); */
111
- border-radius: var(--card-border-radius);
112
- padding: 1rem;
113
- margin-bottom: 0.5rem;
114
- font-size: 1rem;
115
- position: relative;
84
+ border: 1.1px solid var(--border-color);
85
+ /* background: var(--input-bg); */
86
+ border-radius: var(--card-border-radius);
87
+ padding: 1rem;
88
+ margin-bottom: 0.5rem;
89
+ font-size: 1rem;
90
+ position: relative;
116
91
  }
117
92
 
118
93
  .person-card p {
119
- margin: 0;
94
+ margin: 0;
120
95
  }
121
96
 
122
97
  .person-card-details {
123
- font-size: 14px;
124
- margin-bottom: 2px;
125
- line-height: 1.3;
126
- display: flex;
98
+ font-size: 14px;
99
+ margin-bottom: 2px;
100
+ line-height: 1.3;
101
+ display: flex;
127
102
  }
128
103
 
129
104
  .person-card-details p {
130
- color: var(--input-color);
131
- opacity: 0.6;
105
+ color: var(--input-color);
106
+ opacity: 0.6;
132
107
  }
133
108
 
134
109
  .person-card-details.badge p {
135
- opacity: 1;
110
+ opacity: 1;
136
111
  }
137
112
 
138
113
  .person-card-details p:nth-child(2) {
139
- opacity: 1;
140
- padding-inline-end: 0.5rem;
114
+ opacity: 1;
115
+ padding-inline-end: 0.5rem;
141
116
  }
142
117
 
143
118
  .person-card-details .icon-font {
144
- color: var(--bgl-blue);
145
- padding-inline-end: 0.25rem;
119
+ color: var(--bgl-primary);
120
+ padding-inline-end: 0.25rem;
146
121
  }
147
122
 
148
123
  .person-card-edit {
149
- position: absolute;
150
- inset-inline-end: 1rem;
124
+ position: absolute;
125
+ inset-inline-end: 1rem;
151
126
  }
152
127
 
153
128
  .person-card-details-wrap {
154
- display: flex;
155
- gap: 0.5rem;
156
- flex-wrap: wrap;
129
+ display: flex;
130
+ gap: 0.5rem;
131
+ flex-wrap: wrap;
157
132
  }
158
133
 
159
134
  .person-card-icon {
160
- background: var(--bgl-gray);
161
- height: 30px;
162
- width: 30px;
163
- border-radius: 100%;
164
- text-transform: uppercase;
165
- display: flex;
166
- justify-content: center;
167
- align-items: center;
168
- color: white;
169
- font-size: 12px;
135
+ background: var(--bgl-gray);
136
+ height: 30px;
137
+ width: 30px;
138
+ border-radius: 100%;
139
+ text-transform: uppercase;
140
+ display: flex;
141
+ justify-content: center;
142
+ align-items: center;
143
+ color: white;
144
+ font-size: 12px;
170
145
  }
171
146
 
172
147
  .person-card-icon-wrap {
173
- display: flex;
174
- gap: 0.5rem;
175
- align-items: center;
176
- padding-bottom: 0.75rem;
148
+ display: flex;
149
+ gap: 0.5rem;
150
+ align-items: center;
151
+ padding-bottom: 0.75rem;
177
152
  }
178
153
 
179
154
  @media screen and (max-width: 910px) {
180
- .person-card-icon-wrap {
181
- padding-bottom: 0.5rem;
182
- }
183
-
184
- .person-card {
185
- padding: 0.75rem;
186
- position: relative;
187
- }
188
-
189
- .person-card-edit {
190
- /* position: relative; */
191
- inset-inline-end: 0.5rem;
192
- margin-bottom: 1rem;
193
- justify-content: flex-end;
194
- }
195
-
196
- .person-card-name {
197
- max-width: calc(100% - 170px);
198
- }
155
+ .person-card-icon-wrap {
156
+ padding-bottom: 0.5rem;
157
+ }
158
+
159
+ .person-card {
160
+ padding: 0.75rem;
161
+ position: relative;
162
+ }
163
+
164
+ .person-card-edit {
165
+ /* position: relative; */
166
+ inset-inline-end: 0.5rem;
167
+ margin-bottom: 1rem;
168
+ justify-content: flex-end;
169
+ }
170
+
171
+ .person-card-name {
172
+ max-width: calc(100% - 170px);
173
+ }
199
174
  }
200
175
  </style>
package/src/components/PersonPreviewFormkit.vue CHANGED
@@ -1,202 +1,178 @@
1
1
  <template>
2
- <div
3
- @click="onClick"
4
- class="person-card"
5
- v-if="person"
6
- >
7
- <div
8
- class="person-card-edit flex gap-2"
9
- v-if="!onClick"
10
- >
11
- <Btn
12
- @click="hideModal"
13
- round
14
- thin
15
- icon.end="arrow_outward"
16
- value="Profile"
17
- v-if="!$route.path.match('/search')"
18
- is="router-link"
19
- :to="`/search/${person.id}`"
20
- />
21
- <Btn
22
- thin
23
- flat
24
- @click="showEditForm"
25
- icon="edit"
26
- />
27
- </div>
28
- <div class="person-card-icon-wrap">
29
- <p class="person-card-icon">
30
- {{ initials(person.first_name, person.last_name) }}
31
- </p>
32
- <p class="person-card-name txt20">
33
- {{ person.first_name }} {{ person.last_name }}
34
- </p>
35
- </div>
36
-
37
- <div class="person-card-details-wrap">
38
- <div
39
- class="person-card-details"
40
- v-if="person.phone?.length"
41
- >
42
- <MaterialIcon icon="phone" />
43
- <p
44
- v-for="phone in person.phone"
45
- :key="phone.id"
46
- >
47
- {{ phone.phone }}
48
- </p>
49
- </div>
50
- <div
51
- class="person-card-details"
52
- v-if="person.email?.length"
53
- >
54
- <MaterialIcon icon="email" />
55
- <p
56
- v-for="email in person.email"
57
- :key="email.id"
58
- >
59
- {{ email.email }}
60
- </p>
61
- </div>
62
- <div
63
- class="person-card-details badge"
64
- v-if="person.date_of_birth || person.gender"
65
- >
66
- <MaterialIcon icon="badge" />
67
- <p v-if="person.date_of_birth">
68
- {{ person.date_of_birth }}
69
- </p>
70
- <p v-if="person.gender">
71
- {{ person.gender }}
72
- </p>
73
- </div>
74
- </div>
75
- </div>
2
+ <div @click="onClick" class="person-card" v-if="person">
3
+ <div class="person-card-edit flex gap-2" v-if="!onClick">
4
+ <Btn
5
+ @click="hideModal"
6
+ round
7
+ thin
8
+ icon.end="arrow_outward"
9
+ value="Profile"
10
+ v-if="!$route.path.match('/search')"
11
+ is="router-link"
12
+ :to="`/search/${person.id}`"
13
+ />
14
+ <Btn thin flat @click="showEditForm" icon="edit" />
15
+ </div>
16
+ <div class="person-card-icon-wrap">
17
+ <p class="person-card-icon">
18
+ {{ initials(person.first_name, person.last_name) }}
19
+ </p>
20
+ <p class="person-card-name txt20">
21
+ {{ person.first_name }} {{ person.last_name }}
22
+ </p>
23
+ </div>
24
+
25
+ <div class="person-card-details-wrap">
26
+ <div class="person-card-details" v-if="person.phone?.length">
27
+ <MaterialIcon icon="phone" />
28
+ <p v-for="phone in person.phone" :key="phone.id">
29
+ {{ phone.phone }}
30
+ </p>
31
+ </div>
32
+ <div class="person-card-details" v-if="person.email?.length">
33
+ <MaterialIcon icon="email" />
34
+ <p v-for="email in person.email" :key="email.id">
35
+ {{ email.email }}
36
+ </p>
37
+ </div>
38
+ <div
39
+ class="person-card-details badge"
40
+ v-if="person.date_of_birth || person.gender"
41
+ >
42
+ <MaterialIcon icon="badge" />
43
+ <p v-if="person.date_of_birth">
44
+ {{ person.date_of_birth }}
45
+ </p>
46
+ <p v-if="person.gender">
47
+ {{ person.gender }}
48
+ </p>
49
+ </div>
50
+ </div>
51
+ </div>
76
52
  </template>
77
53
 
78
54
  <script lang="ts" setup>
79
- import type { FormKitSchemaDefinition } from '@formkit/core';
80
- import type { Person } from '@bagelink/vue';
81
- import { initials, Btn, MaterialIcon } from '@bagelink/vue';
82
- import { useBagel, useModal } from '..';
55
+ import type { FormKitSchemaDefinition } from "@formkit/core";
56
+ import type { Person } from "@bagelink/vue";
57
+ import { initials, Btn, MaterialIcon } from "@bagelink/vue";
58
+ import { useBagel, useModal } from "..";
83
59
 
84
60
  // const toast = useToast(); // TODO: use toast
85
61
  const bagel = useBagel();
86
62
  const { modalForm, hideModal } = useModal();
87
63
 
88
64
  const props = defineProps<{
89
- context: Record<string, any>;
90
- // eslint-disable-next-line no-unused-vars
91
- onClick?: ((event: MouseEvent) => void);
92
- personSchema: () => FormKitSchemaDefinition;
65
+ context: Record<string, any>;
66
+ // eslint-disable-next-line no-unused-vars
67
+ onClick?: (event: MouseEvent) => void;
68
+ personSchema: () => FormKitSchemaDefinition;
93
69
  }>();
94
70
 
95
71
  const person = $computed<Person>(() => props.context.value);
96
72
 
97
73
  const showEditForm = async () => {
98
- const { first_name, last_name } = person;
99
- modalForm({
100
- side: true,
101
- title: `${first_name} ${last_name}`,
102
- schema: props.personSchema(),
103
- modelValue: person,
104
- onSubmit: (newPerson) => bagel.put('/person', newPerson),
105
- // .then(() => toast.success(i18nT('updatedSuccessfully'))), // TODO: use toast
106
- });
74
+ const { first_name, last_name } = person;
75
+ modalForm({
76
+ side: true,
77
+ title: `${first_name} ${last_name}`,
78
+ schema: props.personSchema(),
79
+ modelValue: person,
80
+ onSubmit: (newPerson) => bagel.put("/person", newPerson),
81
+ // .then(() => toast.success(i18nT('updatedSuccessfully'))), // TODO: use toast
82
+ });
107
83
  };
108
84
  </script>
109
85
  <style>
110
86
  .person-card {
111
- border: 1.1px solid var(--border-color);
112
- /* background: var(--input-bg); */
113
- border-radius: var(--card-border-radius);
114
- padding: 1rem;
115
- margin-bottom: 0.5rem;
116
- font-size: 1rem;
117
- position: relative;
87
+ border: 1.1px solid var(--border-color);
88
+ /* background: var(--input-bg); */
89
+ border-radius: var(--card-border-radius);
90
+ padding: 1rem;
91
+ margin-bottom: 0.5rem;
92
+ font-size: 1rem;
93
+ position: relative;
118
94
  }
119
95
 
120
96
  .person-card p {
121
- margin: 0;
97
+ margin: 0;
122
98
  }
123
99
 
124
100
  .person-card-details {
125
- font-size: 14px;
126
- margin-bottom: 2px;
127
- line-height: 1.3;
128
- display: flex;
101
+ font-size: 14px;
102
+ margin-bottom: 2px;
103
+ line-height: 1.3;
104
+ display: flex;
129
105
  }
130
106
 
131
107
  .person-card-details p {
132
- color: var(--input-color);
133
- opacity: 0.6;
108
+ color: var(--input-color);
109
+ opacity: 0.6;
134
110
  }
135
111
 
136
112
  .person-card-details.badge p {
137
- opacity: 1;
113
+ opacity: 1;
138
114
  }
139
115
 
140
116
  .person-card-details p:nth-child(2) {
141
- opacity: 1;
142
- padding-inline-end: 0.5rem;
117
+ opacity: 1;
118
+ padding-inline-end: 0.5rem;
143
119
  }
144
120
 
145
121
  .person-card-details .icon-font {
146
- color: var(--bgl-blue);
147
- padding-inline-end: 0.25rem;
122
+ color: var(--bgl-primary);
123
+ padding-inline-end: 0.25rem;
148
124
  }
149
125
 
150
126
  .person-card-edit {
151
- position: absolute;
152
- inset-inline-end: 1rem;
127
+ position: absolute;
128
+ inset-inline-end: 1rem;
153
129
  }
154
130
 
155
131
  .person-card-details-wrap {
156
- display: flex;
157
- gap: 0.5rem;
158
- flex-wrap: wrap;
132
+ display: flex;
133
+ gap: 0.5rem;
134
+ flex-wrap: wrap;
159
135
  }
160
136
 
161
137
  .person-card-icon {
162
- background: var(--bgl-gray);
163
- height: 30px;
164
- width: 30px;
165
- border-radius: 100%;
166
- text-transform: uppercase;
167
- display: flex;
168
- justify-content: center;
169
- align-items: center;
170
- color: white;
171
- font-size: 12px;
138
+ background: var(--bgl-gray);
139
+ height: 30px;
140
+ width: 30px;
141
+ border-radius: 100%;
142
+ text-transform: uppercase;
143
+ display: flex;
144
+ justify-content: center;
145
+ align-items: center;
146
+ color: white;
147
+ font-size: 12px;
172
148
  }
173
149
 
174
150
  .person-card-icon-wrap {
175
- display: flex;
176
- gap: 0.5rem;
177
- align-items: center;
178
- padding-bottom: 0.75rem;
151
+ display: flex;
152
+ gap: 0.5rem;
153
+ align-items: center;
154
+ padding-bottom: 0.75rem;
179
155
  }
180
156
 
181
157
  @media screen and (max-width: 910px) {
182
- .person-card-icon-wrap {
183
- padding-bottom: 0.5rem;
184
- }
185
-
186
- .person-card {
187
- padding: 0.75rem;
188
- position: relative;
189
- }
190
-
191
- .person-card-edit {
192
- /* position: relative; */
193
- inset-inline-end: 0.5rem;
194
- margin-bottom: 1rem;
195
- justify-content: flex-end;
196
- }
197
-
198
- .person-card-name {
199
- max-width: calc(100% - 170px);
200
- }
158
+ .person-card-icon-wrap {
159
+ padding-bottom: 0.5rem;
160
+ }
161
+
162
+ .person-card {
163
+ padding: 0.75rem;
164
+ position: relative;
165
+ }
166
+
167
+ .person-card-edit {
168
+ /* position: relative; */
169
+ inset-inline-end: 0.5rem;
170
+ margin-bottom: 1rem;
171
+ justify-content: flex-end;
172
+ }
173
+
174
+ .person-card-name {
175
+ max-width: calc(100% - 170px);
176
+ }
201
177
  }
202
178
  </style>