@visns-studio/visns-components 5.6.9 → 5.6.10
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.
- package/package.json +1 -1
- package/src/components/cms/sorting/Item.jsx +24 -18
- package/src/components/cms/sorting/List.jsx +3 -1
- package/src/components/cms/sorting/styles/Item.module.scss +38 -0
- package/src/components/cms/sorting/styles/List.module.scss +74 -0
- package/src/components/crm/generic/GenericFormBuilder.jsx +21 -3
- package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +57 -29
- package/src/components/crm/generic/styles/GenericSort.module.scss +34 -12
- package/src/components/crm/sorting/Item.jsx +22 -18
- package/src/components/crm/sorting/styles/Item.module.scss +31 -10
- package/src/components/crm/sorting/styles/List.module.scss +21 -9
package/package.json
CHANGED
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
85
85
|
},
|
|
86
86
|
"name": "@visns-studio/visns-components",
|
|
87
|
-
"version": "5.6.
|
|
87
|
+
"version": "5.6.10",
|
|
88
88
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
89
89
|
"main": "src/index.js",
|
|
90
90
|
"files": [
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { SortableElement, sortableHandle } from 'react-sortable-hoc';
|
|
3
3
|
import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
|
|
4
4
|
|
|
5
|
+
import styles from './styles/Item.module.scss';
|
|
6
|
+
|
|
5
7
|
const DragHandle = sortableHandle(() => (
|
|
6
8
|
<ChevronVertical className="drag-handle" strokeWidth={1} size={26} />
|
|
7
9
|
));
|
|
@@ -63,9 +65,9 @@ const SortableItem = ({
|
|
|
63
65
|
|
|
64
66
|
const EditButton = () => (
|
|
65
67
|
<Pencil
|
|
66
|
-
className="
|
|
67
|
-
strokeWidth={
|
|
68
|
-
size={
|
|
68
|
+
className="pencil-edit"
|
|
69
|
+
strokeWidth={2}
|
|
70
|
+
size={24}
|
|
69
71
|
onClick={(e) => {
|
|
70
72
|
e.preventDefault();
|
|
71
73
|
e.stopPropagation();
|
|
@@ -91,22 +93,26 @@ const SortableItem = ({
|
|
|
91
93
|
|
|
92
94
|
{renderImage(value)}
|
|
93
95
|
|
|
94
|
-
{
|
|
96
|
+
{(handleEdit || handleDelete) && (
|
|
97
|
+
<div className={styles.actionIcons}>
|
|
98
|
+
{renderEditButton()}
|
|
95
99
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
100
|
+
{handleDelete && (
|
|
101
|
+
<TrashCan
|
|
102
|
+
className="delete"
|
|
103
|
+
strokeWidth={2}
|
|
104
|
+
size={24}
|
|
105
|
+
onClick={(e) => {
|
|
106
|
+
e.preventDefault();
|
|
107
|
+
e.stopPropagation();
|
|
108
|
+
handleDelete(
|
|
109
|
+
value.id || containerIndex,
|
|
110
|
+
value.label || value.file_name
|
|
111
|
+
);
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
)}
|
|
115
|
+
</div>
|
|
110
116
|
)}
|
|
111
117
|
</li>
|
|
112
118
|
);
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import VisnsSortableItem from './Item';
|
|
3
3
|
import { SortableContainer } from 'react-sortable-hoc';
|
|
4
4
|
|
|
5
|
+
import styles from './styles/List.module.scss';
|
|
6
|
+
|
|
5
7
|
const SortableList = ({
|
|
6
8
|
handleClick,
|
|
7
9
|
handleDelete,
|
|
@@ -10,7 +12,7 @@ const SortableList = ({
|
|
|
10
12
|
showImage,
|
|
11
13
|
}) => {
|
|
12
14
|
return (
|
|
13
|
-
<ul className=
|
|
15
|
+
<ul className={styles.sortlist}>
|
|
14
16
|
{items.map((value, index) => (
|
|
15
17
|
<VisnsSortableItem
|
|
16
18
|
key={`item-${index}`}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.actionIcons {
|
|
2
|
+
position: absolute;
|
|
3
|
+
right: 10px;
|
|
4
|
+
top: 50%;
|
|
5
|
+
transform: translateY(-50%);
|
|
6
|
+
display: flex;
|
|
7
|
+
gap: 12px;
|
|
8
|
+
align-items: center;
|
|
9
|
+
z-index: 10;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:global {
|
|
13
|
+
.delete {
|
|
14
|
+
width: 22px;
|
|
15
|
+
height: 22px;
|
|
16
|
+
color: var(--primary-color);
|
|
17
|
+
transition: color 0.2s ease;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
display: block;
|
|
20
|
+
|
|
21
|
+
&:hover {
|
|
22
|
+
color: #d32f2f;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.pencil-edit {
|
|
27
|
+
width: 22px;
|
|
28
|
+
height: 22px;
|
|
29
|
+
color: var(--primary-color);
|
|
30
|
+
transition: color 0.2s ease;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
display: block;
|
|
33
|
+
|
|
34
|
+
&:hover {
|
|
35
|
+
color: var(--secondary-color);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
.sortlist {
|
|
2
|
+
width: 100%;
|
|
3
|
+
display: grid;
|
|
4
|
+
grid-gap: 0.4rem;
|
|
5
|
+
grid-template-columns: repeat(1, 1fr);
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
padding: 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
font-size: 0.8rem;
|
|
10
|
+
list-style: none;
|
|
11
|
+
|
|
12
|
+
@media (min-width: 576px) {
|
|
13
|
+
grid-template-columns: repeat(1, 1fr);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media (min-width: 992px) {
|
|
17
|
+
grid-template-columns: repeat(1, 1fr);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
li {
|
|
21
|
+
display: flex;
|
|
22
|
+
justify-content: flex-start;
|
|
23
|
+
align-items: center;
|
|
24
|
+
flex-wrap: wrap;
|
|
25
|
+
border-radius: 6px;
|
|
26
|
+
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
27
|
+
box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.1);
|
|
28
|
+
padding: 0.8rem 5rem 0.8rem 2rem;
|
|
29
|
+
margin-bottom: 0.5rem;
|
|
30
|
+
font-size: 0.9rem;
|
|
31
|
+
font-weight: 500;
|
|
32
|
+
transition: all 0.2s ease;
|
|
33
|
+
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
list-style: none;
|
|
37
|
+
position: relative;
|
|
38
|
+
color: var(--paragraph-color);
|
|
39
|
+
user-select: none;
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
border-color: rgba(var(--primary-rgb), 0.4);
|
|
43
|
+
box-shadow: 0px 0px 12px rgba(var(--primary-rgb), 0.2);
|
|
44
|
+
transform: translateY(-1px);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
> svg:first-child {
|
|
48
|
+
width: 100%;
|
|
49
|
+
max-width: 18px;
|
|
50
|
+
position: absolute;
|
|
51
|
+
left: 6px;
|
|
52
|
+
top: 50%;
|
|
53
|
+
transform: translateY(-50%);
|
|
54
|
+
color: var(--primary-color);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.sortimg {
|
|
59
|
+
width: 40px;
|
|
60
|
+
position: relative;
|
|
61
|
+
height: 40px;
|
|
62
|
+
margin-left: auto;
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
|
|
66
|
+
img {
|
|
67
|
+
display: block;
|
|
68
|
+
object-fit: cover;
|
|
69
|
+
height: 100%;
|
|
70
|
+
width: 100%;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -424,7 +424,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
424
424
|
const sizeClassMap = {
|
|
425
425
|
full: styles.fwBuilderItem,
|
|
426
426
|
half: styles.halfBuilderItem,
|
|
427
|
-
quarter: styles.
|
|
427
|
+
quarter: styles.halfBuilderItem, // Changed to halfBuilderItem to ensure max 2 per row
|
|
428
428
|
};
|
|
429
429
|
|
|
430
430
|
return `${styles.formBuilderItem} ${
|
|
@@ -855,6 +855,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
855
855
|
<div className={styles.grid}>
|
|
856
856
|
<div className={styles.grid__subrow}>
|
|
857
857
|
<div className={styles.grid__subnav}>
|
|
858
|
+
<div
|
|
859
|
+
className={styles.gridtxt__header}
|
|
860
|
+
style={{ marginBottom: '10px' }}
|
|
861
|
+
>
|
|
862
|
+
<span>Form Fields</span>
|
|
863
|
+
</div>
|
|
858
864
|
{data.detail && data.detail.length > 0 ? (
|
|
859
865
|
<div className={styles.sortableListContainer}>
|
|
860
866
|
<SortableList
|
|
@@ -869,7 +875,19 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
869
875
|
useDragHandle
|
|
870
876
|
/>
|
|
871
877
|
</div>
|
|
872
|
-
) :
|
|
878
|
+
) : (
|
|
879
|
+
<div
|
|
880
|
+
style={{
|
|
881
|
+
padding: '10px',
|
|
882
|
+
textAlign: 'center',
|
|
883
|
+
color: 'rgba(var(--paragraph-color-rgb), 0.7)',
|
|
884
|
+
fontSize: '0.9rem',
|
|
885
|
+
}}
|
|
886
|
+
>
|
|
887
|
+
No fields added yet. Click "Add Field" to get
|
|
888
|
+
started.
|
|
889
|
+
</div>
|
|
890
|
+
)}
|
|
873
891
|
</div>
|
|
874
892
|
<div className={styles.grid__subcontent}>
|
|
875
893
|
<div className={styles.formSplit}>
|
|
@@ -1165,7 +1183,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1165
1183
|
'description'
|
|
1166
1184
|
);
|
|
1167
1185
|
}}
|
|
1168
|
-
onInit={(
|
|
1186
|
+
onInit={(_, editor) =>
|
|
1169
1187
|
(editorRef.current = editor)
|
|
1170
1188
|
}
|
|
1171
1189
|
value={
|
|
@@ -22,19 +22,19 @@
|
|
|
22
22
|
&__subrow {
|
|
23
23
|
width: 100%;
|
|
24
24
|
display: flex;
|
|
25
|
-
flex-wrap:
|
|
25
|
+
flex-wrap: nowrap;
|
|
26
26
|
height: auto;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
&__subnav {
|
|
30
|
-
flex:
|
|
30
|
+
flex: 0 0 20%;
|
|
31
31
|
background: white;
|
|
32
32
|
border-radius: var(--br);
|
|
33
33
|
box-sizing: border-box;
|
|
34
|
-
padding:
|
|
35
|
-
margin: 8px 0;
|
|
34
|
+
padding: 8px;
|
|
35
|
+
margin: 8px 8px 8px 0;
|
|
36
36
|
height: auto;
|
|
37
|
-
box-shadow: 0
|
|
37
|
+
box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.05);
|
|
38
38
|
|
|
39
39
|
> ul {
|
|
40
40
|
width: 100%;
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
&__subcontent {
|
|
117
|
-
flex: 0 1
|
|
117
|
+
flex: 0 1 80%;
|
|
118
118
|
background: white;
|
|
119
119
|
border-radius: var(--br);
|
|
120
120
|
border: 1px solid var(--border-color);
|
|
@@ -138,14 +138,14 @@
|
|
|
138
138
|
display: block;
|
|
139
139
|
background: var(--border-color);
|
|
140
140
|
box-sizing: border-box;
|
|
141
|
-
padding: 10px
|
|
142
|
-
border-
|
|
143
|
-
border-top-right-radius: var(--br);
|
|
141
|
+
padding: 10px 15px;
|
|
142
|
+
border-radius: var(--br);
|
|
144
143
|
margin-bottom: 0;
|
|
145
|
-
font-weight:
|
|
144
|
+
font-weight: 600;
|
|
146
145
|
text-align: center;
|
|
147
146
|
color: var(--paragraph-color);
|
|
148
147
|
position: relative;
|
|
148
|
+
font-size: 0.95rem;
|
|
149
149
|
|
|
150
150
|
span {
|
|
151
151
|
font-weight: 700;
|
|
@@ -257,7 +257,7 @@ input[type='file']:hover {
|
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
.formBuilderItem {
|
|
260
|
-
width:
|
|
260
|
+
width: 50%;
|
|
261
261
|
padding: 0.35em;
|
|
262
262
|
position: relative;
|
|
263
263
|
box-sizing: border-box;
|
|
@@ -318,7 +318,7 @@ input[type='file']:hover {
|
|
|
318
318
|
}
|
|
319
319
|
|
|
320
320
|
.qtrBuilderItem {
|
|
321
|
-
flex-basis:
|
|
321
|
+
flex-basis: 50%;
|
|
322
322
|
}
|
|
323
323
|
|
|
324
324
|
.halfBuilderItem {
|
|
@@ -871,45 +871,73 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
871
871
|
.sortableListContainer {
|
|
872
872
|
max-height: 800px; /* Optional for scrollable content */
|
|
873
873
|
overflow-y: auto;
|
|
874
|
+
padding: 0.75rem;
|
|
875
|
+
border-radius: var(--br);
|
|
876
|
+
background-color: rgba(var(--primary-rgb), 0.02);
|
|
874
877
|
}
|
|
875
878
|
|
|
876
879
|
.dragitem {
|
|
877
880
|
list-style: none;
|
|
878
881
|
display: flex;
|
|
879
|
-
justify-content:
|
|
882
|
+
justify-content: flex-start;
|
|
880
883
|
align-items: center;
|
|
881
884
|
flex-wrap: wrap;
|
|
882
|
-
border-radius:
|
|
885
|
+
border-radius: 6px;
|
|
883
886
|
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
884
|
-
box-shadow: 0px 0px
|
|
885
|
-
padding:
|
|
887
|
+
box-shadow: 0px 0px 15px rgba(var(--primary-rgb), 0.15);
|
|
888
|
+
padding: 0.8rem 5rem 0.8rem 2rem;
|
|
886
889
|
box-sizing: border-box;
|
|
887
890
|
cursor: grab;
|
|
888
891
|
list-style: none;
|
|
889
892
|
color: var(--paragraph-color);
|
|
893
|
+
font-size: 0.9rem;
|
|
894
|
+
font-weight: 500;
|
|
890
895
|
|
|
891
|
-
svg {
|
|
896
|
+
> svg:first-child {
|
|
892
897
|
width: 100%;
|
|
893
898
|
max-width: 18px;
|
|
894
899
|
position: absolute;
|
|
895
|
-
left:
|
|
896
|
-
top:
|
|
900
|
+
left: 6px;
|
|
901
|
+
top: 50%;
|
|
902
|
+
transform: translateY(-50%);
|
|
903
|
+
color: var(--primary-color);
|
|
897
904
|
}
|
|
898
905
|
|
|
899
|
-
.
|
|
900
|
-
width: 100%;
|
|
901
|
-
max-width: 18px;
|
|
906
|
+
.actionIcons {
|
|
902
907
|
position: absolute;
|
|
903
|
-
|
|
904
|
-
top:
|
|
908
|
+
right: 10px;
|
|
909
|
+
top: 50%;
|
|
910
|
+
transform: translateY(-50%);
|
|
911
|
+
display: flex;
|
|
912
|
+
gap: 12px;
|
|
913
|
+
align-items: center;
|
|
914
|
+
z-index: 10;
|
|
915
|
+
}
|
|
916
|
+
|
|
917
|
+
.edit {
|
|
918
|
+
width: 22px;
|
|
919
|
+
height: 22px;
|
|
920
|
+
color: var(--primary-color);
|
|
921
|
+
transition: color 0.2s ease;
|
|
922
|
+
cursor: pointer;
|
|
923
|
+
display: block;
|
|
924
|
+
|
|
925
|
+
&:hover {
|
|
926
|
+
color: var(--secondary-color);
|
|
927
|
+
}
|
|
905
928
|
}
|
|
906
929
|
|
|
907
930
|
.delete {
|
|
908
|
-
width:
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
931
|
+
width: 22px;
|
|
932
|
+
height: 22px;
|
|
933
|
+
color: var(--primary-color);
|
|
934
|
+
transition: color 0.2s ease;
|
|
935
|
+
cursor: pointer;
|
|
936
|
+
display: block;
|
|
937
|
+
|
|
938
|
+
&:hover {
|
|
939
|
+
color: #d32f2f;
|
|
940
|
+
}
|
|
913
941
|
}
|
|
914
942
|
|
|
915
943
|
.sortimg {
|
|
@@ -124,28 +124,50 @@
|
|
|
124
124
|
color: var(--paragraph-color);
|
|
125
125
|
font-size: 0.8rem;
|
|
126
126
|
|
|
127
|
-
svg {
|
|
127
|
+
> svg:first-child {
|
|
128
128
|
width: 100%;
|
|
129
129
|
max-width: 16px;
|
|
130
130
|
position: absolute;
|
|
131
131
|
left: 4px;
|
|
132
|
-
top:
|
|
132
|
+
top: 50%;
|
|
133
|
+
transform: translateY(-50%);
|
|
133
134
|
}
|
|
134
135
|
|
|
135
|
-
.
|
|
136
|
-
width: 100%;
|
|
137
|
-
max-width: 16px;
|
|
136
|
+
.actionIcons {
|
|
138
137
|
position: absolute;
|
|
139
|
-
|
|
140
|
-
top:
|
|
138
|
+
right: 10px;
|
|
139
|
+
top: 50%;
|
|
140
|
+
transform: translateY(-50%);
|
|
141
|
+
display: flex;
|
|
142
|
+
gap: 12px;
|
|
143
|
+
align-items: center;
|
|
144
|
+
z-index: 10;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.pencil-edit {
|
|
148
|
+
width: 22px;
|
|
149
|
+
height: 22px;
|
|
150
|
+
color: var(--primary-color);
|
|
151
|
+
transition: color 0.2s ease;
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
display: block;
|
|
154
|
+
|
|
155
|
+
&:hover {
|
|
156
|
+
color: var(--secondary-color);
|
|
157
|
+
}
|
|
141
158
|
}
|
|
142
159
|
|
|
143
160
|
.trash-delete {
|
|
144
|
-
width:
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
161
|
+
width: 22px;
|
|
162
|
+
height: 22px;
|
|
163
|
+
color: var(--primary-color);
|
|
164
|
+
transition: color 0.2s ease;
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
display: block;
|
|
167
|
+
|
|
168
|
+
&:hover {
|
|
169
|
+
color: #d32f2f;
|
|
170
|
+
}
|
|
149
171
|
}
|
|
150
172
|
|
|
151
173
|
.sortimg {
|
|
@@ -65,9 +65,9 @@ const SortableItem = ({
|
|
|
65
65
|
|
|
66
66
|
const EditButton = () => (
|
|
67
67
|
<Pencil
|
|
68
|
-
className={styles
|
|
69
|
-
strokeWidth={
|
|
70
|
-
size={
|
|
68
|
+
className={styles.edit}
|
|
69
|
+
strokeWidth={2}
|
|
70
|
+
size={24}
|
|
71
71
|
onClick={(e) => {
|
|
72
72
|
e.preventDefault();
|
|
73
73
|
e.stopPropagation();
|
|
@@ -93,22 +93,26 @@ const SortableItem = ({
|
|
|
93
93
|
|
|
94
94
|
{renderImage(value)}
|
|
95
95
|
|
|
96
|
-
{
|
|
96
|
+
{(handleEdit || handleDelete) && (
|
|
97
|
+
<div className={styles.actionIcons}>
|
|
98
|
+
{renderEditButton()}
|
|
97
99
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
100
|
+
{handleDelete && (
|
|
101
|
+
<TrashCan
|
|
102
|
+
className={styles.delete}
|
|
103
|
+
strokeWidth={2}
|
|
104
|
+
size={24}
|
|
105
|
+
onClick={(e) => {
|
|
106
|
+
e.preventDefault();
|
|
107
|
+
e.stopPropagation();
|
|
108
|
+
handleDelete(
|
|
109
|
+
value.id || containerIndex,
|
|
110
|
+
value.label || value.file_name
|
|
111
|
+
);
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
)}
|
|
115
|
+
</div>
|
|
112
116
|
)}
|
|
113
117
|
</li>
|
|
114
118
|
);
|
|
@@ -1,15 +1,36 @@
|
|
|
1
|
-
.
|
|
2
|
-
width: 100%;
|
|
3
|
-
max-width: 16px;
|
|
1
|
+
.actionIcons {
|
|
4
2
|
position: absolute;
|
|
5
|
-
|
|
6
|
-
top:
|
|
3
|
+
right: 10px;
|
|
4
|
+
top: 50%;
|
|
5
|
+
transform: translateY(-50%);
|
|
6
|
+
display: flex;
|
|
7
|
+
gap: 12px;
|
|
8
|
+
align-items: center;
|
|
9
|
+
z-index: 10;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.edit {
|
|
13
|
+
width: 22px;
|
|
14
|
+
height: 22px;
|
|
15
|
+
color: var(--primary-color);
|
|
16
|
+
transition: color 0.2s ease;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
display: block;
|
|
19
|
+
|
|
20
|
+
&:hover {
|
|
21
|
+
color: var(--secondary-color);
|
|
22
|
+
}
|
|
7
23
|
}
|
|
8
24
|
|
|
9
25
|
.delete {
|
|
10
|
-
width:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
26
|
+
width: 22px;
|
|
27
|
+
height: 22px;
|
|
28
|
+
color: var(--primary-color);
|
|
29
|
+
transition: color 0.2s ease;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
display: block;
|
|
32
|
+
|
|
33
|
+
&:hover {
|
|
34
|
+
color: #d32f2f;
|
|
35
|
+
}
|
|
15
36
|
}
|
|
@@ -10,22 +10,26 @@
|
|
|
10
10
|
list-style: none;
|
|
11
11
|
|
|
12
12
|
@media (min-width: 576px) {
|
|
13
|
-
grid-template-columns: repeat(
|
|
13
|
+
grid-template-columns: repeat(1, 1fr);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
@media (min-width: 992px) {
|
|
17
|
-
grid-template-columns: repeat(
|
|
17
|
+
grid-template-columns: repeat(1, 1fr);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
li {
|
|
21
21
|
display: flex;
|
|
22
|
-
justify-content:
|
|
22
|
+
justify-content: flex-start;
|
|
23
23
|
align-items: center;
|
|
24
24
|
flex-wrap: wrap;
|
|
25
|
-
border-radius:
|
|
25
|
+
border-radius: 6px;
|
|
26
26
|
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
27
27
|
box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.1);
|
|
28
|
-
padding: 0.
|
|
28
|
+
padding: 0.8rem 5rem 0.8rem 2rem;
|
|
29
|
+
margin-bottom: 0.5rem;
|
|
30
|
+
font-size: 0.9rem;
|
|
31
|
+
font-weight: 500;
|
|
32
|
+
transition: all 0.2s ease;
|
|
29
33
|
|
|
30
34
|
box-sizing: border-box;
|
|
31
35
|
cursor: pointer;
|
|
@@ -34,12 +38,20 @@
|
|
|
34
38
|
color: var(--paragraph-color);
|
|
35
39
|
user-select: none;
|
|
36
40
|
|
|
37
|
-
|
|
41
|
+
&:hover {
|
|
42
|
+
border-color: rgba(var(--primary-rgb), 0.4);
|
|
43
|
+
box-shadow: 0px 0px 12px rgba(var(--primary-rgb), 0.2);
|
|
44
|
+
transform: translateY(-1px);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
> svg:first-child {
|
|
38
48
|
width: 100%;
|
|
39
|
-
max-width:
|
|
49
|
+
max-width: 18px;
|
|
40
50
|
position: absolute;
|
|
41
|
-
left:
|
|
42
|
-
top:
|
|
51
|
+
left: 6px;
|
|
52
|
+
top: 50%;
|
|
53
|
+
transform: translateY(-50%);
|
|
54
|
+
color: var(--primary-color);
|
|
43
55
|
}
|
|
44
56
|
}
|
|
45
57
|
|