@swimlane/ngx-datatable 21.0.0-alpha.0 → 21.0.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.
@@ -0,0 +1,389 @@
1
+ /*
2
+ This stylesheet uses scss valiables for most of the colors / background-colors of the table
3
+ to enable the customization of the displayed table without cloning the stylesheet into the
4
+ own application.
5
+
6
+ To modify table colors, add the following lines to the scss file of your application
7
+ (this example modifies the color of the selected row - selectionType = single, multi or multiClick):
8
+
9
+ $ngx-datatable-selected-active-background: yellow;
10
+ $ngx-datatable-selected-active-background-hover: rgba(yellow, 0.2);
11
+
12
+ @import '~@swimlane/ngx-datatable/index.css';
13
+ @import '~@swimlane/ngx-datatable/themes/material.scss';
14
+ @import '~@swimlane/ngx-datatable/assets/icons.css';
15
+
16
+ That's all.
17
+ */
18
+ .ghost-cell-container {
19
+ background: #fff;
20
+ }
21
+
22
+ .ghost-cell-strip {
23
+ background: #d9d8d9;
24
+ background-image: linear-gradient(to right, #d9d8d9 0%, #d9d8d9 10%, #fff, transparent);
25
+ border-radius: 0;
26
+ animation-duration: 10s;
27
+ }
28
+
29
+ .ngx-datatable .row-disabled {
30
+ color: #83888e;
31
+ }
32
+ .ngx-datatable .row-disabled .datatable-body-cell-label {
33
+ color: #83888e;
34
+ }
35
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
36
+ background-color: inherit;
37
+ transition: none;
38
+ }
39
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
40
+ background-color: inherit;
41
+ transition: none;
42
+ }
43
+
44
+ .ngx-datatable.material {
45
+ background: #fff;
46
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
47
+ /**
48
+ * Shared Styles
49
+ */
50
+ /**
51
+ * Global Row Styles
52
+ */
53
+ /**
54
+ * Header Styles
55
+ */
56
+ /**
57
+ * Body Styles
58
+ */
59
+ /**
60
+ * Footer Styles
61
+ */
62
+ }
63
+ .ngx-datatable.material.striped .datatable-row-odd {
64
+ background: #eee;
65
+ }
66
+ .ngx-datatable.material.single-selection .datatable-body-row.active, .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active, .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active, .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
67
+ background-color: #304ffe;
68
+ color: #fff;
69
+ }
70
+ .ngx-datatable.material.single-selection .datatable-body-row.active:hover, .ngx-datatable.material.single-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
71
+ background-color: #193ae4;
72
+ color: #fff;
73
+ }
74
+ .ngx-datatable.material.single-selection .datatable-body-row.active:focus, .ngx-datatable.material.single-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus .datatable-row-group {
75
+ background-color: #2041ef;
76
+ color: #fff;
77
+ }
78
+ .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover, .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group {
79
+ background-color: #eee;
80
+ transition-property: background;
81
+ transition-duration: 0.3s;
82
+ transition-timing-function: linear;
83
+ }
84
+ .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus, .ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus .datatable-row-group {
85
+ background-color: #ddd;
86
+ }
87
+ .ngx-datatable.material.cell-selection .datatable-body-cell:hover:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell:hover:not(.row-disabled) .datatable-row-group {
88
+ background-color: #eee;
89
+ transition-property: background;
90
+ transition-duration: 0.3s;
91
+ transition-timing-function: linear;
92
+ }
93
+ .ngx-datatable.material.cell-selection .datatable-body-cell:focus:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell:focus:not(.row-disabled) .datatable-row-group {
94
+ background-color: #ddd;
95
+ }
96
+ .ngx-datatable.material.cell-selection .datatable-body-cell.active:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell.active:not(.row-disabled) .datatable-row-group {
97
+ background-color: #304ffe;
98
+ color: #fff;
99
+ }
100
+ .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell.active:hover:not(.row-disabled) .datatable-row-group {
101
+ background-color: #193ae4;
102
+ color: #fff;
103
+ }
104
+ .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus:not(.row-disabled), .ngx-datatable.material.cell-selection .datatable-body-cell.active:focus:not(.row-disabled) .datatable-row-group {
105
+ background-color: #2041ef;
106
+ color: #fff;
107
+ }
108
+ .ngx-datatable.material .empty-row {
109
+ height: 50px;
110
+ text-align: left;
111
+ padding: 0.5rem 1.2rem;
112
+ vertical-align: top;
113
+ border-top: 0;
114
+ }
115
+ .ngx-datatable.material .loading-row {
116
+ text-align: left;
117
+ padding: 0.5rem 1.2rem;
118
+ vertical-align: top;
119
+ border-top: 0;
120
+ }
121
+ .ngx-datatable.material .datatable-header .datatable-row-left,
122
+ .ngx-datatable.material .datatable-body .datatable-row-left {
123
+ background-color: #fff;
124
+ background-position: 100% 0;
125
+ background-repeat: repeat-y;
126
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
127
+ }
128
+ .ngx-datatable.material .datatable-header .datatable-row-right,
129
+ .ngx-datatable.material .datatable-body .datatable-row-right {
130
+ background-position: 0 0;
131
+ background-color: #fff;
132
+ background-repeat: repeat-y;
133
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
134
+ }
135
+ .ngx-datatable.material .datatable-header {
136
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
137
+ }
138
+ .ngx-datatable.material .datatable-header .datatable-header-cell {
139
+ flex-shrink: 0;
140
+ text-align: left;
141
+ padding: 0.9rem 1.2rem;
142
+ font-weight: 400;
143
+ background-color: #fff;
144
+ color: rgba(0, 0, 0, 0.54);
145
+ vertical-align: bottom;
146
+ font-size: 12px;
147
+ font-weight: 500;
148
+ }
149
+ .ngx-datatable.material .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
150
+ position: relative;
151
+ }
152
+ .ngx-datatable.material .datatable-header .datatable-header-cell.longpress .draggable::after {
153
+ transition: transform 400ms ease, opacity 400ms ease;
154
+ opacity: 0.5;
155
+ transform: scale(1);
156
+ }
157
+ .ngx-datatable.material .datatable-header .datatable-header-cell .draggable::after {
158
+ content: " ";
159
+ position: absolute;
160
+ top: 50%;
161
+ left: 50%;
162
+ margin: -30px 0 0 -30px;
163
+ height: 60px;
164
+ width: 60px;
165
+ background: #eee;
166
+ border-radius: 100%;
167
+ opacity: 1;
168
+ filter: none;
169
+ transform: scale(0);
170
+ z-index: 9999;
171
+ pointer-events: none;
172
+ }
173
+ .ngx-datatable.material .datatable-header .datatable-header-cell.dragging .resize-handle {
174
+ border-right: none;
175
+ }
176
+ .ngx-datatable.material .datatable-header .resize-handle {
177
+ border-right: solid 1px #eee;
178
+ }
179
+ .ngx-datatable.material .datatable-body {
180
+ position: relative;
181
+ }
182
+ .ngx-datatable.material .datatable-body .datatable-row-detail {
183
+ background: #f5f5f5;
184
+ padding: 10px;
185
+ }
186
+ .ngx-datatable.material .datatable-body .datatable-group-header {
187
+ background: #f5f5f5;
188
+ border-bottom: solid 1px #d9d8d9;
189
+ border-top: solid 1px #d9d8d9;
190
+ }
191
+ .ngx-datatable.material .datatable-body .datatable-group-header .datatable-group-cell {
192
+ padding-inline-start: 1.2rem;
193
+ display: flex;
194
+ }
195
+ .ngx-datatable.material .datatable-body datatable-row-def {
196
+ background-color: #fff;
197
+ }
198
+ .ngx-datatable.material .datatable-body .datatable-body-row {
199
+ border-bottom: 1px solid #d9d8d9;
200
+ }
201
+ .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
202
+ flex-shrink: 0;
203
+ text-align: left;
204
+ padding: 0.9rem 1.2rem;
205
+ vertical-align: top;
206
+ border-top: 0;
207
+ color: rgba(0, 0, 0, 0.87);
208
+ transition: width 0.3s ease;
209
+ font-size: 14px;
210
+ font-weight: 400;
211
+ }
212
+ .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-group-cell {
213
+ text-align: left;
214
+ padding: 0.9rem 1.2rem;
215
+ vertical-align: top;
216
+ border-top: 0;
217
+ color: rgba(0, 0, 0, 0.87);
218
+ transition: width 0.3s ease;
219
+ font-size: 14px;
220
+ font-weight: 400;
221
+ }
222
+ .ngx-datatable.material .datatable-body .progress-linear {
223
+ display: block;
224
+ position: sticky;
225
+ width: 100%;
226
+ height: 0;
227
+ z-index: 999;
228
+ padding: 0;
229
+ margin: 0;
230
+ top: 0;
231
+ }
232
+ .ngx-datatable.material .datatable-body .progress-linear .container {
233
+ display: block;
234
+ position: relative;
235
+ overflow: hidden;
236
+ width: 100%;
237
+ height: 5px;
238
+ -webkit-transform: translate(0, 0) scale(1, 1);
239
+ transform: translate(0, 0) scale(1, 1);
240
+ background-color: rgb(170, 209, 249);
241
+ }
242
+ .ngx-datatable.material .datatable-body .progress-linear .container .bar {
243
+ transition: all 0.2s linear;
244
+ -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
245
+ animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
246
+ transition: -webkit-transform 0.2s linear;
247
+ transition: transform 0.2s linear;
248
+ background-color: rgb(16, 108, 200);
249
+ position: absolute;
250
+ left: 0;
251
+ top: 0;
252
+ bottom: 0;
253
+ width: 100%;
254
+ height: 5px;
255
+ }
256
+ .ngx-datatable.material .datatable-body .custom-loading-indicator-wrapper {
257
+ position: sticky;
258
+ top: 0;
259
+ height: 0;
260
+ z-index: 999;
261
+ }
262
+ .ngx-datatable.material .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
263
+ width: 100%;
264
+ background-color: #fff;
265
+ }
266
+ .ngx-datatable.material .datatable-footer {
267
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
268
+ font-size: 12px;
269
+ font-weight: 400;
270
+ color: rgba(0, 0, 0, 0.54);
271
+ }
272
+ .ngx-datatable.material .datatable-footer .page-count {
273
+ line-height: 50px;
274
+ height: 50px;
275
+ padding: 0 1.2rem;
276
+ }
277
+ .ngx-datatable.material .datatable-footer .datatable-pager {
278
+ margin: 0 10px;
279
+ }
280
+ .ngx-datatable.material .datatable-footer .datatable-pager li {
281
+ vertical-align: middle;
282
+ }
283
+ .ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
284
+ color: rgba(0, 0, 0, 0.26) !important;
285
+ background-color: transparent !important;
286
+ }
287
+ .ngx-datatable.material .datatable-footer .datatable-pager li.active a {
288
+ background-color: rgba(158, 158, 158, 0.2);
289
+ font-weight: bold;
290
+ }
291
+ .ngx-datatable.material .datatable-footer .datatable-pager a {
292
+ height: 22px;
293
+ min-width: 24px;
294
+ line-height: 22px;
295
+ padding: 0 6px;
296
+ border-radius: 3px;
297
+ margin: 6px 3px;
298
+ text-align: center;
299
+ vertical-align: top;
300
+ color: rgba(0, 0, 0, 0.54);
301
+ text-decoration: none;
302
+ vertical-align: bottom;
303
+ }
304
+ .ngx-datatable.material .datatable-footer .datatable-pager a:hover {
305
+ color: rgba(0, 0, 0, 0.75);
306
+ background-color: rgba(158, 158, 158, 0.2);
307
+ }
308
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-left,
309
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-skip,
310
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-right,
311
+ .ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-prev {
312
+ font-size: 20px;
313
+ line-height: 20px;
314
+ padding: 0 3px;
315
+ }
316
+ .ngx-datatable.material .datatable-summary-row .datatable-body-row {
317
+ background-color: #ddd;
318
+ }
319
+ .ngx-datatable.material .datatable-summary-row .datatable-body-row:hover {
320
+ background-color: #ddd;
321
+ }
322
+ .ngx-datatable.material .datatable-summary-row .datatable-body-row .datatable-body-cell {
323
+ font-weight: bold;
324
+ }
325
+
326
+ /**
327
+ * Checkboxes
328
+ **/
329
+ .datatable-checkbox {
330
+ position: relative;
331
+ margin: 0;
332
+ cursor: pointer;
333
+ vertical-align: middle;
334
+ display: inline-block;
335
+ box-sizing: border-box;
336
+ padding: 0;
337
+ }
338
+ .datatable-checkbox input[type=checkbox] {
339
+ position: relative;
340
+ margin: 0 1rem 0 0;
341
+ cursor: pointer;
342
+ outline: none;
343
+ }
344
+ .datatable-checkbox input[type=checkbox]:before {
345
+ -webkit-transition: all 0.3s ease-in-out;
346
+ -moz-transition: all 0.3s ease-in-out;
347
+ transition: all 0.3s ease-in-out;
348
+ content: "";
349
+ position: absolute;
350
+ left: 0;
351
+ z-index: 1;
352
+ width: 1rem;
353
+ height: 1rem;
354
+ border: 2px solid #f2f2f2;
355
+ }
356
+ .datatable-checkbox input[type=checkbox]:checked:before {
357
+ -webkit-transform: rotate(-45deg);
358
+ -moz-transform: rotate(-45deg);
359
+ -ms-transform: rotate(-45deg);
360
+ transform: rotate(-45deg);
361
+ height: 0.5rem;
362
+ border-color: #009688;
363
+ border-top-style: none;
364
+ border-right-style: none;
365
+ }
366
+ .datatable-checkbox input[type=checkbox]:after {
367
+ content: "";
368
+ position: absolute;
369
+ top: 0;
370
+ left: 0;
371
+ width: 1rem;
372
+ height: 1rem;
373
+ background: #fff;
374
+ cursor: pointer;
375
+ }
376
+
377
+ /**
378
+ * Progress bar animations
379
+ */
380
+ @keyframes query {
381
+ 0% {
382
+ opacity: 1;
383
+ transform: translateX(35%) scale(0.3, 1);
384
+ }
385
+ 100% {
386
+ opacity: 0;
387
+ transform: translateX(-50%) scale(0, 1);
388
+ }
389
+ }