@visns-studio/visns-components 5.6.8 → 5.6.9

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/TableFilter.jsx +287 -102
  3. package/src/components/crm/auth/TwoFactorAuth.jsx +7 -9
  4. package/src/components/crm/auth/styles/TwoFactorAuth.module.scss +154 -25
  5. package/src/components/crm/examples/FilterExample.jsx +207 -0
  6. package/src/components/crm/examples/README.md +113 -0
  7. package/src/components/crm/generic/GenericIndex.jsx +244 -87
  8. package/src/components/crm/generic/styles/ReportForm.module.scss +150 -0
  9. package/src/components/crm/styles/TableFilter.module.scss +121 -23
package/src/components/crm/styles/TableFilter.module.scss CHANGED
@@ -2,61 +2,143 @@
2
2
  width: 100%;
3
3
  position: relative;
4
4
  display: block;
5
+ margin-bottom: 20px;
5
6
  }
6
7
 
7
8
  .tableFilter {
8
9
  list-style: none;
9
10
  padding: 0;
10
11
  margin: 0;
11
- font-size: 1rem;
12
+ font-size: 0.9rem;
12
13
  width: 100%;
14
+ border-radius: 8px;
15
+ overflow: hidden;
16
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
17
+ }
18
+
19
+ /* Parent category styling */
20
+ .parentItem {
21
+ margin: 0;
22
+ }
23
+
24
+ .parentItem:last-child {
25
+ border-bottom: none;
26
+ }
27
+
28
+ .parentLink {
29
+ display: flex;
30
+ justify-content: space-between;
31
+ align-items: center;
32
+ padding: 8px 16px;
33
+ font-weight: 600;
34
+ font-size: 0.9rem;
35
+ background-color: #000;
36
+ color: #fff;
37
+ transition: all 0.2s ease;
38
+ position: relative;
39
+ text-decoration: none;
40
+ }
41
+
42
+ .parentLink:hover {
43
+ background-color: #222 !important;
44
+ color: #fff !important;
45
+ text-decoration: none;
46
+ }
47
+
48
+ /* Arrow indicator for parent categories */
49
+ .arrow {
50
+ font-size: 7px;
51
+ transition: transform 0.3s ease;
52
+ margin-left: 8px;
53
+ color: rgba(255, 255, 255, 0.8);
54
+ }
55
+
56
+ .arrowDown {
57
+ transform: rotate(90deg);
13
58
  }
14
59
 
60
+ /* Child menu styling */
15
61
  .collapsibleMenu {
16
62
  max-height: 0;
17
63
  overflow: hidden;
18
64
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
19
65
  opacity: 0;
66
+ background-color: #f5f5f5;
20
67
  }
21
68
 
22
69
  .visibleMenu {
23
- max-height: 2000px; /* Adjust this value based on the expected height of your child menu */
70
+ max-height: 2000px; /* Adjust based on expected height */
24
71
  opacity: 1;
25
72
  }
26
73
 
27
- .subactive {
28
- font-weight: 700;
29
- background: var(--primary-color) !important;
30
- color: var(--tertiary-color) !important;
74
+ .childItem {
75
+ margin: 0;
76
+ position: relative;
77
+ border-bottom: 1px solid rgba(0, 0, 0, 0.03);
31
78
  }
32
79
 
33
- .subactivechildren {
34
- font-weight: 700;
80
+ .childItem:last-child {
81
+ border-bottom: none;
82
+ }
83
+
84
+ .childLink {
85
+ padding: 6px 16px 6px 26px;
86
+ background-color: #f5f5f5;
87
+ color: #333;
88
+ font-weight: normal;
89
+ font-size: 0.85rem;
90
+ display: block;
91
+ text-decoration: none;
92
+ }
93
+
94
+ .childLink:hover {
95
+ background-color: #e8e8e8 !important;
96
+ color: #000 !important;
97
+ text-decoration: none;
98
+ }
99
+
100
+ .childIndicator {
101
+ display: inline-block;
102
+ margin-right: 8px;
103
+ font-size: 8px;
104
+ color: #999;
35
105
  }
36
106
 
37
- .tableFilter li {
38
- margin-bottom: 1px;
107
+ /* Active states */
108
+ .subactive {
109
+ font-weight: 600;
110
+ background: #000 !important;
111
+ color: #fff !important;
39
112
  }
40
113
 
114
+ .subactivechildren {
115
+ font-weight: 500;
116
+ background-color: #f0f0f0 !important;
117
+ color: #000 !important;
118
+ }
119
+
120
+ /* Base link styling */
41
121
  .link {
42
122
  display: block;
43
- padding: 8px 20px;
123
+ padding: 6px 16px;
44
124
  text-decoration: none;
45
- background: var(--bg-color);
46
- color: var(--paragraph-color);
47
- border-radius: 3px;
48
- transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
125
+ background: #f5f5f5;
126
+ color: #333;
127
+ font-size: 0.85rem;
128
+ transition: all 0.2s ease;
129
+ cursor: pointer;
49
130
  }
50
131
 
51
132
  .link:hover {
52
- background: var(--primary-color) !important;
53
- color: var(--tertiary-color) !important;
133
+ background: #e8e8e8 !important;
134
+ color: #000 !important;
135
+ text-decoration: none;
54
136
  }
55
137
 
56
138
  .activetab button {
57
139
  font-weight: bold;
58
- background: var(--item-color) !important;
59
- color: var(--paragraph-color) !important;
140
+ background: #e0e0e0 !important;
141
+ color: #333 !important;
60
142
  }
61
143
 
62
144
  /* Mobile menu toggle button */
@@ -65,9 +147,9 @@
65
147
  align-items: center;
66
148
  justify-content: space-between;
67
149
  padding: 12px 15px;
68
- background: var(--primary-color, #0b3b2e);
150
+ background: #000;
69
151
  color: white;
70
- border-radius: 4px;
152
+ border-radius: 8px;
71
153
  cursor: pointer;
72
154
  margin-bottom: 10px;
73
155
  border: none;
@@ -128,11 +210,27 @@
128
210
  max-height: 1000px;
129
211
  overflow-y: auto;
130
212
  border: 1px solid rgba(0, 0, 0, 0.1);
131
- border-radius: 4px;
213
+ border-radius: 8px;
132
214
  margin-bottom: 10px;
215
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
216
+ }
217
+
218
+ .parentLink {
219
+ padding: 10px 16px; /* Slightly larger touch targets for mobile */
220
+ font-size: 0.9rem;
133
221
  }
134
222
 
135
223
  .link {
136
- padding: 12px 20px; /* Larger touch targets for mobile */
224
+ padding: 10px 16px; /* Slightly larger touch targets for mobile */
225
+ font-size: 0.85rem;
226
+ }
227
+
228
+ .childLink {
229
+ padding: 8px 16px 8px 26px;
230
+ font-size: 0.85rem;
231
+ }
232
+
233
+ .collapsibleMenu {
234
+ border-left: none;
137
235
  }
138
236
  }