1 | $grey: #e7e9ed;
|
2 | $grey-lighter: #f6f7f9;
|
3 | $grey-dark: #f3f3f3;
|
4 | $dark: #50596c;
|
5 | $blue: #3f86ca;
|
6 | $primary-color: #50596c !default;
|
7 |
|
8 | .ngx {
|
9 | &-container {
|
10 | margin-left: auto;
|
11 | margin-right: auto;
|
12 | width: 100%;
|
13 | }
|
14 |
|
15 | &-table {
|
16 | color: $primary-color;
|
17 | border-collapse: collapse;
|
18 | border-spacing: 0;
|
19 | display: table;
|
20 | font-family: Montserrat, Verdana, serif;
|
21 | font-size: 14px;
|
22 | text-align: left;
|
23 | width: 100%;
|
24 |
|
25 | td {
|
26 | border-bottom: 1px solid $grey;
|
27 | padding: 12px 6px;
|
28 | }
|
29 |
|
30 | th {
|
31 | padding: 12px 6px;
|
32 | border-bottom: 2px solid $grey;
|
33 | }
|
34 |
|
35 | &__table-row--selected, &__table-col--selected, &__table-cell--selected {
|
36 | background: $grey !important;
|
37 | }
|
38 |
|
39 | &__table-no-results {
|
40 | text-align: center;
|
41 | }
|
42 |
|
43 | &__table-loader-wrapper {
|
44 | display: flex;
|
45 | justify-content: center;
|
46 | margin-top: 50px;
|
47 | }
|
48 |
|
49 | &__body-loading:hover {
|
50 | background: 0 !important;
|
51 | }
|
52 |
|
53 | &__table-loader {
|
54 | animation: spin .6s linear infinite;
|
55 | border: 1px solid $grey;
|
56 | border-radius: 50%;
|
57 | border-top-color: $primary-color;
|
58 | height: 1.8rem;
|
59 | width: 1.8rem;
|
60 | }
|
61 |
|
62 | &__body-empty {
|
63 | }
|
64 |
|
65 | &__sort-header {
|
66 | }
|
67 |
|
68 | &__table-menu {
|
69 | }
|
70 |
|
71 | &__table-row-context-menu {
|
72 | position: absolute;
|
73 | }
|
74 |
|
75 | &__header {
|
76 | }
|
77 |
|
78 | &__header-cell-additional-actions {
|
79 | }
|
80 |
|
81 | &__header-search {
|
82 | -webkit-appearance: none;
|
83 | -moz-appearance: none;
|
84 | background: #fff none;
|
85 | border: .05rem solid $grey;
|
86 | border-radius: .1rem;
|
87 | color: $primary-color;
|
88 | display: block;
|
89 | font-size: .8rem;
|
90 | height: 1.47rem;
|
91 | line-height: 1rem;
|
92 | max-width: 100%;
|
93 | outline: 0;
|
94 | padding: .15rem .3rem;
|
95 | position: relative;
|
96 | width: 97%;
|
97 | }
|
98 |
|
99 | &__header-cell {
|
100 | position: relative;
|
101 |
|
102 | .pointer {
|
103 | cursor: pointer;
|
104 | }
|
105 | }
|
106 |
|
107 | &__horizontal-scroll {
|
108 | display: block;
|
109 | overflow-x: scroll;
|
110 | white-space: nowrap;
|
111 |
|
112 | &::-webkit-scrollbar {
|
113 | -webkit-appearance: none;
|
114 | width: 3px;
|
115 | height: 10px;
|
116 | }
|
117 |
|
118 | &::-webkit-scrollbar-thumb {
|
119 | background-color: grey;
|
120 | }
|
121 | }
|
122 |
|
123 | &__column-resizer {
|
124 | background-color: $grey;
|
125 | cursor: col-resize;
|
126 | display: block;
|
127 | height: 20px;
|
128 | margin-top: 10px;
|
129 | position: absolute;
|
130 | padding: 0;
|
131 | right: 0;
|
132 | top: 0;
|
133 | width: 2px;
|
134 | }
|
135 |
|
136 | &__table--borderless > {
|
137 | tbody > tr > td, thead > tr > th {
|
138 | border-bottom: 0 !important;
|
139 | }
|
140 | }
|
141 |
|
142 | &__table--hoverable > tbody tr:hover {
|
143 | background: $grey-lighter;
|
144 | }
|
145 |
|
146 | &__table--striped > tbody tr:nth-of-type(odd) {
|
147 | background: $grey-lighter;
|
148 | }
|
149 |
|
150 | &__table--tiny > {
|
151 | tbody > tr > td, thead > tr > th {
|
152 | border-bottom: 1px solid $grey;
|
153 | padding: 4px 7px;
|
154 | }
|
155 | }
|
156 |
|
157 | &__table--normal > {
|
158 | tbody > tr > td, thead > tr > th {
|
159 | border-bottom: 1px solid $grey;
|
160 | padding: 10px 6px;
|
161 | }
|
162 | }
|
163 |
|
164 | &__table--big > {
|
165 | tbody > tr > td, thead > tr > th {
|
166 | border-bottom: 1px solid $grey;
|
167 | padding: 12px 8px;
|
168 | }
|
169 | }
|
170 |
|
171 | &__table--dark {
|
172 | background-color: $dark;
|
173 | color: $grey-lighter;
|
174 |
|
175 | & > tbody tr:hover {
|
176 | color: $dark;
|
177 | }
|
178 |
|
179 | &.ngx-table__table--striped > tbody tr:nth-of-type(odd) {
|
180 | background: $grey-lighter;
|
181 | color: $dark;
|
182 | }
|
183 |
|
184 | &-pagination {
|
185 | & ::ng-deep .ngx-pagination .current {
|
186 | background: $grey-lighter;
|
187 | color: $dark;
|
188 | }
|
189 |
|
190 | & ::ng-deep pagination-template > ul {
|
191 | -webkit-padding-start: 0;
|
192 | -webkit-margin-before: 0;
|
193 | }
|
194 |
|
195 | & ::ng-deep pagination-template > ul > li {
|
196 | border: 1px solid $grey;
|
197 | background: $dark;
|
198 | }
|
199 |
|
200 | & ::ng-deep pagination-template > ul > li.current {
|
201 | border: 1px solid $dark;
|
202 | }
|
203 |
|
204 | & ::ng-deep pagination-template > ul > li > a {
|
205 | color: $grey-lighter;
|
206 | }
|
207 |
|
208 | &-wrapper {
|
209 | background-color: $dark;
|
210 | }
|
211 |
|
212 | &-range {
|
213 | & > #rowAmount > div > div {
|
214 | color: $grey;
|
215 | border: 1px solid $grey;
|
216 | background-color: $dark;
|
217 | }
|
218 |
|
219 | & > #rowAmount > div > ul {
|
220 | color: $grey;
|
221 | background-color: $dark;
|
222 | }
|
223 |
|
224 | & > #rowAmount > div > ul > li {
|
225 | color: $grey;
|
226 | background-color: $dark;
|
227 | }
|
228 | }
|
229 | }
|
230 | }
|
231 |
|
232 | &__header-title {
|
233 | display: inline;
|
234 | }
|
235 | }
|
236 |
|
237 | &-menu {
|
238 | background: #fff;
|
239 | border: 1px solid $grey;
|
240 | list-style: none;
|
241 | margin: 0;
|
242 | min-width: 60px;
|
243 | z-index: 100;
|
244 | }
|
245 |
|
246 | &-form-icon {
|
247 | border-radius: .1rem;
|
248 | background: #fff;
|
249 | height: .9rem;
|
250 | left: 0;
|
251 | top: .2rem;
|
252 | width: .9rem;
|
253 | transition: all .2s ease;
|
254 | border: .05rem solid $grey;
|
255 | cursor: pointer;
|
256 | display: inline-block;
|
257 | position: absolute;
|
258 | }
|
259 |
|
260 | &-form-checkbox {
|
261 | line-height: 1rem;
|
262 | margin: 0.2rem 0;
|
263 | min-height: 1.2rem;
|
264 | padding: 0.2rem .4rem 0.4rem 1.6rem;
|
265 | position: relative;
|
266 |
|
267 | input {
|
268 | clip: rect(0, 0, 0, 0);
|
269 | height: 1px;
|
270 | margin: -1px;
|
271 | overflow: hidden;
|
272 | position: absolute;
|
273 | width: 1px;
|
274 |
|
275 | &:focus + .ngx-form-icon {
|
276 | box-shadow: 0 0 0 .1rem rgba($blue, .2);
|
277 | border-color: $blue;
|
278 | }
|
279 |
|
280 | &:checked + .ngx-form-icon {
|
281 | background: $blue;
|
282 | border-color: $blue;
|
283 | }
|
284 |
|
285 | &:active + .ngx-form-icon {
|
286 | background: $dark;
|
287 | }
|
288 |
|
289 | &:checked + .ngx-form-icon {
|
290 | &::before {
|
291 | background-clip: padding-box;
|
292 | border: .1rem solid #fff;
|
293 | border-left-width: 0;
|
294 | border-top-width: 0;
|
295 | content: "";
|
296 | height: 12px;
|
297 | left: 50%;
|
298 | margin-left: -3px;
|
299 | margin-top: -8px;
|
300 | position: absolute;
|
301 | top: 50%;
|
302 | transform: rotate(45deg);
|
303 | width: 6px;
|
304 | }
|
305 | }
|
306 | }
|
307 | }
|
308 |
|
309 | &-icon {
|
310 | box-sizing: border-box;
|
311 | cursor: pointer;
|
312 | display: inline-block;
|
313 | font-size: inherit;
|
314 | font-style: normal;
|
315 | height: 1em;
|
316 | position: relative;
|
317 | text-indent: -9999px;
|
318 | vertical-align: middle;
|
319 | width: 1em;
|
320 |
|
321 | &::before, &::after {
|
322 | content: "";
|
323 | display: block;
|
324 | left: 50%;
|
325 | position: absolute;
|
326 | top: 50%;
|
327 | transform: translate(-50%, -50%);
|
328 | }
|
329 | }
|
330 |
|
331 | &-icon-arrow-down::before, &-icon-arrow-right::before, &-icon-arrow-up::before {
|
332 | border: .1rem solid $dark;
|
333 | border-bottom: 0;
|
334 | border-right: 0;
|
335 | height: .65em;
|
336 | width: .65em
|
337 | }
|
338 |
|
339 | &-icon-arrow-down::before {
|
340 | transform: translate(-50%, -75%) rotate(225deg);
|
341 | }
|
342 |
|
343 | &-icon-arrow-right::before {
|
344 | transform: translate(-75%, -50%) rotate(135deg);
|
345 | }
|
346 |
|
347 | &-icon-arrow-up::before {
|
348 | transform: translate(-50%, -25%) rotate(45deg);
|
349 | }
|
350 |
|
351 | &-icon-menu::before {
|
352 | background: $dark;
|
353 | box-shadow: 0 -.35em, 0 .35em;
|
354 | content: "";
|
355 | height: .1rem;
|
356 | width: 100%;
|
357 | }
|
358 |
|
359 | &-icon-pin {
|
360 | border-radius: 50%;
|
361 | border: 4px solid $dark;
|
362 | width: 11px;
|
363 | height: 11px;
|
364 | }
|
365 |
|
366 | &-icon-more::before {
|
367 | background: $dark;
|
368 | border-radius: 50%;
|
369 | box-shadow: 0 -.4em, 0 .4em;
|
370 | height: 3px;
|
371 | width: 3px
|
372 | }
|
373 |
|
374 | &-dropdown {
|
375 | display: inline;
|
376 | position: relative;
|
377 | float: right;
|
378 |
|
379 | .ngx-menu {
|
380 | position: absolute;
|
381 | top: 100%;
|
382 | right: 0;
|
383 | left: auto;
|
384 | }
|
385 |
|
386 | a {
|
387 | color: $primary-color;
|
388 | }
|
389 | }
|
390 |
|
391 | &-btn-group {
|
392 | display: inline;
|
393 | }
|
394 |
|
395 | &-draggable-row {
|
396 | cursor: move;
|
397 | }
|
398 | }
|
399 |
|
400 | @keyframes spin {
|
401 | 0% {
|
402 | transform: rotate(0deg);
|
403 | }
|
404 |
|
405 | 100% {
|
406 | transform: rotate(360deg);
|
407 | }
|
408 | }
|
409 |
|
410 | .cdk-drag-preview {
|
411 | box-sizing: border-box;
|
412 | border-radius: 1px;
|
413 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
414 | 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
415 | 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
416 | background-color: white;
|
417 | padding-top: 9px;
|
418 | padding-left: 4px;
|
419 | display: table;
|
420 | table-layout: fixed
|
421 | }
|
422 |
|
423 | .cdk-drag-placeholder {
|
424 | opacity: 0;
|
425 | }
|
426 |
|
427 | .cdk-drag-animating {
|
428 | transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
|
429 | }
|
430 |
|
431 | .ngx-draggable-row-area.cdk-drop-list-dragging .ngx-draggable-row:not(.cdk-drag-placeholder) {
|
432 | transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
|
433 | }
|
434 |
|
435 | .ngx-table__header-cell--draggable {
|
436 | cursor: move;
|
437 | background-color: white;
|
438 | }
|
439 |
|
440 | .ngx-table__header--draggable.cdk-drop-list-dragging .ngx-table__header-cell--draggable:not(.cdk-drag-placeholder) {
|
441 | transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
|
442 | }
|
443 |
|
444 | .ngx-pagination {
|
445 | font-family: Montserrat, Verdana, serif;
|
446 | display: inline-block;
|
447 | margin-left: 0;
|
448 | margin-bottom: 1rem;
|
449 | -webkit-padding-start: 0;
|
450 | -webkit-margin-before: 0;
|
451 | }
|
452 |
|
453 | .ngx-pagination::before, .ngx-pagination::after {
|
454 | content: ' ';
|
455 | display: table;
|
456 | }
|
457 |
|
458 | .ngx-pagination::after {
|
459 | clear: both;
|
460 | }
|
461 |
|
462 | .ngx-pagination li {
|
463 | -moz-user-select: none;
|
464 | -webkit-user-select: none;
|
465 | -ms-user-select: none;
|
466 | margin-right: 0.0625rem;
|
467 | border-radius: 0;
|
468 | border: 1px solid $grey;
|
469 | }
|
470 |
|
471 | .ngx-pagination li.current {
|
472 | border: 1px solid $dark;
|
473 | }
|
474 |
|
475 | .ngx-pagination li {
|
476 | display: inline-block;
|
477 | }
|
478 |
|
479 | .ngx-pagination a,
|
480 | .ngx-pagination button {
|
481 | color: $dark;
|
482 | display: block;
|
483 | padding: 0.1875rem 0.625rem;
|
484 | border-radius: 0;
|
485 | }
|
486 |
|
487 | .ngx-pagination a:hover,
|
488 | .ngx-pagination button:hover {
|
489 | background: #e6e6e6;
|
490 | }
|
491 |
|
492 | .ngx-pagination .current {
|
493 | padding: 0.1875rem 0.625rem;
|
494 | background: $blue;
|
495 | color: #fefefe;
|
496 | cursor: default;
|
497 | }
|
498 |
|
499 | .ngx-pagination .disabled {
|
500 | padding: 0.1875rem 0.625rem;
|
501 | color: #cacaca;
|
502 | cursor: default;
|
503 | }
|
504 |
|
505 | .ngx-pagination .disabled:hover {
|
506 | background: transparent;
|
507 | }
|
508 |
|
509 | .ngx-pagination a, .ngx-pagination button {
|
510 | cursor: pointer;
|
511 | }
|
512 |
|
513 | .ngx-pagination .pagination-previous a::before,
|
514 | .ngx-pagination .pagination-previous.disabled::before {
|
515 | content: '«';
|
516 | display: inline-block;
|
517 | margin-right: 0.5rem;
|
518 | }
|
519 |
|
520 | .ngx-pagination .pagination-next a::after,
|
521 | .ngx-pagination .pagination-next.disabled::after {
|
522 | content: '»';
|
523 | display: inline-block;
|
524 | margin-left: 0.5rem;
|
525 | }
|
526 |
|
527 | .ngx-pagination .show-for-sr {
|
528 | position: absolute !important;
|
529 | width: 1px;
|
530 | height: 1px;
|
531 | overflow: hidden;
|
532 | clip: rect(0, 0, 0, 0);
|
533 | }
|
534 |
|
535 | .ngx-pagination .small-screen {
|
536 | display: none;
|
537 | }
|
538 |
|
539 | .ngx-pagination-wrapper {
|
540 | margin-top: 8px;
|
541 | }
|
542 |
|
543 | .ngx-pagination-range {
|
544 | display: inline-block;
|
545 | float: right;
|
546 | }
|
547 |
|
548 | .ngx-pagination-steps {
|
549 | display: inline-block;
|
550 | }
|
551 |
|
552 | .ngx-pagination-range-dropdown {
|
553 | margin-top: 0;
|
554 | }
|
555 |
|
556 | .ngx-pagination-range-dropdown-button-item {
|
557 | cursor: pointer;
|
558 | color: $primary-color;
|
559 | padding: 0.4rem;
|
560 | }
|
561 |
|
562 | .ngx-pagination-range--selected {
|
563 | background-color: $grey-lighter;
|
564 | }
|
565 |
|
566 | .ngx-pagination-range-dropdown-button {
|
567 | color: $primary-color;
|
568 | border: 1px solid $grey;
|
569 | cursor: pointer;
|
570 | padding: 4px;
|
571 | }
|
572 |
|
573 | .pinned-left {
|
574 | position: sticky;
|
575 | z-index: 1;
|
576 | background-color: white;
|
577 | box-shadow: 2px 0 0 rgba(gray, .175);
|
578 | }
|
579 |
|
580 | @media screen and (max-width: 601px) {
|
581 | .ngx-pagination.responsive .small-screen {
|
582 | display: inline-block;
|
583 | padding: 0.1875rem 0.625rem;
|
584 | border-radius: 0;
|
585 | }
|
586 | .ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next) {
|
587 | display: none;
|
588 | }
|
589 | }
|
590 |
|
591 | .ngx-infinite-scroll-viewport {
|
592 | display: block;
|
593 | height: 250px;
|
594 | overflow: auto;
|
595 | }
|
596 |
|
597 | .ngx-infinite-scroll-viewport tr,
|
598 | .ngx-infinite-scroll-viewport-thead {
|
599 | display: table;
|
600 | width: 100%;
|
601 | table-layout: fixed;
|
602 | }
|
603 |
|