@annalib/anna-core 15.1.1 → 15.1.3

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.
@@ -0,0 +1,434 @@
1
+ @use "../anna-common-scss/fonts" as *;
2
+ @use "../anna-common-scss/colors" as *;
3
+ @use "sass:list";
4
+ @use "sass:map";
5
+
6
+ @mixin sticky-left($leftOffset, $zIndex) {
7
+ position: sticky;
8
+ left: $leftOffset;
9
+ z-index: $zIndex !important;
10
+ }
11
+
12
+ @mixin ellipsify(){
13
+ text-overflow: ellipsis;
14
+ overflow: hidden;
15
+ white-space: nowrap;
16
+ }
17
+
18
+ @mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0){
19
+
20
+ .table-container{
21
+ &::-webkit-scrollbar-track {
22
+ margin-top: $margin-top;
23
+ margin-left: $margin-left;
24
+ }
25
+ }
26
+ }
27
+
28
+ @mixin table-fixed-style($width: 100%){
29
+
30
+ table{
31
+ margin-bottom: 0;
32
+ table-layout: fixed;
33
+ width: $width;
34
+ }
35
+
36
+ }
37
+
38
+
39
+
40
+ @mixin table-header($sticky-left-map, $box-shadow-map, $bg-color: #ededed ){
41
+
42
+ $last-sticky-col: 0;
43
+ @if(list.length(map.keys($sticky-left-map)) > 0){
44
+ $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
45
+ }
46
+
47
+ .scroll-left-shadow-effect .header-row th:nth-of-type(#{$last-sticky-col}) {
48
+ border: none !important;
49
+ filter: drop-shadow(2px 0 2px $lightGray-4);
50
+ }
51
+
52
+ .header-row{
53
+
54
+ th{
55
+ background: $bg-color;
56
+ padding: 2px 8px;
57
+ line-height: normal;
58
+ position: sticky;
59
+ top: 0;
60
+ box-shadow: none !important;
61
+
62
+ .upper-label {
63
+ @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
64
+ color: $charcoal;
65
+ margin-bottom: 0;
66
+ }
67
+
68
+ .lower-label {
69
+ @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
70
+ color: $darkGray;
71
+ margin-bottom: 0;
72
+ }
73
+
74
+ div.row {
75
+ display: flex;
76
+ flex-wrap: nowrap;
77
+ justify-content: space-between;
78
+ align-items: center;
79
+ width: max-content;
80
+ }
81
+
82
+ div.sort-filter-container {
83
+ display: flex;
84
+ flex-wrap: nowrap;
85
+ align-items: center;
86
+ margin-left: $fs-4;
87
+ margin-right: auto;
88
+ }
89
+
90
+ span.mdi-filter-variant {
91
+ font-size: 13px !important;
92
+ top: -1px !important;
93
+ position: relative;
94
+ }
95
+ }
96
+
97
+ $box-shadow-start-index: map.get($box-shadow-map, "start-index");
98
+ $box-shadow-end-index: map.get($box-shadow-map, "end-index");
99
+ $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
100
+ $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
101
+ $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
102
+
103
+ @for $i from $box-shadow-start-index through $box-shadow-end-index {
104
+
105
+ @if($i == $box-shadow-start-index){
106
+ th:nth-of-type(#{$i}){
107
+ @if ($show-right-border-box-shadow){
108
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
109
+ }
110
+ @else{
111
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
112
+ }
113
+ }
114
+ }
115
+ @else if($i == $box-shadow-end-index){
116
+ th:nth-of-type(#{$i}){
117
+ @if ($show-right-border-box-shadow){
118
+ box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
119
+ }
120
+ @else {
121
+ box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
122
+ }
123
+ }
124
+ }
125
+ @else {
126
+ th:nth-of-type(#{$i}){
127
+ @if ($show-right-border-box-shadow){
128
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
129
+ }
130
+ @else{
131
+ box-shadow: inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
132
+ }
133
+ }
134
+ }
135
+
136
+ }
137
+
138
+ @each $columnNumber, $sticky-prop in $sticky-left-map {
139
+
140
+ $left-offset: map.get($sticky-prop, "left");
141
+ $z-index: map.get($sticky-prop, "z-index");
142
+
143
+ th:nth-of-type(#{$columnNumber}){
144
+ @include sticky-left($left-offset, $z-index);
145
+ }
146
+ }
147
+
148
+ }
149
+ }
150
+
151
+
152
+ @mixin total-row($sticky-top-left-map, $box-shadow-map, $bg-color: white){
153
+
154
+ $sticky-top: map.get($sticky-top-left-map, "top");
155
+ $sticky-left-map: map.get($sticky-top-left-map, "sticky-left");
156
+ $last-sticky-col: 0;
157
+
158
+ @if(list.length(map.keys($sticky-left-map)) > 0){
159
+ $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
160
+ }
161
+
162
+ .scroll-left-shadow-effect:not(.no-data-table) .total-row td:nth-of-type(#{$last-sticky-col}) {
163
+ filter: drop-shadow(2px 0 2px $lightGray-4);
164
+ }
165
+
166
+
167
+ .total-row{
168
+
169
+
170
+ td{
171
+ padding: 2px 8px;
172
+ background: $bg-color;
173
+ position: sticky;
174
+ top: $sticky-top !important;
175
+
176
+ .upper-label{
177
+ @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
178
+ color: $charcoal;
179
+ }
180
+
181
+ .lower-label{
182
+ @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
183
+ color: $darkGray;
184
+ }
185
+
186
+ br {
187
+ display: block;
188
+ content: "";
189
+ margin-top: -3px;
190
+ }
191
+
192
+ }
193
+
194
+ $box-shadow-start-index: map.get($box-shadow-map, "start-index");
195
+ $box-shadow-end-index: map.get($box-shadow-map, "end-index");
196
+ $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
197
+ $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
198
+ $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
199
+ $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
200
+ $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
201
+
202
+ @for $i from $box-shadow-start-index through $box-shadow-end-index {
203
+
204
+ @if($i == $box-shadow-start-index){
205
+ td:nth-of-type(#{$i}){
206
+ @if ($show-right-border-box-shadow){
207
+ box-shadow: inset 1px 0 0 0 $top-box-shadow-color,inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
208
+ }
209
+ @else{
210
+ box-shadow: inset 1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
211
+ }
212
+ }
213
+ }
214
+ @else if($i == $box-shadow-end-index){
215
+ td:nth-of-type(#{$i}){
216
+ @if ($show-right-border-box-shadow){
217
+ box-shadow: inset -1px 0 0 0 $top-box-shadow-color, inset 1px 0 0 0 $left-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
218
+ }
219
+ @else {
220
+ box-shadow: inset -1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
221
+ }
222
+ }
223
+ }
224
+ @else {
225
+ td:nth-of-type(#{$i}){
226
+ @if ($show-right-border-box-shadow){
227
+ box-shadow: inset 1px 0 0 0 $left-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
228
+ }
229
+ @else{
230
+ box-shadow: inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
231
+ }
232
+ }
233
+ }
234
+
235
+ }
236
+
237
+
238
+ @each $columnNumber, $sticky-prop in $sticky-left-map {
239
+
240
+ $left-offset: map.get($sticky-prop, "left");
241
+ $z-index: map.get($sticky-prop, "z-index");
242
+
243
+ td:nth-of-type(#{$columnNumber}){
244
+ @include sticky-left($left-offset, $z-index);
245
+ }
246
+ }
247
+
248
+
249
+ }
250
+ }
251
+
252
+
253
+ @mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white){
254
+
255
+ td{
256
+ cursor: pointer;
257
+ background: $bg-color;
258
+ box-shadow: none !important;
259
+
260
+ div:nth-child(1) {
261
+ color: #000;
262
+ @include ellipsify();
263
+ @include fonts(Roboto, 0.75rem, normal, normal, normal, normal, 0px);
264
+ }
265
+
266
+ div:nth-child(2) {
267
+ color: #a7a7a7;
268
+ @include ellipsify();
269
+ @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.3px);
270
+ }
271
+ }
272
+
273
+ $box-shadow-start-index: map.get($box-shadow-map, "start-index");
274
+ $box-shadow-end-index: map.get($box-shadow-map, "end-index");
275
+ $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
276
+ $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
277
+ $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
278
+
279
+ @for $i from $box-shadow-start-index through $box-shadow-end-index {
280
+
281
+ @if($i == $box-shadow-start-index){
282
+ td:nth-of-type(#{$i}){
283
+ @if ($show-right-border-box-shadow){
284
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
285
+ }
286
+ @else{
287
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
288
+ }
289
+ }
290
+ }
291
+ @else if($i == $box-shadow-end-index){
292
+ td:nth-of-type(#{$i}){
293
+ @if ($show-right-border-box-shadow){
294
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
295
+ }
296
+ @else {
297
+ box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
298
+ }
299
+ }
300
+ }
301
+ @else {
302
+ td:nth-of-type(#{$i}){
303
+ @if ($show-right-border-box-shadow){
304
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
305
+ }
306
+ @else{
307
+ box-shadow: inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
308
+ }
309
+ }
310
+ }
311
+
312
+ }
313
+
314
+ @each $columnNumber, $sticky-prop in $sticky-left-map {
315
+
316
+ $left-offset: map.get($sticky-prop, "left");
317
+ $z-index: map.get($sticky-prop, "z-index");
318
+
319
+ td:nth-of-type(#{$columnNumber}){
320
+ @include sticky-left($left-offset, $z-index);
321
+ }
322
+ }
323
+
324
+ }
325
+
326
+ @mixin table-data-shadow($columnNumber){
327
+ .scroll-left-shadow-effect:not(.no-data-table) td:nth-of-type(#{$columnNumber}) {
328
+ filter: drop-shadow(2px 0 1px $lightGray-4);
329
+ }
330
+ }
331
+
332
+ @mixin no-data-table($table-container-height, $box-shadow-map, $row-height-map: ()){
333
+
334
+ .table-container.no-data-table > div{
335
+ height: $table-container-height !important;
336
+ }
337
+
338
+ $box-shadow-start-index: map.get($box-shadow-map, "box-shadow-start-index");
339
+ $box-shadow-end-index: map.get($box-shadow-map, "box-shadow-end-index");
340
+ $box-shadow-color: map.get($box-shadow-map, "box-shadow-color");
341
+
342
+ tbody{
343
+
344
+ @if(map.has-key($row-height-map,"row-height")){
345
+ tr.no-border-tr{
346
+ height: map.get($row-height-map,"row-height") !important;
347
+ }
348
+ }
349
+
350
+ tr.no-border-tr:first-of-type{
351
+ @for $i from $box-shadow-start-index through $box-shadow-end-index {
352
+ td:nth-of-type(#{$i}){
353
+ @if ($i == $box-shadow-start-index){
354
+ box-shadow: inset 1px 0 0 0 $box-shadow-color !important;
355
+ }
356
+ @else if( $i == $box-shadow-end-index){
357
+ box-shadow: inset -1px 0 0 0 $box-shadow-color !important;
358
+ }
359
+ @else{
360
+ box-shadow: none !important;
361
+ }
362
+ }
363
+ }
364
+ }
365
+
366
+ tr.no-border-tr:last-of-type{
367
+ @for $i from $box-shadow-start-index through $box-shadow-end-index {
368
+ td:nth-of-type(#{$i}){
369
+ @if ($i == $box-shadow-start-index){
370
+ box-shadow: inset 1px -1px 0 0 $box-shadow-color !important;
371
+ }
372
+ @else if( $i == $box-shadow-end-index){
373
+ box-shadow: inset -1px -1px 0 0 $box-shadow-color !important;
374
+ }
375
+ @else{
376
+ box-shadow: inset 0 -1px 0 0 $box-shadow-color !important;
377
+ }
378
+ }
379
+ }
380
+ }
381
+ }
382
+ }
383
+
384
+ @mixin table-bottom-border($box-shadow-map){
385
+
386
+ $box-shadow-start-index: map.get($box-shadow-map, "start-index");
387
+ $box-shadow-end-index: map.get($box-shadow-map, "end-index");
388
+ $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
389
+ $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
390
+ $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
391
+
392
+ .bottom-border{
393
+ border-bottom: 1px solid $top-bottom-box-shadow-color;
394
+ }
395
+
396
+ .bottom-border tbody{
397
+ tr:last-of-type{
398
+ @for $i from $box-shadow-start-index through $box-shadow-end-index {
399
+
400
+ @if($i == $box-shadow-start-index){
401
+ td:nth-of-type(#{$i}){
402
+ @if ($show-right-border-box-shadow){
403
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
404
+ }
405
+ @else{
406
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
407
+ }
408
+ }
409
+ }
410
+ @else if($i == $box-shadow-end-index){
411
+ td:nth-of-type(#{$i}){
412
+ @if($show-right-border-box-shadow){
413
+ box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color !important;
414
+ }
415
+ @else{
416
+ box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color !important;
417
+ }
418
+ }
419
+ }
420
+ @else {
421
+ td:nth-of-type(#{$i}){
422
+ @if ($show-right-border-box-shadow){
423
+ box-shadow: inset 1px 0 0 0 $top-bottom-box-shadow-color !important;
424
+ }
425
+ @else{
426
+ box-shadow: none !important;
427
+ }
428
+ }
429
+ }
430
+ }
431
+ }
432
+ }
433
+
434
+ }
@@ -0,0 +1,14 @@
1
+ *::-webkit-scrollbar {
2
+ width: 4px;
3
+ height: 4px;
4
+ }
5
+
6
+ *::-webkit-scrollbar-thumb {
7
+ border-radius: 4px;
8
+ background-color: rgba(0, 0, 0, 0.4) !important;
9
+ border: 1px solid rgba(0, 0, 0, 0.2);
10
+ }
11
+
12
+ *::-webkit-scrollbar-track {
13
+ border: 1px solid rgba(0, 0, 0, 0.1) !important;
14
+ }