@visns-studio/visns-components 5.0.0 → 5.0.1-8.1

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 (37) hide show
  1. package/package.json +3 -1
  2. package/src/components/crm/AsyncSelect.jsx +121 -15
  3. package/src/components/crm/DataGrid.jsx +26 -5
  4. package/src/components/crm/Field.jsx +174 -148
  5. package/src/components/crm/Form.jsx +46 -33
  6. package/src/components/crm/MultiSelect.jsx +96 -29
  7. package/src/components/crm/Navigation.jsx +2 -81
  8. package/src/components/crm/QrCode.jsx +12 -8
  9. package/src/components/crm/auth/Login.jsx +9 -1
  10. package/src/components/crm/auth/Profile.jsx +4 -2
  11. package/src/components/crm/auth/styles/Login.module.scss +52 -82
  12. package/src/components/crm/auth/styles/Profile.module.scss +150 -44
  13. package/src/components/crm/auth/styles/Reset.module.scss +55 -37
  14. package/src/components/crm/auth/styles/Verify.module.scss +55 -76
  15. package/src/components/crm/generic/GenericAuth.jsx +17 -6
  16. package/src/components/crm/generic/GenericDetail.jsx +509 -18
  17. package/src/components/crm/generic/GenericEditableTable.jsx +407 -0
  18. package/src/components/crm/generic/styles/AuditLog.module.scss +4 -37
  19. package/src/components/crm/generic/styles/AuditLogs.module.scss +0 -51
  20. package/src/components/crm/generic/styles/GenericDetail.module.scss +263 -193
  21. package/src/components/crm/generic/styles/GenericDynamic.module.scss +100 -198
  22. package/src/components/crm/generic/styles/GenericEditableTable.module.scss +178 -0
  23. package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +63 -96
  24. package/src/components/crm/generic/styles/GenericIndex.module.scss +46 -66
  25. package/src/components/crm/generic/styles/GenericMain.module.scss +7 -7
  26. package/src/components/crm/generic/styles/GenericSort.module.scss +0 -36
  27. package/src/components/crm/generic/styles/NotificationList.module.scss +1 -32
  28. package/src/components/crm/styles/Autocomplete.module.scss +12 -20
  29. package/src/components/crm/styles/DataGrid.module.scss +6 -89
  30. package/src/components/crm/styles/Field.module.scss +72 -42
  31. package/src/components/crm/styles/Form.module.scss +148 -379
  32. package/src/components/crm/styles/Navigation.module.scss +356 -501
  33. package/src/components/crm/styles/Notification.module.scss +1 -0
  34. package/src/components/crm/styles/QrCode.module.scss +4 -0
  35. package/src/components/crm/styles/SwitchAccount.module.scss +0 -1
  36. package/src/components/crm/styles/TableFilter.module.scss +2 -1
  37. package/src/components/styles/global.css +164 -34
package/src/components/crm/styles/Field.module.scss CHANGED
@@ -1,12 +1,3 @@
1
- /* Form Styling */
2
-
3
- .formItem {
4
- width: 50%;
5
- padding: 0.35em;
6
- position: relative;
7
- box-sizing: border-box;
8
- }
9
-
10
1
  .dropdownContainer {
11
2
  position: relative;
12
3
  width: 100%;
@@ -36,34 +27,67 @@
36
27
  color: var(--primary-color);
37
28
  }
38
29
 
30
+ .formcontainer {
31
+ width: 100%;
32
+
33
+ form {
34
+ width: 100%;
35
+ display: grid;
36
+ grid-template-columns: 1fr 1fr;
37
+ gap: 1em;
38
+ }
39
+ }
40
+
39
41
  .formItem {
40
- width: 50%;
41
- padding: 0.5em;
42
+ width: 100%;
42
43
  position: relative;
43
44
  box-sizing: border-box;
44
- }
45
45
 
46
- .formItem .fi__label {
47
- position: relative;
48
- display: block;
46
+ .fi__label {
47
+ position: relative;
48
+ display: flex;
49
+ align-items: center;
50
+ }
49
51
 
50
- > svg {
52
+ .fi__span {
51
53
  position: absolute;
52
- right: 0.5em;
53
- top: 1em;
54
- color: var(--paragraph-color);
55
- cursor: pointer;
54
+ transition: all 200ms;
55
+ opacity: 1;
56
+ left: 0;
57
+ transform-origin: top left;
58
+ cursor: text;
59
+ padding: 0 1rem;
60
+ }
61
+
62
+ .fi__div {
63
+ transition: all 200ms;
64
+ opacity: 0.8;
65
+ left: 0;
66
+ padding: 19px 13px;
67
+ border-radius: var(--radius);
68
+ border: 1px solid rgba(var(--paragraph-rgb), 0.15);
69
+ box-shadow: none;
70
+ }
71
+
72
+ .fi__toggle {
73
+ width: max-content;
74
+ padding: 0 10px 0 0;
75
+ box-sizing: border-box;
76
+ display: inline;
77
+ }
78
+
79
+ .fi__toggletxt {
80
+ position: relative;
81
+ left: 5px;
82
+ font-size: 0.95em;
83
+ top: -5px;
56
84
  }
57
85
  }
58
86
 
59
- .fi__span {
60
- position: absolute;
61
- transition: all 200ms;
62
- opacity: 0.8;
63
- left: 0;
64
- padding: 19px 20px;
65
- transform-origin: top left;
66
- cursor: text;
87
+ .fwItem,
88
+ .fwBuilderItem {
89
+ grid-column: 1 / -1;
90
+ width: 100%;
67
91
  }
68
92
 
69
93
  .fi__span::before {
@@ -104,23 +128,24 @@
104
128
  input:not(:placeholder-shown) + .fi__span,
105
129
  textarea:not(:placeholder-shown) + .fi__span,
106
130
  select:not(:placeholder-shown) + .fi__span {
107
- transform: translateY(-40%) translateX(10px) scale(0.75);
131
+ transform: translateY(-130%) translateX(10px) scale(0.9);
108
132
  opacity: 1;
109
- padding: 0 4px;
133
+ padding: 0 0.25rem;
110
134
  background: var(--tertiary-color);
111
- font-weight: 300;
112
- border-radius: var(--br);
135
+ font-weight: 400;
136
+ transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
137
+ color: rgba(var(--paragraph-rgb), 0.65);
113
138
  }
114
139
 
115
140
  .prefocus {
116
- transform: translateY(-40%) translateX(10px) scale(0.75) !important;
141
+ transform: translateY(-130%) translateX(10px) scale(0.9) !important;
117
142
  opacity: 1 !important;
118
- padding: 0 4px !important;
143
+ padding: 0 0.25rem !important;
119
144
  background: var(--tertiary-color) !important;
120
- z-index: 500;
121
- font-weight: 300;
122
- border-radius: var(--br);
123
- top: 0;
145
+ font-weight: 400 !important;
146
+ transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
147
+ z-index: 1 !important;
148
+ color: rgba(var(--paragraph-rgb), 0.65) !important;
124
149
  }
125
150
 
126
151
  .fwItem {
@@ -162,9 +187,10 @@ select:not(:placeholder-shown) + .fi__span {
162
187
  ):not(.inovua-react-toolkit-text-input__input):not(
163
188
  .inovua-react-toolkit-numeric-input__input
164
189
  ) {
165
- background: var(--item-color);
190
+ font-size: 0.85rem;
191
+ background: white;
166
192
  border-radius: var(--br);
167
- padding: 1rem;
193
+ padding: 0.85rem;
168
194
  outline: none;
169
195
  width: 100%;
170
196
  box-sizing: border-box;
@@ -195,9 +221,13 @@ select:not(:placeholder-shown) + .fi__span {
195
221
  border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
196
222
  }
197
223
 
224
+ .formItem textarea {
225
+ line-height: 1.65 !important;
226
+ }
227
+
198
228
  input[type='file'] {
199
- background: var(--item-color) !important;
200
- border-radius: var (--br) !important;
229
+ background: white !important;
230
+ border-radius: var(--br) !important;
201
231
  border: 1px solid transparent !important;
202
232
  padding: 0.8rem !important;
203
233
  outline: none !important;