halleyx-ui-framework 4.1.8 → 4.2.0

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 (67) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/es/index.css +1 -1
  4. package/dist/es/index.js +1 -1
  5. package/dist/src/assets/icon-style.css +1 -1
  6. package/dist/src/assets/icons/icon-style(old).css +1 -1
  7. package/dist/src/assets/icons/icon-style.css +1 -1
  8. package/dist/src/assets/styles/accordion.scss +99 -99
  9. package/dist/src/assets/styles/base.scss +2 -1
  10. package/dist/src/assets/styles/breadcrumb.scss +15 -15
  11. package/dist/src/assets/styles/buttons.scss +4 -4
  12. package/dist/src/assets/styles/calendar.scss +343 -346
  13. package/dist/src/assets/styles/cards.scss +17 -16
  14. package/dist/src/assets/styles/colorPicker.scss +15 -15
  15. package/dist/src/assets/styles/colorpalette.scss +138 -139
  16. package/dist/src/assets/styles/common/var.scss +213 -215
  17. package/dist/src/assets/styles/componentlayout.scss +126 -128
  18. package/dist/src/assets/styles/contextMenu.scss +46 -47
  19. package/dist/src/assets/styles/customdropdown.scss +113 -115
  20. package/dist/src/assets/styles/dashboard.scss +764 -770
  21. package/dist/src/assets/styles/dataview.scss +203 -206
  22. package/dist/src/assets/styles/divider.scss +8 -8
  23. package/dist/src/assets/styles/dottedPagination.scss +1 -1
  24. package/dist/src/assets/styles/draggables.scss +36 -39
  25. package/dist/src/assets/styles/drawer.scss +68 -53
  26. package/dist/src/assets/styles/errorpage.scss +61 -64
  27. package/dist/src/assets/styles/fileupload.scss +199 -205
  28. package/dist/src/assets/styles/fonts.scss +14 -14
  29. package/dist/src/assets/styles/icon.scss +1 -1
  30. package/dist/src/assets/styles/imagegallery.scss +169 -167
  31. package/dist/src/assets/styles/importProgress.scss +1 -1
  32. package/dist/src/assets/styles/index.scss +18 -17
  33. package/dist/src/assets/styles/inputfields.scss +44 -46
  34. package/dist/src/assets/styles/inputitems.scss +315 -318
  35. package/dist/src/assets/styles/label.scss +48 -54
  36. package/dist/src/assets/styles/loaders.scss +1 -1
  37. package/dist/src/assets/styles/mixins/_var.scss +31 -37
  38. package/dist/src/assets/styles/mixins/functions.scss +7 -7
  39. package/dist/src/assets/styles/modalwindow.scss +100 -103
  40. package/dist/src/assets/styles/newtable.scss +10 -23
  41. package/dist/src/assets/styles/objectViewer.scss +80 -80
  42. package/dist/src/assets/styles/pagination.scss +6 -6
  43. package/dist/src/assets/styles/rating.scss +2 -2
  44. package/dist/src/assets/styles/scrollbar.scss +14 -14
  45. package/dist/src/assets/styles/search.scss +162 -169
  46. package/dist/src/assets/styles/select.scss +455 -480
  47. package/dist/src/assets/styles/sidebar.scss +2 -3
  48. package/dist/src/assets/styles/signup.scss +118 -128
  49. package/dist/src/assets/styles/slideControl.scss +1 -0
  50. package/dist/src/assets/styles/source_content.scss +13 -13
  51. package/dist/src/assets/styles/speeddial.scss +152 -163
  52. package/dist/src/assets/styles/style.css.map +12 -12
  53. package/dist/src/assets/styles/switch.scss +177 -189
  54. package/dist/src/assets/styles/tablev2.scss +140 -143
  55. package/dist/src/assets/styles/tabs.scss +48 -49
  56. package/dist/src/assets/styles/tag.scss +3 -3
  57. package/dist/src/assets/styles/texteditor.scss +165 -172
  58. package/dist/src/assets/styles/timeline.scss +384 -400
  59. package/dist/src/assets/styles/tooltip.scss +52 -72
  60. package/dist/src/assets/styles/tree.scss +13 -15
  61. package/dist/src/assets/styles/treeSelect.scss +8 -8
  62. package/dist/src/assets/styles/variables.scss +9 -9
  63. package/dist/src/assets/styles/visualbuilder.scss +362 -366
  64. package/dist/umd/index.umd.css +1 -1
  65. package/dist/umd/index.umd.js +1 -1
  66. package/dist/umd/index.umd.js.map +1 -1
  67. package/package.json +1 -1
package/dist/src/assets/styles/dashboard.scss CHANGED
@@ -1,638 +1,784 @@
1
1
  .dashboard-right-container {
2
2
  font-family: var(--hlx-font-type-content);
3
- .link{
4
- color:var(--hlx-color-primary);
5
- text-decoration: underline;
6
- cursor: pointer;
7
- }
8
- width: 100%;
9
- height: 100vh;
3
+ .link {
4
+ color: var(--hlx-color-primary);
5
+ text-decoration: underline;
6
+ cursor: pointer;
7
+ }
8
+ width: 100%;
9
+ height: 100vh;
10
+ display: flex;
11
+ flex-direction: row;
12
+ .profile-options {
13
+ background: #fff;
14
+ border: 1px solid var(--hlx-border-color);
15
+ border-radius: 10px;
16
+ box-shadow: 0px 0px 20px var(--hlx-border-color);
17
+ width: 200px;
18
+ max-height: 300px;
19
+ overflow: auto;
10
20
  display: flex;
11
- flex-direction: row;
12
- .profile-options {
13
- background: #fff;
14
- border: 1px solid var(--hlx-border-color);
15
- border-radius: 10px;
16
- box-shadow: 0px 0px 20px var(--hlx-border-color);
17
- width: 200px;
18
- max-height: 300px;
19
- overflow: auto;
20
- display: flex;
21
- position: absolute;
22
- top: 55px;
23
- right: 20px;
24
- z-index: 13;
21
+ position: absolute;
22
+ top: 55px;
23
+ right: 20px;
24
+ z-index: 13;
25
+ display: flex;
26
+ flex-direction: column;
27
+ .top {
28
+ width: 100%;
29
+ height: 25%;
30
+ border-bottom: 1px solid var(--hlx-border-color);
31
+ padding: 10px 20px 10px 20px;
25
32
  display: flex;
26
- flex-direction: column;
27
- .top {
28
- width: 100%;
29
- height: 25%;
30
- border-bottom: 1px solid var(--hlx-border-color);
31
- padding: 10px 20px 10px 20px;
33
+ flex-direction: row;
34
+ align-items: center;
35
+ div {
36
+ img {
37
+ width: 50px;
38
+ height: 50px;
39
+ border-radius: 100%;
40
+ margin-right: 20px;
41
+ margin-top: 7px;
42
+ }
43
+ }
44
+ .content {
32
45
  display: flex;
33
- flex-direction: row;
34
- align-items: center;
35
- div {
36
- img {
37
- width: 50px;
38
- height: 50px;
39
- border-radius: 100%;
40
- margin-right: 20px;
41
- margin-top: 7px;
42
- }
46
+ flex-direction: column;
47
+ .headerr {
48
+ font-size: var(--hlx-font-content-size-sm);
49
+ color: var(--hlx-text-color-primary);
50
+ font-weight: bold;
51
+ margin-bottom: 5px;
43
52
  }
44
- .content {
45
- display: flex;
46
- flex-direction: column;
47
- .headerr {
48
- font-size: var(--hlx-font-content-size-sm);
49
- color: var(--hlx-text-color-primary);
50
- font-weight: bold;
51
- margin-bottom: 5px;
52
- }
53
- .sub-header {
54
- font-size: var(--hlx-font-content-size-xs);
55
- color: var(--hlx-text-color-primary);
56
- }
53
+ .sub-header {
54
+ font-size: var(--hlx-font-content-size-xs);
55
+ color: var(--hlx-text-color-primary);
57
56
  }
58
57
  }
59
- .middle {
58
+ }
59
+ .middle {
60
+ width: 100%;
61
+ height: 60%;
62
+ border-bottom: 1px solid var(--hlx-border-color);
63
+ padding: 20px 20px 10px 20px;
64
+ .content {
65
+ display: flex;
66
+ flex-direction: row;
60
67
  width: 100%;
61
- height: 60%;
62
- border-bottom: 1px solid var(--hlx-border-color);
63
- padding: 20px 20px 10px 20px;
64
- .content {
65
- display: flex;
66
- flex-direction: row;
67
- width: 100%;
68
- margin-bottom: 10px;
69
- .icon {
70
- width: 10%;
71
- margin-right: 10px;
72
- i {
73
- color: var(--hlx-text-color-primary);
74
- font-size: var(--hlx-icon-size-md);
75
- }
76
- }
77
- .item {
78
- width: 90%;
68
+ margin-bottom: 10px;
69
+ .icon {
70
+ width: 10%;
71
+ margin-right: 10px;
72
+ i {
79
73
  color: var(--hlx-text-color-primary);
80
- font-size: var(--hlx-font-content-size-sm);
74
+ font-size: var(--hlx-icon-size-md);
81
75
  }
82
76
  }
77
+ .item {
78
+ width: 90%;
79
+ color: var(--hlx-text-color-primary);
80
+ font-size: var(--hlx-font-content-size-sm);
81
+ }
83
82
  }
84
- .bottom {
83
+ }
84
+ .bottom {
85
+ width: 100%;
86
+ height: 10%;
87
+ padding: 10px 20px 10px 20px;
88
+ .content {
89
+ display: flex;
90
+ flex-direction: row;
85
91
  width: 100%;
86
- height: 10%;
87
- padding: 10px 20px 10px 20px;
88
- .content {
89
- display: flex;
90
- flex-direction: row;
91
- width: 100%;
92
- .icon {
93
- width: 10%;
94
- margin-right: 10px;
95
- i {
96
- color: var(--hlx-text-color-primary);
97
- font-size: var(--hlx-icon-size-md);
98
- }
99
- }
100
- .item {
101
- width: 90%;
92
+ .icon {
93
+ width: 10%;
94
+ margin-right: 10px;
95
+ i {
102
96
  color: var(--hlx-text-color-primary);
103
- font-size: var(--hlx-font-content-size-sm);
97
+ font-size: var(--hlx-icon-size-md);
104
98
  }
105
99
  }
100
+ .item {
101
+ width: 90%;
102
+ color: var(--hlx-text-color-primary);
103
+ font-size: var(--hlx-font-content-size-sm);
104
+ }
106
105
  }
107
106
  }
108
- .notifications {
109
- background: #fff;
110
- border: 1px solid var(--hlx-border-color);
111
- border-radius: 10px;
112
- box-shadow: 0px 0px 20px var(--hlx-border-color);
113
- width: 300px;
114
- // max-height: 400px;
115
- display: flex;
116
- position: absolute;
117
- top: 55px;
118
- right: 20px;
119
- z-index: 13;
107
+ }
108
+ .notifications {
109
+ background: #fff;
110
+ border: 1px solid var(--hlx-border-color);
111
+ border-radius: 10px;
112
+ box-shadow: 0px 0px 20px var(--hlx-border-color);
113
+ width: 300px;
114
+ // max-height: 400px;
115
+ display: flex;
116
+ position: absolute;
117
+ top: 55px;
118
+ right: 20px;
119
+ z-index: 13;
120
+ display: flex;
121
+ flex-direction: column;
122
+ .top {
123
+ width: 100%;
124
+ height: 12%;
125
+ border-bottom: 1px solid var(--hlx-border-color);
126
+ padding: 10px 20px 10px 20px;
120
127
  display: flex;
121
- flex-direction: column;
122
- .top {
123
- width: 100%;
124
- height: 12%;
125
- border-bottom: 1px solid var(--hlx-border-color);
126
- padding: 10px 20px 10px 20px;
128
+ flex-direction: row;
129
+ align-items: center;
130
+ position: sticky;
131
+ font-weight: bold;
132
+ font-size: var(--hlx-font-content-size-sm);
133
+ color: var(--hlx-text-color-primary);
134
+ }
135
+ .middle {
136
+ width: 100%;
137
+ max-height: 300px;
138
+ overflow: auto;
139
+ border-bottom: 1px solid var(--hlx-border-color);
140
+
141
+ // padding: 20px 0px 10px 0px;
142
+
143
+ .contain {
127
144
  display: flex;
128
145
  flex-direction: row;
129
146
  align-items: center;
130
- position: sticky;
131
- font-weight: bold;
132
- font-size: var(--hlx-font-content-size-sm);
133
- color: var(--hlx-text-color-primary);
134
- }
135
- .middle {
136
- width: 100%;
137
- max-height: 300px;
138
- overflow: auto;
139
147
  border-bottom: 1px solid var(--hlx-border-color);
140
-
141
- // padding: 20px 0px 10px 0px;
142
-
143
- .contain {
144
- display: flex;
145
- flex-direction: row;
146
- align-items: center;
147
- border-bottom: 1px solid var(--hlx-border-color);
148
-
149
- .icon {
150
- margin: 10px 10px 10px 20px;
151
-
152
- i {
153
- font-size: var(--hlx-icon-size-sm);
154
- color: var(--hlx-text-color-primary);
155
- }
148
+
149
+ .icon {
150
+ margin: 10px 10px 10px 20px;
151
+
152
+ i {
153
+ font-size: var(--hlx-icon-size-sm);
154
+ color: var(--hlx-text-color-primary);
156
155
  }
157
- .content {
156
+ }
157
+ .content {
158
+ display: flex;
159
+ width: 100%;
160
+ flex-direction: column;
161
+ margin-right: 20px;
162
+ .headerr {
158
163
  display: flex;
164
+ flex-direction: row;
159
165
  width: 100%;
160
- flex-direction: column;
161
- margin-right: 20px;
162
- .headerr {
163
- display: flex;
164
- flex-direction: row;
165
- width: 100%;
166
- justify-content: space-between;
167
- margin-bottom: 5px;
168
- .main {
169
- font-size: var(--hlx-font-content-size-xs);
170
- color: var(--hlx-text-color-primary);
171
- font-weight: bold;
172
- }
173
- .sub {
174
- font-size: 10px;
175
- color: var(--hlx-text-color-primary);
176
- }
177
- }
178
- .sub-header {
166
+ justify-content: space-between;
167
+ margin-bottom: 5px;
168
+ .main {
179
169
  font-size: var(--hlx-font-content-size-xs);
180
170
  color: var(--hlx-text-color-primary);
171
+ font-weight: bold;
172
+ }
173
+ .sub {
174
+ font-size: 10px;
175
+ color: var(--hlx-text-color-primary);
181
176
  }
182
177
  }
178
+ .sub-header {
179
+ font-size: var(--hlx-font-content-size-xs);
180
+ color: var(--hlx-text-color-primary);
181
+ }
183
182
  }
184
183
  }
185
- .bottom {
186
- width: 100%;
187
- height: 12%;
188
- padding: 10px 20px 15px 20px;
189
- position: sticky;
184
+ }
185
+ .bottom {
186
+ width: 100%;
187
+ height: 12%;
188
+ padding: 10px 20px 15px 20px;
189
+ position: sticky;
190
+ display: flex;
191
+ flex-direction: row;
192
+ align-items: center;
193
+ justify-content: center;
194
+ position: sticky;
195
+ font-size: var(--hlx-font-content-size-sm);
196
+ color: var(--hlx-text-color-primary);
197
+ }
198
+ }
199
+
200
+ .dashboard-header {
201
+ width: 100%;
202
+ height: 60px;
203
+ background: #fff;
204
+ z-index: 10;
205
+ box-shadow: 0px 0px 20px var(--hlx-border-color);
206
+ position: absolute;
207
+ display: flex;
208
+ padding: 20px 20px;
209
+ align-items: center;
210
+ justify-content: space-between;
211
+ .searchh {
212
+ width: 25%;
213
+ // height: 30px;
214
+ }
215
+ .actions {
216
+ display: flex;
217
+ flex-direction: row;
218
+ align-items: center;
219
+ justify-content: flex-end;
220
+ width: 28%;
221
+ div {
222
+ margin-right: 20px;
223
+ i {
224
+ font-size: var(--hlx-icon-size-sm);
225
+ color: var(--hlx-text-color-primary);
226
+ cursor: pointer;
227
+ }
228
+ img {
229
+ height: 30px;
230
+ width: 30px;
231
+ border-radius: 100%;
232
+ cursor: pointer;
233
+ }
234
+ }
235
+ }
236
+ }
237
+
238
+ .card-title {
239
+ width: 100%;
240
+ display: flex;
241
+ align-items: center;
242
+ color: var(--hlx-text-color-primary);
243
+ font-size: var(--hlx-font-content-size);
244
+ font-weight: bold;
245
+
246
+ margin: 20px;
247
+ }
248
+ .card-title1 {
249
+ width: 100%;
250
+ display: flex;
251
+ align-items: center;
252
+ color: var(--hlx-text-color-primary);
253
+ font-size: var(--hlx-font-content-size);
254
+ font-weight: bold;
255
+
256
+ margin: 0 20px 20px 0;
257
+ }
258
+ .dashboard-body {
259
+ overflow-y: auto;
260
+ width: 100%;
261
+ height: 100%;
262
+ background: var(--hlx-border-color-light);
263
+ padding: 20px;
264
+ &-header-panel {
265
+ display: flex;
266
+ flex-direction: row;
267
+ width: 100%;
268
+ height: 120px;
269
+ .dashboard-body-header {
270
+ // width: 100%;
271
+
190
272
  display: flex;
191
- flex-direction: row;
192
273
  align-items: center;
193
- justify-content: center;
194
- position: sticky;
195
- font-size: var(--hlx-font-content-size-sm);
196
274
  color: var(--hlx-text-color-primary);
275
+ font-size: var(--hlx-font-content-size-lg);
276
+ font-weight: bold;
277
+ margin-top: 40px;
278
+ margin-right: 20px;
279
+ }
280
+ .dashboard-body-breadcrumb {
281
+ // width: 30%;
282
+ height: 30px;
283
+ border-left: 1px solid var(--hlx-border-color);
284
+ margin-top: 66px;
285
+ display: flex;
286
+ align-items: center;
287
+ padding-left: 20px !important;
197
288
  }
198
289
  }
199
-
200
- .dashboard-header {
290
+ .small-cards-container {
291
+ height: 200px;
201
292
  width: 100%;
202
- height: 60px;
203
- background: #fff;
204
- z-index: 10;
205
- box-shadow: 0px 0px 20px var(--hlx-border-color);
206
- position: absolute;
207
293
  display: flex;
208
- padding: 20px 20px;
209
- align-items: center;
210
294
  justify-content: space-between;
211
- .searchh {
212
- width: 25%;
213
- // height: 30px;
214
- }
215
- .actions {
295
+ margin-bottom: 20px;
296
+ .small-cards {
297
+ width: 200px;
298
+ height: 200px;
299
+ background: white;
300
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
301
+ border-radius: 10px;
302
+ // margin-right: 20px;
216
303
  display: flex;
217
- flex-direction: row;
304
+ flex-direction: column;
218
305
  align-items: center;
219
- justify-content: flex-end;
220
- width: 28%;
221
- div {
222
- margin-right: 20px;
306
+ padding-top: 20px;
307
+ padding-bottom: 20px;
308
+ .icon-bg {
309
+ width: 50px;
310
+ height: 50px;
311
+ display: flex;
312
+ align-items: center;
313
+ justify-content: center;
314
+ background: var(--hlx-border-color-dark);
315
+ border-radius: 100%;
316
+ margin-bottom: 10px;
223
317
  i {
224
318
  font-size: var(--hlx-icon-size-sm);
225
- color: var(--hlx-text-color-primary);
226
- cursor: pointer;
319
+ color: #fff;
227
320
  }
228
- img {
229
- height: 30px;
230
- width: 30px;
231
- border-radius: 100%;
232
- cursor: pointer;
321
+ }
322
+ .card-header {
323
+ font-size: 25px;
324
+ font-weight: 600;
325
+
326
+ color: var(--hlx-text-color-primary);
327
+ margin-bottom: 5px;
328
+ }
329
+ .card-sub-header {
330
+ font-size: var(--hlx-font-content-size);
331
+
332
+ color: var(--hlx-color-primary-dark);
333
+ // margin-bottom: 20px;
334
+ }
335
+ .card-percentage {
336
+ font-size: var(--hlx-font-content-size-sm);
337
+
338
+ color: var(--hlx-color-primary-dark);
339
+ display: flex;
340
+ align-items: center;
341
+ font-weight: bold;
342
+ i {
343
+ color: var(--hlx-color-primary-dark);
344
+ font-size: var(--hlx-icon-size-xs);
233
345
  }
234
346
  }
235
347
  }
236
348
  }
237
-
238
- .card-title {
349
+ .container-1 {
239
350
  width: 100%;
351
+ height: 450px;
352
+ margin-bottom: 20px;
240
353
  display: flex;
241
- align-items: center;
242
- color: var(--hlx-text-color-primary);
243
- font-size: var(--hlx-font-content-size);
244
- font-weight: bold;
245
-
246
- margin: 20px;
247
- }
248
- .card-title1 {
249
- width: 100%;
250
- display: flex;
251
- align-items: center;
252
- color: var(--hlx-text-color-primary);
253
- font-size: var(--hlx-font-content-size);
254
- font-weight: bold;
255
-
256
- margin: 0 20px 20px 0;
257
- }
258
- .dashboard-body {
259
- overflow-y: auto;
260
- width: 100%;
261
- height: 100%;
262
- background: var(--hlx-border-color-light);
263
- padding: 20px;
264
- &-header-panel {
265
- display: flex;
266
- flex-direction: row;
267
- width: 100%;
268
- height: 120px;
269
- .dashboard-body-header {
270
- // width: 100%;
271
-
354
+ flex-direction: row;
355
+ .left-container-1 {
356
+ width: 60%;
357
+ background: white;
358
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
359
+ border-radius: 10px;
360
+ margin-right: 20px;
361
+ }
362
+ .right-container-1 {
363
+ width: 40%;
364
+ background: white;
365
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
366
+ border-radius: 10px;
367
+ // margin-right: 20px;
368
+ .right-container-1-content {
272
369
  display: flex;
273
- align-items: center;
274
- color: var(--hlx-text-color-primary);
275
- font-size: var(--hlx-font-content-size-lg);
276
- font-weight: bold;
277
- margin-top: 40px;
278
- margin-right: 20px;
370
+ flex-direction: row;
371
+ justify-content: space-between;
372
+
373
+ position: relative;
374
+ bottom: 0;
375
+ margin-bottom: 10px;
376
+
377
+ &-metric {
378
+ margin-left: 20px;
379
+ font-size: var(--hlx-font-content-size-sm);
380
+ color: var(--hlx-text-color-primary);
381
+ }
382
+ &-count {
383
+ margin-right: 20px;
384
+ color: #fff;
385
+ font-weight: bold;
386
+ font-size: var(--hlx-font-content-size-xs);
387
+ // padding: 2px;
388
+ width: 30px;
389
+ border-radius: 20%;
390
+ display: flex;
391
+ justify-content: center;
392
+ align-items: center;
393
+ }
279
394
  }
280
- .dashboard-body-breadcrumb {
281
- // width: 30%;
282
- height: 30px;
283
- border-left: 1px solid var(--hlx-border-color);
284
- margin-top: 66px;
395
+ .chartoptions2-content {
396
+ position: relative;
397
+ top: -65%;
398
+ // left: 50%;
399
+ width: 50%;
400
+ margin: 0 auto;
401
+ width: 30%;
402
+ height: 100px;
285
403
  display: flex;
404
+ flex-direction: column;
286
405
  align-items: center;
287
- padding-left: 20px !important;
406
+ justify-content: center;
407
+ color: var(--hlx-text-color-primary);
408
+ &-total {
409
+ font-weight: bold;
410
+ font-size: var(--hlx-font-content-size-lg);
411
+ }
412
+ &-title {
413
+ font-size: var(--hlx-font-content-size-sm);
414
+ }
288
415
  }
289
416
  }
290
- .small-cards-container {
291
- height: 200px;
292
- width: 100%;
293
- display: flex;
294
- justify-content: space-between;
295
- margin-bottom: 20px;
296
- .small-cards {
297
- width: 200px;
298
- height: 200px;
299
- background: white;
300
- box-shadow: 0px 0px 5px var(--hlx-border-color);
301
- border-radius: 10px;
302
- // margin-right: 20px;
417
+ }
418
+ .container-2 {
419
+ width: 100%;
420
+ height: 300px;
421
+ margin-bottom: 20px;
422
+ display: flex;
423
+ flex-direction: row;
424
+ .left-container-2 {
425
+ width: 50%;
426
+ background: white;
427
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
428
+ border-radius: 10px;
429
+ margin-right: 20px;
430
+ .chartoptions2-content {
431
+ position: relative;
432
+ top: -53%;
433
+ right: 17%;
434
+ width: 50%;
435
+ margin: 0 auto;
436
+ // width: 30%;
437
+ height: 100px;
303
438
  display: flex;
304
439
  flex-direction: column;
305
440
  align-items: center;
306
- padding-top: 20px;
307
- padding-bottom: 20px;
308
- .icon-bg {
309
- width: 50px;
310
- height: 50px;
311
- display: flex;
312
- align-items: center;
313
- justify-content: center;
314
- background: var(--hlx-border-color-dark);
315
- border-radius: 100%;
316
- margin-bottom: 10px;
317
- i {
318
- font-size: var(--hlx-icon-size-sm);
319
- color: #fff;
320
- }
321
- }
322
- .card-header {
323
- font-size: 25px;
324
- font-weight: 600;
325
-
326
- color: var(--hlx-text-color-primary);
327
- margin-bottom: 5px;
328
- }
329
- .card-sub-header {
330
- font-size: var(--hlx-font-content-size);
331
-
332
- color: var(--hlx-color-primary-dark);
333
- // margin-bottom: 20px;
441
+ justify-content: center;
442
+ color: var(--hlx-text-color-primary);
443
+ &-total {
444
+ font-weight: bold;
445
+ font-size: var(--hlx-font-content-size-lg);
334
446
  }
335
- .card-percentage {
447
+ &-title {
336
448
  font-size: var(--hlx-font-content-size-sm);
337
-
338
- color: var(--hlx-color-primary-dark);
339
- display: flex;
340
- align-items: center;
341
- font-weight: bold;
342
- i {
343
- color: var(--hlx-color-primary-dark);
344
- font-size: var(--hlx-icon-size-xs);
345
- }
346
449
  }
347
450
  }
348
451
  }
349
- .container-1 {
350
- width: 100%;
351
- height: 450px;
352
- margin-bottom: 20px;
353
- display: flex;
354
- flex-direction: row;
355
- .left-container-1 {
356
- width: 60%;
357
- background: white;
358
- box-shadow: 0px 0px 5px var(--hlx-border-color);
359
- border-radius: 10px;
360
- margin-right: 20px;
361
- }
362
- .right-container-1 {
363
- width: 40%;
364
- background: white;
365
- box-shadow: 0px 0px 5px var(--hlx-border-color);
366
- border-radius: 10px;
367
- // margin-right: 20px;
368
- .right-container-1-content {
369
- display: flex;
370
- flex-direction: row;
371
- justify-content: space-between;
372
-
373
- position: relative;
374
- bottom: 0;
375
- margin-bottom: 10px;
376
-
377
- &-metric {
378
- margin-left: 20px;
452
+ .right-container-2 {
453
+ width: 50%;
454
+ background: white;
455
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
456
+ border-radius: 10px;
457
+ padding: 20px;
458
+ .row-container {
459
+ width: 100%;
460
+ tr {
461
+ height: 35px;
462
+
463
+ .flag {
464
+ width: 10%;
465
+ }
466
+ .label {
467
+ width: 20%;
468
+ text-overflow: ellipsis;
469
+
470
+ font-size: var(--hlx-font-content-size);
471
+ }
472
+ .percent-num {
473
+ width: 10%;
474
+
379
475
  font-size: var(--hlx-font-content-size-sm);
380
- color: var(--hlx-text-color-primary);
476
+ padding: 0 10px 0 10px;
381
477
  }
382
- &-count {
383
- margin-right: 20px;
384
- color: #fff;
385
- font-weight: bold;
386
- font-size: var(--hlx-font-content-size-xs);
387
- // padding: 2px;
388
- width: 30px;
389
- border-radius: 20%;
390
- display: flex;
391
- justify-content: center;
392
- align-items: center;
478
+ .percentage {
479
+ margin-right: 10px;
480
+ width: 60%;
481
+ .grey-container {
482
+ border-radius: 5px;
483
+ width: 100%;
484
+ height: 5px;
485
+ display: flex;
486
+ align-items: flex-start;
487
+ background: var(--hlx-border-color-dark);
488
+ .inner-container {
489
+ border-radius: 6px;
490
+ width: 30%;
491
+ background: var(--hlx-color-primary);
492
+ height: 100%;
493
+ }
494
+ }
393
495
  }
394
496
  }
395
- .chartoptions2-content {
396
- position: relative;
397
- top: -65%;
398
- // left: 50%;
399
- width: 50%;
400
- margin: 0 auto;
401
- width: 30%;
402
- height: 100px;
497
+ }
498
+ }
499
+ }
500
+ .container-3 {
501
+ width: 100%;
502
+ height: 500px;
503
+ margin-bottom: 20px;
504
+ display: flex;
505
+ flex-direction: row;
506
+ .left-container-3 {
507
+ width: 33%;
508
+ background: white;
509
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
510
+ border-radius: 10px;
511
+ margin-right: 20px;
512
+ padding: 20px;
513
+ .bottom-container {
514
+ width: 100%;
515
+ height: 20%;
516
+ border: 1px solid var(--hlx-border-color);
517
+ border-radius: 10px;
518
+ margin-top: 45px;
519
+ display: flex;
520
+ flex-direction: row;
521
+ justify-content: space-between;
522
+
523
+ padding: 15px;
524
+ .left-bottom-container {
403
525
  display: flex;
404
526
  flex-direction: column;
405
527
  align-items: center;
406
- justify-content: center;
407
- color: var(--hlx-text-color-primary);
408
- &-total {
409
- font-weight: bold;
528
+ .title {
410
529
  font-size: var(--hlx-font-content-size-lg);
530
+ color: var(--hlx-color-primary);
531
+ margin-bottom: 15px;
411
532
  }
412
- &-title {
533
+ .sub-title {
413
534
  font-size: var(--hlx-font-content-size-sm);
535
+ color: var(--hlx-text-color-primary);
414
536
  }
415
537
  }
416
- }
417
- }
418
- .container-2 {
419
- width: 100%;
420
- height: 300px;
421
- margin-bottom: 20px;
422
- display: flex;
423
- flex-direction: row;
424
- .left-container-2 {
425
- width: 50%;
426
- background: white;
427
- box-shadow: 0px 0px 5px var(--hlx-border-color);
428
- border-radius: 10px;
429
- margin-right: 20px;
430
- .chartoptions2-content {
431
- position: relative;
432
- top: -53%;
433
- right: 17%;
434
- width: 50%;
435
- margin: 0 auto;
436
- // width: 30%;
437
- height: 100px;
538
+ .right-bottom-container {
438
539
  display: flex;
439
540
  flex-direction: column;
440
541
  align-items: center;
441
- justify-content: center;
442
- color: var(--hlx-text-color-primary);
443
- &-total {
444
- font-weight: bold;
542
+ .title {
445
543
  font-size: var(--hlx-font-content-size-lg);
544
+ color: var(--hlx-color-primary)-light;
545
+ margin-bottom: 15px;
446
546
  }
447
- &-title {
547
+ .sub-title {
448
548
  font-size: var(--hlx-font-content-size-sm);
549
+ color: var(--hlx-text-color-primary);
449
550
  }
450
551
  }
451
552
  }
452
- .right-container-2 {
453
- width: 50%;
454
- background: white;
455
- box-shadow: 0px 0px 5px var(--hlx-border-color);
456
- border-radius: 10px;
457
- padding: 20px;
458
- .row-container {
553
+ }
554
+ .middle-container-3 {
555
+ padding: 20px;
556
+ width: 33%;
557
+ background: white;
558
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
559
+ border-radius: 10px;
560
+ margin-right: 20px;
561
+
562
+ color: var(--hlx-text-color-primary);
563
+
564
+ .cardd {
565
+ display: flex;
566
+ align-items: center;
567
+ justify-content: center;
568
+ flex-direction: column;
569
+ width: 70%;
570
+ margin: 40px;
571
+ }
572
+
573
+ .cardd .percent {
574
+ position: relative;
575
+ }
576
+
577
+ .cardd svg {
578
+ position: relative;
579
+ width: 210px;
580
+ height: 210px;
581
+ transform: rotate(-90deg);
582
+ }
583
+
584
+ .cardd svg circle {
585
+ width: 100%;
586
+ height: 100%;
587
+ fill: none;
588
+ stroke: #f0f0f0;
589
+ stroke-width: 10;
590
+ stroke-linecap: round;
591
+ }
592
+
593
+ .cardd svg circle:last-of-type {
594
+ stroke-dasharray: 625px;
595
+ stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
596
+ stroke: var(--hlx-color-primary);
597
+ }
598
+
599
+ .cardd .number {
600
+ position: absolute;
601
+ text-align: center;
602
+ top: 50%;
603
+ left: 50%;
604
+ transform: translate(-50%, -50%);
605
+ }
606
+
607
+ .cardd .number h3 {
608
+ font-weight: 600;
609
+ font-size: var(--hlx-font-content-size-lg);
610
+ }
611
+ .cardd .number h4 {
612
+ font-size: var(--hlx-font-content-size-sm);
613
+ }
614
+
615
+ .cardd .number h3 span {
616
+ font-size: var(--hlx-font-content-size-lg);
617
+ }
618
+
619
+ .cardd .title h2 {
620
+ margin: 25px 0 0;
621
+ }
622
+
623
+ .cardd:nth-child(1) svg circle:last-of-type {
624
+ stroke: var(--hlx-color-primary);
625
+ }
626
+ .bottom-container {
627
+ display: flex;
628
+ flex-direction: column;
629
+ width: 100%;
630
+ margin-top: 20px;
631
+ font-size: var(--hlx-font-content-size-sm);
632
+
633
+ .top {
634
+ display: flex;
635
+ flex-direction: row;
636
+ justify-content: space-between;
459
637
  width: 100%;
460
- tr {
461
- height: 35px;
462
-
463
- .flag {
464
- width: 10%;
465
- }
466
- .label {
467
- width: 20%;
468
- text-overflow: ellipsis;
469
-
470
- font-size: var(--hlx-font-content-size);
471
- }
472
- .percent-num {
473
- width: 10%;
474
-
475
- font-size: var(--hlx-font-content-size-sm);
476
- padding: 0 10px 0 10px;
477
- }
478
- .percentage {
479
- margin-right: 10px;
480
- width: 60%;
481
- .grey-container {
482
- border-radius: 5px;
483
- width: 100%;
484
- height: 5px;
485
- display: flex;
486
- align-items: flex-start;
487
- background: var(--hlx-border-color-dark);
488
- .inner-container {
489
- border-radius: 6px;
490
- width: 30%;
491
- background: var(--hlx-color-primary);
492
- height: 100%;
493
- }
494
- }
638
+ }
639
+ .bottom {
640
+ .grey-container {
641
+ border-radius: 5px;
642
+ width: 100%;
643
+ height: 5px;
644
+ display: flex;
645
+ align-items: flex-start;
646
+ background: var(--hlx-border-color-dark);
647
+ .inner-container {
648
+ border-radius: 6px;
649
+ width: 30%;
650
+ background: var(--hlx-color-primary);
651
+ height: 100%;
495
652
  }
496
653
  }
497
654
  }
498
655
  }
499
656
  }
500
- .container-3 {
501
- width: 100%;
502
- height: 500px;
503
- margin-bottom: 20px;
504
- display: flex;
505
- flex-direction: row;
506
- .left-container-3 {
507
- width: 33%;
508
- background: white;
509
- box-shadow: 0px 0px 5px var(--hlx-border-color);
510
- border-radius: 10px;
511
- margin-right: 20px;
512
- padding: 20px;
513
- .bottom-container {
514
- width: 100%;
515
- height: 20%;
516
- border: 1px solid var(--hlx-border-color);
517
- border-radius: 10px;
518
- margin-top: 45px;
657
+ .right-container-3 {
658
+ width: 33%;
659
+ background: white;
660
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
661
+ border-radius: 10px;
662
+ padding: 20px;
663
+ // margin-right: 20px;
664
+ .map {
665
+ display: flex;
666
+ flex-direction: row;
667
+ justify-content: space-between;
668
+ margin-bottom: 39%;
669
+ .tool {
670
+ width: 10%;
671
+ height: 70px;
672
+ // background: red;
519
673
  display: flex;
520
- flex-direction: row;
521
- justify-content: space-between;
522
-
523
- padding: 15px;
524
- .left-bottom-container {
674
+ flex-direction: column;
675
+ div {
676
+ background: var(--hlx-text-color-primary);
677
+ height: 50%;
678
+ width: 100%;
679
+ margin-bottom: 10px;
525
680
  display: flex;
526
- flex-direction: column;
527
681
  align-items: center;
528
- .title {
529
- font-size: var(--hlx-font-content-size-lg);
530
- color: var(--hlx-color-primary);
531
- margin-bottom: 15px;
532
- }
533
- .sub-title {
534
- font-size: var(--hlx-font-content-size-sm);
535
- color: var(--hlx-text-color-primary);
682
+ justify-content: center;
683
+ border-radius: 5px;
684
+ i {
685
+ font-size: var(--hlx-icon-size-xs);
686
+ color: #fff;
536
687
  }
537
688
  }
538
- .right-bottom-container {
689
+ }
690
+ .mapp {
691
+ display: flex;
692
+ position: relative;
693
+ flex-direction: row;
694
+ width: 100%;
695
+ height: 70%;
696
+ overflow: scroll;
697
+ #canvas {
698
+ width: 100%;
699
+ height: 100%;
700
+ }
701
+ }
702
+ }
703
+ .bottom-container {
704
+ display: flex;
705
+ flex-direction: column;
706
+ width: 100%;
707
+ margin-top: 20px;
708
+ font-size: var(--hlx-font-content-size-sm);
709
+
710
+ .top {
711
+ display: flex;
712
+ flex-direction: row;
713
+ justify-content: space-between;
714
+ width: 100%;
715
+ }
716
+ .bottom {
717
+ .grey-container {
718
+ border-radius: 5px;
719
+ width: 100%;
720
+ height: 5px;
539
721
  display: flex;
540
- flex-direction: column;
541
- align-items: center;
542
- .title {
543
- font-size: var(--hlx-font-content-size-lg);
544
- color: var(--hlx-color-primary)-light;
545
- margin-bottom: 15px;
546
- }
547
- .sub-title {
548
- font-size: var(--hlx-font-content-size-sm);
549
- color: var(--hlx-text-color-primary);
722
+ align-items: flex-start;
723
+ background: var(--hlx-border-color-dark);
724
+ .inner-container {
725
+ border-radius: 6px;
726
+ width: 30%;
727
+ background: var(--hlx-color-primary);
728
+ height: 100%;
550
729
  }
551
730
  }
552
731
  }
553
732
  }
554
- .middle-container-3 {
555
- padding: 20px;
556
- width: 33%;
733
+ }
734
+ }
735
+ .container-4 {
736
+ width: 100%;
737
+ height: 400px;
738
+ margin-bottom: 20px;
739
+ display: flex;
740
+ flex-direction: row;
741
+ .left-container-4 {
742
+ display: flex;
743
+ flex-direction: column;
744
+ width: 33%;
745
+ margin-right: 20px;
746
+ .left-container-4-1 {
747
+ width: 100%;
748
+ height: 50%;
557
749
  background: white;
558
750
  box-shadow: 0px 0px 5px var(--hlx-border-color);
559
751
  border-radius: 10px;
560
- margin-right: 20px;
561
-
562
-
563
- color: var(--hlx-text-color-primary);
564
-
565
- .cardd {
752
+ display: flex;
753
+ flex-direction: column;
754
+ padding: 20px;
755
+ .icon {
756
+ background: var(--hlx-color-primary);
757
+ width: 40px;
758
+ height: 40px;
759
+ border-radius: 7px;
760
+ margin-bottom: 20px;
566
761
  display: flex;
567
762
  align-items: center;
568
763
  justify-content: center;
569
- flex-direction: column;
570
- width: 70%;
571
- margin: 40px;
572
- }
573
-
574
- .cardd .percent {
575
- position: relative;
576
- }
577
-
578
- .cardd svg {
579
- position: relative;
580
- width: 210px;
581
- height: 210px;
582
- transform: rotate(-90deg);
583
- }
584
-
585
- .cardd svg circle {
586
- width: 100%;
587
- height: 100%;
588
- fill: none;
589
- stroke: #f0f0f0;
590
- stroke-width: 10;
591
- stroke-linecap: round;
592
- }
593
-
594
- .cardd svg circle:last-of-type {
595
- stroke-dasharray: 625px;
596
- stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
597
- stroke: var(--hlx-color-primary);
598
- }
599
-
600
- .cardd .number {
601
- position: absolute;
602
- text-align: center;
603
- top: 50%;
604
- left: 50%;
605
- transform: translate(-50%, -50%);
606
-
607
- }
608
-
609
- .cardd .number h3 {
610
- font-weight: 600;
611
- font-size: var(--hlx-font-content-size-lg);
612
- }
613
- .cardd .number h4 {
614
- font-size: var(--hlx-font-content-size-sm);
764
+ i {
765
+ color: #fff;
766
+ font-size: var(--hlx-icon-size-sm);
767
+ }
615
768
  }
616
-
617
- .cardd .number h3 span {
769
+ .count {
618
770
  font-size: var(--hlx-font-content-size-lg);
619
- }
620
-
621
- .cardd .title h2 {
622
- margin: 25px 0 0;
623
- }
624
-
625
- .cardd:nth-child(1) svg circle:last-of-type {
626
- stroke: var(--hlx-color-primary);
771
+ color: var(--hlx-text-color-primary);
772
+ font-weight: bold;
773
+ margin-bottom: 15px;
627
774
  }
628
775
  .bottom-container {
629
776
  display: flex;
630
777
  flex-direction: column;
631
778
  width: 100%;
632
- margin-top: 20px;
779
+ margin-top: 10px;
633
780
  font-size: var(--hlx-font-content-size-sm);
634
-
635
-
781
+
636
782
  .top {
637
783
  display: flex;
638
784
  flex-direction: row;
@@ -640,6 +786,7 @@
640
786
  width: 100%;
641
787
  }
642
788
  .bottom {
789
+ margin-bottom: 10px;
643
790
  .grey-container {
644
791
  border-radius: 5px;
645
792
  width: 100%;
@@ -657,60 +804,41 @@
657
804
  }
658
805
  }
659
806
  }
660
- .right-container-3 {
661
- width: 33%;
807
+ .left-container-4-2 {
808
+ padding: 20px;
809
+ width: 100%;
810
+ height: 50%;
662
811
  background: white;
663
812
  box-shadow: 0px 0px 5px var(--hlx-border-color);
664
813
  border-radius: 10px;
665
- padding: 20px;
666
- // margin-right: 20px;
667
- .map {
814
+ margin-top: 20px;
815
+ .icon {
816
+ background: var(--hlx-color-primary);
817
+ width: 40px;
818
+ height: 40px;
819
+ border-radius: 7px;
820
+ margin-bottom: 20px;
668
821
  display: flex;
669
- flex-direction: row;
670
- justify-content: space-between;
671
- margin-bottom: 39%;
672
- .tool {
673
- width: 10%;
674
- height: 70px;
675
- // background: red;
676
- display: flex;
677
- flex-direction: column;
678
- div {
679
- background: var(--hlx-text-color-primary);
680
- height: 50%;
681
- width: 100%;
682
- margin-bottom: 10px;
683
- display: flex;
684
- align-items: center;
685
- justify-content: center;
686
- border-radius: 5px;
687
- i {
688
- font-size: var(--hlx-icon-size-xs);
689
- color: #fff;
690
- }
691
- }
692
- }
693
- .mapp {
694
- display: flex;
695
- position: relative;
696
- flex-direction: row;
697
- width: 100%;
698
- height: 70%;
699
- overflow: scroll;
700
- #canvas {
701
- width: 100%;
702
- height: 100%;
703
- }
822
+ align-items: center;
823
+ justify-content: center;
824
+ i {
825
+ color: #fff;
826
+ font-size: var(--hlx-icon-size-sm);
704
827
  }
705
828
  }
829
+ .count {
830
+ font-size: var(--hlx-font-content-size-lg);
831
+ color: var(--hlx-text-color-primary);
832
+ font-weight: bold;
833
+ margin-bottom: 15px;
834
+ }
706
835
  .bottom-container {
707
836
  display: flex;
708
837
  flex-direction: column;
709
838
  width: 100%;
710
- margin-top: 20px;
839
+ margin-top: 10px;
711
840
  font-size: var(--hlx-font-content-size-sm);
712
-
713
-
841
+
714
842
  .top {
715
843
  display: flex;
716
844
  flex-direction: row;
@@ -718,6 +846,7 @@
718
846
  width: 100%;
719
847
  }
720
848
  .bottom {
849
+ margin-bottom: 10px;
721
850
  .grey-container {
722
851
  border-radius: 5px;
723
852
  width: 100%;
@@ -736,235 +865,100 @@
736
865
  }
737
866
  }
738
867
  }
739
- .container-4 {
740
- width: 100%;
741
- height: 400px;
742
- margin-bottom: 20px;
868
+ .middle-container-4 {
869
+ width: 33%;
870
+ background: white;
871
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
872
+ border-radius: 10px;
873
+ margin-right: 20px;
874
+ }
875
+ .right-container-4 {
743
876
  display: flex;
744
- flex-direction: row;
745
- .left-container-4 {
877
+ flex-direction: column;
878
+ width: 33%;
879
+ margin-bottom: 20px;
880
+ // margin-right: 20px;
881
+ .right-container-4-1 {
882
+ width: 100%;
883
+ height: 50%;
884
+ background: white;
885
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
886
+ border-radius: 10px;
746
887
  display: flex;
888
+ padding: 20px;
747
889
  flex-direction: column;
748
- width: 33%;
749
- margin-right: 20px;
750
- .left-container-4-1 {
751
- width: 100%;
752
- height: 50%;
753
- background: white;
754
- box-shadow: 0px 0px 5px var(--hlx-border-color);
755
- border-radius: 10px;
756
- display: flex;
757
- flex-direction: column;
758
- padding: 20px;
759
- .icon {
760
- background: var(--hlx-color-primary);
761
- width: 40px;
762
- height: 40px;
763
- border-radius: 7px;
764
- margin-bottom: 20px;
765
- display: flex;
766
- align-items: center;
767
- justify-content: center;
768
- i {
769
- color: #fff;
770
- font-size: var(--hlx-icon-size-sm);
771
- }
772
- }
773
- .count {
774
- font-size: var(--hlx-font-content-size-lg);
775
- color: var(--hlx-text-color-primary);
776
- font-weight: bold;
777
- margin-bottom: 15px;
778
- }
779
- .bottom-container {
780
- display: flex;
781
- flex-direction: column;
782
- width: 100%;
783
- margin-top: 10px;
784
- font-size: var(--hlx-font-content-size-sm);
785
-
786
-
787
- .top {
788
- display: flex;
789
- flex-direction: row;
790
- justify-content: space-between;
791
- width: 100%;
792
- }
793
- .bottom {
794
- margin-bottom: 10px;
795
- .grey-container {
796
- border-radius: 5px;
797
- width: 100%;
798
- height: 5px;
799
- display: flex;
800
- align-items: flex-start;
801
- background: var(--hlx-border-color-dark);
802
- .inner-container {
803
- border-radius: 6px;
804
- width: 30%;
805
- background: var(--hlx-color-primary);
806
- height: 100%;
807
- }
808
- }
809
- }
810
- }
890
+ margin-bottom: 20px;
891
+ .title {
892
+ font-size: var(--hlx-font-content-size-sm);
893
+ color: var(--hlx-text-color-primary);
811
894
  }
812
- .left-container-4-2 {
813
- padding: 20px;
814
- width: 100%;
815
- height: 50%;
816
- background: white;
817
- box-shadow: 0px 0px 5px var(--hlx-border-color);
818
- border-radius: 10px;
819
- margin-top: 20px;
820
- .icon {
821
- background: var(--hlx-color-primary);
822
- width: 40px;
823
- height: 40px;
824
- border-radius: 7px;
825
- margin-bottom: 20px;
826
- display: flex;
827
- align-items: center;
828
- justify-content: center;
829
- i {
830
- color: #fff;
831
- font-size: var(--hlx-icon-size-sm);
832
- }
833
- }
834
- .count {
835
- font-size: var(--hlx-font-content-size-lg);
836
- color: var(--hlx-text-color-primary);
837
- font-weight: bold;
838
- margin-bottom: 15px;
839
- }
840
- .bottom-container {
841
- display: flex;
842
- flex-direction: column;
843
- width: 100%;
844
- margin-top: 10px;
845
- font-size: var(--hlx-font-content-size-sm);
846
-
847
-
848
- .top {
849
- display: flex;
850
- flex-direction: row;
851
- justify-content: space-between;
852
- width: 100%;
853
- }
854
- .bottom {
855
- margin-bottom: 10px;
856
- .grey-container {
857
- border-radius: 5px;
858
- width: 100%;
859
- height: 5px;
860
- display: flex;
861
- align-items: flex-start;
862
- background: var(--hlx-border-color-dark);
863
- .inner-container {
864
- border-radius: 6px;
865
- width: 30%;
866
- background: var(--hlx-color-primary);
867
- height: 100%;
868
- }
869
- }
870
- }
895
+ .count {
896
+ color: var(--hlx-text-color-primary);
897
+ font-weight: 600;
898
+ font-size: var(--hlx-font-content-size-lg);
899
+ margin: 10px 20px 0 0;
900
+ .sub-count {
901
+ font-size: var(--hlx-font-content-size-xs);
902
+ color: var(--hlx-color-success);
903
+ margin-left: 10px;
871
904
  }
872
905
  }
873
906
  }
874
- .middle-container-4 {
875
- width: 33%;
907
+ .right-container-4-2 {
908
+ width: 100%;
909
+ height: 50%;
876
910
  background: white;
877
911
  box-shadow: 0px 0px 5px var(--hlx-border-color);
878
912
  border-radius: 10px;
879
- margin-right: 20px;
880
- }
881
- .right-container-4 {
913
+ margin-bottom: 20px;
882
914
  display: flex;
915
+ padding: 20px;
883
916
  flex-direction: column;
884
- width: 33%;
885
- margin-bottom: 20px;
886
- // margin-right: 20px;
887
- .right-container-4-1 {
888
- width: 100%;
889
- height: 50%;
890
- background: white;
891
- box-shadow: 0px 0px 5px var(--hlx-border-color);
892
- border-radius: 10px;
893
- display: flex;
894
- padding: 20px;
895
- flex-direction: column;
896
- margin-bottom: 20px;
897
- .title {
898
- font-size: var(--hlx-font-content-size-sm);
899
- color: var(--hlx-text-color-primary);
900
- }
901
- .count {
902
- color: var(--hlx-text-color-primary);
903
- font-weight: 600;
904
- font-size: var(--hlx-font-content-size-lg);
905
- margin: 10px 20px 0 0;
906
- .sub-count {
907
- font-size: var(--hlx-font-content-size-xs);
908
- color: var(--hlx-color-success);
909
- margin-left: 10px;
910
- }
911
- }
917
+ .title {
918
+ font-size: var(--hlx-font-content-size-sm);
919
+ color: var(--hlx-text-color-primary);
912
920
  }
913
- .right-container-4-2 {
914
- width: 100%;
915
- height: 50%;
916
- background: white;
917
- box-shadow: 0px 0px 5px var(--hlx-border-color);
918
- border-radius: 10px;
919
- margin-bottom: 20px;
920
- display: flex;
921
- padding: 20px;
922
- flex-direction: column;
923
- .title {
924
- font-size: var(--hlx-font-content-size-sm);
925
- color: var(--hlx-text-color-primary);
926
- }
927
- .count {
928
- color: var(--hlx-text-color-primary);
929
- font-weight: 600;
930
- font-size: var(--hlx-font-content-size-lg);
931
- margin: 10px 20px 0 0;
932
- .sub-count {
933
- font-size: var(--hlx-font-content-size-xs);
934
- color: #ff3642;
935
- margin-left: 10px;
936
- }
921
+ .count {
922
+ color: var(--hlx-text-color-primary);
923
+ font-weight: 600;
924
+ font-size: var(--hlx-font-content-size-lg);
925
+ margin: 10px 20px 0 0;
926
+ .sub-count {
927
+ font-size: var(--hlx-font-content-size-xs);
928
+ color: #ff3642;
929
+ margin-left: 10px;
937
930
  }
938
931
  }
939
932
  }
940
933
  }
941
- .container-5 {
942
- width: 100%;
943
- height: 570px;
944
- margin-bottom: 20px;
945
- display: flex;
946
- flex-direction: column;
947
- background: white;
948
- box-shadow: 0px 0px 5px var(--hlx-border-color);
949
- border-radius: 10px;
950
- padding: 20px;
951
- // overflow-y: auto;
952
- // overflow-x: hidden;
953
- }
954
934
  }
955
- footer {
956
- height: 60px;
935
+ .container-5 {
957
936
  width: 100%;
958
- font-size: var(--hlx-font-content-size-sm);
937
+ height: 570px;
938
+ margin-bottom: 20px;
959
939
  display: flex;
960
- align-items: center;
961
- justify-content: center;
940
+ flex-direction: column;
941
+ background: white;
942
+ box-shadow: 0px 0px 5px var(--hlx-border-color);
943
+ border-radius: 10px;
944
+ padding: 20px;
945
+ // overflow-y: auto;
946
+ // overflow-x: hidden;
962
947
  }
963
948
  }
964
-
965
- .component-description-link{
966
- color:var(--hlx-color-primary);
967
- text-decoration: underline;
968
- cursor: pointer;
949
+ footer {
950
+ height: 60px;
951
+ width: 100%;
969
952
  font-size: var(--hlx-font-content-size-sm);
970
- }
953
+ display: flex;
954
+ align-items: center;
955
+ justify-content: center;
956
+ }
957
+ }
958
+
959
+ .component-description-link {
960
+ color: var(--hlx-color-primary);
961
+ text-decoration: underline;
962
+ cursor: pointer;
963
+ font-size: var(--hlx-font-content-size-sm);
964
+ }