@visns-studio/visns-components 4.4.2 → 4.4.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 (14) hide show
  1. package/components/crm/auth/Login.jsx +33 -16
  2. package/components/crm/auth/styles/Login.module.css +218 -0
  3. package/components/crm/generic/GenericDetail.jsx +150 -51
  4. package/components/crm/generic/GenericMain.jsx +6 -5
  5. package/components/crm/generic/styles/GenericDetail.module.css +578 -0
  6. package/components/crm/generic/styles/GenericIndex.module.css +178 -183
  7. package/components/crm/generic/styles/GenericMain.module.css +77 -0
  8. package/components/crm/styles/AsyncSelect.module.css +6 -10
  9. package/components/crm/styles/Autocomplete.module.css +3 -3
  10. package/components/crm/styles/DataGrid.module.css +59 -59
  11. package/components/crm/styles/Form.module.css +17 -19
  12. package/components/crm/styles/MultiSelect.module.css +6 -10
  13. package/components/crm/styles/TableFilter.module.css +1 -0
  14. package/package.json +1 -1
package/components/crm/generic/styles/GenericIndex.module.css CHANGED
@@ -1,154 +1,149 @@
1
- .grid {
2
- &__row {
3
- width: 100%;
4
- display: flex;
5
- align-items: flex-start;
6
- flex-wrap: nowrap;
7
- height: auto;
8
- gap: 1rem;
9
- }
10
-
11
- &__three {
12
- width: 33%;
13
- background: var(--item-color);
14
- border-radius: var(--br);
15
- border: 1px solid rgba(var(--item-color-rgb), 1.15);
16
- box-sizing: border-box;
17
- overflow: visible;
18
- position: relative;
19
- padding: 20px;
20
- margin: 8px 0;
21
- box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
22
- }
23
-
24
- &__half {
25
- width: 50%;
26
- background: var(--item-color);
27
- border-radius: 6px;
28
- border: 1px solid #dadce0;
29
- box-sizing: border-box;
30
- overflow: visible;
31
- position: relative;
32
- padding: 20px;
33
- margin: 8px 0;
34
- box-shadow: 0 4px 0 rgba(var(--primary-color), 0.05);
35
- }
36
-
37
- &__full {
38
- width: 100%;
39
- background: var(--item-color);
40
- border-radius: var(--br);
41
- border: 1px solid rgba(var(--item-color-rgb), 1.15);
42
- box-sizing: border-box;
43
- overflow: visible;
44
- position: relative;
45
- padding: 2px;
46
- margin: 8px 0;
47
- box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
48
- }
49
-
50
- &__dashfull {
51
- width: 100%;
52
- background: var(--item-color);
53
- border-radius: 6px;
54
- border: 1px solid #dadce0;
55
- box-sizing: border-box;
56
- overflow: visible;
57
- position: relative;
58
- padding: 20px;
59
- margin: 8px 0;
60
- box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
61
- }
62
-
63
- &__subrow {
64
- width: 100%;
65
- display: flex;
66
- flex-wrap: wrap;
67
- height: auto;
68
- gap: 0.5rem;
69
- }
70
-
71
- &__subnav {
72
- flex: 1;
73
- background: rgba(var(--item-color-rgb), 1.01);
74
- border-radius: var(--br);
75
- border: 1px solid rgba(var(--item-color-rgb), 1.15);
76
- box-sizing: border-box;
77
- padding: 5px;
78
- margin: 8px 0;
79
- height: auto;
80
- box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
81
-
82
- > ul {
83
- width: 100%;
84
- list-style: none;
85
- padding: 0;
86
- margin: 0;
87
- display: flex;
88
- flex-wrap: wrap;
89
-
90
- li {
91
- width: 100%;
92
- margin-bottom: 3px;
93
-
94
- a {
95
- width: 100%;
96
- padding: 8px 20px;
97
- box-sizing: border-box;
98
- display: block;
99
- text-decoration: none;
100
- background: rgba(var(--primary-color-rgb), 0.05);
101
- color: var(--primary-color);
102
- border-radius: 5px;
103
- transition: background 0.25s
104
- cubic-bezier(0.25, 0.8, 0.25, 1);
105
- outline: none;
106
- cursor: pointer;
107
- }
108
-
109
- &:hover {
110
- a {
111
- background: var(--primary-color);
112
- color: var(--tertiary-color);
113
- }
114
- }
115
-
116
- .subactive {
117
- font-weight: 700;
118
- background: var(--primary-color);
119
- color: var(--tertiary-color);
120
- }
121
- }
122
- }
123
- }
124
-
125
- &__minheight {
126
- min-height: 300px;
127
- }
128
-
129
- .noborder {
130
- border: none !important;
131
- }
132
-
133
- &__subcontent {
134
- flex: 0 1 80%;
135
- background: var(--item-color);
136
- border-radius: var(--br);
137
- border: 1px solid rgba(var(--item-color-rgb), 1.15);
138
- box-sizing: border-box;
139
- padding: 2px;
140
- margin: 8px 0;
141
- height: auto;
142
- position: relative;
143
- box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
144
-
145
- h2 {
146
- color: var(--primary-color);
147
- font-size: 1.35em;
148
- padding: 0;
149
- margin: 0 0 30px 0;
150
- }
151
- }
1
+ .grid__row {
2
+ width: 100%;
3
+ display: flex;
4
+ align-items: flex-start;
5
+ flex-wrap: nowrap;
6
+ height: auto;
7
+ gap: 1rem;
8
+ }
9
+
10
+ .grid__three {
11
+ width: 33%;
12
+ background: var(--item-color);
13
+ border-radius: var(--br);
14
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
15
+ box-sizing: border-box;
16
+ overflow: visible;
17
+ position: relative;
18
+ padding: 20px;
19
+ margin: 8px 0;
20
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
21
+ }
22
+
23
+ .grid__half {
24
+ width: 50%;
25
+ background: var(--item-color);
26
+ border-radius: 6px;
27
+ border: 1px solid #dadce0;
28
+ box-sizing: border-box;
29
+ overflow: visible;
30
+ position: relative;
31
+ padding: 20px;
32
+ margin: 8px 0;
33
+ box-shadow: 0 4px 0 rgba(var(--primary-color), 0.05);
34
+ }
35
+
36
+ .grid__full {
37
+ width: 100%;
38
+ background: var(--item-color);
39
+ border-radius: var(--br);
40
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
41
+ box-sizing: border-box;
42
+ overflow: visible;
43
+ position: relative;
44
+ padding: 2px;
45
+ margin: 8px 0;
46
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
47
+ }
48
+
49
+ .grid__dashfull {
50
+ width: 100%;
51
+ background: var(--item-color);
52
+ border-radius: 6px;
53
+ border: 1px solid #dadce0;
54
+ box-sizing: border-box;
55
+ overflow: visible;
56
+ position: relative;
57
+ padding: 20px;
58
+ margin: 8px 0;
59
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
60
+ }
61
+
62
+ .grid__subrow {
63
+ width: 100%;
64
+ display: flex;
65
+ flex-wrap: wrap;
66
+ height: auto;
67
+ gap: 0.5rem;
68
+ }
69
+
70
+ .grid__subnav {
71
+ flex: 1;
72
+ background: rgba(var(--item-color-rgb), 1.01);
73
+ border-radius: var(--br);
74
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
75
+ box-sizing: border-box;
76
+ padding: 5px;
77
+ margin: 8px 0;
78
+ height: auto;
79
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
80
+ }
81
+
82
+ .grid__subnav > ul {
83
+ width: 100%;
84
+ list-style: none;
85
+ padding: 0;
86
+ margin: 0;
87
+ display: flex;
88
+ flex-wrap: wrap;
89
+ }
90
+
91
+ .grid__subnav > ul li {
92
+ width: 100%;
93
+ margin-bottom: 3px;
94
+ }
95
+
96
+ .grid__subnav > ul li a {
97
+ width: 100%;
98
+ padding: 8px 20px;
99
+ box-sizing: border-box;
100
+ display: block;
101
+ text-decoration: none;
102
+ background: rgba(var(--primary-color-rgb), 0.05);
103
+ color: var(--primary-color);
104
+ border-radius: 5px;
105
+ transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
106
+ outline: none;
107
+ cursor: pointer;
108
+ }
109
+
110
+ .grid__subnav > ul li:hover a {
111
+ background: var(--primary-color);
112
+ color: var(--tertiary-color);
113
+ }
114
+
115
+ .grid__subnav > ul li .subactive {
116
+ font-weight: 700;
117
+ background: var(--primary-color);
118
+ color: var(--tertiary-color);
119
+ }
120
+
121
+ .grid__minheight {
122
+ min-height: 300px;
123
+ }
124
+
125
+ .noborder {
126
+ border: none !important;
127
+ }
128
+
129
+ .grid__subcontent {
130
+ flex: 0 1 80%;
131
+ background: var(--item-color);
132
+ border-radius: var(--br);
133
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
134
+ box-sizing: border-box;
135
+ padding: 2px;
136
+ margin: 8px 0;
137
+ height: auto;
138
+ position: relative;
139
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
140
+ }
141
+
142
+ .grid__subcontent h2 {
143
+ color: var(--primary-color);
144
+ font-size: 1.35em;
145
+ padding: 0;
146
+ margin: 0 0 30px 0;
152
147
  }
153
148
 
154
149
  .crmtitle {
@@ -160,37 +155,37 @@
160
155
  border-radius: var(--br);
161
156
  border: 1px solid rgba(var(--item-color-rgb), 1.15);
162
157
  position: relative;
158
+ }
163
159
 
164
- h1 {
165
- font-weight: 700;
166
- font-size: 1.45em;
167
- margin: 0;
168
- padding: 0.65rem 0;
160
+ .crmtitle h1 {
161
+ font-weight: 700;
162
+ font-size: 1.45em;
163
+ margin: 0;
164
+ padding: 0.65rem 0;
165
+ }
169
166
 
170
- a {
171
- text-decoration: none;
172
- color: rgba(var(--secondary-color-rgb), 1.1);
173
- font-weight: 300;
174
- }
167
+ .crmtitle h1 a {
168
+ text-decoration: none;
169
+ color: rgba(var(--secondary-color-rgb), 1.1);
170
+ font-weight: 300;
171
+ }
175
172
 
176
- svg {
177
- color: rgba(var(--primary-color-rgb), 0.25);
178
- position: relative;
179
- top: 2px;
180
- margin: 0 0.25rem;
181
- }
182
- }
173
+ .crmtitle h1 svg {
174
+ color: rgba(var(--primary-color-rgb), 0.25);
175
+ position: relative;
176
+ top: 2px;
177
+ margin: 0 0.25rem;
183
178
  }
184
179
 
185
180
  .titleInfo {
186
181
  position: absolute;
187
182
  right: 2em;
188
183
  top: 24px;
184
+ }
189
185
 
190
- span {
191
- font-size: 0.875em;
192
- color: rgba(var(--paragraph-color-rgb), 0.65);
193
- }
186
+ .titleInfo span {
187
+ font-size: 0.875em;
188
+ color: rgba(var(--paragraph-color-rgb), 0.65);
194
189
  }
195
190
 
196
191
  .btn {
@@ -209,12 +204,12 @@
209
204
  outline: none;
210
205
  transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
211
206
  font-size: 1.25em;
207
+ }
212
208
 
213
- &:hover {
214
- color: var(--primary-color);
215
- background: var(--highlight-color);
216
- border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
217
- }
209
+ .btn:hover {
210
+ color: var(--primary-color);
211
+ background: var(--highlight-color);
212
+ border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
218
213
  }
219
214
 
220
215
  .polActions {
@@ -222,11 +217,11 @@
222
217
  bottom: 15px;
223
218
  right: 20px;
224
219
  width: auto;
220
+ }
225
221
 
226
- button {
227
- display: block;
228
- float: left;
229
- padding: 0.35em 1em;
230
- margin: 0 0.15em;
231
- }
222
+ .polActions button {
223
+ display: block;
224
+ float: left;
225
+ padding: 0.35em 1em;
226
+ margin: 0 0.15em;
232
227
  }
package/components/crm/generic/styles/GenericMain.module.css ADDED
@@ -0,0 +1,77 @@
1
+ .header {
2
+ background: var(--primary-color);
3
+ color: var(--primary-color);
4
+ position: fixed;
5
+ top: 0;
6
+ width: 100%;
7
+ z-index: 995;
8
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
9
+ }
10
+
11
+ .content {
12
+ display: flex;
13
+ flex: 1;
14
+ flex-direction: column;
15
+ background: var(--bg);
16
+
17
+ .content-header {
18
+ background: rgba(var(--tertiary-color-rgb), 1.1);
19
+ border-bottom: 1px solid rgba(0, 0, 0, 0.14);
20
+ box-sizing: border-box;
21
+ padding: 1em;
22
+ height: 52.5px;
23
+ box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.5);
24
+ display: flex;
25
+ flex-wrap: nowrap;
26
+ justify-content: space-between;
27
+ }
28
+
29
+ .content-title {
30
+ width: 40%;
31
+
32
+ h1 {
33
+ padding: 0;
34
+ margin: 0;
35
+ font-size: 1em;
36
+ line-height: 1.25;
37
+ text-transform: uppercase;
38
+ color: var(--primary-color);
39
+ letter-spacing: -0.025em;
40
+ }
41
+ }
42
+
43
+ .content-actions {
44
+ width: 40%;
45
+
46
+ ul {
47
+ display: flex;
48
+ padding: 0;
49
+ margin: 0;
50
+ list-style: none;
51
+ justify-content: flex-end;
52
+
53
+ li {
54
+ padding: 0 10px;
55
+ text-align: center;
56
+
57
+ i {
58
+ font-size: 1.25em;
59
+ }
60
+
61
+ a {
62
+ text-decoration: none;
63
+ color: var(--paragraph-color);
64
+ }
65
+ }
66
+ }
67
+ }
68
+
69
+ .content-main {
70
+ background: var(--bg);
71
+ flex: 1;
72
+ }
73
+ }
74
+
75
+ .padding {
76
+ padding: 5em 1em 1em 1em;
77
+ }
package/components/crm/styles/AsyncSelect.module.css CHANGED
@@ -1,12 +1,8 @@
1
- .visns__ms {
2
- input {
3
- &:hover {
4
- box-shadow: none !important;
5
- transition: box-shadow 0.15s linear !important;
6
- }
1
+ .visns__ms input:hover {
2
+ box-shadow: none !important;
3
+ transition: box-shadow 0.15s linear !important;
4
+ }
7
5
 
8
- &:focus {
9
- box-shadow: none !important;
10
- }
11
- }
6
+ .visns__ms input:focus {
7
+ box-shadow: none !important;
12
8
  }
package/components/crm/styles/Autocomplete.module.css CHANGED
@@ -37,8 +37,8 @@
37
37
  border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
38
38
  cursor: pointer;
39
39
  padding: 10px 10px;
40
+ }
40
41
 
41
- &:hover {
42
- background-color: rgba(var(--primary-color-rgb), 0.065);
43
- }
42
+ .AutocompletePlace-items:hover {
43
+ background-color: rgba(var(--primary-color-rgb), 0.065);
44
44
  }
package/components/crm/styles/DataGrid.module.css CHANGED
@@ -143,68 +143,68 @@
143
143
  overflow: visible;
144
144
  border-top-left-radius: var(--br);
145
145
  border-top-right-radius: var(--br);
146
+ }
146
147
 
147
- .modal {
148
- width: 100%;
149
- position: relative;
148
+ .modalwrap .modal {
149
+ width: 100%;
150
+ position: relative;
151
+ }
150
152
 
151
- &__header {
152
- width: 100%;
153
- background: var(--primary-color);
154
- border: 2px solid rgba(var(--primary-color-rgb), 1.05);
155
- border-top-left-radius: var(--br);
156
- border-top-right-radius: var(--br);
157
- box-sizing: border-box;
158
-
159
- h1 {
160
- color: var(--tertiary-color);
161
- margin: 0;
162
- padding: 0.75em 0.75em;
163
- font-size: 1.15em;
164
- }
165
-
166
- .modal__close {
167
- width: max-content;
168
- position: absolute;
169
- right: 5px;
170
- top: 5px;
171
- box-sizing: border-box;
172
- background: rgba(var(--primary-color-rgb), 1.08);
173
- cursor: pointer;
174
- padding: 8px 8px;
175
- margin: 0;
176
- outline: none;
177
- border: none;
178
- border-radius: var(--br);
179
- display: block;
180
- line-height: 1;
181
-
182
- svg {
183
- color: white;
184
- display: block;
185
- }
186
- }
187
- }
153
+ .modalwrap .modal__header {
154
+ width: 100%;
155
+ background: var(--primary-color);
156
+ border: 2px solid rgba(var(--primary-color-rgb), 1.05);
157
+ border-top-left-radius: var(--br);
158
+ border-top-right-radius: var(--br);
159
+ box-sizing: border-box;
160
+ }
188
161
 
189
- &__content {
190
- width: 100%;
191
- position: relative;
192
- padding: 0.25rem;
193
- box-sizing: border-box;
194
- border-top-left-radius: var(--br);
195
- border-top-right-radius: var(--br);
196
-
197
- .btn {
198
- background: var(--primary-color);
199
- border: 1px solid rgba(var(--primary-color-rgb), 1.05);
200
-
201
- &:hover {
202
- background: var(--highlight-color);
203
- color: var(--primary-color);
204
- }
205
- }
206
- }
207
- }
162
+ .modalwrap .modal__header h1 {
163
+ color: var(--tertiary-color);
164
+ margin: 0;
165
+ padding: 0.75em 0.75em;
166
+ font-size: 1.15em;
167
+ }
168
+
169
+ .modalwrap .modal__header .modal__close {
170
+ width: max-content;
171
+ position: absolute;
172
+ right: 5px;
173
+ top: 5px;
174
+ box-sizing: border-box;
175
+ background: rgba(var(--primary-color-rgb), 1.08);
176
+ cursor: pointer;
177
+ padding: 8px 8px;
178
+ margin: 0;
179
+ outline: none;
180
+ border: none;
181
+ border-radius: var(--br);
182
+ display: block;
183
+ line-height: 1;
184
+ }
185
+
186
+ .modalwrap .modal__header .modal__close svg {
187
+ color: white;
188
+ display: block;
189
+ }
190
+
191
+ .modalwrap .modal__content {
192
+ width: 100%;
193
+ position: relative;
194
+ padding: 0.25rem;
195
+ box-sizing: border-box;
196
+ border-top-left-radius: var(--br);
197
+ border-top-right-radius: var(--br);
198
+ }
199
+
200
+ .modalwrap .modal__content .btn {
201
+ background: var(--primary-color);
202
+ border: 1px solid rgba(var(--primary-color-rgb), 1.05);
203
+ }
204
+
205
+ .modalwrap .modal__content .btn:hover {
206
+ background: var(--highlight-color);
207
+ color: var(--primary-color);
208
208
  }
209
209
 
210
210
  .top--modal {