@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,119 @@
1
+ .ghost-cell-container {
2
+ background: #fff;
3
+ }
4
+
5
+ .ghost-cell-strip {
6
+ background: #dee2e5;
7
+ background-image: linear-gradient(to right, #dee2e5 0%, #dee2e5 10%, #fff, transparent);
8
+ border-radius: 0;
9
+ animation-duration: 10s;
10
+ }
11
+
12
+ .ngx-datatable .row-disabled {
13
+ color: #83888e;
14
+ }
15
+ .ngx-datatable .row-disabled .datatable-body-cell-label {
16
+ color: #83888e;
17
+ }
18
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover {
19
+ background-color: inherit;
20
+ transition: none;
21
+ }
22
+ .ngx-datatable .datatable-row-wrapper .datatable-body-row.row-disabled:hover .datatable-row-group {
23
+ background-color: inherit;
24
+ transition: none;
25
+ }
26
+
27
+ .ngx-datatable.bootstrap {
28
+ box-shadow: none;
29
+ font-size: 13px;
30
+ }
31
+ .ngx-datatable.bootstrap .datatable-header {
32
+ height: unset !important;
33
+ }
34
+ .ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
35
+ flex-shrink: 0;
36
+ vertical-align: bottom;
37
+ padding: 0.75rem;
38
+ border-bottom: 1px solid #d1d4d7;
39
+ }
40
+ .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
41
+ line-height: 24px;
42
+ }
43
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row {
44
+ vertical-align: top;
45
+ border-top: 1px solid #d1d4d7;
46
+ }
47
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
48
+ background-color: rgba(0, 0, 0, 0.05);
49
+ }
50
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
51
+ background-color: #1483ff;
52
+ color: #fff;
53
+ }
54
+ .ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
55
+ flex-shrink: 0;
56
+ padding: 0.75rem;
57
+ text-align: left;
58
+ vertical-align: top;
59
+ }
60
+ .ngx-datatable.bootstrap .datatable-body .empty-row {
61
+ position: relative;
62
+ padding: 0.75rem 1.25rem;
63
+ margin-bottom: 0;
64
+ }
65
+ .ngx-datatable.bootstrap .datatable-body .custom-loading-indicator-wrapper {
66
+ position: sticky;
67
+ top: 0;
68
+ height: 0;
69
+ z-index: 999;
70
+ }
71
+ .ngx-datatable.bootstrap .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
72
+ width: 100%;
73
+ background-color: #fff;
74
+ }
75
+ .ngx-datatable.bootstrap .datatable-footer {
76
+ background: #424242;
77
+ color: #ededed;
78
+ margin-top: -1px;
79
+ }
80
+ .ngx-datatable.bootstrap .datatable-footer .page-count {
81
+ line-height: 50px;
82
+ height: 50px;
83
+ padding: 0 1.2rem;
84
+ }
85
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager {
86
+ margin: 0 10px;
87
+ vertical-align: top;
88
+ }
89
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li {
90
+ margin: 10px 0px;
91
+ }
92
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
93
+ background-color: #545454;
94
+ font-weight: bold;
95
+ }
96
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
97
+ height: 22px;
98
+ min-width: 24px;
99
+ line-height: 22px;
100
+ padding: 0;
101
+ border-radius: 3px;
102
+ margin: 0 3px;
103
+ text-align: center;
104
+ vertical-align: top;
105
+ text-decoration: none;
106
+ vertical-align: bottom;
107
+ color: #ededed;
108
+ }
109
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
110
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
111
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
112
+ .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
113
+ font-size: 18px;
114
+ line-height: 27px;
115
+ padding: 0 3px;
116
+ }
117
+ .ngx-datatable.bootstrap .datatable-summary-row .datatable-body-row .datatable-body-cell {
118
+ font-weight: bold;
119
+ }
@@ -0,0 +1,125 @@
1
+ $datatable-ghost-cell-container-background: #fff !default;
2
+
3
+ $datatable-ghost-cell-strip-background: #dee2e5 !default;
4
+ $datatable-ghost-cell-strip-background-image: linear-gradient(
5
+ to right,
6
+ $datatable-ghost-cell-strip-background 0%,
7
+ $datatable-ghost-cell-strip-background 10%,
8
+ #fff,
9
+ transparent
10
+ ) !default;
11
+ $datatable-ghost-cell-strip-radius: 0 !default;
12
+ $datatble-ghost-cell-animation-duration: 10s;
13
+
14
+ @import './ghost';
15
+ @import './rows';
16
+
17
+ .ngx-datatable.bootstrap {
18
+ box-shadow: none;
19
+ font-size: 13px;
20
+ .datatable-header {
21
+ height: unset !important;
22
+ .datatable-header-cell {
23
+ flex-shrink: 0;
24
+ vertical-align: bottom;
25
+ padding: 0.75rem;
26
+ border-bottom: 1px solid #d1d4d7;
27
+ .datatable-header-cell-label {
28
+ line-height: 24px;
29
+ }
30
+ }
31
+ }
32
+ .datatable-body {
33
+ .datatable-body-row {
34
+ vertical-align: top;
35
+ border-top: 1px solid #d1d4d7;
36
+ &.datatable-row-even {
37
+ background-color: rgba(0, 0, 0, 0.05);
38
+ }
39
+ &.active {
40
+ background-color: #1483ff;
41
+ color: #fff;
42
+ }
43
+ .datatable-body-cell {
44
+ flex-shrink: 0;
45
+ padding: 0.75rem;
46
+ text-align: left;
47
+ vertical-align: top;
48
+ }
49
+ }
50
+ .empty-row {
51
+ $alert-padding-y: 0.75rem !default;
52
+ $alert-padding-x: 1.25rem !default;
53
+ position: relative;
54
+ padding: $alert-padding-y $alert-padding-x;
55
+ margin-bottom: 0;
56
+ }
57
+ .custom-loading-indicator-wrapper {
58
+ position: sticky;
59
+ top: 0;
60
+ height: 0;
61
+ z-index: 999;
62
+ .custom-loading-content {
63
+ width: 100%;
64
+ background-color: #fff;
65
+ }
66
+ }
67
+ }
68
+ .datatable-footer {
69
+ background: #424242;
70
+ color: #ededed;
71
+ margin-top: -1px;
72
+ .page-count {
73
+ line-height: 50px;
74
+ height: 50px;
75
+ padding: 0 1.2rem;
76
+ }
77
+ .datatable-pager {
78
+ margin: 0 10px;
79
+ vertical-align: top;
80
+ ul {
81
+ li {
82
+ margin: 10px 0px;
83
+ &:not(.disabled) {
84
+ &.active,
85
+ &:hover {
86
+ a {
87
+ background-color: #545454;
88
+ font-weight: bold;
89
+ }
90
+ }
91
+ }
92
+ }
93
+ }
94
+ a {
95
+ height: 22px;
96
+ min-width: 24px;
97
+ line-height: 22px;
98
+ padding: 0;
99
+ border-radius: 3px;
100
+ margin: 0 3px;
101
+ text-align: center;
102
+ vertical-align: top;
103
+ text-decoration: none;
104
+ vertical-align: bottom;
105
+ color: #ededed;
106
+ }
107
+ .datatable-icon-left,
108
+ .datatable-icon-skip,
109
+ .datatable-icon-right,
110
+ .datatable-icon-prev {
111
+ font-size: 18px;
112
+ line-height: 27px;
113
+ padding: 0 3px;
114
+ }
115
+ }
116
+ }
117
+ // Summary row styles
118
+ .datatable-summary-row {
119
+ .datatable-body-row {
120
+ .datatable-body-cell {
121
+ font-weight: bold;
122
+ }
123
+ }
124
+ }
125
+ }
@@ -0,0 +1,106 @@
1
+ .ngx-datatable.dark {
2
+ box-shadow: none;
3
+ background: #1b1e27;
4
+ border: 1px solid #2f3646;
5
+ color: #fff;
6
+ font-size: 13px;
7
+ }
8
+ .ngx-datatable.dark .datatable-header {
9
+ background: #181b24;
10
+ color: #72809b;
11
+ }
12
+ .ngx-datatable.dark .datatable-header .datatable-header-cell {
13
+ flex-shrink: 0;
14
+ text-align: left;
15
+ padding: 0.5rem 1.2rem;
16
+ font-weight: bold;
17
+ }
18
+ .ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
19
+ line-height: 24px;
20
+ }
21
+ .ngx-datatable.dark .datatable-body {
22
+ background: #1a1e28;
23
+ }
24
+ .ngx-datatable.dark .datatable-body .datatable-body-row {
25
+ border-top: 1px solid #2f3646;
26
+ }
27
+ .ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
28
+ flex-shrink: 0;
29
+ text-align: left;
30
+ padding: 0.5rem 1.2rem;
31
+ vertical-align: top;
32
+ }
33
+ .ngx-datatable.dark .datatable-body .datatable-body-row:hover {
34
+ background: #171b24;
35
+ transition-property: background;
36
+ transition-duration: 0.3s;
37
+ transition-timing-function: linear;
38
+ }
39
+ .ngx-datatable.dark .datatable-body .datatable-body-row:focus {
40
+ background-color: #232837;
41
+ }
42
+ .ngx-datatable.dark .datatable-body .datatable-body-row.active {
43
+ background-color: #1483ff;
44
+ color: #fff;
45
+ }
46
+ .ngx-datatable.dark .datatable-body .custom-loading-indicator-wrapper {
47
+ position: sticky;
48
+ top: 0;
49
+ height: 0;
50
+ z-index: 999;
51
+ }
52
+ .ngx-datatable.dark .datatable-body .custom-loading-indicator-wrapper .custom-loading-content {
53
+ width: 100%;
54
+ background-color: #1a1e28;
55
+ }
56
+ .ngx-datatable.dark .datatable-footer {
57
+ background: #232837;
58
+ color: #72809b;
59
+ margin-top: -1px;
60
+ }
61
+ .ngx-datatable.dark .datatable-footer .page-count {
62
+ line-height: 50px;
63
+ height: 50px;
64
+ padding: 0 1.2rem;
65
+ }
66
+ .ngx-datatable.dark .datatable-footer .datatable-pager {
67
+ margin: 0 10px;
68
+ vertical-align: top;
69
+ }
70
+ .ngx-datatable.dark .datatable-footer .datatable-pager ul li {
71
+ margin: 10px 0px;
72
+ }
73
+ .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a, .ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
74
+ background-color: #455066;
75
+ font-weight: bold;
76
+ }
77
+ .ngx-datatable.dark .datatable-footer .datatable-pager a {
78
+ height: 22px;
79
+ min-width: 24px;
80
+ line-height: 22px;
81
+ padding: 0;
82
+ border-radius: 3px;
83
+ margin: 0 3px;
84
+ text-align: center;
85
+ vertical-align: top;
86
+ text-decoration: none;
87
+ vertical-align: bottom;
88
+ color: #72809b;
89
+ }
90
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
91
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
92
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
93
+ .ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
94
+ font-size: 18px;
95
+ line-height: 27px;
96
+ padding: 0 3px;
97
+ }
98
+ .ngx-datatable.dark .datatable-summary-row .datatable-body-row {
99
+ background-color: #14171f;
100
+ }
101
+ .ngx-datatable.dark .datatable-summary-row .datatable-body-row:hover {
102
+ background-color: #14171f;
103
+ }
104
+ .ngx-datatable.dark .datatable-summary-row .datatable-body-row .datatable-body-cell {
105
+ font-weight: bold;
106
+ }
@@ -0,0 +1,132 @@
1
+ .ngx-datatable.dark {
2
+ box-shadow: none;
3
+ background: #1b1e27;
4
+ border: 1px solid #2f3646;
5
+ color: #fff;
6
+ font-size: 13px;
7
+
8
+ .datatable-header {
9
+ background: #181b24;
10
+ color: #72809b;
11
+
12
+ .datatable-header-cell {
13
+ flex-shrink: 0;
14
+ text-align: left;
15
+ padding: 0.5rem 1.2rem;
16
+ font-weight: bold;
17
+
18
+ .datatable-header-cell-label {
19
+ line-height: 24px;
20
+ }
21
+ }
22
+ }
23
+
24
+ .datatable-body {
25
+ background: #1a1e28;
26
+
27
+ .datatable-body-row {
28
+ border-top: 1px solid #2f3646;
29
+
30
+ .datatable-body-cell {
31
+ flex-shrink: 0;
32
+ text-align: left;
33
+ padding: 0.5rem 1.2rem;
34
+ vertical-align: top;
35
+ }
36
+
37
+ &:hover {
38
+ background: #171b24;
39
+ transition-property: background;
40
+ transition-duration: 0.3s;
41
+ transition-timing-function: linear;
42
+ }
43
+
44
+ &:focus {
45
+ background-color: #232837;
46
+ }
47
+
48
+ &.active {
49
+ background-color: #1483ff;
50
+ color: #fff;
51
+ }
52
+ }
53
+ .custom-loading-indicator-wrapper {
54
+ position: sticky;
55
+ top: 0;
56
+ height: 0;
57
+ z-index: 999;
58
+ .custom-loading-content {
59
+ width: 100%;
60
+ background-color: #1a1e28;
61
+ }
62
+ }
63
+ }
64
+
65
+ .datatable-footer {
66
+ background: #232837;
67
+ color: #72809b;
68
+ margin-top: -1px;
69
+
70
+ .page-count {
71
+ line-height: 50px;
72
+ height: 50px;
73
+ padding: 0 1.2rem;
74
+ }
75
+
76
+ .datatable-pager {
77
+ margin: 0 10px;
78
+ vertical-align: top;
79
+
80
+ ul {
81
+ li {
82
+ margin: 10px 0px;
83
+
84
+ &:not(.disabled) {
85
+ &.active a,
86
+ &:hover a {
87
+ background-color: #455066;
88
+ font-weight: bold;
89
+ }
90
+ }
91
+ }
92
+ }
93
+
94
+ a {
95
+ height: 22px;
96
+ min-width: 24px;
97
+ line-height: 22px;
98
+ padding: 0;
99
+ border-radius: 3px;
100
+ margin: 0 3px;
101
+ text-align: center;
102
+ vertical-align: top;
103
+ text-decoration: none;
104
+ vertical-align: bottom;
105
+ color: #72809b;
106
+ }
107
+
108
+ .datatable-icon-left,
109
+ .datatable-icon-skip,
110
+ .datatable-icon-right,
111
+ .datatable-icon-prev {
112
+ font-size: 18px;
113
+ line-height: 27px;
114
+ padding: 0 3px;
115
+ }
116
+ }
117
+ }
118
+
119
+ .datatable-summary-row {
120
+ .datatable-body-row {
121
+ background-color: #14171f;
122
+
123
+ &:hover {
124
+ background-color: #14171f;
125
+ }
126
+
127
+ .datatable-body-cell {
128
+ font-weight: bold;
129
+ }
130
+ }
131
+ }
132
+ }