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